This document summarizes key points from a lecture on usability, metaphors, and layout in game design. It discusses the definition of usability and its main attributes. It provides examples of the iPhone keyboard and how it uses metaphors and Fitt's law principles. The document also covers interface metaphors, using examples like the mouse cursor, and how they can help with usability and immersion. Finally, it discusses layout principles like the rule of thirds, golden ratio, and using grids to create a pleasing visual structure.

1. 2013
Game Design 2
Lecture 12: Usability, Metaphor & Layout
With thanks to Ed de Quincey
http://gcugd2.com
david.farrell@gcu.ac.uk

2. Notes
• Next week: revision lecture
• I will upload some example questions
• You should look at these, attempt them and
let me know what you don’t understand.
• This is the last week for tutorials.

3. Usability

4. What is usability?
“Usability is a quality attribute that assesses how
easy user interfaces are to use. The word
"usability" also refers to methods for improving
ease-of-use during the design process.” (Nielsen,
2003)

5. Attributes of usability
• Learnability: How easy is it for users to accomplish basic tasks
the first time they encounter the design?
• Efficiency: Once users have learned the design, how quickly can
they perform tasks?
• Memorability: When users return to the design after a period of
not using it, how easily can they re-establish proficiency?
• Errors: How many errors do users make, how severe are these
errors, and how easily can they recover from the errors?
• Satisfaction: How pleasant is it to use the design?
(Nielsen, 2003)

7. iPhone Keyboard
• http://bit.ly/comu346iPhoneKeyboard

8. Alpha / Numeric

9. email / URL

10. Web Search / Normal Search

11. First principles: Fitt’s Law
“The time to acquire a target is a function of the
distance to and size of the target.”
• Use large objects for important functions (Big buttons are
faster).
• Use the pinning actions of the sides, bottom, top, and
corners of your display: A single-row toolbar with tool
icons that "bleed" into the edges of the display will be
many times faster than a double row of icons with a
carefully-applied one-pixel non-clickable edge along the
side of the display.
(Tognazzi, 2003)

16. Always consider the user
Useful human strengths and weaknesses to consider include:
• Memory - people can remember 7 (plus or minus 2) “chunks” of
information.
• Visual perception e.g. colour blindness
• Motor skills e.g. mouse skills
• Learning and skill acquisition
• Motivation
• User’s conceptual models
• Population stereotypes
• Human diversity e.g. accessibility issues for disabled users

17. Interface Metaphors
“In order to use a computer-based application in an
effective way it is important that users acquire an
appropriate cognitive model relating to that
application.”
Richards et al.
http://www.intellectbooks.com/iconic/metaphor/metaphor.htm

18. “The mouse is a hand and the cursor is a finger”
http://www.brockerhoff.net/Paper2000.pdf

19. Metaphors in Games
• Many games don’t use ‘default’ UI styles.
• Metaphors can be used in icons as symbols
• Metaphors can also contextualise your
interface and help with immersion

20. Layout
• Some layouts feel better than others
• What makes a layout ‘feel’ good?

21. Three Ideas
• Rule of Thirds
• Golden Ratio
• Grids

22. Rule of Thirds
• Break a screen into
thirds (horizontally
and vertically)

23. • This not only gives
4 parts of the image
to consider ‘important’

24. • It also gives 4 lines
which can be used
for spacing

27. • Most often used in visual arts
(photography) but applies to interface
layout too

28. Golden Section/Divine Proportion
Phi 1.618 …

29. Golden Section/Divine Proportion
• Creating designs on “feeling”
–what is that feeling?
Phi 1.618 …

33. The DNA molecule, the program for all life, is based on the golden section. It
measures 34 angstroms long by 21 angstroms wide for each full cycle of its
double helix spiral. 34 and 21 are numbers in the Fibonacci series and their
ratio, 1.6190476 closely approximates phi, 1.6180339.

40. Grids
• If elements are not
aligned, it strains the
eye.
• Vertical / horizontal
alignment or grid
layouts can help
http://webstyleguide.com/page/grids.html

44. http://www.blueprintcss.org/

45. http://developer.yahoo.com/yui/grids/

46. http://developer.yahoo.com/yui/grids/builder/

47. Visual layout and elements
• Screen resolution and size of monitors
– “image-safe area”
– Valve do surveys - check out their data.
• Design in a style that appeals to audience’s taste
– test the design
• Organisational / platform design conventions?
• Consistent visual identity
• Present your message efficiently and avoid clutter
• Draw attention to new or greatly changed content
• Avoid requiring users to scroll in order to determine page contents
– the “fold” concept for web design
• Avoid requiring the use of horizontal scroll bars
• Use the top and left areas of the page for navigation and identity