Tutorial - 'U' comes before ’˜G’ in GUI design

This month we focus on the end user as a GUI guru teaches us the Yin of good design and the Yang of intuition.

Although the emphasis in the term Graphical User Interface (GUI) would appear to be the graphical bit, to achieve good GUI design it is the ‘U’ or user that a designer must focus on. The whole point of a GUI is to make life easy for the user. Easy to read, easy to understand, easy to use, easy to navigate and easy on the eye. A GUI screen that leaves the user frustrated, irritated or angry is not designed well.

There are specific rules for good GUI design, the most important of which can be generally summarised as: simplicity, consistency, predictability.

A GUI design comprises seven specific elements: layout, colours, (navigation) paths, icons, buttons, text and pictures.

The ‘graphic design’ of the layout, colours, font size and style, pictures, and the size and shape of icons and buttons will determine if the GUI is aesthetically pleasing to the user and is easy to read and understand.

The layout, style of buttons and icons, and the navigation paths will govern how easy the GUI is to use. Within these broad guidelines there are some specific points that will help good GUI design.

Use the familiar

To make users comfortable, they have to feel that they are in control of their environment. To achieve this in the context of a GUI display, the interface has to behave exactly how the user thinks it will. This means that a designer has to anticipate the user’s expectations. Fortunately, this requires awareness of our everyday surrounding rather than the skills of a clairvoyant.

Basically, people react to a new situation based on their past experiences. Some of these are common to all of us. For example, when you approach a set of swing doors you will naturally pull the door open if it has a handle or push it open if it has a flat metal plate. Similarly, if a GUI screen has a button that needs to be pressed, making it look more like a 3-D button will make its function more obvious.

An icon on a command button that echoes what we’re used to in the real world, such as the ‘play’ icon on a DVD player, makes it obvious what function that button has. Using icons for command buttons is also better than words as they are generally simpler to ‘read’, take up less room and avoid language problems (as long as the icons are global recognised and aren’t specific to an individual country or culture). The use of colours too – green for go and red for stop – are conventions that we are all used to and will naturally follow.

More closely related to the design of a new GUI is to use ideas from other GUI applications we see and use everyday. For example, the windows-style applications we use on our computers, the icons we see on our mobile phones, or those on the now commonplace satellite navigation systems we have in our cars.

Be consistent, limit ‘bling’

Taking this idea one step further, it naturally follows that if a user is presented with a GUI screen or page that has a certain theme or style, subsequent pages should follow the same theme with the position of key graphics also being consistent as the user moves from page to page.

Also, while it can be useful to use, for example, different styles of buttons for different functions, no more than three different styles should be used. Similarly, the use of different text fonts and the use of bold or italics fonts be limited. One reason for this is to prevent the screen from becoming confusing. The other reason is that using a bold or italic font sparingly can emphasise a specific word or action, but if the effect is used too frequently, its impact is lessened.

This is also true of effects such as flashing buttons or animations, which, if used too frequently, can not only be confusing but also extremely irritating. Used sparingly, they can be very useful and effective. For example, we are all familiar with the progress bar on computers which moves from left to right as it indicates how much of an operation has been completed.

With the presence of this familiar graphic, we are quite happy to wait (within reason) for the operation to be completed. The absence of an animation such as this may mean we are staring at the same screen for ten or 20 seconds or longer without any indication that something is happening. This can lead to uncertainty as to whether the command is being actioned or the system has frozen.

It is also important not to clutter a screen too much by trying to cram in as many buttons and graphics as possible. There are two good reasons for this. The first is that the GUI will probably look too overfacing or confusing – especially for a new user. The second is that if there are too many buttons or links, they have to be smaller and/or closer together, which may be difficult for some people to use – for example, people with large fingers trying to use touch screens or people with disabilities. By the same token ‘like’ functions should be grouped together so that a user doesn’t have to chase round the screen, for example to play with the up and down buttons of the volume control until they are happy with the level. GUIs should not require a lot of agility to use.

Every time a GUI provides the user with an option, it is asking the user to make a decision. This isn’t always a bad thing, but it is when it’s an option they don’t care about or if they don’t really know which option would be the better one. This is particularly the case if the option will impact on the functionality of the system.

The kinds of choices that can be offered to users and are generally favourably received are things like the selection of a desktop background, so that individuals can personalise their system, but without affecting its functionality.

When designing a GUI, it’s worth working to three simple assumptions, which while not exactly facts are worth treating as if they are. These are: users don’t have a manual to work the system and if they did, they wouldn’t use it; users can’t read anything and if they could, they wouldn’t want to; users can’t remember everything.

Working to these principles, all of the ‘rules’ we have covered make a lot of sense. A good GUI needs to offer a simple route through its various screens without the user having to swot up on how it works or follow on screen instructions. Most users will probably skip over instructions anyway, assuming they either know them or the default settings will stop them doing anything wrong. Also many people are actually intimidated by computers and technology and if dialogue does appear on screen, they will believe they have done something wrong.

Focus on the U

As was stated at the outset, the ‘U’ is more important than ‘G’ in good GUI design. That is where the design process actually starts. Understand the user(s) and define their ‘persona’ - the imagined identity of the typical user: their needs, preferences, capabilities, what they want from a system, their environment, what they like, what frustrates them. Look at their manual processes and data: how do they work, what patterns do they follow, in what sequence do things happen?

If there is going to be more than one type of user, focus the design on the preferences of the primary persona. It’s sometimes worth developing a secondary persona, whose needs are mostly satisfied by those of the primary persona, but who may have additional specific needs. Sometimes designers also find it useful to develop a negative persona; someone for whom they are definitely not designing.

Finally, after completing a design that satisfies all of the criteria, it’s useful to employ ‘corridor testing’. That’s the equivalent of pulling in the first person you see walking down the corridor, who’s never seen your GUI design and asking them to use it. This ‘out of the box’ test will provide instant feedback as to whether the design is doing what it should. Sticking to the rules of good GUI design, it should.

Article Categories