User Experience Design Blog

This survey takes a look at the various example and trends of headers and navigation across major websites. (Scroll down to see examples.) In particular we focus on headers coupled with horizontal navigation as that has become the industry standard. Many top sites, like those shown below, have adopted this paradigm. A few notable exceptions include shopping sites like Amazon.com and news sites like NYTimes.com and BBC.co.uk. Typically those sites that opt for vertical main navigation tend to have too many top-level navigation categories to fit in the horizontal space and resort to a vertical listing out of necessity.

For the majority of other well-known sites the header and horizontal main navigation ensemble offer a compact and elegant solution allowing users to access all major areas of the site as well as critical functionality like site-wide search. In addition, this solution frees up the entire horizontal real estate below the header and main navigation–a welcomed benefit considering conventional size limitations.

Header and Horizontal Navigation Trends

It is well known by now that the top of the page is by far the most precious real estate on a web page and making the best of this space is vital. By using desktop applications and by continually encountering similar navigation paradigms, users have come to expect the top of a web page or web application to provide pathways into the most important sections of a web site as well as access to critical functionality like site search. At the same time, web sites and web applications seek to promote their brand, spread their message, make money, and drive users to high-value actions such as uploading media. And even though almost all of the sites surveyed share the same goals in designing their headers and main navigations, there are two main schools on designing a user experience to meet them.

One school of thought is to make the header and navigation as simple as possible and thus to focus user attention and interaction on a small handful of sections and interactions. This, of course, has the serious limitation that users have to perform more actions to get to many of their destinations or to perform desired tasks. The master of this approach is none other than Apple on apple.com as well as other popular sites also surveyed here like YouTube.com, Veoh.com, and LinkedIn.com.

The other approach is to expose a great number of navigation paths and interactions allowing users to quickly get to their goal. Conversely, the latter paradigm spreads users’ focus and interactions among many items. The best example of this approach in our survey is ESPN.com. The majority of the sites that we looked at fall somewhere in the middle.

Other smaller trends that we have found are that more sites now put a prominent search bar in the header, more sites put large advertisements in the header, and some are starting to move user-centric navigation like login close to the branding on the left.

(Examples are listed in alphabetical order.)

Apple.com Header and Navigation

CNN Header and Navigation

Current TV Header and Navigation

DeviantART Header and Navigation

Digg Header and Navigation

Ebay Header and Navigation

ESPN Header and Navigation

Flickr Header and Navigation

Flixter Header and Navigation

Hotels.com Header and Navigation

Hulu Header and Navigation

LinkedIn Header and Navigation

MetaCafe Header and Navigation

MTV Header and Navigation

MySpace Header and Navigation in Logged-in State

MySpace Header and Navigation in Logged-out State

Netflix Header and Navigation in Logged-in State

Netflix Header and Navigation in Logged-out State

Sony Playstation Website Header and Navigation

Technorati Header and Navigation

Veoh Header and Navigation

Yelp Header and Navigation

YouTube Header and Navigation

Zevents Header and Navigation

As a designer and consumer advocate, I often judge the experiences that I have with various products and services. So I was keen to read David Pogue’s recent article with his own experience observations, aptly titled It’s the Software, Not You.

Of the Delta Airlines touchscreen kiosks, Pogue writes:

“Whenever I encounter badly designed software like this, I stand there, slack-jawed, mind boggling, and wonder what on earth the designers were *thinking.* Not, obviously, about elegance, intelligence and simplicity”

Beyond kiosks, Pogue also mentions the PalmPilot (as a good example) and touchscreen payment systems in taxis. The article got me thinking about the various examples of kiosks, good and bad. I recall going to the movie theaters about two years ago and being pleasantly surprised that all I had to do was insert my credit card, and there my tickets were… tadah! That simple.

It’s always great to be pleasantly surprised by the devices you interact with, but it’s not a simple thing to design them. It takes a lot of thought and research to minimize the steps and customize to the user’s needs. Most importantly, knowing what the most common tasks are can be invaluable, particularly for kiosks which are meant to speedily get people through common tasks. Holger Struppek of Hot Studio writes in-depth about one such design exercise for Wells Fargo’s ATM’s.

I also recommend reading the research reports on kiosks from Witchita State’s SURL (Software Usability Research Laboratory): Designing a Touch Screen Kiosk for Older Adults: A Case Study and How Important is Visual Feedback When Using a Touch Screen?

Jakob Nielson’s article, Weekly User Testing: TiVo Did It, You Can Too provides a great case study supporting testing early and frequently in the design process to produce exceptional design. Having worked with TiVo, I can say that their approach to usability and research is stellar, and their user experience team is very talented, so it is great to see this recognition.

The specific web redesign project mentioned in the article enforced TiVo’s user-focused culture, and finally brought user-friendliness to its website. As Nielson quotes:

“I’m selling you a product where the key differentiator is ease of use,” says Margret Schmidt, the company’s vice president of user experience and design, “but if the website isn’t easy to use, how will you believe that the product is? We tried to bring that to the site.”

