Week 9: Iterative Design for UI

Lecture notes are posted in the repository.

Reading quiz next week.

Note about class next week: we will be usability testing your mockups as an in-class activity next week. You need to show up with your Mockup P2 completed and easily accessible in-class to participate in the testing for your next project. Check your links before class so that you are prepared with your deliverables!

Readings:

• Jakob Nielson - "Iterative Design of User Interface" Introduction & Benefits of Iteration (stop at Usability Metrics) http://www.useit.com/papers/iterative_design/
• Jakob Nielson - "Parallel Design" http://www.useit.com/papers/parallel_design/
• Anders Ramsay - "Three Reasons to Start Designing Iteratively" http://www.andersramsay.com/2009/03/01/three-reasons-to-start-designing-iteratively
• Mike Rhode - "Embracing Iterative Design" http://www.graphicdefine.org/issue1/iterativedesign
• Wikipedia: User-Centered Design http://en.wikipedia.org/wiki/User-centered_design
• IBM - "Transitioning from Waterfall to Iterative Design" (read the intro and Advantages of Iterative Design sections, stop at Four Steps) http://www.ibm.com/developerworks/rational/library/4243.html

Mockup, Part DEUX!

1. You will create a final screen design by developing your wireframe into a fininshed mockup using your style guide from earlier in the semester. 
2. Using your style guide notes, apply your style design to your basic wireframe skeleton. 
• There is no specific way to do this process, it varies by designer. You can break down the steps into manageable chunks of style application in whatever order makes the most sense for you: create your text fields, add temp text, apply font styles to fields, add basic containers/buttons/widgets, add any temp/stock art to fill in "game assets" if necessary.  
• You will likely need to adjust placement of wireframe items slightly as you apply styles and begin to follow your guides for sizing. 
• As you design and answer new design questions, consider if they make sense to add to your style guide. Would your new answers apply to other screens in the game? Add them to the guide! (See next item below...)
3. Create a copy of your "style guide with notes" for this assignment. (You can call it style guide v.2 or some such.) As you apply your styles to your screen, you will find additional standardizable information that you need for your design which you've missed in your original style guide. Using a different color, add these notes to your style guide overlays.
4. Deliverables:
•  Screen layout: a bitmap of your screen design. 
• Style guide v2.0: a copy of your style guide with your additional notes from this project added in a new color.
• Discussion/log: a paragraph or two discussing your experience with this assignment. Thoughts to keep in mind: what did you find surprisingly easy/difficult? What information did you need in your style guide that you hadn't planned for initially? What proportion of your design questions were naturally answered by the guide and its improvements vs what proportion of your design is specific to this screen? What technical skills, if any, did you pick up while creating this screen?
5.  Post links to your deliverables as a reply to this post.

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/

Midterm Grades Posted

I've emailed a copy of your midterm back to each of your with your grade and highlight notes.
Nice job, guys!

If you did not receive an email from me with your midterm attached, please let me know.
If you have any questions, please email me your questions or email set up time to talk before or after class on Tuesday.

 And: if you're going to argue, you had better be well-prepared for it:
'How to Argue for a Better Grade' slides: http://docs.google.com/present/view?id=df5zxmb2_127xnvqjw

-Brittany 

Recap: Week 6 & 7

Just to recap and keep the week numbers clear: 
Week 6 was the midterm.
Week 7  was Spring Break - no class held.

The Critiquing UIs term paper is due posted and linked on Tuesday, 3/23/10.
See you all on Tuesday. 

Week 5: Critiquing UIs

Lecture slides are in the repository.

Midterm is next week. Review your readings, quizzes, and the lecture slides to prepare.

Homework Readings: 

• Ridiculous UI in film http://gizmodo.com/5418342/ridiculous-user-interfaces-in-film-and-the-man-who-designs-them/
• Summary of Principles of UI Design http://www.sylvantech.com/~talin/projects/ui_design.html
• GameSpy - Designing a good interface editorial (strategy games) http://www.gamespy.com/articles/491/491801p1.html 
• Usability First defines "User Interface Critique" http://www.usabilityfirst.com/glossary/term_440.txl 

Term paper: due 3/23/10 

From the Usability First definition of a UI Critique: http://www.usabilityfirst.com/glossary/term_440.txl

A user interface critique may come from any number of theoretical perspectives, including historical, psychological, sociological, ethical, philosophical, economic, and artistic concerns. Deeper criticisms are often meant to be part of a long-term dialogue with society about the various impacts of our design decisions. Practical critiques are often intended simply for quickly improving our design of software and improving our purchasing decisions, based on the practical expertise of the critic, and in a more cost-effective fashion than most formal evaluation methods.

From UNC Art History handout http://www.unc.edu/depts/wcweb/handouts/arthistory.html

Instructors may want you to talk about how the formal or stylistic qualities of the object reflect or affect the time in which they were made. More specifically, you may be asked to look at the object's relationship to ideas about gender, class, artistic creation, culture, or politics associated with that time. Or you may be asked to connect artworks with the theories of a particular person.

Deep criticisms are often meant to be part of a long-term dialogue with society about the various impacts of our design decision. Criticism can be framed from different perspectives, such as:

• Historical
• Psychological
• Sociological
• Ethical
• Historical
• Psychological
• Sociological
• >Ethical 

Criteria:

• Write a deep criticism about 2 games focusing primarily on the UI. Use at least 2 of the Perspectives to frame your discussion. You may include practical criticisms or art history-style critiques as well, but be sure to focus on the perspectives commentary.
• You must include 2 screenshots for each game. If you can not get these screenshots (screen cap, photo from tv, internet reference), you can not use the game in your essay. I need to have a visual reference on what you are discussing.  Cite any images you include. 
• You may turn this in as a MLA style paper or you can create a web page for your text and images. Present it however you wish, focusing on a professional style.
• Your essay will probably be between 750 and 1,000 words, but let the content be your guide in thoroughness. 
• Include a MLA style citation for any references or images you include in your paper. Also, use the References section for help with Modern Language Association citations.

References:
Cornell: MLA Citation Style: http://www.library.cornell.edu/resrch/citmanage/mla#list
MLA citation generator: http://www.palomar.edu/dsps/actc/mla/
BibMe http://www.bibme.org/