When designing a website, it’s easy to get absorbed by new design trends as you scroll through Dribbble. Although throwing every design trick in the book at your UI (User Interface) might make it portfolio-worthy, is your solution actually what’s best for your audience? When designing for the average website user, there are a set of unspoken rules every designer should follow. These are known as design standards.
For the most part, yes you can, but your main focus should be on your user. When visiting a website, they will have certain expectations. If these aren’t met, you may find your users will grow frustrated and worst case, they'll leave. Design standards are there for your own benefit, and can help websites provide their audience with a positive user experience.
No way, these guidelines merely ensure that your website is easy to use. The rest is up to you.
In fact, it’s important for your site to stand out with a clear style that fits your brand. This should be consistent across every page, so that users know where they are, and who you are, at all times. One way of ensuring consistency is by using a design system, allowing you to keep track of your colour scheme, typography, and spacing throughout.
When it comes to designing your website, however, here are five things to keep in mind…
Most people know what it’s like to head into their local supermarket and find that the milk isn’t in its usual spot. It’s frustrating, right? Well, that’s how users may feel when your website doesn’t meet the standards for design. Looking at the websites of successful brands, they share quite a few things in common. For example, there’s almost always a logo in the upper left corner, and you can find some form of navigation at the top of the screen. Less important links, such as policies, are often found right at the bottom. This isn’t by accident. Though your colours and fonts may be unique, users should be able to easily navigate your website using their past experiences alone. In order to improve user experience, keep your metaphorical milk in the dairy aisle.
In addition to making sure everything’s in its place, you should ensure you’re using the right language; there’s a reason why certain UI elements have specific names. For example, we use terms like ‘bin’ for a place to delete your files, or a ‘basket’ where you can put your virtual shopping. These terms are commonly used both on-and-offline, so the average user should have no problem understanding them.
Let’s take a look at Amazon and eBay, as an example. Their websites are distinctive in style, yet we see certain terminology repeated: carts, deals, categories, and ‘sign in’ options. It saves users a lot of time and effort if they don’t have to translate your unique terminology. Instead, stick to what’s tried and tested.
The use of terminology extends beyond buttons and navigation bars. Error messages, for example, shouldn’t be threatening or accusatory. Your user should feel as though they are still in control, and suggestions should be given on how to resolve the issue.
This also extends to forms. Whether it’s to make an account, subscribe to newsletters, or sign up for emails, it’s vital that these forms are clear and accessible. Being able to scan through the options with ease provides the user with a better experience, and one way to achieve this is through stacked patterns. These allow users to read the form in a more natural way. Of course, not all fields will be required - this, too, should be apparent to the user. Optional fields should be clearly indicated in the accompanying text.
Your website may now look perfect on your desktop computer, but what about mobile phones? Or tablets? Nowadays, you can pretty much guarantee that your users are visiting your website through a variety of devices. Your UI is not a ‘one size fits all’ design, and scaling up and down must be considered. Your fonts may look great on your computer, but chances are they’re illegible on a mobile:
What works for one device is impossible to read on another.
Scaling is also important when it comes to the general scope of your website. If you’re a small business, chances are you can get away with putting every page in your navigation bar. However, if we return to a company like Amazon the UI is very different. To make it easier for users to find what they’re looking for, you’ll have to sort your pages into clearly defined categories. As they look for milk, they can skip past all of the vegetables, cereals and cakes with ease, preventing any confusion. Not only are your users happy, but your website itself looks clean and uncluttered.
Now that your website has a clear style and is beautifully laid out, you want everyone to see it, right? Then it’s best to make sure you’re following accessibility guidelines. At least 2.2 billion people in the world are visually impaired, plus the 300 million who have some form of colour-blindness. That’s a lot of people who may not be able to use your website.
Make sure that your colour scheme is easy to read, and that your fonts are of a decent size. If you use colour to denote further information, make sure this is clearly expressed for those who can’t tell. A good example of this is when a button turns green to inform the user of a successful interaction - it might be useful to add textual reassurance as well. That way, everyone can enjoy your creation. A great place to ensure your website meets these standards is the World Wide Web Consortium.
You should now have a beautiful, cohesive, and fully accessible website to show off to the world. Your users should be at the heart of your design, and their experience is paramount to your success. As your brand grows and your style changes, remember to keep design standards in mind, and in turn your users will have the best possible experience. Oh and for God's sake, don't move the milk!
www.who.int, www.colourblindawareness.org
