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
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.
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.
![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)