Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

May 08 2012

13:30

Effective Presentation of a Website’s Navigation

Users obtain information on the web in one of two ways: searching or browsing. Browsing – moving through a multi-faceted content structure – is made easier when information architects present users with an intuitive navigation hierarchy. This article discusses two techniques to that end.

There’s a great line in the Postal Service song, This Place is a Prison, that states, “It’s not a party if it happens every night.” Although the singer specifically refers to a life of too much partying, it’s a good reminder that anything that happens too regularly loses its significance.

A copier's start button appears larger than its neighboring buttons

This same concept holds true in our navigation. As humans, our brains are wired to notice contrast, things that stand out from the norm. It’s why photocopiers employ big, green start buttons. It’s also the reason that the interface on my smartphone offers a collection of colorful icons instead of just text links.

When looking for Yelp on my iPhone, I’m not scanning for the word “Yelp;” I’m scanning for a red square. This is a much faster mental calculation than exhaustively reading each application’s name. It’s clear in both cases that the designers have put prioritization and visual language to work.

Defining our terms

Prioritization is the act of giving an element prominence relative to its importance in a (navigational) hierarchy. With regards to a navigational hierarchy, this is done by first considering each element’s relationship to its user’s goals.

Prioritization is the reason why items like “Settings” or “Profile” are typically less noticeable than the primary actions on a site or application. It can be communicated in a variety of ways, but essentially prioritization means that items of more importance should call more attention to themselves.

A screenshot of harvest.com

Harvest App prioritizes more regularly used links (Reports and Timesheets) over others (My Profile)

Visual language, on the other hand, involves using visual elements to convey meaning. Often times this is done through illustration or iconography, though any visual cue that reinforces the function of an element contributes to that application’s visual language.

By way of contrast, consider text-only navigation structures – especially those that use the same font size. Without introducing/incorporating a rich visual language, these structures don’t reach their fullest communication potential. Simple visual cues go a long way towards helping users parse information because they facilitate recognition over recall.

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

Hobgoblins

Unfortunately, designers often do the exact opposite in their designs. In their desire for consistency they often force users to carefully scan each item until they find what they’re looking for. Emerson once termed this kind of foolish consistency “the hobgoblin of little minds.”

Let’s take a look at a few bad examples:

Craigslist

Craigslist offers both little prioritization and a non-existent visual language. Users are required to read nearly each entry on the home page before finding the link they’re looking for.

A screenshot of craislist.org

Jimmy John’s Website

Every time I order a sandwich on the Jimmy John’s website, I find myself carefully re-reading each navigation item. For the sake of consistency, every navigation item looks the same: red, black, and white. The sandwiches at Jimmy John’s are great; the navigation, less so.

A screenshot of Jimmyjohns.com

Microsoft Metro UI

One of my favorite recent violators is the Microsoft Metro UI. This has been out for some time in the Windows Phone interface and will be arriving soon on the desktop with Windows 8. By making the home screen tiles all the same color with white lettering and white icons, the user has to read each tile instead of responding to unique icons and colors. (John C. Dvorak recently wrote a great piece about this in PC Magazine.)

Rdio iPhone App

The Rdio iPhone App interface makes the same mistake as the Microsoft Metro UI. While they do incorporate iconography, the consistency of color and size of the icons forces the user to closely scan each item. In an otherwise beautiful and successful app, I find myself repeatedly scanning the home screen options to find my desired action.

Apple iTunes

In Apple’s iTunes 10 (as well as its Finder), the sidebar items were converted from color to grayscale. In bringing consistency, Apple removed the contrast between each entry, thus requiring users to scan more closely and read labels to find the desired content. Previously, if you were looking for podcasts, you scanned for the purple icon. Now you have to scan for the word “Podcasts” because the icons run together.

Screenshots of iTunes 9 and iTunes 10

iTunes 9 appears on the left and iTunes 10 appears on the right.

Path Sliding Menu

The Path iPhone app uses a similar sliding navigation to that found in Facebook app. There is one important difference, however, in that Path does not use icons with labels whereas Facebook does. Each time I open the Path navigation, I have to read each entry until I find the one I want. With Facebook, I’m reacting to the visual patterns and selection is much faster with less cognitive load.

Screenshots of both Path and Facebook's iPhone apps

Learning by example

So now that we’ve seen them, can we avoid these hobgoblins of consistency and create more effective navigation structures? Let’s look at some good examples:

Mint

Mint has long been viewed as an exemplary user experience and they have some nice touches in areas that use highly visual navigation. The “Ways To Save” tab in particular relies on a thoughtful collection of icons for navigating.

Screenshot of mint.com

ESPN

The ESPN site has a variety of different navigation styles throughout, but I find the hover state for the primary navigation items to be particularly effective with its combination of photos, videos, and various text weights.

