The importance of good interface design
Designing the user interface
We have seen that the way a user interacts with a computer is known as the 'user interface'. It is also commonly called the 'Human-Computer Interface', or HCI. Communication is two-way. The user must get information into the computer using appropriate methods and devices and the computer must send back data and information to the user. If you want to discuss fully the HCI, you need to discuss:
-
- The hardware needed to get information into the computer.
- The hardware needed to get information out of the computer.
- The methods provided by the software to aid data input.
There are a range of software interfaces that could be used; forms, menus, GUIs, command line and natural language. When an interface (the input and output hardware and the software methods) is being designed for a new situation, the designer must run through a checklist of things to consider. If this is not done properly, the interface may be cumbersome to use. It may not allow the user to get the right information into the computer easily, efficiently and effectively. If the wrong information is put into the computer, any processing will be invalid because it will be based on inappropriate data. A poorly designed interface may output confusing data and this will diminish a user's understanding of it. They may not be able to make sense of it and so it will be of limited value. What sort of things should be on the designer's checklist? The following list is not exhaustive but does attempt to give you some ideas of the questions that need to be asked.
Who will use the interface?
If a user has a disability, that will affect the selection of input devices needed, the style of the software interface as well as the nature of the output devices. Someone with a visual impairment may appreciate audio output. Someone with restricted mobility may need a concept keyboard or a natural language input method, for example.
The age of the users is important. Clearly, the interface for a three year old will be different to an adult. For one thing, the child may not be able to read any but the most basic words and will therefore not be in a position to make selections based on written instructions. A QWERTY keyboard will be of limited use while a concept keyboard may be a much better choice.
The experience of a user will also be important. Many people have grown up with computers and will be comfortable with a GUI. Others with a little more experience may be happy to use a command line interface. Some users may have had little opportunity on computers and need a very basic menu system and touch screen, just to persuade them to even use the system!
What does the new system seek to do?
If it is trying to simulate flying a plane, then a joystick and pedals should be provided as input devices. If it is simulating driving a car then a steering wheel would be an appropriate input device. A process control system may need pushbuttons, keypads and selector switches so that a system can be told what situation to aim for and how to achieve it. If the system is seeking to entertain or be as realistic as possible then special effects in the shape of a vibrating steering wheel or sound effects may help, for example. If the system were a real-time simulation then a realistic visual depiction of the world would be appropriate on a suitable screen. If the application were to monitor and control the flow of trains in and out of a train station, for example, then a diagrammatic depiction of the current situation, regularly refreshed, would be an appropriate method of output, perhaps using indicator lights. If the application were to monitor and control the flow of water around some pipes, there would be a need for sensors to continuously monitor the flow and pressure of water and feed these back to the computer. There would also be a need for actuators (any computer-controlled devices that cause movement) to adjust valves and switch pumps on and off, thereby adjusting water flows. Again, a diagrammatic depiction on a large VDU or other large display unit would be necessary to show the operators the current situation.
What is the environment in which the system will be used like?
If it is a dirty, dusty place, a membrane keyboard or a touch screen may be necessary to prevent the keyboard quickly becoming unusable. If any systems are critical, for example, in nuclear reactors, then the use of klaxons may be necessary to signal the urgency of a situation to users. A hospital, which has patients on life support, may use a similar system or flashing indicator lights to alert nurses to a problem with a patient. If the system is to be used in an office to enter in information from paper forms then a QWERTY keyboard or natural language may be fine, in conjunction with forms-based input screens. Simple laser-jet or ink-jet printers may suffice for most office-type applications. However, if large, accurate engineering drawings are needed using colour, then a plotter may be selected as the output device. If the system was to be used under water then any input devices such as sensors should be waterproof and corrosion-resistant. If it was to be used in the open air, similar consideration should be given to any environmental factors that may affect system components.
Where will the information sent out from the system be used?
If the information is to be used at the computer system, it may only be necessary to provide a 'standard' VDU. Of course, engineering design applications may warrant the purchase of a 21-inch screen, for example. If the information is to be sent to someone or hardcopy is required for legal reasons then a printer will have to be selected. In a warehouse environment, a printer may be needed so that an order can be printed off and taken by the warehouseman around the warehouse while they collect together the order.
Designing the software interface
There are many common elements to the design of good interfaces, whether they are for data input forms, navigation interfaces, an interface for an application, web sites and web forms or dialogue boxes. In this section, we will document the features of these forms with a view to designing our own.
Dialogue boxes
A dialogue box is any window that appears because you have to make selections from choices. An application or utility wants to know how to proceed with an action and needs you to give it some details. It pops up a dialogue box for you to fill in. These are usually designed to be very quick and easy to fill in. For example, you might want to print out some work. You go FILE then PRINT and a dialogue box appears. It might look something like this:
Possible features on any user interface include:
- A button to cancel the whole form.
- A button to enter the data and continue.
- A button to get further help.
- A button to go to further options. Only the common options are shown. The rest are put on their own screen and linked from the main screen.
- A title for the form.
- Titles for each piece of information that has to be entered.
- An indication to the user about what fields must be filled in and which ones are optional. This can be done by putting an asterisk next to compulsory fields, with a note near the fields saying that they are compulsory.
- User instructions for the form.
- User instructions for certain pieces of data. E.g. Under an input requiring a date of birth, you might see DD/MM/YYYY showing you the form that the date must be entered in.
- User examples, E.g. instead of showing you the form of the data, you might be shown an example 21/08/1986.
- A box next to the name of the data to be entered, so that the user knows where to type. For example, a box next to 'Name'.
- A scroll box can be used to display a block of writing. This is a box on the screen with a scroll bar. For example, if you were ordering something online, there might be a scroll box on the screen showing you the terms and conditions. This ensures that much of the screen is not taken up with huge amounts of text.
- Tick boxes. For example, a tick box next to "Tick if you need a VAT receipt".
- Radio buttons. These allow a user to see all the options available and to select one or more of them. Seeing all the options at once takes space on the screen so they are only suitable when there are a limited number of options, perhaps three or four at most.
- Combo boxes (drop down lists). These are suitable when there are a large number of options to choose from but you don't want them all on the screen at once because they would take up a lot of space. Tick boxes, radio buttons and combo boxes are faster ways of entering data than e.g. keyboards. They also remove the possibility of incorrect data entry, for example, through spelling mistakes or entering an option that isn't allowed. They are a method of data validation. (Validation is making sure you get sensible data into a computer as opposed to verification, which is checking that the sensible data you have entered is actually the data you want, perhaps by double-checking it).
- Wherever possible, validation rules are used on data entry fields. These might include the use of data entry masks and range checks, for example.
- Data entry fields are logically grouped together. All the name and address fields are together, while the options in the 'Select your Interests' are grouped together, for example. Logical groupings are often reinforced by drawing boxes around groups or by careful selection of colours and shading to 'raise' or 'sink' an area from the rest of the form
- The use of pictures to reinforce a selection. For example, you could have used radio buttons to allow a user to select how to be contacted. If they select 'By telephone', a little icon of a telephone appears on the screen. If they select post, an icon of a letter appears and so on. This allows a user at a glance to see what has been selected.
- Clear, readable fonts.
- Good selection of colour. Colours need to be selected so they work together and they're easy on the eyes. Some combinations work well together. Some don't. You can find lots of information about this very subject on the Internet. Discuss what keywords you could try and then do a search. The usual rule of thumb is that no more than three colours should be used or else you're in danger of the form looking a mess!
- Colour can be used to draw a user to a particular area of the screen. For example, you could put an 'Are you sure you want to proceed?' message in red.
- Tab order. You can't show this on a screen design but the order that you jump from one field to the next can be set up by the designer. This allows the designer to set an efficient and logical path for the user through the form.
Reasons why good design is important
Good interface design is important for a number of reasons.
-
- Users need to be able to navigate quickly and easily around different screens.
- Users need to be able to get help when they get stuck.
- Users need to be able to enter data quickly and correctly.
- Users need to be able to change their minds and cancel what they are doing.
Justifying a form design
Whenever you are asked to design a form, you need to be able to justify why you have designed every part of it in the way you have. One method of doing this on paper and in an exam and for your coursework is to sketch out the design and then annotate it. You should circle features on the form, draw a line to the side of the form where there is some space to write and then say why you have done what you did! One key phrase to use in your annotated comments is 'so that'. Here's an example.
