Game Design 2: Lecture 10 - UI Layout
•Download as PPT, PDF•
5 likes•6,012 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 ,[object Object],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)
![Notes ,[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Game Design 2: Lecture 10 - UI Layout
Similar to Game Design 2: Lecture 10 - UI Layout (20)
More from David Farrell
More from David Farrell (15)
Recently uploaded
Recently uploaded (20)
Game Design 2: Lecture 10 - UI Layout
- 7. Usability
- 12. Alpha / Numeric
- 13. email / URL
- 14. Web Search / Normal Search
- 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
- 32. Golden Section/Divine Proportion 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.
Editor's Notes
- 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.
- 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?
- contrast that with this ___ (after vid) Look at all the design that went into this keyboard!
- Different keyboards for different functions...
- but also different contexts (the .com button can expand into .co.uk etc)
- 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.
- Fitt’s law is another great example of designing for a user.
- this is MS paint - each of the icons is basically pinned to the LHS - BUT they allow a pixel border
- 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.
- 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.
- 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.
- 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
- 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)
- first ever metaphorse - Xerox Parc
- So where possible, consider the rule of thirds.
- Have you heard of the golden ratio?
- 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.
- Finally, grids. Consider these two... Flash etc can align.
- You can download paper off the internet that can help you sketch with a grid in mind.
- Note that this is based on a grid. but also....
- The BBC site actually uses a kind of Phi grid - the main
- 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
- yahoo has one for css also
- some general tips Platform conventions --- need to show the ‘b’ button in Far Cry even though it’s against ui feel.