The Top Unwritten Rules of Web Design (and Why They Work)

Creating a webpage is difficult. Paradoxically, it needs to be exciting and innovative, yet familiar and easy to navigate, both at the same time. Luckily, a set of unwritten rules has been developed over the years to help guide our viewing experiences. This means that your design can employ a completely innovative interface, but by incorporating a few familiar touch points, users should still be able to use and navigate your website with ease.

Well, now the unwritten rules are written. I’ve put together a set of ten rules to give your users what they expect while still enjoying the freedom of being inventive.

1. The Logo Is in the Top Left

Your logo needs to be on the site, that’s a no-brainer.

The customary place for the logo is the upper-left corner. Otherwise there are problems. Logos can be front and center on a landing page, but not everyone will enter your website through the homepage. Where does your logo live on inner pages? Some people try to tuck it neatly into the footer, but it has low visibility below the fold.

Consider YouTube. You would expect the logo to be plastered everywhere, I mean, it’s YouTube! However, you really only see it appear in that upper-left corner, where we’re used to spotting a company’s insignia. If done well, your branding can be both simple and effective.

2. The Login Is in the Top Right

This is effective for a few reasons. First, it’s easy for users who already have accounts to find and log into the account. They’ve been conditioned to go to the top right to sign in. Secondly, it shows that there is more to see and explore on your website. This can be a crucial step for improving your bounce rate.

Take a look at Bucketlistly. While they feature a “Sign in with Facebook” button in the middle of the page, they still follow the conventions and offer a sign in/sign up in the top right corner. While new users might look to the center of the page to learn what Bucketlistly is and how to use it, those familiar with the service will be looking to log in and get to their dashboard as quickly as possible.

3. Include a Search Option Alongside Your Navigation

Notice the way this is handled on Quality Overhead Door. They include a magnifying glass icon in the top right corner but leave enough room for the other navigation features. The icon expands into a popup for optimal view once it’s clicked on. This sleek website provides a universal symbol to showcase a desired feature on every website.

4. “Contact” Is Last in the Navigation List

Much like “About,” the “Contact” section of a website is both important and expected. However, because the first spot in the rotation was already in use, it became popular to list “Contact” last.

Less Films’ website is a great example. Even though they have swapped the traditional navigational words like “About” and “Contact” for the more conversational “Who We Are” and “Let’s Talk,” the contact page is still predictable at the end of the menu.

5. Animate Interactive Objects

Especially with the improvements of HTML5 and CSS, there’s no reason that interactive objects on your site shouldn’t be animated in some subtle way. If you have a button to click or an element to highlight, there are many options available to make the interaction opportunity obvious. Give your Twitter and Facebook buttons a hover state. Let me know where I can click!

Webdesigner Depot is the epitome of this done well. Their site is really entertaining to browse because virtually anything you can interactive with animates on hover, or reveals something interesting. Here are a few of my favorite details:

The logo redraws itself when you hover over it. (This re-imagines the fun hover animation in their old design, where the logo did a somersault on hover.)

Category names link to the category pages, and the changing text on hover makes this very clear. For example, “Design” changes to read “Click to see all Design posts.”

Rolling over the number of shares reveals the share distribution across different social channels (and gives you an option to share right then and there!).

I am just in love with the ways you can interact with WDD’s site. Bravo!

6. Animated Objects Are Interactive

It may seem like I’m repeating myself, but this is a different idea. If an object on your page is animated, it had better be interactive in some way. Imagine how frustrating it is to hover your mouse over something that highlights, expecting a link to take you somewhere else, and then discovering it’s not a link at all. What a confusing disappointment.

7. Logo Links to Homepage (& Maybe a Home Button Does, Too)

If all else fails, your viewers need a reset button. Regardless of how deeply buried in your page a reader is, it should be easy to return back to the home page.

Many websites accomplish this through the top-left branding logo. Some prefer to actually include a button labeled “Home.” There’s some back and forth on whether that home button is necessary or not, but in either case your visitors need a reset.

As you can guess, no matter where you go on the site, clicking Inkscape’s logo will return you to the main page.

8. Keep Help Close at Hand