Screenshot of espn.com

Volkswagen of America

When browsing the vehicle model options on the Volkswagen of America website, the dropdown navigation menu combines prioritization – Sedans before Convertibles – with visual language – an iconic version of each vehicle in varying colors.

Screenshot of vw.com

Twitter Web App

The Twitter web app has a very simple interface with only a handful of links, but each is accompanied by a distinct and meaningful icon to set it apart and the most important action, composing a new tweet, is set apart in bright blue.

Screenshot of twitter.com

Instagram iPhone app

The buttons on the Instagram app effectively combine both prioritization and visual language. Each button is identified by its associated icon and the most important one (the camera) is centered and stands out with a blue background.

Screenshot of Instagram's iPhone app

EPB Fiber Optics

The EPB Fiber Optics website makes good use of varying levels of priority within the top level navigation. The primary navigation items are all in black with the most important option (“Order Now”) set off in blue.

Screenshot of epbfi.com

Guidelines for success

We’ve seen examples both good and bad, now let’s try to generalize a bit. The following guidelines can help us create more prioritized, visual navigation schemes:

  1. Pay attention to User Goals and/or Conversions

    When trying to determine how to prioritize and bring meaning to your navigation, think in terms of your users’ primary goals and/or site conversions. Make those elements prominent and easy-to-understand.

  2. Be Inconsistent

    Take inspiration from the photocopier: instead of striving to give all navigation items the same size and appearance, leverage inconsistency in your design so that the most important items receive the most visibility.

  3. Use Visual Language, not just Textual

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

  4. Size (and Color) Matters

    Use size and color distinctions to differentiate more important links or buttons.

Final thoughts

With so many aspects to consider when designing navigation, it can be easy to fall back on convention and create more work for your users as a consequence. While there will always be situations where using these techniques doesn’t make sense, keep in mind that differentiation can be a powerful tool.

Not all navigation is created equal. By employing prioritization and visual language in your navigational elements, you’ll help users forget the navigation altogether. They way they can focus on the content they’re really after.


November 24 2011

10:00

A Short Course On How To Improve Your Website’s Typography

Typography is one of the most difficult things to sort out when designing, especially because with the amount of typefaces a designer can use, it’s almost impossible to choose the best one without spending hours on it. A simple search on Google will show you that there are hundreds of thousands of fonts, most of them even free of charge; and the number increases weekly. This means the decision is even harder to make today than it was last year.

And it is not only about the typefaces available, but mostly about the skills a designer has. There are Universities that teach typography throughout years, because it is a deep field. Knowing alignment rules, kerning, hierarchy and other terms like these is crucial in making your text say something specific.

The good part is that good typography alone is enough to create a powerful visual identity or design. Being able to hit the right mark with the typography is critical and therefore I will share with you several tips on how to improve your typography skills.

Good typography matters because it plays a vital role in web design. It generates a hierarchy (most of the time visual) and makes the text easier to read and follow. Typography is not only about looking good, but also about providing a functional advantage to the text – being easier to follow and read.

It is important to design with the idea that the result has to mean something. It is even more important to think of the information you want to give to the visitors and how you want to do this. Every typeface says something about itself, so think also about the way you want to transmit the message. Looking at the picture below should make you understand what I mean, even if you don’t have that much knowledge of typography.

The same word has been written with four different typefaces and they create a total different impact. While the one written with Impact creates the most powerful visual attraction of all (the name is not a coincidence at all), the one with Helvetica Neue looks more modern, fine, polished and sleek. The one written with Ethnocentric seems the most modern of them all, but might be difficult to use for something other than titles or headings. The reason why this is will be discussed right away.

"Interaction" written with Helvetica Neue, Impact, Italianate and Ethnocentric.

 There are more font classes in the world, but only two of them are of such importance that everybody should know about them: serif and sans-serif. The difference between them is the “serif”, which are small additional endings at the end of the strokes – specific of the serif fonts. “Sans” comes from French and means “without”, so it is quite obvious which is which.

The serif fonts are usually used in printed material such as newspapers or books. However, magazines employ sans-serif fonts because they are “cleaner” and are easier to read when the font size is small. But according to studies, the serif typefaces may be easier to read in print, while sans-serifs are better on-screen, especially in low font size and low resolution.

The good part about the new technologies on the web are that even if your computer does not have a font you might like to have, downloading it is only few steps away. Moreover, embedding the font into your site, so that everybody who visits it sees the text with the typeface you want, is possible as well now, so why not use this if you can? I would like to show you two examples of websites with integration of custom typefaces, and then we’ll come back and discuss why are they successful.

Egopop Design Studio uses a custom-made font.

Chirp has a funny custom-made font as well.

