Usability & Best Practice in Web Site Design

“Design over content”, “form over function”, “style over substance”… So here’s a thing… design is content, form is function and style is substance, or so they should and can be, in the hands of the competent author and designer.

Usability is all about crossing that divide between form and function and intrinsically linking them.  The aim is simple, make the whole greater than the sum of the parts. 

The hardest part of being a creative is learning restraint, a great designer is not necessarily a great artist and vice versa. A great designer is one who can accurately and precisely deliver content in the context of its media, in a way its audience can most freely use.

Design, as a wiser man than I once said, should be invisible to the user and be taken for granted. Often, we don’t notice good design, generally because things just work. The chair I’m sitting on as i type this is a perfect example of good design, I rarely stop to think about it. Day in, day out it leaves me somewhere to park, it supports my back and it spins a bit, so i can reach things with little effort.

You notice bad design all the time, I’d know about it if the back of my chair pushed me too far forwards, or the seat was sloped. I’d know about it every time I used it; soon enough I’d find a chair that worked better. Why would your poorly constructed web page be any different? 

Looking specifically at the internet, a confused navigation system is bad design, text that is too small is poor design, low contrast, horizontal scrolling in most cases, jumbled pages, bad links, poor tagging, poor display in alternative web browsers.. the list is almost endless and sadly an extremely common occurrence. Poor design is a turn off, it can alienate some or all of your user base and ultimately, it’s bad for traffic. If you are a commercial content publisher; bad for traffic is bad for business and even within a not for profit or reference based environment; bad for traffic is bad for outcomes.

Let’s take a look at some of the attributes that make for good usability, element by element.

Navigation Systems

First things first, a good navigation system is the visual result of good content planning. It’s a logical way to partition and “visually store” bite sized pieces of information and introduce them to your user in a succinct and concise manner. Good navigational design should present the user with a solid overview of what the author is offering, section by section, category by category. In larger web sites, good navigational design concentrates on one factor alone “what does my user need me for and how do I help them achieve their goals”. 

Thinking about how your user uses your web site helps you achieve your outcomes by default, it isn’t contrived, there’s no pushy sales messages and in their eyes, the user chooses their own path… it just works. The fact that it works means it will work again, it’ll work for their colleagues, friends and family too.

As sites get larger, with wider objectives, navigation necessarily becomes more complex in order to deal with the rigors of that site’s use. There are several common devices exploited by the designer to order large volumes of content. Used correctly, split navigation, tree structures (like a windows file browser window), breadcrumbs and mega / drop down menus are all good practice. The key throughout navigational design is consistent application of sound logic.

Ask yourself when you are planning “why do people come here”. The answer will vary from site to site. In our business at Stunn, statistics show that around 30% of our site users head from the home page to the contact us page. Logic tells me these people have used the web site instead of directory inquiries to find our telephone number, or they’re looking for our email address / office location. 

30% of our user base is around 1000 unique users per month, as a commercial operation, it’s web suicide not to make that contact link clearly visible when you enter the website via the homepage, those users want simple information quickly - why make them wait?

The rest of our users are pretty much there for research; “what do Stunn do”, “who do we do it for”, again it may seem obvious looking at it in black and white, but far too many web sites don’t allow the user to answer fundamental questions from either the home page, or a quick and highly visible click. It’s worth remembering that chair analogy again.. there’s a reason why the legs, seat and back support are where they are - they’re in the best place for the job. There’s very few web sites that need “new and innovative” navigational solutions, to the average user, new and innovative is “trite and irritating”. Now I’m not suggesting that we all sit back and don’t look to improve our work or look for new ideas, it’s just that sometimes, things already work and it’s your user, not your ego that should be enjoying the fruits of your labour.

That covers the fundamentals of good navigational design, next let’s look at the web page itself.

Content Display Pages, or Layout

The current best practice in web site design is centered around what is known as cascading style sheets, or css to give it its abbreviated title. In a nutshell, CSS allows the web designer to separate design and content with content being controlled by a collection of style “instructions” controlling elements such as position on a page, colours, sizes, heights and widths, et cetera. Good CSS design starts fundamentally with a “text only” style web site, completely accessible to a screen reader, or other such accessibility tool and builds on it to a fully styled, feature rich web site. The use of CSS further allows the designer to design pages for multiple devices and screen resolutions, omitting large elements from mobile phones and PDA style sheets, altering orientation of pages and the like are all simple controls within CSS. This allows optimum delivery for a wide variety of screens and the widest cross section of users. It has become even more important with the explosions in smartphone and tablet markets, as the biggest players look to maximise their exposure via mobile internet as well as more traditional new media (if I can call it that).

