Week 6: Navigation

This session follows on from the two we had last week on information architecture and user flows.  Navigation is the visual representation of these.  It is the way you navigate through space both online and offline.  It gives a map of ‘what you can do next’, it shows potential the user paths at each level.  It is concerned with grouping what section things should live in (potentially following taxonomy results) so that a user can easily find what they are looking for resulting in a good experience.

There are three components, sent, story and simplicity:

Scent: What does the user expect, does labelling fulfil their expectation of the steps they can take? i.e. how in line is the wording so that the user knows what to do.

Story: What does the navigation say about the experience? What is the tone and narrative that is being used? 

Simplicity: How easy is it for a user to grasp the navigation? How easy is it to fit new content and/or functionality in later on?  i.e. good models and categories. We are navigated though spaces all the time, think about the last car or train journey you made:


Task: Draw a map of how you get to class, name the landmarks, share: 25 minutes

I started with a flow diagram to make sure I had all the components for my map:

2015-06-12 11.58.26

Then I drew this out (not really knowing what I as doing) on an A3 piece of paper, I was very glad it all fit!

2015-06-12 10.57.08

After discussion with my partner, it was clear that the underground section between Finsbury park and Kings Cross was not apparent.  So I added the above ground bit with the wonky cars!  Its strange that I put the last bit out of the tube uphill as it is flat.  Artistic licence…or perhaps its indicates the culmination of the journey?!  If this was a real map I would think about changing this. General tips about navigation:  Don’t overfill and don’t have too many options at each step.

Example: navigation zones in the Chrome browser: Main navigation.  Sub navigation.  Footer.  Contextual nav.  Breadcrumb (User-driven and Hierarchical).  In-content nav.

2015-06-12 13.06.33

Top navigation patterns:

2015-06-12 13.24.37

Carousels: A device used to navigate through a sequence of items, (if there isn’t room to have them all on one screen). There is much debate about the usefulness of the carousel in keeping user attention.  When using a carousel there are some considerations; the selected state and unselected state (scent), the number of states, what access out of order looks like (internet failure) and lastly automatic or manual changes.  Carousels are useful in solving arguments with clients who want to display large amounts of content, it is effective as being able to tell people in Marketing/Senior Management that their latest idea is on the Home Page, (even if users will probably ignore it).  Although in general it is a pretty bad idea to put one on the home page as it can be off putting.

2015-06-12 13.40.44

Expand vs Drill

2015-06-12 17.08.07

Navigation is about making educated guesses.  As a UX designer it is your job to get in to the user’s mind.  Since the beginning point is different for each person you should aim for the widest possible audience and then narrow it down quickly. You should start with what the user already knows and then try and work out what they will look for from there, or the things they may want to do.  What do they do most often?

Leave things out!  You do not need to have everything, in fact it is bad to have everything.  What is not there is just as important as what is.  As a UX designer it is your job to make these prioritisations so that the user doesn’t have to.  If you really can’t leave something out, then de-prioritise clearly!

Be comprehensive, but concise by using unambiguous words/icons (words are generally better).  You don’t want loads of overlap within your categories.  Stay focused; the goal is to get someone to choose an option and go deeper, not to deliberate over where to go next.  Suggest, but don’t spell out, the entirety of the site’s content.  If  someone can scan the navigation and work out what the site in in two seconds then you are on to something.

You need to suggest an overall structure (refer back to taxonomy of information)  Group contents into buckets that are familiar and easily understood.  Each navigation item should correspond to a a major area of content on the site. Develop meaningful names for these buckets, ‘explore’ is a total cop out…

Language matters a lot… “It’s just semantics” is not a a valid argument.  The language you choose has massive effects on a user’s ability to navigate.  Keep pronouns consistent.  Don’t try to hard to come up with names for things, the obvious is normally better.  You don’t need to try too hard to be creative and push brands on people.

Simple design – Use familiar conventions as much as possible.  The navigation is usually not a good place to get creative.  Try to avoid fancy/complex interactions.  Simple and unbreakable is good.

Ambient findability.   Your design should have visual indicators that remind the user where they are.  These are called  breadcrumbs.  The user needs to know which part of the site they are in at all times, it also need to be easy to navigate to all other parts of the site from any area of the site. Good and bad examples of breadcrumb design:

2015-06-12 18.01.34

Hierarchy vs Search At a certain size of content, the hierarchy is too complex to manage and search will be the preferred method of getting around e.g. Amazon or eBay or Asos How many levels? As few as possible… No more than three.  If you find yourself with more than three levels of navigation, consider restructuring your info or using alternative navigation option. How many items for each navigation level?

  • No more than 8 for top level
  • Up to 10-12 for lower levels.  (Any more than 12 or so probably requires a different approach…)

Lots of options can be overwhelming; too few can be alienating/ confusing.  The level of detail is dependent on the content and on users’ preconceptions.  The deeper you go, the more items you can have.  As the user moves deeper into the experience, they indicate their interest and implicitly grant permission to give them more options to think about. The Burger menu! Avoid if possible…  It is OK if it has advanced features or things you can reach from elsewhere…  The burger menu started appearing with the advent of mobile content.  It is used as a lazy navigation dump (like a bacement).  It will unnecessarily hide content.  Let people see all the options that are available to them on the home screen.  Split your content in to 3-5 options. According to Apple’s designer Norm Cox:

Interesting inside joke… we used to tell potential users that the image was an “air vent” to keep the window cool. It usually got a chuckle, and made the mark much more memorable.

Harjit mentioned that Apple have now taken the hamburger one step further… I think its quite neat actually.  There are only two lines rather than one and when you click on the menu it turns in to a cross, indicating that you can exit the nav bar by clicking it…

2015-06-12 18.34.36

The Footer is an area for grouping high value useful links. It where you can put social media links and related websites.  It is also the space for clear contact details.

Task: Find some patterns for your final project. Navigation patterns are pretty established, so find some that will help you design your own: 25 minutes




I was only able to find one as the internet wouldn’t work on my phone.  I liked the drop down menu on this site, even though it was in Russian!:

2015-06-12 13.43.57 Our homework for this week is to make a navigation structure for our projects.  We should mainly think about the ‘bucket’ groups, but some sketching is fine also.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s