Human-Computer Interaction & Usability Engineering

User Interface Styles and Support 2

Designing The User Interface

A well designed interface is one that is easy to learn, easy to use and encourages the user to try new features. If it is, it will leave the user feeling satisfied, not frustrated. To understand what we mean by a “well designed” interface, we need to explore the different interaction styles than can be used and look at the principle behind good design.

Interaction Styles

A designer can choose from the following interaction styles:

Command Language
A command language is a dialogue between the user and the computer whereby the user types in pre-defined instructions. There is usually a prompt on the screen which indicates to the user that the system is waiting for a command.

Example:
The UNIX command ‘mv file1 file2’ typed in after the prompt, instructs the system to copy the contents of file one into file two. In other words, renaming a file.

This type of interaction requires the user to hold commands in memory and have a clear idea of the function to be performed. Commands must be expressed using precise syntax as command languages are intolerant of even the slightest syntax errors. The user, therefore, needs a significant amount of training in order to become competent.

Command language interaction is more suited to very skilled an experienced users as it allows the users to create their own command and to express complex possibilities rapidly without having to read prompts (which can be distracting). Very powerful with prior knowledge but a bit of a nightmare for new users with little or no training.

Natural Language
Like command languages, natural language dialogues require the user to type in instructions. However, the instructions or queries come from an ordinary language such as English (or a subset of such a language).

Example:
‘Which students study mathematics?’ can be asked of a database containing student course details.

This method of interaction is more suited to speech recognition. This is still problematic so natural language input is usually typed. This can be very slow for those without typing skills, especially if there are spelling errors or the meaning is unclear and the system has to seek clarification.

At present, there are no truly natural language systems. This is due to the fact that the system needs to cope with the vagueness, ambiguity and ungrammatical instructions of ordinary languages. However, research continues.....

Menu Systems
Dialogue using menus involves the user selecting from a list of alternatives using keyboard shortcuts, function keys, cursor keys or pointing devices. The list usually contains a few words or icons which give some indication of what the outcome of selecting that option would be. This means a user can perform a task without having to memorise the command, just recognise it from a list of options. Selecting in this way also reduces typing.

There are four main kinds of menu:

- Fixed menus are in place until an option is selected.
- Pop-up menus appear when activated by the user i.e. when the user clicks a particular area of the screen.
- Pull-down menus appear when the user selects an item on a menu bar i.e. a bar at the top of the screen with the menu titles on it.
- Walk-through menus display options chosen one after the other i.e. when one menu option is selected, a second menu option appears with further choice and so on.

The limited choice offered by a menu means that there needs to be a clear structure to decision making, this makes it ideal for new or occasional users. However, menus can be time consuming for fast, frequent users. This is often overcome with the use of function keys and keyboard shortcuts.

Icons
The user can interact with the computer system by manipulating graphical images, usually by using a pointing device such as a mouse. Although difficult to design and program, this form of interaction is easy to learn and use. The user can carry out tasks quickly and observe the results immediately resulting in a high level of user satisfaction. And, because the basic actions in an icon system are consistent across systems, learning new systems becomes much easier.

Example:
All icon systems have the same actions for opening, closing, copying and deleting.

Each icon is a graphical illustration of the object, option, operation, application or message it represents. It is therefore possible to view the whole system as a group of icons. In reality, icons are used in a windows environment and the system can be viewed in a series of overlapping “windows”. The user can explore the system safe in the knowledge that any action can be ‘undone’ if it does not have the desired effect.

However, a work of caution about icons. Designers can suffer form “iconmania” - an infatuated devotion to icons. Before using icons, ask yourself the following questions: Is it necessary?; Does the screen provide adequate resolution?; Is it a waste of screen real estate?; Is it obvious what it is supposed to represented?

“A word can be worth a thousand icons.”

Form Filling
Form filling dialogues are where the user inters data by filling in an interface which has fields for data entry. Just like a paper form really. In fact, the more it resembles a paper form, the easier it will be to use.

This kind of interaction requires little training as it is easy to use. The user simply moves the cursor to the field where the data is to be entered. It is important that the designer ensures that the fields are appropriately labelled and the user knows which values are permitted in that field.

Form filling is useful where several different categories are to be typed into the system, especially if the same type of data has to be entered repeatedly.

Good Design

