7 Web Design Conventions You Should Never Break

Don’t make them think. This is the key to successful web design. Today, a great website is one that feels familiar the first time a user browses through. Navigating from page to page is effortless, information is straightforward, everything does what it’s expected to do, and users can find exactly what they’re looking for quickly and confidently.

How do you create this type of user experience? By building on the knowledge that web users have acquired through years of browsing through websites. Web conventions are your friends because they speak to your visitors in a language they can easily understand. Familiarity makes happy web users. While innovative design may be appealing on the surface, it’s a disservice if visitors are becoming confused or frustrated by unfamiliar elements and abandoning your website.

This doesn’t mean you have to churn out the same boring web design over and over again. Innovation in web design is great! What it does mean is that you shouldn’t sacrifice the advantages of convention merely for the sake of innovation.

Here are 7 web conventions to adhere to when designing a site:

1. Logo Placement

Logos are typically placed on the upper left of the page. When there are multiple windows open on a user’s computer or a user is browsing through various pages on your site, consistently having the logo on the top left lets them know that yes, they are still on your site. Say a user is searching for a job and has been searching through various companies career’s pages and application forms. Having the logo where the user expects to find it will help keep all the different windows in order.

2. Main Navigation

The Main Navigation should appear in a bar across the top of your site. This convention is another that, if broken, may frustrate users. In the same way we look at a street corner to find signage in most cities around the globe, we look to the top of web pages to figure out how to get around. There is nothing more frustrating than feeling lost – on streets, in stores, and on sites. If directions are too complicated or not there at all, users will become discouraged and leave your site.

3. Link Styling

Clicking links has become second nature for web users. Users want to know instinctively what’s clickable and what isn’t – as soon as the rules are broken, it becomes confusing and forces users to think. It’s like driving a car in England if you’re an American – driving has always felt second nature until the rules change. A classic link appears as underlined text like this. Text in a different color and underlined text can also signify links. This means you should not underline words that aren’t links, and avoid using different colored texts for non-links. There is no real benefit to getting fancy with links, so sticking to the convention is your best bet.

4. Button Functionality

A button is a great feature to include in your web design because they are extremely intuitive. They look clickable, making it clear that you should, in fact, click them. What does this mean in terms of convention? Be sure that all buttons actually link to something. A button that doesn’t cause anything to happen will be confusing to users.

5. Standard Icons

Icon conventions are particularly useful because they provide a clear explanation without words. An envelope icon signifies email, a shopping cart or bag icon signifies the checkout page, and social media icons signify social sharing. But icons only work if they are common enough that no explanation is necessary. Replacing a shopping bag icon with a rainbow may get points for originality, but your users will most likely be more than a little confused.

6. Visual Hierarchy

We encounter visual hierarchies dozens of times per day: newspapers, billboards, invitations, even cereal boxes use this hierarchy to let us know what to read first, which information is the most important and what comes next. We don’t realize this is happening because we are so accustomed to this convention. Using visual hierarchy on your webpage brings readers back to this familiar structure. Processing the page becomes almost automatic and users know where to go. Losing this hierarchy is only going to confuse viewers.

7. Clear Naming

With so many companies competing for attention on the web, it’s important to use creativity to stand out. But all too often, creativity sacrifices clarity. Cute and clever naming is fun and catchy, but remember, users want information first, cute second. This mistake is often made on careers pages. Any job searcher will know that a button with the word “Jobs” will likely lead to a page that lists available positions. But “Jobs” sounds boring. “Jobify My Future!” is more creative but it’s not as clear. Will this link to employment opportunities or an educational program or something else? Again, there is room for innovation, just keep your users in mind.

As Steve Krug points out in “Don’t Make Me Think”, designers feel they have been hired to produce something original: “Praise from peers, awards, and high-profile job offers are rarely based on criteria like ‘best use of conventions’.” However, breaking conventions is not an effective way to be innovative, unless you really know what you’re doing. Keep your users happy and they’ll keep coming back. Now that’s a convention worth sticking to.