UI Theory | User Interface Theory and Web Design

Few people realise just how important user interface theory is. Your website may be letting down its potential users if you do not apply the most important aspects of user interface (UI) design.

Seven plus or minus 2…

Consider for a moment a website that does not consider the “plus or minus seven” rule. For those of you unfamiliar with this theory, it goes like this: Humans have a limited ability to remember facts in their short term memory. The limit for most people is seven, plus or minus two: So some people can remember 5 things maximum, and some can remember 9 things.

At a medium-sized company I used to work for I was asked to overhaul the website’s “mega menu” which consisted of a drop-down with 4 sections, with about 5 or 6 category links in each. The requested change was to strip the 4 sections and instead fill as much space as possible within the menu with links.

The argument was that there simply weren’t enough choices at the first level, which was causing a drop in sales conversions.

Now my counter-argument, other than the fact that management had no evidence to support their theory, was that each menu already had something like 20-25 links on them, which was already a lot of options, and the only thing keeping it all manageable was the fact that each panel was divided into four subsections. Changing it would completely violate the 7±2 rule. My argument was not accepted so we put it live.

The results were a disaster and within days we were forced to strip the navigation system completely. Users do NOT want too many choices. Let’s say you go to a shoe shop and a salesperson greets you and asks if you want any help. You tell them you’re looking to buy a pair of shoes. Their response is “We have: black, white, red, blue, large, medium, small, children’s, adult’s, teenager’s, baby, toddler, trainers, shoes, sandals, stilettos, sneakers, hiking boots, leather, cotton, man-made, …” You’d soon give up. It’s no different on a website. In the mass of links people won’t see what they want and will leave. But if they see something that takes them closer to what they want they will gravitate towards it.

The “Three Clicks” Rule

A commonly cited rule for web design is the three clicks rule: The idea is that no information on a website should ever be more than three clicks away. It can be a useful rule to consider a best practice (but shouldn’t be followed religiously). The website mentioned above would have benefited more from ensuring the three clicks rule applied: Instead of trying to present the customer with EVERY possible choice at the first menu level, they should have been presented with choices that took them closer to what they were ultimately seeking.

Going back to the shoe shop analogy: Let’s say the customer is looking for a pair of women’s sandals to take on holiday. They go to the site and see “Men’s” and “Women’s”. They choose “Women’s”, and see “Adult Sandals”. Under that they get a list of women’s adult sandals, and can browse happily.

It might seem that it’s not possible to categorise an entire site like this, but if we assume an average of 7 categories in each category at 3 levels deep, that allows a total of ~400 categories! That should be enough to categorise most websites quite comfortably.

Consistent positioning of elements

Another great UI design example is positioning of items, which is an art unto itself. Microsoft Windows is renowned for having the “OK” and “Cancel” buttons on message boxes the same way around every time. Yet every now and again you may encounter a poorly designed UI where somebody has switched these buttons and, rather than clicking “OK” you’ll click cancel before you realise it. Or, worse, you’ll click “OK” when you wanted to cancel. Didn’t want to overwrite that file? Too late!

This sort of lack of consistency is rife on the world wide web today. Don’t let your site be an example of it. Provide a UI that builds a mental model in the user’s mind and adheres to it.

How you position your elements in relation to each other is also important: Items that are close together will appear to be related, items that are apart will appear to be separate. Too close and movement impaired users will have a hard time using your website. Too far apart and people won’t necessarily make the connection that a group of related items belong together.

Using the right tools for the job

There’s something that bugs me in a certain application I regularly use. It’s a message box that appears when closing the software down which presents the user with three buttons to choose between: “Yes”, “No” or “Cancel”. But the text above it asks no question. Adding “cancel” to a yes/no question is already unforgivably bending the concept of a yes/no question, but to not even ask the question is so amazingly abstract as to be almost poetic.

On many websites that I use the designers have used checkboxes in place of radio boxes, thus allowing multiple contradictory options to be selected. Gender: “Male”, “Female” and “other” all selected together. When you try to submit the page it moans. Had the designer simply used the correct control for this widget there would have been no possibility to make a mistake.

Similarly the vast majority of designers fail to use the HTML “label” tag on forms, making it a necessity to click the tiny checkbox or radio box instead of the nice big label. This is also inconsistent with all of the major operating systems, which is a massive blunder on the designer’s part.

Hire the right person for the job

A novice web designer will not have received any UI theory training and so it’s important to hire a web designer/developer who has experience in this area. It may cost you more initially, but it’ll save you money in the long run. It’s the difference between buying cheap electrical goods that just about work for a year or two and then have to be replaced, versus buying something quality that works well and gives years and years of good service.

If you need the job doing well then you know where to find me.

About Matt Lowe

Matt Lowe is a WordPress web designer / developer based in Newbury, Berkshire. After 8 years of doing the nine-to-five for other companies and watching them make the same mistakes over and over he set out in business on his own, forming Squelch Design to help businesses get online and make money.

Sorry, comments are currently closed, pending a redesign of the website.