Why usable website design is important for your viewers

usable website design

Since the digital world is forever moving on, it’s important to include usable website design within your online presence.

Search engine algorithms force modifications on how websites are created and used. Also people’s tastes change with fashions and social expectations.

But if your website design is still languishing in the last decade (and even before that!), it may be necessary rather than desirable to update it.

The Infographic below shows you what you need to be aware of to have successful usable website design:

Why usable website design is important for your viewers

And here’s some code you could paste into your own posts (via the text mode) if you want to share this Infographic with your readers.

What are the modern features of usable website design?

Responsive phone

Being responsive

Your website needs to be readable on a small screen. Even if you think your website users are unlikely to view your website on their tablets or smart phones.

It is the search engines that have enforced websites to be ‘responsive’. Failure to comply with this means the algorithms threaten to penalise websites which aren’t using a responsive theme, or adapted for small screen viewing.

More white space

A usable website design that has lots of white space makes it much easier to direct a viewer where they need to go. This includes line and paragraph spacing, as this can ease the reader’s eye to the next line as they scan down the page.

Spacial fonts and sufficient padding around images allow the design to breathe. White space brings emphasis to particular features, such as images or buttons.

White space also adds balance, provides proportion and offsets contrast, as well as increasing elegance and quality within the design.

Responsive tabletMoving sidebars

Because websites now have to be responsive, this means the sidebars and their contents are pushed below the main content on a small screen. As a result some designs have abandoned using sidebars on their main pages, particularly the homepage.

The content usually reserved for sidebars is now incorporated within the homepage design, activated by triggers or strategically placed for maximum impact.

Sidebars tend to be used for internal pages such as blog posts. These should contain call to action features that are more fluid and transitional. Some themes even allow specific content to appear on separate relevant page sidebars.

Taking you on a journey

Modern website pages are not restricted in length. The usual grid structure seems to have been dissolved. The content appears to flow down almost indefinitely.

Therefore the most important message needs to be placed above the fold to explain exactly what the website is about. This needs to inform, educate and instruct the viewer about the website’s purpose or subject within only a few seconds.

Certain elements only appear if the viewer scrolls down. Therefore your readers need to be suitably coerced or encouraged to venture further to see what’s next. And the process should be exciting, compelling and intensely relevant in order to be successful.

The bigger the better

big products

Important elements aren’t squirrelled away within web design, they are encouraged to come out with all guns firing. Product images, testimonials, call to action features, videos, even blog post visual links are made as prominent as possible so the user can’t fail to notice them.

Since modern themes are veering away from using sidebars, these elements need to be strategically placed within the design. Their positioning should be relevant within the viewer’s ‘journey’ as they progress down the page.

Usable website design should be all about encouraging the viewer to do something you want them to do. This is particularly apt for the homepage or any other specific landing page a viewer might be directed to.

What are the practical elements in usable website design?

Suitable typefaces

Modern usable website design is not afraid to go big. It is all about clarity and ease of use, so having a large font for your content is much more comfortable for the viewer to read. Usually 14pt to 16pt is the accepted norm, with headings being much bigger (suitable to catch the eye of the skim reader).

Typefaces

Fonts or typefaces should also use clear sans serif examples, and many more are now becoming useable within different browsers. Avoid using a ‘fancy font’ because you like the way the letters curl or loop, they are notoriously difficult to read, especially at a glance. Serif typefaces fare better when used for headings, as they portray a sense of authority.

Think about how your words sit within your useable website design. Columns that provide shorter line length are more suitable for newsy blog posts. Whereas a more leisurely-read article can afford to be wider, entwined with accompanying imagery.

Pretty pictures

Background imagesImages are not just confined to being dotted around some text to break it up, or even to clarify the subject better. Modern usable website design takes advantage of large and responsive background images that say more than the content with it.

It is particularly true for the 5-second rule of a webpage. A highly relevant picture can deliver the message or aid recognition of its subject or the product or service promoted much quicker than words. It is more likely to capture an interested viewer and make them stay.

