CM160 Foundation of HumanComputer Interaction Representing Design 3

1
CM160 Foundation of Human-Computer
InteractionRepresenting Design 3
Examples of past student work Some issues to avoid
2
Legibility

• Comments
• Sketches your handwriting is too hard to read
  when its crammed in so much.
• Emphasise the main features by removing clutter.
• Your rationale is good but I cant give marks for
  work I cant read.

3
Size
Even at this size text is hard to read!
Large area of screen unused
ORIGINAL
RESIZED
4
Proportions

• Make sure the screen ratio is accurate
• Wrong proportions may mislead
• Amount of space available
• Amount of information it can hold
• Etc.

• This may be a squeeze!

5
Colour

• Useful idea, but
• Overpowering
• Hard to take in everything

Use colour but sparingly
6
How easily can a gardener get an overview of the
current state of the plot?
7
How easily can a gardener get an overview of the
current state of the plot?

• Design does not show current state of plot
• Shows current state of bed 1
• Where is bed 1?
• Needs to show state for ALL beds in the plot
• Gardener may not wish to scroll through all beds
  to find what is growing there

8
How easily can a gardener distinguish between
information about what has previously been grown
in the bed, what is currently growing there, and
what is planned to grow there?
9
How easily can a gardener distinguish between
information about what has previously been grown
in the bed, what is currently growing there, and
what is planned to grow there?
Toggling between tabs strain on users
memoryDisplay all reduce cognitive
loadConsistency between screens?
10
Danger!

• Work out the design rationale first then
  represent it
• If you draw first then try to justify
• You will have wasted time drawing something that
  may not work
• Concentrate on
• What needs to be shown
• How to fit it in
• Connections between information
• You may forget what the task is and focus on the
  interface
• Stay focused on what the gardener is trying to do
• You should be able to test your design
• Carry out the task using your prototype
• Is all the information visible?
• Can I see how to get it?
• Simple steps?