As with navigation, content display need not reinvent the wheel, but there are some basic considerations that really shouldn’t be ignored, especially not for the sake of creativity. Looking specifically at the computer screen, in 2012, by far the most widely adopted screen resolution that we see in corporate / commercial web design is 1280 x 1024 pixels (or above), however, a significant minority of users are still viewing web pages on an 1024 x 768 pixel monitor, and similar numbers are also viewing on the plethora of sizes (and orientation) associated with smartphones. On our web site, 15% view at 1024 x 768. A 15% customer complaint rate is enough to take a business into a tail spin. No user with a wide screen is going to stop using your web site because you cater properly for your entire user base.

I’m not suggesting that your total web page width should be forced narrow if it compromises the content display for the majority of the users.. far from it. The well planned and designed site that cannot fit this specification, for whatever reason, should simply display the most important content and navigational tools within the primary screen real estate and proper consideration should be given to alternative orientation or screen sizes. Several designers now design variable width web sites to suit a variety of screens. Us included.

The Importance of Cross Browser Coding

The browser market is a pretty crowded place at the minute. Internet Explorer still makes up the bulk of the market, but even there, its market share is split between browsers which work in entirely different ways. Firefox and Chrome are huge contenders in the mix now and a quick check on some of our stats for the last month show that our public transport customers are generating as much as 30% of their traffic from mobile devices.

Personally, I tend to use Firefox on PC and Safari on my Mac, it’s a bit of a bug bear of mine that so many sites are still “browser specific” and I’m chopping and changing to make some functions work or prevent crashes. It’s difficult for some to justify the required budgets to provide a catch all service for their users, in other cases it’s simply a lack of knowledge, or laziness. What should be in place from the outset is at best a unified approach to cross browser support and at worst a gentle degradation of the styling. A lack of functional support is inexcusable on any large scale web site, because the business case for ignoring the minority diminishes with each unique user.

Going back to the screen size argument, what use is a web site that can only sell to 75% of its visitors? If you have 2 electrical stores next door to each other on a retail park, the first you enter is out of stock, the first point of call is to check the other one… it’s the easiest thing to do. Same online, it’s extremely naive to presume your potential customer will quit out of their browser to buy your goods. They’re far more likely to click out of your web site and visit your competition. If your competition got it right, you’ve not just lost a sale, you’ve lost a customer. Brand loyalty is just as important in an online environment as it is off line, perhaps even more so. Good usability builds good customer experience, builds good PR, builds good business.


The law changed some time ago and expectations since have changed in line with it. As a public or corporate body, you have an obligation to make your web site accessible to screen reader technologies and a host of other standards.
Web accessibility simply means that those with disabilities are able to understand, navigate and fully utilise your web site within the confines of the technological aids available to them and their individual disability. In years gone by, access to the internet was severely restricted by software and design, changes in legislation have been designed to combat this, as best practice guidance alone wasn’t and isn’t enough.

The internet has become more and more ingrained in our everyday lives, open access becomes ever more important to provide equal opportunity to all. For most of us, especially of the “internet generation”, communication, education, entertainment, reference, document storage, genealogy, general research, commerce, business and even sex life can at some time or another be conducted via the world wide web. The internet offers a fantastic opportunity for those with disability to operate in a digital world at parity with able bodied users. Properly designed environments enable individuals to communicate and collaborate in ways that may be inconceivable in the “real world” the potential positive impact on this section of and indeed wider society is massive.

Making a web site accessible may be a simple process or a more complex one, depending on the content that is served and the manner in which we serve it. For most standard web sites, which aren’t serving rich media, good coding and a bit of consideration may be all that is required to produce a web site that all audiences can interact with.

Of course, widening the appeal and potential user base of a web site can’t in any way be seen as a bad thing, but it should also be noted that accessibility isn’t just a “minority consideration”, or not in the sense that some might see it. Accessible web sites are generally of lower file sizes and more flexible formatting, making them perfect for use on PDA / mobile, slow internet connections etc, so for the canny designer, accessibility can widen your audience on a number of fronts and at some time or another, prove valuable to all of your user base.

I hope this article has provided some tips, some good information and some inspiration for producing web sites in the right way. As regards Stunn, our move to ethical, inclusive business practice, both accessibly and environmentally, began some 10 years ago. Our standpoint has had several positive knock on effects for our business overall, not just in profile and brand value, but also in physical revenues and reputation. As a final summary, I would recommend that as a content or web site owner, you insist on  usability, not visual impact be the first priority in your work.