However, web-based images need to be suitably optimised with low resolution for quicker downloading times, and to reduce the amount of server space they take up. There are plugins available that reduce image impact further to increase the viewer’s experience of your website.

Colour contrast

There is a world of psychological pointers about the use of colour on your website viewers. There are many interpretations about which colour evokes an emotion, or triggers a reaction, or stimulates a subconscious message to your readers.

Whichever colour you choose, make sure you take advantage of emphasising contrasting text and background. Books use black text on a white background because this is extremely legible. Carefully use colours so the contrast stands out where needed, such as button colours against the design’s main colour scheme.

Contrasting colours

Finding your way

Every usable website design should have excellent navigation. It’s main purpose is to direct the user to where you want them to go, quickly, easily and within up to 3 clicks.

Navigation should be immediately obvious, instantly recognisable and positioned where the viewer expects it to be. The design shouldn’t diverge with vertical navigation in a strange place or the tabs integrated within the content so the viewer has to search for them.

Breadcrumbs allow viewers to retract their steps if they have got lost, or to find the homepage again. This is particularly so for large and rambling websites.

Call to action buttonCall to actions

Buttons are much more likely to be clicked on if they contain a compelling call to action combined with an incentivised and contrasting background colour.

They need to look clickable. The button image should be designed so that it is asking to be ‘pushed’. The message inside needs to say exactly what the button is for, what will be provided, or what the viewer should do. The word ‘submit’ is definitely not applicable here.

What are the niceties of usable website design?

Usability and consistency

Simplicity is always key to usable website design. It should be clear what the website viewer needs to do next, once they have decided to stay. The information needs to be distinguishable and the tasks achievable for any action to be carried out.

Blog posts gridThe design needs to be well laid out, with features instantly recognisable, large and relevant. There needs to be sufficient white space between the features to help draw the viewer’s eye to where you want it to go.

Consistency also aids understanding, because it reduces unnecessary clutter that could divert attention elsewhere. Regular headline sizes, font design, colour use, button styles, spacing and even good spelling and grammar in the content can make a difference.

Purpose and communication

A useable website design should cater for all its viewers’ needs. All the elements need to be where they are expected to be (convention is there for a reason, because it has worked in the past). Avoid making your viewers think to get what they want, because they probably won’t bother.

Do you really know what your website is for? An impertinent question, sure, but there are some websites that have no direction, aren’t clear about their purpose, and are therefore confusing to the viewer that lands on them.

Think how you communicate with your viewers. Make your content easy to read with shorter sentences and a more conversational writing style. Focus on what’s in it for them, not what you want from them.

Distractions and eye movements

F pattern

A usable website design needs to accommodate how a viewer looks at it. Research has shown that people look at a website in an F pattern – across the top, down the left side and maybe an extra bit across in the middle.

This means your most important elements need to be placed within that F pattern. For example, put your logo at the top left, with the navigation following on after it on the same level.

It also means that anything placed on the right side is usually secondary, like the contents of a sidebar. However, don’t litter your website with distracting, moving, garish adverts or pop-up promotions. Too much extraneous information that is additional to the website’s purpose can be annoying and off-putting, driving your viewers away.

Now it’s your turn to let me know your opinions or observations about this post in the comment box below.

  • Do you agree or disagree with what I’ve said?
  • Have I have missed out any elements that I should have mentioned?
  • What is your experience of good or bad usable website design?

I look forward to receiving them!

This blog post is a part of Design Blogger Competition organised by CGTrader.

The following two tabs change content below.
Alice Elliott writes the award winning Fairy Blog Mother blog for beginner and post-beginner bloggers to “explain things really simply” about blogging and WordPress. She provides simple, easy to understand, highly visual courses and tutorials using ordinary, everyday words. Visit her new Beginner Bloggers blog to find her latest learning resources.