A valid demo of a website's navigation

In our navigation. As humans, our brain wired to pay attention to contrast, from the normative things that stand out. That's why the photocopier uses a big, green Start button.

This is a faster mental arithmetic than the exhaustive reading of each application's name. Obviously, in both cases, designers have put work priorities and visual language.

Define our terms and conditions

Priority is the act of giving an element prominence, relative to its importance (navigation) level. Greeting a hierarchy of navigation, this is done by first considering the relationship of each element to its user's goal.

Priority items, such as settings or profile, are usually less obvious than the primary operation of the previous Web site or application. It can communicate in a variety of ways, but in essence priorities, more important items should appeal to more attention to themselves.

Harvest application priorities are more frequently used than other links (reports and timetables), (profile)

Visual language, on the other hand, includes the use of visual elements to convey meaning. Many times it is through illustrations or graphic visual cues that enhance the functionality of the elements, although the application's visual language.

By contrast, only the navigation structure of the text is considered-especially those that use the same font size. Without introducing/containing rich visual language, these structures do not reach their maximum communication potential. Simple visual cues are a long way to go to help users analyze information because they make it easier to identify recalls.

Some well-known web sites and applications use the calendar icon.

Monster

Unfortunately, designers often do exactly the opposite, in their designs. In their desire for consistency, they often force users to carefully scan each item until they find something they want. Emerson was once known as this foolish consistency "the little soul of the genie." ”

Let's take a look at some bad examples:

Craigslist's

Craigslist also offers a number of priorities and a non-existent visual language. Users need to read almost every item on the home page to find the link they are looking for.

Jimmy John's website

Every time I have a sandwich on Jimmy John's website, I find myself reading every navigation item again. To maintain consistency, each navigation product looks the same: red, black, and white. Jimmy John sandwiches are great, navigation, so less.

The Microsoft Metro UI

The most recent violation of my favorite is the Microsoft Metro UI. This has been out for some time in the Windows Phone interface and will soon arrive with Windows 8 on the desktop. The white and black icons, the main screen all the same color tiles, users read each tile, not the unique icon and color. (John F. C. Dvorak in PC Magazine "recently wrote a big piece about it."

Rdio iphone Apps

Microsoft Metro UI's Rdio iphone application interface makes the same mistake. Although they are not included in the diagram, the color and size consistency of the icons forces the user to scan each data closely. Otherwise beautiful and successful apps, I find myself scanning the main screen multiple times to find the action I want.

Apple itunes

In Apple's itunes 10 (and its search), the color of the sidebar is converted to grayscale. In bringing consistency, Apple removes the contrast between each item, so users need to scan more closely and read the tags to find what they want. Before this, if you are looking for a podcast, scan the purple icon. Now you have to scan the word "podcast" because the icons run together.

itunes 9 appears on the left, and itunes 10 appears on the right.

Path Slide Menu

Path The iphone app uses a sliding navigation found in a Facebook-like application. However, there is an important difference in the path that does not use the icon with the label, while Facebook does. Every time I open the path navigation, until I find what I want, I want to read each entry. With Facebook, my visual model and choice response is that the cognitive load is much faster.

Learn by example

So, now that we've seen them, do we avoid the consistency of these monsters and create more effective navigation structures? Let's take a look at some good examples:

Mint

Mint has long been seen as a typical user experience, and they have some good areas with highly visible navigation. The way to save the tab, especially depending on a thoughtful set of icons for navigating.

Espn

ESPN site has a variety of different navigation styles throughout, but I feel the hover state of the dominant navigation item, its combination of photos, videos and various text weights is particularly effective.

Volkswagen United Auto Corp.

When browsing the popular models of the American website, the Pull-down navigation menu combines priority-car front convertible stock based-with visual language-a landmark version of each vehicle in a different color.

Twitter's web application

Twitter's web app has a very simple interface, with only a handful of links, but all accompanied by a unique and meaningful icon to set it apart, the most important action to compose a new tweet, set aside in bright blue.

Instagram's iphone App

The buttons on the Instagram application combine these two priorities and the visual language effectively. is determined by each button related to the icon, the most important one (camera) as the center, with a blue background.

EPB Fiber

EPB Fibre site is a good use of different priorities at the top level navigation. The main navigation items are the most important option ("Order Now") in blue and black.

A Guide to Success

We've seen good and bad examples, and now let's try to sum it up. The following guidelines can help us create a more prioritized, visual navigation program:

1, attention to user goals and/or conversion

When trying to determine how to optimize, make your navigation sense, think in your user's primary goal and/or website conversion. These elements are prominent and easy to understand.

2, is inconsistent

Inspired by the copier, instead of striving to all the size and appearance of the navigation items, use inconsistent design to make the most important items the most recognizable.

3, the use of visual language, not just text

Where it makes sense to use icons and other visual cues to bring additional meaning, rather than just using text to your navigation. This will allow the user's brain to process more quickly by relying on pattern recognition rather than reading.

4, size (color) matters

Use the difference between size and color, more important links or buttons to differentiate.

The last Thought

There are so many questions to consider when designing the navigation, it can easily fall back to the Convention "the consequences of creating more work for your users." While there will always be situations where using these techniques makes no sense, remember that differentiation may be a powerful tool.

Not all navigation is equal. In your navigation element, you can help users completely forget to navigate by adopting a priority and visual language. Their way, they can focus on content, they are really after.