Chapter 1 Contents
- At Minimum, Include Logo + Nav Menu
- Left-Aligned Logos Increase Brand Recall
- Logo Position
- Right-Aligned Logos Aren't "Unique"
- Innovative Designs Confuse Your Users
- Center-Aligned Logos Hurt Large-Device Users
- Center-Aligned Logos are OK for Mobile
- Menu Labels
- Use Clear, Industry-Standard Menu Item Labels
- Label Color Contrast Should Be Easy to Read
- Include Only Relevent Menu Items
- Got Tons of Offerings? Use Mega Menus
- It's OK to make Multiple Menus for Multiple Devices
- Icon-Based Navigation
- Hamburger Menus
- Excessive animations
- Audience-Based Navigation
- Demanding too much precision from users
What makes a good website?
Let's start at the top.
The part that loads first, and that users see first.
What are your visitors' first impressions?
Does your site feel modern, organized, and clear?
Or does it come across as outdated, messy, and confusing, and --
-- wait, did it even load in time?
Site abandonment goes up significantly after 3 seconds.
Users are trigger-happy with the back button.
Thankfully, there are reliable ways to ensure that we not only enjoy fast load times, but also design our website in a way that reliably maximizes revenue.
That's not to say there's a single best design, and that the mystery is solved.
Because that's not the case -- there is no single best design. And that's why we A/B test aggressively.
Though there is no one-size-fits-all, there definitely are good web design patterns, and bad web design patterns.
(We define "good" as "more conversions / sales / leads / appointments / newsletter sign-ups / etc.")
My goal is to prove to you that every single website "design" choice, can be explained with usability research and reasoning, rather than "creative talent" or guesswork.
Web design is not a guessing game. It follows well-defined principles of usability.
And that's a good thing, because it enables consistent results.
Let's get started.
At Minimum, Include Logo + Nav Menu
There are only 2 basic requirements to have an effective top menu.
- Company Logo
- Navigation Menu
Let's start with the company logo. Where do we put it?
Do we even need to analyze this?
We want websites that convert as much as possible.
More Conversions ==> More $$$
Whether your conversions are direct sales (ECommerce), or lead generation (B2B and B2C), conversions are how we make money.
Conversions are always the most important KPI for any website whose goal is to maximize revenue.
You will see that there is a right way to design a website, and that there are many wrong ways to design a website.
Let's get to the data.
Left-Aligned Logos Increase Brand Recall
There are three possible places we can place a logo: top-left, center, or top right.
Which location is the right one?
Putting your company logo in the top-left yields an 89% increase in brand recall.
You probably already thought that logos must be best in the top-left position. After all, most websites put their logo in the top left.
Let's look at the data, from a great study courtesy of Kathryn Whitenton of NN Group:
Kathryn first performed analysis of websites with left vs. right-aligned logos. She measured:
- Brand recall
- Perception of a brand as unique or stylish
To measure (1) brand recall, Kathryn gave users versions of the same websites, but with horizontally flipped locations of logos (and menus attached to them, in cases where that applied).
Users were then asked to recall the hotel name.
128 users were included in this test.
Here's the A/B test:
Version A has the logo on the left, Version B has the logo on the right.
In ALL cases, Kathryn found that users were "significantly more likely to recall the hotel name" when the logo is positioned on the left, instead of the right.
|Logo Position||Average Brand Recall|
Let's stop for a moment, because even more important than brand recall, we've just observed a key fact of web design:
Every design decision can be supported (or vetoed) with data.
Logo placement is a very simple issue, both in terms of design work (where does it go?) and developer work (how do we code logo alignment?)
And yet, despite the simplicity, if we perform our due diligence and make the right choice, we will enjoy an 89% boost in brand recall just because we did our research.
Remember what I said earlier?
Web design is not a guessing game.
Stick with this guide, and I'll keep proving it to you 😊
(Obligatory: Yes A/B testing is somewhat of a guessing game, we'll get to that in an upcoming guide.)
Right-Aligned Logos Aren't "Unique"
Now, I know that you already knew that website logos most likely belonged in the top left. After all, pretty much every multibillion-dollar company website you use (Amazon, Facebook, Google, etc.) places their logo in the top left.
So why do some websites put their logo in the top right?
Basically, it's because designers want their website to stand out from the rest. That is, they want a style advantage that stems from their unique layout. We now know that this style advantage comes at the cost of a functionality advantage (brand recall is hurt).
But wait -- is there even a style advantage?
"There were no statistically significant differences (according to a two-sample t-test) in how people rated the hotels with traditional left-aligned logos, compared to the ‘unconventional’ right-aligned logos. In fact, in most cases, the left-aligned logos were rated slightly more ‘unique’ and ‘stylish’ (though again, these differences were not significant."Source: NNGroup
There's no style advantage.
To summarize: if you aren't careful, you could end up making a design decision that not only fails to achieve your intended goal (a more unique, stylish website), but also hurts other goals unintentionally (brand recall).
Innovative Designs Confuse Your Users
But it's true.
If you read no other sections, please read this one.
I'm going to tell you the #1 most important usability rule.
This really is the most important rule to web design, because it's a rule about design (and psychology) in general.
Here it is,
"Jakob's Law" :
"Users spend most of their time on other websites.
This means that users prefer your site to work the same way as all the other sites they already know.
This Law is not even a future trend since it has been ruling the Web for several years. It has long been true that websites do more business the more standardized their design is."
Like any valuable insight, this is almost deceptively simple. Let's unpack it.
"Users spend most of their time on other sites."
Us web developers spend so much time on our websites, that we can easily forget that users are spending the vast majority of their time on other websites.
"This means that users prefer your site to work the same way as all the other sites they already know."
Here's the juicy part.
There are 2 main things to learn here:
1) Users' expectations of how websites work and are laid out, are already formed. Designers have to work around existing expectations, rather than try to force new innovations upon them.
This is why the shopping cart logo is ubiquitous on ECommerce websites.
This is why brand recall increases when logos are in the top left.
This is why everyone knows that clicking a website logo in the top left, will return you to the home page.
2) Users understand all of these concepts BEFORE they visit a website. So when you deviate from expectations -- when you innovate -- you are actually confusing your users by asking them to learn a new mental framework.
And confusion never leads to sales.
This rule is the most important rule for design in general.
Think about things you use in your everyday life. Door handles are always in the same location vertically, and they pretty much always come in one of a handful of known varieties (lever, knob, or bar). You don't ever see a door that someone designed to be opened by pulling a string that's hanging from the top.
Innovation isn't inherently good.
Being unique isn't inherently good.
That's not to say that you can't innovate when it comes to the subtle nuances of design -- after all, everyone has seen doors that looked cheap and doors that made us wish we had them on our house. But we don't look at cool doors in awe because they innovated by replacing the traditional handle with a lever to be pulled from the top of the door -- we look at them because they used good materials, good colors, good textures, good spacing.
Similarly, we don't look at good websites and think they're good because they look nothing like the competition.
We think they're good because instead of using stock images, they use high-quality, relevant images. Because they have a crisp logo. Because their navigation is clear. Because it loads fast.
Good websites are good because they use regular components, with masterful execution.
Center-Aligned Logos can Hurt Navigation
Quick caveat: This only applies to large displays.
To recap, logos in the top-left of a website assist with:
- Branding: Consistent brand reinforcement on every page
- Navigation: Users click the logo to return to the home page -- all websites work this way, so users rely on it.
- Orientation: Lets users know where on the web they are. Websites often link to new websites, and seeing the brand logo in the expected spot serves as a powerful orientation tool.
But some websites put their logos in the center.
It can be tempting to toss your logo in the center. After all, the phrase "center of attention" exists for a reason, and who wouldn't want all the attention they can get?
Well, not so fast.
As I just explained, going against established design patterns tends to confuse users, more than make you stand out more.
Here's another study on logo position from nngroup, where they asked users to purchase an item and then return to the home page.
The key part of this study is the users' goal was to return to the home page at the end of their session.
". . . the ability to quickly return to the homepage is critical for users who become lost or simply want to switch to a different task or topic . . . The green highlighting on this clickmap shows where users clicked when they attempted to navigate to the homepage. Since the Koshka logo is centered, many users accidentally clicked the leftmost link Under $29 to get to the homepage."
The conclusions of their study:
Many users mistakenly assume the leftmost menu link is the HOME link when your logo is in the center.
If someone gets lost, they may leave, or forget what they're doing.
If your navigation is confusing, you can bet it costs you money.
Or every time you give your users exactly what they expect...
It's money gained. 😊
Center-Aligned Logos are OK for Mobile
The distance between the left corner of a mobile device and its center is small.
That's why centering logos is fine for mobile devices.
That covers all three logo alignment options.
Let's cover the navigation menu next.
Use Clear, Industry-Standard Menu Item Labels
Your site's main menu is critical.
Good menus have these qualities:
- Easy to see and scan
- Menu items are named clearly
- Menu items are relevant to common user needs
Seems simple enough...
And yet, I bet you'd agree with me that there are a lot of ways to do it wrong.
Because -- and I don't think this is a risky assumption to make -- you've been frustrated at menu designs before.
Ever seen garbage like this?
Can you guess what "Explore" actually leads to?
Yeah, me neither.
Don't use "cute" or "creative" names for menu items.
Users are not impressed by your abilities as a human thesaurus.
Users are impressed by useful content and services that meet their needs.
Takeaway: create good content and make it easy to find.
By contrast, here's and awesome menu:
This menu is beyond clear. Sure, it's a little dense -- but most of it can't be helped.
(These USC's are unrelated, by the way.)
A university of that size has several different visitor types, each with their own needs.
Here's a breakdown of USC's top menu:
|Menu Link Name||Visitor Need|
|Admission||High School senior who is applying to USC|
|Arts||High School junior from a private art-focused school, who wants to know if USC is right for them|
|Faculty||Newly-hired professor looking for a colleague's contact info|
|Parents||Parent of applicant who will be paying all fees|
|Students||USC Freshman looking for when Spring Break starts|
|Sports||USC Freshman interested in sports try-outs|
These menu link labels work because they're the words that their users use: admission, parents, students, sports, and so on.
No ambiguity. No creativity.
Include Only Relevent Menu Items
More is not always better.
When it comes to menu items, more is definitely not always better.
Not only does it obfuscate important links, but it also dilutes the "awesomeness" of your core offerings.
This is known as The Presenter's Paradox:
"What we think is happening, is that the presenter, who’s creating the bundle, and the evaluator play different cognitive roles. The evaluator is looking at the big picture, asking ‘How do I like this group of items?’ and looking at the components and blending them in a holistic way. In buying, say, a bedroom set, the bed is nice, the dresser is OK, and the set is somewhere in the middle. The whole is being considered and averaged. To the presenter, things are independent and they each add up in value."Source: The Presenter's Paradox
More is not always better.
And when it comes to site menu items, more is typically worse.
So tell me: does your menu have too many links?
Are you losing engagement because of it?
If you have more than 6 or 7 menu items, you probably have too many links.
There are rare exceptions to this rule:
- Universities who cater to undergrad or graduate students, parents, alumni, staff, journalists
- News sites that cover nearly any topic
- Ecommerce sites that sell nearly any product
Got Tons of Offerings? Use Mega Menus
For businesses who truly have more offerings than can easily fit into a single-digit number of links, Mega Menus are the solution of choice.
Here's one from AliExpress:
AliExpress is comparable to amazon in scope.
Mega Menus make sense for them.
To use their menu, the user clicks or hovers a "CATEGORY" on the left, and then the subitems appear on the right.
Fox News has a menu that is almost the size of a website, because they have so many subsections.
But let's be realistic: do you provide as diverse a selection of products as Amazon? Or cover the same breadth of content that FOX News does?
If yes: list out the broadest buckets you can, and make "mega menus" as necessary.
If not: identify the top 5-7 use-cases for your website, and make sure your top menu addresses them.
Examples of common menu items:
- Our Customers
These are more general, but each industry has it's own set of standard ones.
Look around on websites for lawyers, doctors, hospitals, software companies, and you'll see certain "jargon" associated with that industry.
Don't deviate from that jargon.
Keep your menus clear and concise.
Even Apple, with all their different products, services, and software, narrowed it down to only 7-10 total links, including the 3 icons:
Think about the most common reasons users end up your website, and make sure your menu addresses those reasons -- and nothing more.
Otherwise -- if you're a remotely specialized business -- keep your menu items concise and relevant, and your visitors will engage with your site more.
It's OK to make Multiple Menus for Multiple Devices
Developers love elegance.
(Though you wouldn't know it by how some of us dress.)
I think many of us try to write elegant code, and in this case elegant would be to code one responsive menu, that responds to screen size.
For complex menus though, that isn't always enough.
Let's take a look at how Amazon implements two different styles of menu to deliver an optimized experience to 100% of their users.
Amazon's Top Menu - desktop view:
Their top menu for desktop views can take advantage of the hover option.
Hover is unique to desktop devices and it offers opportunities to design around it.
Mobile doesn't have hover, so maybe a big menu would require a different design. And indeed, that's the case.
Amazon's Top Menu - mobile view:
It's totally different, because it is designed for a device that is used in a relatively different way.
Note: Amazon's desktop top menu works with hover, but if you click before it hovers, it takes you to a clicking-friendly menu that looks a lot like the mobile version.
Avoid: Icon-Based Navigation
Cover the eyes of any nearby children.
I'm about to show you a monstrosity.
Check this out:
What! The! F***! Do! Any! Of those icons even mean!?
I see the Hadoop elephant, and DB is some kind of Database, but the rest... holy smokes.
That is bad.
Users don't interact with things they don't understand.
Microsoft learned their lesson and replaced them with these:
Do your users a favor.
Always add labels to icons that you want users to interact with.
Here, Stripe uses icons with labels in a mega menu:
None of those icons would make sense on their own.
But in conjunction with the label text (and whitespace), it helps menu items stand out from one another.
Avoid: Hamburger Menus
Hamburger menus are technically unlabeled icons, but that's not their worst problem.
By now, most people do recognize hamburger menus.
The problem is that many people don't end up ever interacting with what's in them.
- Lower Discoverability
- Less Efficient
- Clash with Platform Navigation Patterns
- Not Glanceable
What's out of sight, is out of mind."Source: lmjabreau
Luis sums it all up nicely (the source article contains expanded explanations on each point).
When you hide your main menu items, your users don't know what's out there.
And they often never find out.
What if you HAVE to use a hamburger menu?
Here are some tips, thanks to an awesome experiment from Peep Laja.
"One of our clients is an ecommerce site selling scented candles.
We decided to test the hamburger icon, and came up with these challengers based on what other people had tested (we tried to innovate as well, but couldn’t come up with a totally new, better icon).
So we tested the usual suspects: the word 'menu' with and without hamburger.
Key outcome: All 4 treatments brought in more revenue than the control. Not clicks, engagement or other soft metrics. Dollars.
This outcome is worth an extra couple of hundred thousand dollars / year. Not too shabby for just switching out the icon.
This was the winner:
So what's the conclusion?
For those who have to use a hamburger menu, try labeling it as "MENU".
Avoid: Excessive animations
Animations are great and have their place.
But they should be used deliberately, and not just because we can.
I agree with this awesome observation by Sophie Paxton:
“It’s only natural that designers initially abuse new capabilities before a more sophisticated design language evolves. Anyone who designed for the screen in the late 90s and 2000s (web and CD-ROM) will remember incredibly overwrought designs which featured drop shadows, bevels, lighting effects and of course no consideration for white space. This was all a natural consequence of designers wrestling with a new medium and reveling in the glory of all those pixels!”
Wow, that interface brings back some memories.
It's a good reminder to not do something just because we can.
It's exactly as Will Smith raps in Lost & Found, "Well sure you're free to do it, but what it mean to do it. Did you mean to do it? Did you need to do it?"
Avoid: Audience-Based Navigation
Only use audience-based navigation when you're confident that the situation calls for it.
Otherwise, you risk asking your users to do too much work, or to be unable to figure out which "bucket" they would be considered to fit into.
- "Users don’t know which group to choose.
- Users question whether the category will have information about that group or for that group.
- Forcing people to self-identify creates an additional step and takes people out of their task mindset.
- Users feel anxious that the information they see might be incomplete or incorrect.
- Websites with audience-based navigation often have overlapping content, which creates a greater workload for users (and content maintainers).
Key Bank has audience-based navigation, but the difference between Private, Business, and Corporate is not clear. Where should the owner of a privately owned small business (that happens to be also a corporation) look for services?"Source: NNGroup
Remember, users are task-driven.
When we design menus, the goal is to make them understandable to our users who want to accomplish X or Y.
And if we want their business, we'd better make it easy to accomplish X or Y.
Avoid: Demanding too much precision from users
You know those menus that require surgeon-like precision?
Where if you go one pixel out of bounds, and you have to start all over again?
Remember, we want to make it super f***ing easy for users to convert on our websites, or engage with our web apps.
That kind of menu behavior is the opposite of easy.
One solution to this problem is to use a timer, but this can be clunky in mega menus.
Amazon implemented an awesome solution to this problem:
When the user moves their mouse to to click on something from the submenu that appears on the right, they enjoy a margin-of-error triangle where if their cursor moves into it, the submenu won't flicker to a new category.
This reduces the mouse precision users need to have to navigate.
Pretty slick implementation, and one that we can shamelessly copy to make it easier for users to navigate.
Good web design intentionally makes it as easy as possible for your users to get information, or accomplish a task.
Make your top menu user-friendly as possible.
- Put your logo on the left side. I would avoid centering it even in mobile layouts, because many mobile users still "know" to look to the logo on the lefthand side to use as a "HOME" button for navigation purposes.
- Innovation confuses users. Users have been using websites on mobile for 10 years, and on desktop for more than 20. Their expectations have been set by what they've already experienced. You don't want to add the cognitive load of understanding your incredibly non-standard layout.
- Use clear, literal labels for menu items. Don't deviate from the standard words your industry uses.
- Keep menus concise. Users don't see the sum total, they see the average quality of everything.
- Make sure your menu offers the best possible experience for that device. It's fine to code two separate menus -- don't feel pressure to write "elegant" solutions that make one menu work with responsive CSS alone.
- Mega Menus are usually not necessary, but when they're necessary, make sure they don't require surgeon-like precise mouse control. Allow some margin for user error when navigating through submenus.
- If you want a user to interact with something, you should give it a label. Unlabeled icons are confusing to everyone except the person who chose that icon.
- Don't add excessive animations to every interaction. Your user is here to get things done, not be your audience for your creative visual storytelling. Use animation tastefully.