Need a refresher course on rudimentary rules of the web? You’re not alone. (Believe me … I’ve seen virtually everything.) Here’s an important list of dos (and don’ts) to make life easier for your users.
Navigation – Think hierarchy.
Content is king. Your primary navigation should be logical groupings of the principal content on your site and should never change. The secondary navigation should be of the same level of relevance across the site.
Try to think like your target audience might think. Should Play-Doh be grouped with model cars or molding clay at the toy store? Just because model and molding are near each other alphabetically, don’t lump them together.
And yes, you always need to include a link to home. The name or logo for your brand/site should be a link to home, but it
never hurts to have the words spelled out, too.
Language – Carefully choose your words.
If a team spends an hour debating whether to use “Buy now” or “Add to cart,” it’s because those two meanings can be very different depending on your context and audience. Don’t use industry-insider terminology when your audience is not familiar with your business.
White Space – Use it.
Your eyes are drawn to clusters. Without white space, there are no clusters. Your eyes cannot easily find a place to rest, which can be agitating. Your viewers would rather leave your site than wade through visual chaos, even for the deal of a lifetime.
Links – Clearly indicate them.
Any text that is a link should have some indication of it being a link. Here’s a novel idea: make it blue. Your regular body text is blue? Then underline it. There you have it folks, that’s how the majority of people have identified something as a link, ever since 1995.
Does changing the text on-hover count? Sort of. While it is helpful to have text change color/size/weight on-hover, how will your users know the text is a link in the first place? Most people don’t run their cursor over each word as they read, then joyously happen upon a link. Changes on-hover should be used in conjunction with links that are distinguished by color/size/weight/underline. Think of those who only see two or three colors or only shades of gray. You should be giving them some indication of what is clickable.
If your brand guidelines forbid different colored or underlined links, another option would be to put a link symbol in front of the text.
Font – Choose a readable font.
Not just the style, but the size. The trend a few years ago was to use a 10pt font – it made sites look cleaner. More white space is better, right? Not at the expense of losing one-third of your users. How many people do you know with perfect vision? Do they like to squint and lean in to their screens, or will they go to a different site? Use a larger font, and make your content concise.
Buttons vs. Text Links – Know the difference.
Use buttons for taking action, sometimes staying on the same page (e.g., submit, share, buy now, etc.).
Use text links to go to a new page, either within your site (internal) or offsite (external). When you are using those text links, don’t forget to use the words in the sentence as the natural link. Which of the following is correct?
- I took a poll last year to find out how many people were using links wrong.
- I took a poll last year to find out how many people were using links wrong.
- I took a poll last year to find out how many people were using links wrong. Click here to see it.
Number 2 and only number 2 is correct.
Learn the why and how of links and buttons at It’s Tired in Here.
Consistency – Maintain it.
Remember the book Who Moved My Cheese? Don’t move people’s cheese.
Users are willing to do a little bit of learning when they visit a new website. But once they know what to expect, stumbling across a differently formatted navigation menu, or one that disappears altogether, can send a person running.
Top 1999 Throwbacks
It’s hard to believe, but I’ve seen each of these rule-breakers in the past year:
5. Marquees
Scrolling text is annoying, distracting and hard to read.
4. Stop blinking at me!
Unless inducing seizures is one of your strategic goals, just don’t.
3. Weather widgets
Hey, bank websites: I don’t come to your site to check the weather. Never did. Never will.
2. Opening a new window (or browser tab)
Unless you clearly state somewhere near the link itself that you are going to open a new window, I’m going to be irritated.
1. Auto play music
STOP.
