Week 8: Visual Information Design; What is 'intuitive'?; Wireframing

EDITED - 3/29/10 - 9:00am: Added resource link to grid templates. 

Lecture notes are posted in the repository.

Reading quiz next week. I enjoy them too much to forget about them.

Readings:

1. Jared Spool - "What makes a design 'intuitive'?" - http://www.uie.com/articles/design_intuitive/ 
2. "Visual Hierarchy" - http://gd.tuwien.ac.at/languages/html/webstyle/wsg2/page/hierarchy.html
3. "Occam's Interface" - http://finegamedesign.com/ui/index.html#occam 
4. Klaus B. Bærentsen - Intuitive User Interfaces (pages 1-5) http://www.daimi.au.dk/~olavb/sjis12/2-KB_p29-60pre.PDF
5. 5 Ways to Make a User Interface Intuitive - http://www.rikcatindustries.com/2007/10/16/5-ways-to-make-a-user-interface-intuitive/
6. Usability first definition of affordance: http://www.usabilityfirst.com/glossary/affordance/

Mockup Assignment: Part 1
You will create a wireframe design for a character creation screen.

1. Start with your mini game pitch that you developed from the style guide project. Imagine that, in your game, you have a character creation screen. I
2. Imagine this screen as appropriate for your game's theme. 
• ex. Military Sim = "Customize Soldier", Racing = "Upgrade Car", Sci-fi Adventure = "Customize Spaceship", and so on. Figure out what is appropriate for your game.
3. Brainstorm what information this screen will need to show. 
4. Organize your information on the screen into a visual hierarchy. 
• Consider what info is most important and what is least important.
• Consider what info is similar and should be grouped, as well as what info is different and should be emphasized by separation.  
• How you organize this is up to you, but I suggest either a simple indented outline or highlighting colors.
5. As you start to think about translating the list of info into a visual layout:
• Consider the affordances needed on your screen: of the information that will be shown, what information can the player change? What UI elements will you provide for this? (buttons, dropdowns, checkboxes, etc.) 
• Consider overall screen navigation, especially as it related to common heuristics on your target platform.
6. Create several wireframe thumbnail sketches showing blocks of info and major screen elements. (This is like the demo in class.) These are small in size, large squares of info, just a few labels if necessary.
7. Of your sketches, choose your strongest layout and keep developing it into your wireframe. Add text and simple shapes to describe your screen. 
8. Your screen should be the correct proportion and screen res for your final game.
• If you don't know what to use, here are defaults: ps3 or xbox or PC = 1024x768. 
• Other systems are fine (DS, PSP, Wii, etc.), you need to go look up the info or ask me. 
• Also, you can use another appropriate resolution for your system but you *must* explain it in your writeup. (A smaller PC res for a web game because of standard browser bars. Or, maybe letterboxed console because you want the cinema ultra widescreen feel.) 
9. Create a writeup for this project. You have the option of creating this writeup as a written text description; or, you can create a copy of your wireframe with notes written on it.
10. You will have 4 delivarables for this project:
• Two thumbnail sketches. These are simple and show stages from your brainstorming process.
• One final wireframe. This does not need to be cleaned or remapped, it just needs to be legible.
• One writeup. Either as a copy of the wireframe with notes, or as a chunk of text.  
11. Post a link to your work in the comments. You can post a set of links to your deliverables, or put them all on a single webpage and link to it.

Resources: 

• Free printable sketching and wireframing pdf templates, different platforms and layout styles:  http://www.smashingmagazine.com/2010/03/29/free-printable-sketching-wireframing-and-note-taking-pdf-templates/