The outcome: TiVo’s new website is simple and clear while still being media-rich, and scored in the top 20% of Nielson’s study on web usability.

Nielson summarizes the benefits of this approach well with the following main points:

1. Costs the company less.
2. Offers motivation.
3. Helps drive business decisions.
4. Creates a testing culture.
5. Builds internal knowledge.

I wholly advocate for this approach as it improves design. Period. No matter how good a graphic designer, interaction designer, content writer or product manager you are; there are invaluable insights you will get from testing frequently that will improve your final product.

Testing at this level not only reduces costs, but also facilitates inter-departmental collaboration (see our previous article: Avoiding the Problems of Design by Committee). Just think, TiVo conducted only 12 tests in 12 weeks. How many projects do you know of that have accomplished that much in 12 weeks with such a usable and appealing outcome?

Last month Nokia published a document (PDF) that presents examples of good mobile design based on the interaction design, easy-of-use, and visual appeal of the products. The set includes:

• Gmail
• Jaiku Mobile
• Opera Mini
• New York Times
• Google Maps
• Yahoo! Go 3.0

Here are a few screen shots from the document:

Although the analysis is quite subjective, I think the sampling is a good one. I have used quite a few of these products and agree that the overall interaction is pleasing.

In particular, I use the Gmail mobile application on a regular basis and find it very similar to the online experience in many ways. It is easy to search and see what I have read versus not. However, the one thing that truly annoys me is the need to confirm almost every action. For example, if I select a message in my inbox, I have to click again to say “open.” Additionally the convenient “undo” feature for deletion has not been ported over so I must also confirm that action. In later releases I hope to see these overlays reduced to make this application even easier to use.

Related to this one, Google Maps mobile is simply a must-have; I have navigated many a foreign domain with this handy and simple tool.

Another one worth mentioning is Opera Mini, which I use on my Blackberry Pearl. This application is one of the reasons I don’t feel that compelled to get the iPhone (among other reasons obviously as there are certainly a lot more features and hooks on the latter).

If you are interested in mobile, I would recommend reading through the document. As for me, I’m going to try out some of these other applications to see how they measure up. In particular I plan to upgrade to the latest Yahoo! Go to see if they improved the performance, which in my opinion severely impacted the user experience.

Today Facebook released a refreshed design of the site which includes some interaction enhancements for scanning profiles as well as managing your own profile. You can try out the new look at: www.new.facebook.com.

The element I applaud the most is the prominence now given to the Wall. This is a great move, considering the stickiness of this feature as well as the ever-changing nature of this element. It is also spectacular that users are allowed to try out the design to ease the transition (see our previous post on Dealing with Radical User Experience Redesigns).

However, it does feel a bit strange that the Wall has been integrated with the mini-feed. I can understand some of the logic behind this: they both show recent activity to a certain extent and they both change constantly, but the interaction and intent of these are different enough that it does feel jolting and disjointed. I think this particularly stems from the fact that Wall posts are comments with threading whereas mini-feed items are disparate actions that don’t necessarily have continuity or the ability to comment. It is now much more difficult to parse all this information.

Check out more commentary on the new design:

• Webware on Cnet: New Facebook design: Subtle changes that work
• Associated Press: Facebook gets a facelift to help users share
• TechCrunch: The Friendfeedization Of Facebook
• Mashable: Facebook’s Beta Re-Design Officially Launches at new.facebook.com

Yesterday, the Xbox 360 team announced that their target product would be undergoing a face-lift and some noticeable experience enhancements. Of particular interest are the new dashboard and avatars; the latter which will be fully integrated in other Xbox LIVE gaming and future products.

The dashboard surfaces the key navigation as in previous versions, but is a lot more visual. This seems in keeping with being an entertainment device, and I think it’s definitely more appealing and fitting for the television. You can judge for yourself:

Engadget.com has more photos and commentary. Also, check out a more detailed writeup on kutaku.com.

Beyond the user interface changes, Microsoft also revealed the new features and enhancements, including the new Netflix portal:

All these changes are going to be rolled out to everyone - this one is not optional, so it’ll be interesting to see what the reception is from those that matter the most - the customers. Overall, I think this is a good move and a warranted change and I look forward to seeing the final product (particularly to see what they do with all those ads that are conveniently absent from all the screenshots).

The search experience is one that continues to evolve. Developers continue to improve the algorithms and interactions aimed at getting users to their desired result(s) faster. Hints such as the exposed URL, have expanded to include elements such as StumbleUpon’s Social Search, Ask’s binoculars site previews, among others. There has even been talk and development around natural language search. And the list goes on…

Jared Spool of User Interface Engineering recently wrote about designing for how people search. A key finding from the research showcased in this article is as follows:

“When we talk to designers about how they approach the search results page, they tell us they want to give their users a list of great choices from which they’ll choose. This approach focuses these designers on creating a showcase of choices. The showcase leads developers to think choices are a good thing.