A good designer will be aware that the design will give the system a personality which will affect the human to computer dialogue.

Examples:
The system can be user friendly - kind, forgiving, polite, verbose, excitable or calm.
The system can be user antagonistic - patronising, pompous, pedantic, cold, hostile, uncommunicative, idiotic, infuriating.

There are basic design principles the designer should consider. These design guidelines should be adapted for each particular environment:

Keep It Simple
It is important that the design should be kept as simple as possible. This requires effort on the part of the designer. Trying to achieve maximum functionality is usually counterproductive when trying to maintain a simple interface design.

Example:
A light switch is a simple design, but it is clearly not suitable for complex tasks.

Designers should organise user information carefully so that it can be revealed to the user bit by bit. This way the user doesn’t have to process so much information - thus reducing short term memory load.

Keep It Natural
It is equally important that the dialogue design is kept as natural as possible. The users should not have to alter their approach to a task in order to interact with the system. The system shouldn’t be set up in a way that is just easiest for the programmer, it should be geared towards the user’s normal way of working. The language used should be natural to the user and any jargon should be the user’s - not the programmer’s.

Example:
A designer may refer to a task as “saving a file” but, if the user calls it “storing XYZ” then this is how it should be referred to in the dialogue.

The designer should also stick to self-explanatory phrasing and should avoid abbreviations which are not standard.

Example:
“p.i.p.” stands for “put in place”. The designer knows this, but will the user?

Be consistent
This principle is often not strictly adhered to, but there are huge benefits to the users if the designer is consistent. Consistency allows users to adapt their existing knowledge to new tasks. Less time is spent on learning the differences between interactions - allowing more time to focus on the task in hand. Time is also saved if the screen layout is consistent for similar functions. This means the user knows where to look for things like instructions and error messages.

Example:
If “list” is used to display items on the screen, it shouldn’t be used for sending to the printer.

As well as having consistency within the design, it is also important that features in the design are consistent with general conventions.

If graphical images are used, the designer should be careful that the graphic is consistent with what it does.

Example:
If a waste paper graphic is used as a metaphor for deleting files, the user may expect it to be possible to retrieve files in the same way documents can be retrieved from a real waste paper basket - unlike, for example, from a fire.

Being consistent reduces user frustration because expectations are not disappointed by a quirky change in convention on the part of the designer.

Allow User Control
Designers should always allow the users to be the initiators of actions in the interface rather than have users responding to actions. This way the user feel in control of a system which reacts to actions made by the user.

Example:
Windows and icons shouldn’t open or close by themselves and should only move if the user moves them.

This information should be presented in such a way that the users interact directly. Designers should have visible icons which represent actions or commands. These icons should be metaphors for existing objects so that the user is assisted in bridging the gap between what the users already know and the new concepts to which they are about to be introduced.

Example:
In a file manager, the metaphor of a folder is used to place documents, other folders, printers, games, etc. Out with computers, folders generally only hold documents.

Designers should also make it possible for users to meet their own requirements by allowing them to customise their interface to their own personal preference.

Example:
The user chooses which colour will appear in each area of the screen and arranges windows so they appear in areas preferred by the user.

Give Feedback
Often, the way new users learn about a system is to try things out and observe the results. Therefore, it is important that users are provided with system feedback following their actions. If the actions are minor ones, a modest response is sufficient. Major actions require a more substantial response to provide more assistance.

Example:
Input should be confirmed by a simple echo or change in graphic, but if acceptance is irreversible (e.g. delete file) then a confirmation window should appear.

It is important that the response to the user’s action is immediate. This lets the user know the action is being responded to, even if it is just the system name which appears. This is better than a blank screen - users have little patience with blank screens. Responses can be visual or auditory (or both) and should be simple and appropriate to the task.

Handle Errors Appropriately
Ideally, your system should be designed in such a way that the user cannot make a serious error. In reality, users make mistakes even with the best designs. Designers should try to predict potential errors and allow the system to detect these and offer simple, easy-to-understand error handling.

Example:
“syntax error” is not very helpful. If this is caused by a missing semi-colon in line 23, then the error message should state this at the very least.

If the user types in an incorrect command, the system should remain unaltered and the user should be allowed to retype only the faulty part of the command - not the whole thing. Also, the possibility of losing data should be highlighted to the user.