If your users get lost, have trouble with a purchase, or can’t figure out what to do, you need to throw them a lifeline! You can do that by linking to your support page, or you can include contextual tooltips at different stages of the process.

You can also offer a skippable tour that introduces users to the main features of your web app before letting them loose to help guide their learning process.

Buffer has a “Help” menu at the very top of their website, with a variety of options for getting help. Users can contact Buffer through a contact form, tweet them, read through frequently asked questions, add desired features to a wishlist, and view a list of known bugs.

As a bonus, Buffer doesn’t just present you with a contact form – based on past trends, they estimate how long it will take to get back to you. Now that’s user-friendly!

The more intuitive your website is, the more likely it is to be a powerful tool in attracting new readers or customers and creating new transactions.

9. Add Detailed Contact Information

Once users land on your homepage, 64 percent of people expect to see contact info and 44 percent leave if they can’t find a phone number. Place contact info in an accessible location and include more than one method of contact, such as email and a phone number. Users should know who you are, where you are and how to reach you.

If users don’t see a clear way of contacting you, they may feel reluctant about ordering. If something goes wrong with the product, who will help them? Clear contact information adds an element of reliability to your website. Gaining the trust of site visitors is challenging, so remove this doubt from their minds.

 

Weifield Group Contracting does electrical work and adds a button to its navigation bar showing users where the contact info is. Once the user lands on the contact page, the company presents multiple ways of getting in touch, including address, phone number, a 24/7 service department number and email. Contact info appears by purpose, such as seeking employment or needing an emergency contractor.

In a service-based field, such as electrical contracting, offering clear information for immediate contact is vital.

10. Navigation Goes Near the Top

When users land on your page, they use your navigation bar to orient themselves with the features of your site. As a rule of thumb, navigation goes near the top of the page. Even if you place the navigation in a sidebar, it still needs to appear near the top. As a bonus, be sure to include a search option so visitors can find exactly what they’re looking for.

Keep the wording clear and don’t try to be cutesy with the language. It’s better for site visitors to understand where the different elements of your site reside than trying to guess.

11. Navigation Can Also Go at the Bottom

Even though navigation goes near the top, it also should repeat near the bottom of the page. Add basic navigation to the footer and leave a trail back to the home page and other main areas of your website. Navigation appears in both the header and the footer of the page on sites with natural navigation structure.

 

Boost Mobile offers navigation both at the top and bottom of its website. The info repeats on every page, giving users a clear navigation structure. If a user leaves a page and realizes they want to go back, they can easily find where they were previously by following the links on the page.

12. Mobile Responsiveness Is a Must

Around 61.2 percent of people accessed the internet via their smartphones in 2018, and that figure should rise as the number of smartphone owners globally goes up to 2.87 billion by 2020.

When designing, keep in mind how many people might access your site via a mobile device and plan accordingly. Keep all elements on the page responsive to screen size changes.

13. Aesthetics Matter More than You Know

Users decide whether or not your site’s credible based 75 percent on the overall look of your design. If your website isn’t visually pleasing, it looks unprofessional to the average visitor. Establish trust with the consumer with the design by sticking to elements such as enough white space, a color palette that makes sense and a usable layout.

American Airlines’ website has plenty of white space, so the user’s eye tracks toward elements such as searching for a flight. The background images on the site change related to the current season and what types of travel people are currently interested in.

14. Include Clear Calls to Action

A CTA draws visitors toward the action you want and funnels traffic into the sales channel. The design of your CTAs and their placement on the page impacts your conversion rates, though.

Every aspect of your CTA impacts your bottom line, including the color of the button, how it contrasts with the overall look of the design and the wording of the text itself.

The best way of creating a powerful CTA is testing and then testing again. Make a change, such as the wording of the button, and then do some A/B testing to see which version is more effective. With a little work, your CTAs become a powerful tool in collecting information from site visitors and turning them into customers.

That isn’t to say every well-designed website will follow all of these rules. Ultimately, you need to make the final call on your design. But giving the user familiar navigational patterns, especially in the midst of an innovative design, is a great way to instill trust and understanding in your audience.