Target areas, links or clickable/tappable areas are dynamic and live part of the navigation in all sort of web designing, be it for static websites or responsive website designs. There are many factors determine the success of target area designing in course of navigation designing. Let’s check them in brief.
In the first part of this series, we have seen that designing navigation is a part of creating information architecture and main menus are vital component of entire navigation system. Therefore, in this series I try to focus on the simple, predictable, and comfortable navigation designing using various components of navigation efficiently. In due course, we have seen navigation symbols in first part and now we will look at the target area designing in this current part 2.
Target Areas in Navigation
By definition, target areas are nothing, but navigation links designed to easily recognized, easy to click, and consistent throughout the website. Technically target areas have text or symbol label and hot/active area to click, which is linked with other web pages in the website. Sometime tint of graphics is added on the target areas to show it as button like things, but most of the times, it is highlighted through differences in fonts, font sizes, and font or background colors.
In drop-down menu, target areas should have contrast against the similar background and that should reflect in size of target area, texts of labels, and colors of the target areas. On desktops, we have opportunity to change font styles in dim lighting and other ways to respond hover effects. Unfortunately, for mobile users, we have to device other ways.
Size of the Target Areas
In field of human computer interactions, Paul Fitts had quantified the behaviors of the users and predicted some rules to follow. According to him, designers should design target areas a bit larger and closer so users will hit them faster and with comfort or ease. Therefore, experts are advising that designers should utilize every pixel available, and should extend the clickable/tappable areas up to its boundaries.
However, in static websites devised especially for desktop users, can’t follow this rule because they have more than necessary white space and it’s a part of flat and simple design. Of course, responsive web design can stick with maximum utilization of target areas and give the best user experiences in tough gestures. Covering the maximum areas don’t mean to convert or create images in mega-menus, but make them large enough that they can grab immediate attentions of onlookers and facilitate mobile users to tap or select the target areas easily. Thus, enlarging target areas from normal size to 10% can give good usability and UX at the end.
Consistency in Location in Target Areas
Today we have larger websites with multi-level navigation where chances of inconsistent target areas are high particularly in case of nested menu. Therefore, designers use the fly out or slide to the submenus and their location issues are bigger if we don’t keep consistent locations for them. In single-level navigation menus, closing the menu may become the problem if designers don’t provide obvious clues or close buttons at the same areas where it opens.
If you strive for such high level of user experiences and usability in your web development, Lujayn has team accustomed with aforementioned designing techniques and practices to take a chance.