5. interaction design basics


Use a pocket alarm clock or wristwatch to set yourself alarms every 15 minutes one working day. Write down exactly what you are doing. How surprising is it?

answer available for tutors only




The exercises 5.2, 5.3, 5.4 and 5.5 are based around a nuclear reactor scenario on the web at: www.hcibook.com/e3/scenario/nuclear You will need to read the scenario in order to answer these exercises.

Comment on the user of colour in the Alarm Control, Emergency Shutdown and Emergency Confirm panels (figure CS.2)

answer available for tutors only

Red represents danger (cultural, but pretty universal), so good to represent alert state and for emergency shutdown and confirm button. Similarly, green represents safety. In UK and some countries green/amber/red also used for traffic lights, and alarm panel reflects this (recruiting real world knowledge). Red also good to grab attention and seems 'close' (visual perception and 3D vision), so good choice for making CONFIRM button obvious when it needs to be pressed.

However red/green colour blind users would have some problems. The alarm state indicator is fine as colour is a redundant cue and can simply use location, but perhaps a text label would help. The confirm button, however, fails completely as the only way of telling it needs to be pressed is the green to red colour change which would be invisible. Perhaps making it red and flashing would be better.



Comment on the use of layout and other elements in the control panels (figures CS.1, CS.2 and CS.3), including the way in which various visual elements support or hinder logical grouping and sequence.

answer available for tutors only

The sub-panels give some logical grouping, especially good for original alarm control, but spoilt a bit with revised alarm behaviour where the CONFIRM button is part of the same logical interaction - perhaps an additional CONFIRM button on the Alarm panel would have been better. The location of Emergency shutdown immediately above the CONFIRM does emphasise both grouping and sequence, but perhaps should either be part of same panel or have a line/coloured box drawn on the control panel linking them.

The manual override controls are all grouped together, but the position and layout of the keypad are unusual (problems for left handed users?). The normal sequence is select target, move right to the keypad (OK for most European settings), but then back left again for SET button, perhaps the last a little unnatural. Again linking the three sub-panels with a drawn box or colouring them could increase the emphasis that they have a common function. The main sequence/grouping problem is that they are only enabled in red mode hence changes to them involve going back and forth across the control room.

In general it seems the uniform size of the sub-panels is causing some problematic design choices. This is not uncommon as a complete control panel often consists of lots of sub-systems. This is an example where the constraints of the implementation environment need to be accommodated.



Working through the accident scenario explain why the various problems arise.

answer available for tutors only

Original text in bold type to aid reading, the expected answer is in normal type. This is a very full answer. This situation mirrors quite closely a mode and closure error in the Excel case study.

Note: Jenny has been 6 hours on a night shift, so errors are likely especially under stress.

1 Jenny notices the core reaction rate has risen very rapidly
one perhaps wonders why this wasn't noticed earlier, perhaps a problem in positioning of displays?

2. she realises she must immediately change the reactor target ...

3. she goes to the Alarm Control Panel … presses '+' twice
Jenny has remembered that she needs to be in RED state to use manual override

4. the Emergency Confirm button glows red
OK, Jenny should press CONFIRM now, but having pressed the '+' and seen the RED alarm state light glow she gets the 'aha' feeling of closure and forgets to press CONFIRM. The red of CONFIRM button is intended to remind her but ...

5. she moves across to the Manual Override panel ...
clearly Jenny didn't notice the CONFIRM button, presumably because it is at the bottom of the panel and she is looking at the Alarm control at the top. Peripheral vision is good at black and white (contrast) changes, but not colour.

6. she selects 'Pressure' from the pull down on the Manual Override panel
which won't work because she is in the wrong Alarm state - this is a mode error caused by the original closure error, but when she is at the far left of the control panel the current system mode (temporary red alarm state) is not visually (or audibly) clear.

7. she types the new value '6000' using the keypad
and forgets to press SET - another a closure error

8. she notices that the number on the Reactor Targets panel has not changed
happily she does double check this rather than simply moving on which would have easily been possible

9. she realises she forgot to press the SET button on the Manual Override panel
OK, realises this one, perhaps because of better logical grouping

10. she presses the SET button
OK, but ...

