Tag Archives: Navigation

Designing Simple-Predictable-Comfortable Navigation Part 2

Designing Navigation-Target Areas
Designing Navigation-Target Areas

Summary:

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.

Intro:

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.

Designing Simple-Predictable-Comfortable Navigation Part 1

Symbols in Navigation
Symbols in Navigation

Summary:

At present, many designers are experimenting new techniques in navigation design, but the best user experiences come with simple, predictable, and comfortable navigation only. Let us see how we can accomplish it.

Intro:

Designing navigation means designing information architecture. If you make navigation simple and comprehensive, your chances to win the battle of UX is getting high. In responsive web design era, it is tough to designing navigation that is comfortable and predictable. In general sense, designers are considering some important aspects while designing a navigation menu of any type and we can list those aspects in following ways.

  • Navigation Symbols
  • Target Areas
  • Interaction Events
  • Levels
  • Layout
  • Functional Context

Let’s check them one-by-one in this series.

Navigation Symbols

A day before a yesterday, we were designing navigation system with simple buttons and labeled with texts. Now, in this advanced age of web and mobile navigation designing, we have plenty of new navigation designs to experiment and ways to replace age-old methods. Therefore, today we have some additional elements in the navigation design besides or instead of texts in navigation menus.

In responsive web designing, designers are deprived of screen real estate so inducing much text may prove confronting for better UX. Therefore, most of responsive designers are relying on the small visual clues in form of either icons or symbols in standard conventional ways or in innovative ways with enough guiding or onboarding techniques.

If you are designing web navigation or mobile navigation system, crafting symbolic navigation should be unambiguous and consistent to sustain in the system without missing UX and usability aspects of the design. Let’s check some standard and conventional symbols used in contemporary navigation designing one-by-one.

Using Triangle Symbol

A triangle symbol next to the corresponding menu label/text indicates drop-down or category/sub-category menu depending upon its direction. For instance, downward or inverted triangle indicates drop-down menu while triangle pointing in right/left direction, it indicates fly out menu. Smart designers always consider the available margin in various size of screen and adjust the direction of unfolding action of menu accordingly and responsively.

Using (+) Plus Symbol

Generally, plus symbol indicates unfolding or opening of dynamic navigation and depicts “More” like functionality to expand the dynamic menu further. You can mix two symbols in intelligent ways. For instance, arrow in top navigation menu and + plus symbol for dynamic navigation menu in sides.

Using Three-Lines Symbol

The tree-line symbol is becoming the standard convention in responsive web design and mobile app design because it mostly used to indicate the navigation menu itself and by clicking or tapping on it you can unfold the navigation menu in responsive ways. Sometime designers add “Menu” text or label along with the three-line symbol in order to avoid confusion especially when the same three-line symbol used elsewhere.

Lujayn has smart responsive web designers who know creating conventions through consistency across the web pages or UI screens in the mobile app.