Allow Undo Actions
Most of us learn through trial and error. To encourage this, design should allow users to undo actions. Removing the possibility of irreversible damage encourages exploration and relieves anxiety.

Provide Shortcuts
Users have varying levels of familiarity and performance when interacting with systems. More frequent and knowledgeable users tend to want to speed up interaction by reducing the number of interactions they perform. The designer should therefore provide different types of dialogue to be used by different users. Frequent users appreciate things like: hidden commands, function keys and abbreviations to increase the pace of interaction.

Example:
A hierarchical menu structure can be usefully navigated by a first time user, but a frequent user may prefer to memorise a keyboard shortcut.

Keep User Input Minimal
Another way to make things less laborious for users is to ensure that the user input required is minimised.

Example:
If 000100 is required by the system, the user should only need to input 100 and not the leading zeros.

Where possible, the user should not be asked for information which can be derived by the system or has been previously input by the user. Also, default values can be offered to reduce the input required.

Screen Design
During human-computer interaction, most information conveyed by the computer is presented visually, usually on a screen. Before discussing screen design, you should be reminded that if you had the visual characteristics given by a screen of a virtual reality system, you would be declared legally blind. It takes hundreds of screens to reproduce the top of an average desk.

The designer should try to provide an environment which is pleasing to the eye and effectively communicates what’s presented to the user. Every visual element on the screen competes for the user’s attention. To avoid confusion, the design should work the way it looks and look the way it works.

Amount of Information
Only present what is necessary to the user. Do this by using concise wording and avoid unnecessary detail.

Example:
If numeric data is included, decide how accurate it is required to be - does it have to be to 2 decimal places?

Avoid technical jargon which is long winded and difficult to understand. Where possible, avoid using abbreviations. If it is necessary, because of lack of space on the screen, make sure the abbreviations used are well known to the user and won’t create confusion. The amount of information presented can also be reduced by using familiar data formats and columns.

Example:
An address need not have each field labelled as the format is easily recognised by users. If there is a list of addresses, using tables with column headings allows the user to scan for the city via the relevant column.

Extra clutter makes it difficult for the user to extract required information. Therefore, avoid the temptation to put in extra information on the screen just because it is available.

Grouping Information
Data items to be displayed can be put into groups for the purpose of making the information more readable. This can be done by drawing a border around the items to be grouped, or by presenting different groups in different colours.

Highlighting Information
Highlighting can draw the user’s attention to particular pieces of information. This can be done by making the item bold or underlined, making it flash, using reverse video or changing its colour. All these techniques make selected pieces of information stand on the screen. Use all 5 and you can’t fail to attract attention! However, it is generally advised that highlighting is used conservatively - overuse can defeat the purpose.

Placing Information
It is important to design the screen so that the user can easily find any information presented - it’s not always possible to predict what this will be. Being consistent in the design will allow the user to become used to finding certain types of information in certain areas of the screen.

Example:
Essential information, such as menu headings, at the top of the screen, additional information, such as messages, at the bottom.

There are several factors which affect the way to place information on the screen. It should presented in sequence, in order of importance or in order of frequency.

Example:
In a menu, the most frequently used item should appear at the top.

When deciding how to place information, the main point to consider is the users expectations, i.e. where does the user expect to see certain information. These expectations can come from using standard layouts or from the structure of the information itself.

General Typography
The layout on the screen should be uncluttered and pleasing to the eye. Aids to scanning and browsing should be included and (as mentioned before) items should be grouped appropriately. Use of spacing on the screen can help users find information or indicate to the user how important information is.

Example:
Using indentation can convey hierarchical relationships amongst pieces of text.

Important information should be displayed in a prominent place and reference information on the more peripheral areas of the screen.

Presenting Text
Most information displayed will involve some type of text. There are some guidelines which relate to presenting text on screen. Firstly, although text in upper case letters is good for headings or attracting attention to text, it is harder to read blocks of text which are all upper case. Conventional upper and lower case is much faster to read and digest. Spacing between text also affects how difficult text is to read. It is preferable to have spacing between lines which is at least the same size as the characters themselves (and a blank line between paragraphs). Also, left justified text with a ragged right edge is not so tidy to look at, but it is much easier to read than left and right justified text with varied spacing between words. Lines should be no more than 40 - 60 characters long. Finally, the appropriate font and typeface should be used.

