game design 2 (2013): lecture 12 - usability, layout and metaphor
DESCRIPTION
Grab bag of topics this week.TRANSCRIPT
![Page 1: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/1.jpg)
Game Design 2Lecture 12: Usability, Metaphor & Layout
http://gcugd2.com [email protected]
With thanks to Ed de Quincey
2013
![Page 2: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/2.jpg)
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.
![Page 3: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/3.jpg)
Usability
![Page 4: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/4.jpg)
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)
![Page 5: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/5.jpg)
Attributes of usability
• Learnability: How easy is it for users to accomplish basic tasks the !rst 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 pro!ciency?
• 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)
![Page 6: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/6.jpg)
![Page 7: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/7.jpg)
iPhone Keyboard
• http://bit.ly/comu346iPhoneKeyboard
![Page 8: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/8.jpg)
Alpha / Numeric
![Page 9: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/9.jpg)
email / URL
![Page 10: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/10.jpg)
Web Search / Normal Search
![Page 11: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/11.jpg)
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.”
![Page 12: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/12.jpg)
![Page 13: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/13.jpg)
![Page 14: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/14.jpg)
![Page 15: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/15.jpg)
![Page 16: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/16.jpg)
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
![Page 17: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/17.jpg)
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
![Page 18: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/18.jpg)
“The mouse is a hand and the cursor is a !nger”
http://www.brockerhoff.net/Paper2000.pdf
![Page 19: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/19.jpg)
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
![Page 20: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/20.jpg)
Layout
• Some layouts feel better than others
• What makes a layout ‘feel’ good?
![Page 21: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/21.jpg)
Three Ideas
• Rule of Thirds
• Golden Ratio
• Grids
![Page 22: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/22.jpg)
Rule of Thirds
• Break a screen intothirds (horizontallyand vertically)
![Page 23: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/23.jpg)
• This not only gives4 parts of the imageto consider ‘important’
![Page 24: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/24.jpg)
• It also gives 4 lineswhich can be usedfor spacing
![Page 25: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/25.jpg)
![Page 26: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/26.jpg)
![Page 27: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/27.jpg)
• Most often used in visual arts (photography) but applies to interface layout too
![Page 28: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/28.jpg)
Golden Section/Divine Proportion
Phi 1.618 …
![Page 29: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/29.jpg)
Golden Section/Divine Proportion• Creating designs on “feeling”
–what is that feeling?
Phi 1.618 …
![Page 30: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/30.jpg)
![Page 31: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/31.jpg)
![Page 32: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/32.jpg)
![Page 33: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/33.jpg)
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.
![Page 34: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/34.jpg)
![Page 35: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/35.jpg)
![Page 36: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/36.jpg)
![Page 37: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/37.jpg)
![Page 38: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/38.jpg)
![Page 39: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/39.jpg)
![Page 40: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/40.jpg)
Grids
• If elements are not aligned, it strains the eye.
• Vertical / horizontal alignment or grid layouts can help
http://webstyleguide.com/page/grids.html
![Page 41: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/41.jpg)
![Page 42: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/42.jpg)
![Page 43: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/43.jpg)
![Page 44: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/44.jpg)
http://www.blueprintcss.org/
![Page 45: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/45.jpg)
http://developer.yahoo.com/yui/grids/
![Page 46: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/46.jpg)
http://developer.yahoo.com/yui/grids/builder/
![Page 47: Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c82cdb4a7959f23d8b45c4/html5/thumbnails/47.jpg)
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