Tag Archives: plus symbol

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.