Presentation done for Brisbane Web Design Meetup (18 Nov 2010) about what I learned about website navigation design in 2010, including a look back at web designs from the 1990s and a review of current styles of navigation.
TRANSCRIPT
What I learned about
in 2010 NAVIGATION DESIGN
www.credos.com.au
Presenter
Presentation Notes
A month or so I was archiving some old design work, and came across some website layouts from the 1990s that seemed to me quite different to most of today’s websites. And for good reason! Anyway, that’s what prompted me to do this presentation, which I shall rename…
What I didn’t know about
in 1997 NAVIGATION DESIGN
Presenter
Presentation Notes
They say to understand the present you have to know where you’ve been, so here we go…
Let’s check out the early days of web navigation
Presenter
Presentation Notes
A little nip back through time is in order. Btw I know the 50s theme isn’t right for the 90’s, but I have just been designing a 50s theme website, and had a few 50s style fonts and graphics handy, so I figured it would be a shame to waste the opportunity!
Back in 1997…
www.honda.co.uk
a simple corporate website
Presenter
Presentation Notes
This is a screenshot of a website designed for Honda Motor Europe (site launched in early 1997).
Back in 1997…
www.honda.co.uk
basic menu
matrix exploring brand values
brand message
guidance
Presenter
Presentation Notes
The site was based around a matrix of brand values – individuality, pleasure, etc. The user dips in to explore the site. Remember, this was done in the days when commercialism was still a relatively dirty word on the Internet, so websites weren’t overtly selling products and services.
Enigmatic navigation
www.honda.co.uk
Indicators show where you are
Back to matrix
Very basic menu
Presenter
Presentation Notes
The navigation relied on visual position markers to show people where they were – they could explore by clicking the dots, using the RH menu, or going back to the matrix home page.
Lateral EXPLORATION
www.honda.co.uk
Brand values drive content and navigation
Presenter
Presentation Notes
The website content was focused around brand messages, relating these to the products.
The grid idea for the Honda navigation was inspired by the pen-and-paper Battleships game, which uses a grid to position items.
Why lateral navigation?
• Encourage exploration and brand engagement • Appeal to women, who make purchase decisions • Refresh a brand perceived to be stuffy • Reach a younger demographic • Stand out from competitors • Support the message “first man then machine” • Why not? Few rules back then…
Elsewhere on the web…
Find more via the “Wayback machine” http://web.archive.org
1996
1998
1998
1995-7
Presenter
Presentation Notes
In the 1990s there weren’t many rules about how websites should work – we made them up as we went along.
The Honda site is a typical corporate site, designed to promote products. It uses standard navigation menus, including deep footer links to help users find detailed content and boost SEO performance.
• Tools (CMS templates, menu systems, SEO analysis)
What’s the role of website navigation?
Q.
What’s the role of website navigation?
Q.
Help people find their way around.
A.
Presenter
Presentation Notes
Website navigation isn’t really about helping people find there way around. Who really wants to spend time exploring a website (apart from web designers)? It’s more about helping people find what they want – information, products, services, etc – as effectively as possible.
Role of navigation…
1. Find stuff they want 2. Get an overview of
what’s on offer 3. See where they are 4. See where they
can go
For users…
Role of navigation…
1. Find stuff they want 2. Get an overview of
what’s on offer 3. See where they are 4. See where they
can go
For users… 1. Drive people to
action points 2. Cross-sell services 3. Show what is/isn’t
available 4. Be found on Google
For site owners…
Presenter
Presentation Notes
Navigation has to work for the site owners as well as the site visitors.
Styles of navigation in 2010
Menus, tabs & buttons
90% of websites?
1
Presenter
Presentation Notes
Menus – rollover, flyout, expanding, heirarchical, mega menus – and simpler variants such as tabs, icons and buttons, are the most common form of website navigation. And for good reason – people know how to use them, they are usually easy to maintain, and they show exactly what is in the website.
Here are a couple more websites I designed, both using site/panel menus – some vertical, some horizontal. This underlying navigation layout is seen on lots of websites.
A “mega menu” is a menu with extras – grouping of items, additional info, images, or anything that helps people choose where to go. It gives context to the menu items.
MEGA Menus
http://www.amnesty.org.au
Explain the choices and include images to focus your attention
Typographic or numeric navigation is closely related to menu navigation, except it is often less rigid and more lateral in approach. It is a way of merging branding, content and navigation, sometimes at the expense of usability, but this depends on the website’s purpose.
Totally typographic navigation
http://www.proa.org | http://www.ah-studio.com
Typographic approach makes a strong statement and forces you to make a choice
The esoteric approach of these examples makes the user work hard. You don’t know what you will see until you mouse over or click, so you may need more of an incentive to do so.
Real world metaphors are one of the oldest ways of helping people understand how to do things. Think back to the “office” metaphor of folders, filing cabinets and files that was introduced to help people understand early computer software but is still generally used today.
Literal navigation
(design mock-up for website under development)
Navigate the human body to find out about specific muscles
(not a metaphor, the real thing)
Presenter
Presentation Notes
This is not a metaphor, just an example of an image map being more effective than a menu.
A self-contained world
http://www.idemitsu.co.jp/chienergy/special/
Click and explore the “world” (the scene moves with you)
Mixed metaphors – cars in trees?
Presenter
Presentation Notes
The problem with metaphors is they reflect the real world – what if you want to throw in something more abstract?
Spatial navigation gives people a mental model of the website and their location within it. It can use navigation grids, shapes, space, physical metaphors or other devicesto give people an understanding of the virtual space the website inhabits. The early Honda website is an example of spatial navigation, as are some of the real world metaphor websites. I have included in this category some of the one-page websites that are becoming more common (especially for designer portfolio websites).
Image grid navigator
Current position is highlighted Select an
image
Presenter
Presentation Notes
Back to the early 2000s… This intranet example uses a simple image grid, similar to the Honda example, but with a mini-grid as a device to aid navigation.
Magical mystery tour
http://flywheeldesign.com/
Move over shapes to make the navigation options appear
Presenter
Presentation Notes
In this example you don’t know what you will get until you mouse over/click, although you may remember what was where on subsequent visits.
No choices are presented up-front. You see welcoming content before being expected to click anything.
Presenter
Presentation Notes
For promotional websites you don’t want people to get distracted, and you want to warm them up before sending them off in any direction. This one-pager has minimal navigation, all focused on getting the user to do what’s wanted – sign up.
they want/need • Drive people to action • Cross-promote content • Show what is on offer • Be found on Google
Role of navigation…
Choosing a navigation style
• Why the navigation is there (its role) • Who will be using it • Where they want to go • What YOU want them to do • How you will manage it (CMS etc)
My advice to web designers…
50’s style fonts & graphics from http://www.fontdiner.com/
Get lost. (it’s the only way you’ll find anything new)
Presenter
Presentation Notes
It’s only by getting lost that you learn ways to explore, put yourself in others’ shoes, and discover what’s out there. I wonder what website navigation (if there is still such a thing) will look like 13 years from now?