Example:
Bold, italics, underline.
Times new roman, impact, century gothic.

Graphics
One graphic can sometimes convey as much information as a whole screen of text. This can be a graph, chart or diagram which can be 2 or 3 dimensional, coloured or black and white. Graphics can be manipulated like text - they can be selected, moved, reduced, enlarged or rotated. A graphical presentation can also be animated or incorporate a video image.

Examples:
CAD, icons, graphs.

Graphics are becoming increasingly important in the world of computer visual interface design.

Labelling

It is important to have a description for an item, a group of related items or a whole display. A title, phrase or word can be a label which will help the user quickly scan and identify an item.

Example:
A menu should be labelled with a title that logically reflects the set of material it enables the user to access.

Often it is tempting to use an abbreviation to label items but, unless you are sure the abbreviation will be recognised by the user, do not attempt this and use complete words instead. Do not leave any items without a label, it is unwise to assume the user will have past experience or knowledge or will use this in the context provided.

Example:
554 1919 may be recognised at a telephone number in a telephone directory, but on an unformatted display it could be meaningless to the user.

Make sure that labels stand out from other data and adopt a consistent format for them.

Example:
Keep all labels to the left, or just above the item(s). Make them brighter than data.

Keep to common conventions or standards when labelling.

Example:
Sequences should go from left to right or from top to bottom. If labelling a scale, min should be on the left and max. of the right, or min at the bottom and max. on the top.

When considering using colours for labelling, remember that colours should be consistent, fit in with stereotypes and you can’t have too many.

Example:
Red can represent danger, blue cold, etc. No more than 4 colours should be used in any one display.

The designer should also bear in mind that a large percentage of the population suffers from colour blindness.

Labels need to be seen by the user. It is no use if a label is going to be obscured from the user’s view.

Finally, when considering labelling items with words, the designers should consider if the user can read or understand the language used.

Example
The design of an ATM screen should enable foreign or illiterate users to get money from there accounts. Perhaps the use of icons would be more appropriate than words.

Conceptual Models

There are two different conceptual (mental) models in a product - the user model and the design model. The user model is what the user develops, with or without guidance, to explain the operation of the system. These are often over complex, incomplete, unscientific and difficult to generalise. The design model is what the designer had in mind and is probably described in detail in the manual. Ideally these should be the same, but the user probably didn’t read the manual and built up a quite different conceptual model. So the designer should give an appropriate system image to the user. The system image should be simple and should reflect the needs of the user, not the limitations of the hardware or the complexity of the coding. It should convey the design model clearly and concisely and should correspond to the past experiences and expectations of the users.

Example:
A good example of how designers have met with the users’ conceptual model is illustrated in the file storage system in the windows environment. The file appears to be filed in a well structured system of folders just as the user imagines they are filed within the computer. This, of course, is not the case.

How To Do Things Wrong!

We will finish user interface styles and support by looking at how it is possible to make this as difficult as possible for the user.

Exploit the tyranny of the screen!

1. Make things invisible.
· Give no hints as to what is expected
· Give no feedback
· Give no visible or auditory results of action
· Examples?

2. Always have uninformative error messages
Ensure they are always long, worrying and above all - incomprehensible.
Refer to the manual inconsistently, but never give the page number or reference
· Examples?

3. Be arbitrary
· Have arbitrary mappings between action and what is required.
· Use non-obvious command names.
· Use idiosyncratic language.
· Use obscure mnemonics and abbreviations.
· Use unrecognisable icons.
· Examples?

4. Unsettle the user
· Be impolite.
· Insult the user’s intelligence.
· Make commands unintelligible at all costs.
· The longer the command sequence the user has to memorise the better.
· Examples?

5. Lull the user into a false sense of security
· Provide undo commands only for trivial errors.
· Provide help only when it is obvious what to do.
· Encourage the user to type the command and the confirmation in one action.
· Examples?

6. Never automatically transfer data between screens
· Examples?

7. Ensure that trivial operations require many keystrokes
· Examples?

8. Make trivial actions and operations dangerous
· Maximise the damage a single keystroke can do (but be sure to put a warning in an obscure section of the manual).
· Examples?

On to the next chapter ... Requirements gathering and techniques