Game Design 2: Lecture 10 - UI Layout
Download as PPT, PDF5 likes6,035 views
The document discusses several key principles of game and interface design including usability, metaphors, and layout. It defines usability and its main attributes: learnability, efficiency, memorability, errors, and satisfaction. It discusses interface metaphors and how they can help contextualize interfaces and immerse users. Finally, it covers different layout principles like the rule of thirds, golden ratio, and grids that can be used to create visually pleasing and intuitive designs.
![Game Design 2 Lecture 10: Usability, Metaphor & Layout http://www.comu346.com [email_address] With thanks to Ed de Quincey 2011](https://image.slidesharecdn.com/comu346-lecture10-layout-111113081506-phpapp01/85/Game-Design-2-Lecture-10-UI-Layout-1-320.jpg)
Game Design 2: Lecture 10 - UI Layout
- 1. Game Design 2 Lecture 10: Usability, Metaphor & Layout http://www.comu346.com [email_address] With thanks to Ed de Quincey 2011
- 2. 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
- 3. Last Minute Advice In order to do well with the coursework.
- 7. Usability
- 8. 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)
- 9. 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)
- 12. Alpha / Numeric
- 13. email / URL
- 14. Web Search / Normal Search
- 15. 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.”
- 20. 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
- 21. 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
- 22. “ The mouse is a hand and the cursor is a finger” http://www.brockerhoff.net/Paper2000.pdf
- 23. 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
- 24. Layout Some layouts feel better than others What makes a layout ‘feel’ good?
- 25. Three Ideas Rule of Thirds Golden Ratio Grids
- 26. Rule of Thirds Break a screen into thirds (horizontally and vertically)
- 27. This not only gives 4 parts of the image to consider ‘important’
- 28. It also gives 4 lines which can be used for spacing
- 31. Most often used in visual arts (photography) but applies to interface layout too
- 32. Golden Section/Divine Proportion Phi 1.618 …
- 33. Golden Section/Divine Proportion Creating designs on “feeling” what is that feeling? Phi 1.618 …
- 37. 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.
- 44. Grids If elements are not aligned, it strains the eye. Vertical / horizontal alignment or grid layouts can help http://webstyleguide.com/page/grids.html
- 51. 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
Editor's Notes
- #10: Efficiency - think about how many ‘actions’ it takes to complete a task - how many clicks... Memorability - going back to an old game - do you remember how to play it? I went back to play Deus Ex this week for a couple of hours - couldn’t remember how to activate augs. Satisfaction - think about the difference between a S60 phone and any modern smartphone - same function but HUUUGE difference in the experience.
- #11: Is this efficient? Is this satisfaying? You can move the curser over the letters Why just grey them out? why not remove option and wrap the keypad?
- #12: contrast that with this ___ (after vid) Look at all the design that went into this keyboard!
- #13: Different keyboards for different functions...
- #14: but also different contexts (the .com button can expand into .co.uk etc)
- #15: The use of the word ‘google’ when you’re on the web is even better than the word search. Even discounting the usability of a controller vs keyboard, these keyboards are clearly much more USABLE than the xBox one.
- #16: Fitt’s law is another great example of designing for a user.
- #17: this is MS paint - each of the icons is basically pinned to the LHS - BUT they allow a pixel border
- #18: if they extended the hit area out a bit, these would be much easier to hit. just like how the iPhone makes it easier to hit chars it expects you to hit.
- #19: We had pixel perfect characters. You put the mouse between the hacker’s legs and he is no longer selected. If we knew about Fitt’s law - we would not have done this. WE actually thought this was GOOD design.
- #20: NWN - the grid lines that separate the objects are NOT dead space however, the icons on RHS are a victim of resolution - if the were vector or redrawn it would be easier for the user to click them. Jon Mckellan told me the reason they don’t use Vector is performance - vector scales beautifully, but needs more cycles than bitmap.
- #21: Memory.. Visual Perception (talk about this later) Motor Skills Aim assist on console (motor skills) Learning skill acquisition require less skill if pssible do you expect them to use those wee buttons in NWN? if not, fade them away make it easy to hit things that are important Talk about the study at G4H - showing ALL buttons always was detrimental - showing more buttons as players needed them and got more skilled was better. Motivation What is the user trying to achieve at any time Conceptiol Models semiotic domains card sorting Population Stereotypes thinking about user (personae) Accessibility beyond colour if you can make it accessible, karmically and commercially good idea
- #22: Folders.. Directories...etc why ‘files’? A song is not a file! But this is how we abstract things. A non-native user can stumble over these things (pertains to our semiotics talk earlier)
- #23: first ever metaphorse - Xerox Parc
- #32: So where possible, consider the rule of thirds.
- #33: Have you heard of the golden ratio?
- #44: Point being - aesthetically, we see the golden ratio in many places in nature - if you have the opportunity to space items according to it, the odds are they will be pleasing on the eye. People don’t often SEEK to model Phi - but will sometimes create something that way just by seeking pleasant aesthetics.
- #45: Finally, grids. Consider these two... Flash etc can align.
- #46: You can download paper off the internet that can help you sketch with a grid in mind.
- #47: Note that this is based on a grid. but also....
- #48: The BBC site actually uses a kind of Phi grid - the main
- #49: Grids don’t need to be static - you can combine two columns to make one larger column. There are tools online that can mock up layouts for you and spit out the code this one for css
- #50: yahoo has one for css also
- #52: some general tips Platform conventions --- need to show the ‘b’ button in Far Cry even though it’s against ui feel.