However, here’s an interesting finding from our research. Users don’t necessarily want to choose. They aren’t looking for a showcase. They are looking for the magic item that will solve their needs. If the system can’t figure it out, well then, they want to see the selection that contains their magic item. But, if the system only provides a single magic item, they’ll be happy — assuming it’s exactly what they want.”

However, today, Spool writes again on Mike Moran’s commentary on his first article, which counters this finding. Moran writes:

“[..]. many Web site searches do require just one correct answer, as Jared points out. But not all of them. In my work at ibm.com, I noticed that the most preliminary searches often were informational ones. Someone might search for “e-mail archiving case studies”- they don’t want to get just one. Now, sure, if you have a page on your site that lists every blessed e-mail archiving case study, that would be a great #1 result, but you usually don’t have that kind of aggregation page for every possible query.”

So which is it? Do we give users one result or many? In Spool’s opinion, the current list format is a temporary fix for poor search algorithms, which are unable to discern the user’s intention. However, I would tend to concur with Moran here. Will technology ever be able to completely discern a user’s intention and provide the one ultimate solution? Particularly, as information grows on the web, I think this answer is no. In this case we should try to design for the many, rather than just one group.

People search differently, and use varying methods at different times. Sometimes, one may just want a simple definition no matter where it comes from, other times they may want a series of resources to compare/contrast and make a decision. For the first case, it suffices if the first result is what the person is looking for, and in the latter, it is helpful to have the other options.

The simplicity of having one result may only lead to frustrations for those that desire many answers. I think the real challenge is to ensure that results are relevant from the outset, and not necessarily to prove that computing has evolved to produce one relevant result that can satisfy everyone.

To some ‘reputation’ and ‘brand’ may be one and the same. I consider reputation to be an integral part of a company’s brand. Beyond reputation, brand can include things like popularity (market penetration), identity, uniqueness, etc.¬† Yet reputation probably pays the biggest role in building a valuable brand. Indeed, this past week Forbes released its list of the 75 most reputable companies in the U.S. It is not surprising that there is a strong correlation between Forbes’ list and Millward Brown’s list of the 100 most valuable global brands. In fact, the list of the most valuable brands in North American on Millward Brown’s list has an even more striking correlation.

Of course, we can’t assume causality just from correlation. However, it is true that many of those companies with the best reputation and highest brand value, like Google and Toyota, stress customer satisfaction, reliability, and excellence of their products and services. These are the same values that are the basis of effective user experience design.

What can be learned from this? While business needs are critical, user needs are just as important. When the two don’t align, we must make design decisions that take into account both, not just business decisions.¬† As a concrete example, advertisements are can be detrimental to users’ experience, particularly the invasive ones that pop up and flash. While they may be good for business, they will hurt the user experience and the company’s reputation and probably the value of its brand.

Based on this week’s talk of the rising importance of universal design, one may ponder whether this trend is actually real and to what extent it has manifested itself in daily life. Are products really easier and more accessible for everyone?

Although I think the global trend is moving in the right direction for the most part, there are areas of concern. Awareness of accessibility is up, and design processes are being adjusted to accommodate ease of use, but are our products universally usable? David N Wallace, an IT coordinator who has first-hand experience with living with a disability, writes about the concerning trend around touch technologies in physical devices.

Wallace writes:

Boiled down to its most base level it’s about access and in this instance the barrier to access that the proliferation of skin-based touch devices brings with it. I’m specifically talking about touch devices that require skin to work.

[...] Barriers aren’t new to me and neither is finding ways around, over or through them. But what’s different is the pervasive nature of “touch” technology of today. Here’ an exercise, try and find a laptop that doesn’t use a touch pad or that has an alternate input method.

He goes on to write about possible solutions and existing experiments. More than anything he encourages us all to think about accessibility even further at the design phase from both the hardware and software front. This is not to say that touch technology is ineffectual or does not have its place, but we need to recognize that it remains an open challenge at being truly accessible.

Beth Tauke of uiGarden.net recently posted a pretty complete article on universal design’s rising momentum in the global marketplace. Admittedly, universal design has been around for over twenty years, but as the writer points out:

“Recently, universal design has been cropping up in places in which it would have been unwelcome twenty years ago. The term is now peppered throughout design firm websites, product websites, and design magazines….”

The article cites various reasons for this shift, including:

1. World demographics are changing
2. World economics are changing
3. More societies throughout the world are valuing human diversity
4. Major corporations are developing ad campaigns that foster ease of use and inclusion
5. Mass customization is making it easier to develop universally designed solutions

It’s great to see that universal design is gathering more traction, but surprising to me that it took so long. This is often the perspective taken with many advancing social changes which this is for many. As more and more agencies and governments push accessibility as the law and companies recognize the advantages of designing for all, among the other factors mentioned in the article, universal design may finally become a fixed standard that everyone needs to fulfill.