Game Design 2Lecture 10: Usability, Metaphor & Layout
http://www.comu346.com
With thanks to Ed de Quincey
2011
Notes•Talk on how to break into game
industry:http://bit.ly/vDkKfN
•Jon McKellan’s talk - question responses
•Teams!
•Extension - new deadline is Friday 25th November at 1pm in my office H014a
•iPad Notification System
Last Minute Advice
•In order to do well with the coursework.
Usability
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)
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)
iPhone Keyboard
•http://bit.ly/comu346iPhoneKeyboard
QuickTime™ and a decompressor
are needed to see this picture.
Alpha / Numeric
email / URL
Web Search / Normal Search
First principles: Fitt’s Law
• 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)
“The time to acquire a target is a function of the distance to and size of the target.”
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
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
“The mouse is a hand and the cursor is a finger”
http://www.brockerhoff.net/Paper2000.pdf
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
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
Layout
•Some layouts feel better than others
•What makes a layout ‘feel’ good?
Three Ideas
•Rule of Thirds
•Golden Ratio
•Grids
Rule of Thirds
•Break a screen intothirds (horizontallyand vertically)
•This not only gives4 parts of the imageto consider ‘important’
•It also gives 4 lineswhich can be usedfor spacing
•Most often used in visual arts (photography) but applies to interface layout too
Golden Section/Divine Proportion
Phi 1.618 …
Golden Section/Divine Proportion
•Creating designs on “feeling”–what is that feeling?
Phi 1.618 …
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.QuickTime™ and a decompressorare needed to see this picture.QuickTime™ and a decompressorare needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
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.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
Grids•If elements are
not aligned, it strains the eye.
•Vertical / horizontal alignment or grid layouts can help
http://webstyleguide.com/page/grids.html
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
http://www.blueprintcss.org/
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
http://developer.yahoo.com/yui/grids/
http://developer.yahoo.com/yui/grids/builder/
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
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
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
Top Related