11. the value still doesn't change
still in wrong mode (alarm state temp red)

12. an automatic audio warning sounds "60 seconds to core meltdown"
good choice of warning modality to use sparingly for critical information. In a big control room a visual alarm would easily be missed.

13. she presses the SET button repeatedly
typical user reaction, happily doesn't cause bad effects!

14. still the value doesn't change
still in wrong mode and despite repeated failure still doesn't think of a mode error - which is normal behaviour in error situations - the expected mode is part of the assumptions she brings to her problem solving

15. she starts again, selects 'Pressure' from the pulldown, types 6000 and presses SET
presumably thinking that the previous part-finished action sequence before 'confused' the system

16. still the value doesn't change
17. the audio warning says "30 seconds to core meltdown"
18. Jenny runs across the room to the Emergency Shutdown panel
no, still doesn't realise that the problem is the wrong alarm state, but now aiming to shut down the reactor to avoid meltdown

19. "20 seconds to core meltdown"
20. she presses "Immediate Emergency Commence" button
correct action in dire emergency

21. the emergency confirm button glows red
but this time is close to the button she has just pressed (in fact it would have already been glowing when she got there but perhaps didn't notice as she was running and stressed) and so this time she notices the CONFIRM button ...

22. "10 seconds to core meltdown"
23. she presses the " Emergency Confirm" button
... at last!

24. she hears the crash of the explosive bolts ...
actually there is nothing quite so good as real physical feedback whether visual, tactile or, as in this case, audible

25. the audio system announces "reactor shutdown successful"
but restarting the reactor will take weeks and cost vast amounts of money!



Suggest potential ways of improving the interface to avoid a similar problem recurring.

answer available for tutors only

Several ideas in the answers for exercises 5.2 and 5.3. Here are a few more ...

Have a separate CONFIRM button on the Alarm control panel, making it flash so it is more readily seen in peripheral vision.
Distinguishing red from temporary red state by flashing the red light would also help prevent the initial mode error.

When the user tries to select a target and enter a value, a warning of some sort should be issued. This could simply be a 'this doesn't work' beep, but better would be a warning written on the manual override panel which perhaps lights up when not in RED alarm state.


EXERCISE 5.6 [extra - not in book]

Look at some or all of the following objects: a book, a pair of scissors, a cup, a corkscrew. Discuss the affordances of the objects and the constraints that these place on their use.


Book: hand-sized suggests you can pick it up. Covers and spine operate in such a way as to aid opening it, whilst softer pages allow it to be flicked through.

Scissors: holes in handles suggest positions for fingers, especially when shaped specially. Visible blades suggest cutting - restrained motion of hinge means that when fingers move blades move appropriately. Thin pointed nature of blades suggest sharpness and cutting.

Cup: hand-sized for picking up, particularly with handle which suggests fingers go through hole. Space inside suggests it can contain something, whilst flat base means you know you can stand it down again.

Corkscrew: twisted bottom part suggests twisting, echoed by handles on top. Not put-downable - no resting position; it's a dynamic tool, no use when resting on the table.


EXERCISE 5.7 [extra - not in book]

Consider the train booth example.  Write a persona of a commuter and a scenario involving him/her using the booth to get a ticket when late for work

answer available for tutors only

Looking for rich descriptions harness natural 'intelligences' of designer social understanding, etc. For the scenario, important to kep trackof everything tat isd happening towards catching the train (e.g. walking between platforms, weather, etc.) as well as the direct interaction with the system.


EXERCISE 5.8 [extra - not in book]

This question relates to the train both scenario.

After being in use for some while new booths are designed and are about to be deployed.  The original design of the booths is shown in Figure TB1 in the train both scenario.  The new design is shown below.  The new design was chosen to place items more logically so that the up and down buttons (up  and down ) are more like scroll buttons on a screen.  To save money the software is not redesigned as it is 'just' changing the layout of the buttons.  Describe any potential problems that may arise after deploying this new booth.

new train booth design

answer available for tutors only

OK/Cancel next to each other - may lead to slip and 'dangerous state' of unintentionally buying tickets.

Up/Down buttons a long way from each other so longer of hand movements when selecting things.

Buttons on left hand side mean that right-handed users will obscure the display if they use their dominant hand.

Lack of consistency with old design may lead to problems (weaker so need to argue this well for full mark).



EXERCISE 5.9 [extra - not in book]

A commuter is waiting on the platform for the train.  There is a large display showing train times and destinations as shown below.  The commuter wants to get the Bath train, but finds it hard to scan across to see what platform it is on.  Suggest two possible ways to redesign the screen to make this easier.

departures board

answer available for tutors only

Alternatives include leading, coloured/greyed backgrounds on lines, or reordering the columns.



EXERCISE 5.10 [extra - not in book]


Abbot Brothers a small building firm has commissioned bespoke quality control software from a user interface consultancy Concept Designs paid on a daily rate.  Assuming Concept Designs employ best practice.

  1. Would you expect that the user interface of the system delivered to Abbot Brothers be flawless?
  2. Justify your answer.
  3. Under what conditions might you change your opinion

answer available for tutors only

  1. No
  2. If the system is too perfect they have probably spent too much time on it.  N.B. if they say Yes to (iii) and can give a good reason why, then they still get the marks!
  3. If the software is to be used by a large number of people with consequently larger budget then one would expect a better interface.  If it were something like Microsoft Office used by countless millions then as near flawless as possible.


EXERCISE 5.11 [extra - not in book]

This question relates to the Soap Booth scenario.

You are the senior usability specialist at Channel 17 and your junior usability specialist Kevin has produced the following scenario:

Jenny goes to the news agent, and buys her weekly copy of Ice magazine.  She goes into the Soap Booth and chats with new friends.

  1. (ii)   Why is this a poor scenario.
  2. (iii)   Improve this scenario.
  3. (iv)   List 2 good aspects of the design and briefly explain why.
  4. (v)   List 5 different problems with the screen layout, widget choice etc. and for each offer a potential alternative design

answer available for tutors only

  1. Just too little detail in both what is done and in how the person feels etc.
  2. Looking for a good paragraph of rich description.  For maximum marks this should NOT just be a description of hitting buttons but should include physical movements, personal context, thoughts, feelings etc.
  3. 2 from the following or anything else good (if there is anything!)

    • initial function flows well left to right and is visually grouped
    • little web cam group uses space to group
    • dating has clear box to group
    • consistent font style (albeit not size!)
  4. 5 from the following or other bad things
    • Name list 500 names too long for pulldown!  – try two level, alphabetic then names.
    • Very hard to work out what buttons use what information – better more consistent grouping, better instructions
    • Web cam indicator colour red/green colour blindness – have two lights
    • Bad alignment in star rating – align to right/decimal point ? do we really need 7 decimal places??
    • Who column --  the initial flowery descriptions make it hard to scan for a name – perhaps invert order “Fred Blossom, the great star” or add these in a separate column
    • No means to order columns – allow sorting by selecting column head
    • No keyboard so how do we type age – turn into selection list, perhaps for age ranges
    • Male/female indicator – perhaps should be radio buttons


EXERCISE 5.12 [extra - not in book]

Having bought a ticket a commuter is waiting on the platform for the train.  There is a large display showing train times and destinations (see below).  The commuter wants to get the Bath train. Discuss the current screen design (how good or bad it is) to support scanning across for identifying the platform for a given destination. If you identify design errors, suggest ways to address them .

departures board

answer available for tutors only

Error 1: too short dotted lines, which may be visually appealing since they have equal lengths. Correction: make dotted lines longer so that they connect the destination with the platform number.

Error 2: background of every second line is grey – while helpful of discriminating between consecutive rows, the colour font is also grey which makes it hard to read. Solution: increase the contrast between font and background.

Individual exercises

ex.5.1 (tut), ex.5.2 (tut), ex.5.3 (tut), ex.5.4 (tut), ex.5.5 (tut), ex.5.6 (ans), ex.5.7 (tut), ex.5.8 (tut), ex.5.9 (tut), ex.5.10 (tut), ex.5.11 (tut), ex.5.12 (tut)

Worked exercises in book

  • a worked exercise
  • a worked exercise
  • a worked exercise
  • a worked exercise