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.
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.