The success of these two webpages, and many others for that matter, is also given by the way they made use of typefaces. Maybe tomorrow you will not remember what the website was about, but it is very likely you will remember the website itself, because it creates a powerful visual impact – and this is the first step into having a web identity worthy of remembering. This is what a good, well used typeface can turn your website into.

Another good tip is not to overdo it. It is not a good idea to use many fonts, so try to keep the number of typefaces as low as possible. I usually go with two, maximum three. I think two is perfect because you have a typeface (serif maybe) which can be used for titles and headlines, in huge sizes, while the other one is for paragraphs and small text, and often it is a sans-serif. In the image below you can see a good example of two well-combined typefaces.

Pound & Grain uses a sans-serif for the headlines and serif font for text.

If you combine too many fonts in the same design, this can cause your text readability to suffer and will not create the same experience as the example above. Fonts have to be used wisely, and quality is more important than quantity. Although it doesn’t have that much to do with typography, embedding too many fonts will make your site load slower.

Experimenting is the way to find a great combination. Try as many fonts as possible, play with them, combine them, increase or decrease the number of typefaces and so on, until you reach the desired effect. Managing to find the perfect combination rarely happens the first time when you try it, so get ready to spend some hours on this.

The line spacing is critically important as well, because it has a lot to do with readability and impact. Moving the lines apart from each other will make the human eye read them easier, while bringing them closer will obviously have the opposite effect. The average of the line spacing should be about 0.3em to 0.5em larger than the font size, but this is only a guideline and you shouldn’t follow it all the time. Actually, I never even think about this one; I always increase or decrease the line spacing by looking at the text and comparing the options. To realize why big line spacing is important, look at the image below and try to think of which is the easiest to read. Note that the typeface is the same in both paragraphs.

A difference of only 10px spacing (Photoshop size, not HTML/CSS) makes a huge difference.

Another important concept is the hierarchy, which can not only be made by increasing the font size, but also by using different typefaces, as I usually like to do. Headlines and titles are either bigger or have a more powerful, thick font, because they need to stand out. “If it makes a difference, better make it big”. If talking about rules, then this is one you should keep in mind – make the differences obvious.

The hierarchy can be emphasized through color, contrast, dimension or placement, but the most visual is the one emphasized through typography.

The headline is a sans-serif in bigger size, while the rest of the text is written with a serif font.

Measuring the width of the text is important too, but it is more crucial for paragraphs than for headlines. The ideal line length seems to be between 10 and 15 words per line, but this is another rule that doesn’t apply all the time. It is so important which typeface you use, because some are wider than others. The line spacing between rows has an influence over this as well, so don’t think of rules. Ask anybody around you to read your text and then ask if it was difficult, easy or normal. Don’t read it yourself, because you that designed the layout and after spending hours looking at it, small details become unnoticeable.  It doesn’t only depend on the font you use or line spacing, but also about the general width of your design.

Alignment is important too, but the sad truth is that it is impossible to make it work for everybody in the World with only one design. This is because in Western culture we read from left to right, top to bottom, while some countries in the Eastern part of the World read right to left, bottom to top. Therefore you should think of your audience and design for it. If we take the Western culture as an example, then try to have as fewer different starting points on the left side. This is because the eye is used to start from the same point as before when reading a new line, and having a different starting point for each line will make it difficult to read. Maybe we don’t think of this too much, but the brain probably does. It is far more easy to read a text aligned to the left, than a text aligned to the right, and the example below should express this.

The text on the left side is the easiest to read.

Although I am a big fan of the center alignment, I only use it in headlines with few lines. The version on the left side is definitely the best and I think everybody would consider a website aligned to the right a bit weird, especially people in Europe and America. Justifying the text is not a very good option either, because it will create a lot of empty space between the words and this will become confusing. Justifying is usually popular in print, in narrow columns, but not in web design where the containers are usually wider.

The weight of the font is important as well. The weight is actually how thick the font is. Highlighting words or links is usually done by using a thicker font or another color. Having several font weight types means that you can reduce the number of other embedded fonts, because having the same font in different weights gives a feeling of hierarchy and importance.

Helvetica Neue is a font with more than 40 different font styles and weight.

As you can see, typography is built on several important concepts and it is important to keep an eye on all of them. Typography is an important part of any design and if you manage to hit the mark with it, a basic, simple and clean layout will be enough to create a powerful identity. You will have to spend a lot of time on improving your typography skills, therefore I will share with you a list of useful links where you can find out more about the art of typography.

Articles about typography on 1stwebdesigner.com

Articles about typography on Smashing Magazine

25 Excellent Typograhy Tools on Six Revisions

A Crash Course in Typograhy on Noupe

Designing with Type by James Craig on Amazon

Typography and Design one OneXtraPixel

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...