Summary: In order to have a successful site, you must consider the user’s experience and meet their expectations. This can be a daunting experience, especially for new web designers, but here are 10 unwritten rules of web design you should follow for your site to be considered a top contender in its field.
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 touchpoints, 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.
Unwritten Rules of Web Design (and Why They Work)
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 company insignias. 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. Navigation Is Along the Top (or Sidebar)
Among the most important features of navigation is easy access deep into the site. Users want a simple, easy-to-understand way to find what they’re looking for. The more you make them dig, the less likely they are to use your site.
Liori Diamonds offers several layers of navigation to visitors, but most prominent are the product categories, which feature progressively more specific drop down options. Under those, breadcrumb navigation leads them back through higher levels of the site.
By placing your main navigation in a consistent and predictable spot, users know where to turn when they want to jump somewhere else, or work their way back through broader sections of the site.
Include a Search Bar within Your Navigation
Notice the way this is handled on CJ Pony Parts. As one of the biggest online Mustang parts retailers, CJ Pony caters to casual browsers with topical navigation. However, many of their visitors come to their site with a very specific part and model year in mind – and the search bar helps them cut to the chase with the least amount of effort.
5. “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 predictably at the end of the menu.
6. Videos and Audio Should Not Autoplay
Anybody who remembers a friend’s Myspace page in the mid-2000s should know better by now, but let’s just make sure everyone is on the same page with this.
When that video or sound starts playing, there are a lot of things that could go wrong. The person may be wearing headphones and the volume of their browser is different than the sound of their iTunes – now you’ve blown out your customer’s eardrums. Good job. Or perhaps the reader is viewing the website while at work and that autoplay video just made every face in the office turn and laugh at the reader’s embarrassment.
Either way, the first experience the user has with your site could be anger or humiliation, which isn’t good. Quite possibly, they’ll simply shut the tab as soon as they opened it, just to kill the sound.
If you have a video or audio clip on your website, just don’t make it start automatically, okay?
7. 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 interact 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!
8. Animated Objects Are Interactive
It may seem like I’m repeating myself, but really 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.
9. 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.
10. 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.