Get in touch

+44 (0) 28 9099 2882
deeper@fathom.pro

Fathom

Design patterns – your website’s new best friend

Design patterns – your website’s new best friend

One of the most abused phrases in the world of web design is “best practice”.  If the internet practitioner finds their viewpoint challenged, their nearest refuge is to claim it’s “best practice”.  This is often based on limited experience and doesn’t have a basis in fact, review or research.  So can we make claims of design best practice at all?

According to Nielsen, editor of useit.com and long time usability evangelist, there are four characteristics your website must display before it’s even competing in the game.  These are quick download, easy navigation, relevant content and frequent updates.  Based on over a decade of research and monitoring how people use the web, Nielsen has said that before you can even consider the more subjective and creative elements of your web presence, these four items are the price of entry.

If you haven’t those items sorted, then don’t read on.  Go and sort them.  Only when you’ve paid the entry price are the techniques below of relevance.

So let’s assume that objectively your website ticks all Nielsen’s boxes and you are seeking to make more subjective design decisions.  As well as being creative, complementing your brand, tying in your website’s look and feel with other materials, are there any other guidelines which will help you make good decisions?

The answer is yes – design patterns.

Design patterning is the discipline of reviewing design trends, particularly designs commissioned for a task, and making “best practice” assumptions based on what works and what doesn’t.  By their very nature some designs will facilitate more efficient task completion than others.  Design patterns span the online and offline words and are everywhere we look.

Notice how doors are typically seven feet tall, to let 99% of the population through without having to bend their necks.  Observe how the older style round door handles have broadly been replaced with horizontal bar door handles, or vertical bar door handles, as these make it easier to open or unlock the door.  By reviewing which designs let the majority of people complete what they wish to achieve, design patterning tells us that a door of height seven feet, with a horizontal bar handle is “best practice”.

On the web, you don’t have to get through a door, but you do have to fill in a contact form, use a site search function, or find and buy an item to purchase.  Let’s consider site search, are there “best practice” guidelines around something as simple as putting a search box on your site?  A text box and a button – how hard can it be?

In a study of 10 e–commerce websites, 3 shopping comparison websites and 2 search engines we found significant disparity and confused understanding of best practice.

What width should the box be?  If we are to decide based on task completion, then we would argue that it should facilitate the 90th percentile of search string length.  For the past five years, 3 – 5 word search phrases have been at least twice as popular as single word, double word, or 5 – 7 word phrases.  Based on English words averaging 5 chars + a space then we need to ensure our search box allows 30 characters.

What scope should the box embrace?  This refers to “how much of the site should the box search”.  Should it be context sensitive, or should it search the entire site all the time.  Again there was limited pattern throughout the research base, with some sites even being internally inconsistent.  The key pattern principles are that the scope should be consistent throughout, and if the user is to control the scope, it must be made clear that this is the case.

What should the box be called?  Happily most sites called the box “search” but others used “I am looking for”, “Keywords”, “Go”, “Find” and even “à”.  Even then there is disparity between what buttons are called, and whether the word “search” is placed inside or outside the box.

Should the cursor be “auto focussed” on the search box?  Again the answer is yes, if there are no other input boxes on the screen, and again too many of the sites failed this test.

So based on a simple review of 15 websites, we can assert that site search should use auto focus where possible, should allow for up to 30 characters, should make the search scope clear and should use the word “search”.

There are many other design patterns, established and emerging, on the web.  Use them to ensure that your site design decisions are strategic and commercially focussed; that they encompass not only Nielsen’s four quality points for entry, but that you build for task completion around established best practice.

Only when that foundation is laid will your web designers get most value from the creative elements of the process, embracing brand, colour, photography and broader design.

By Gareth Dunlop

CEO & Founder

Gareth formed Fathom in 2011 and has been in the business of design performance for over two decades.

Read more about Gareth

View more insights by Gareth

Would you like to read more of our insights regularly?

Receive our monthly insights newsletter
straight to your inbox

Latest from the blog

Our latest views and ideas

Our Cookie Policy

Find out more I accept

Like most websites, ours uses cookies to make sure you receive the best experience possible. These cookies are safe and secure and do not store any sensitive information. To continue, please accept the use of cookies.