3. The IBM Iceberg Model
Visuals - 10%
- The Look
Interaction - 30%
- The Feel
- Mapping the device
User Model - 60%
- The things you use
- The user’s mental model
http://www.ibm.com/developerworks/library/w-berry/
7. Things to ask:
What are the objectives of the game?
What’s it about?
What are the mechanics of the game?
What is the platform?
What is the device?
Who is using it?
What should it look like?
What should it feel like?
Will I slay zombies? (optional)
11. Structural Components
Menu Core Functions
A B C D E
Dialogs
Stage (Other Functions)
v
Stage States
(Pages, Levels)
Contextual Navigation Pointer
(Input)
Identify your main components and
understand what everything is supposed to do.
12. Performance vs. Preference
sit on a wooden chair don’t sit sit down now
sit on a fancy chair y don’t sit
sit on a cat sit down now
sit in a tree level up to sit
Be helpful, or be efficient.
Know when to cut the crap and get to the point.
14. “ NOT always right. ”
The customer (user) is
People are poor at discriminating
between features they like, and
features that actually enhance
performance.
18. Flow of Information
Where does it go?
Input Feedback
Each piece of information operates as one unit of
feedback.
19. Flow of Information
They usually have conditions.
Input Feedback
Crazy Yes
No
Feedback
A life cycle of each component will always spawn new life
cycles of new components, and so on.
20. Flow of Information
There are a million different ways to organize your content
structure, depending on what you need.
23. Flow of Information
Some Resources on making great UX
http://www.ixda.org/resources
http://www.lukew.com/ff/entry.asp?156
http://52weeksofux.com/
http://www.jjg.net/ia/
http://www.informationdesign.org/
http://www.agilemodeling.com/artifacts/uiFlowDiagram.htm
27. Visual Prototyping Tools
2. Adobe Fireworks
- Great if you’re comfortable
with using Adobe + making
web/mobile games.
- Treats graphics as symbols
and objects (like Flash)
- Extensible (you can take
each element directly into a
dev space)
- Real-time gfx optimization
http://www.adobe.com/products/fireworks.html
29. Visual Prototyping Tools
3. Creately
- GoogleApps enabled for
collaboration
- Optimized for social media
schematics
- Easy point of entry
- Plugs in to some existing
business suites already.
- Also a Chrome plugin!
http://creately.com/product/google-apps
34. Signal to Noise Ratio
Signal Noise
Design is not decoration. It is communicating the
objective in the clearest, fastest way possible.
35. Given a choice between functionality equivalent
designs, the simplest design should be selected.
36. Interface Development
Home Home Home Home Home Home Home???
WTF.
1. Use knowledge in the world and the head.
Refer to previously established standards.
http://www.gamasutra.com/view/feature/2085/crossplatform_user_interface_.php?page=2
39. Interface Development
2. Simplify the structure of tasks.
Short term memory can only retain about five unrelated items. [Unless you work at
Blizzard] if a UI screen is too complicated, then the user has to waste time trying to
understand the design of the screen, delaying play time, and lowering the player's
enjoyment.
http://www.gamasutra.com/view/feature/2085/crossplatform_user_interface_.php?page=2
40. UI Patterns
One of the keys to simplification is understanding
repetition, which is based on previously established
standards. Patterns are fundamental visual tactics.
41. UI Patterns
Some Resources on UI Patterns
http://patterntap.com/collections/
http://ui-patterns.com/
http://developer.yahoo.com/ypatterns/
42. Interface Development
3. Make things visible.
It's not just the visual clues about audible ones as well. A good user interface will
provide feedback on the execution side of an action so that players know what actions
are possible and how they are executed.
http://www.gamasutra.com/view/feature/2085/crossplatform_user_interface_.php?page=2
43. Layout, Messaging, Style
Your objectives should always influence your design.
If you have a game about a farm, don’t create a death
metal styling on your UI just because it’s trendy.
44. Interface Development
4. Get the mappings right.
Don't use a callout that has a blue "A" button, when the button is green on the controller.
http://www.gamasutra.com/view/feature/2085/crossplatform_user_interface_.php?page=2
45. Interface Development
5. Exploit the power of constraints.
Constraints can be used to make the player feel as though there is only one possible
action - the right one.
http://www.gamasutra.com/view/feature/2085/crossplatform_user_interface_.php?page=2
46. Composition and Scale
Each device has its own constraints for visual layout.
Depending on what you’re using, sometimes it’s better to
show less, or show more.
47. Interface Development
6. Design for errors.
Allow players to recover from errors, and make them reversible.
http://www.gamasutra.com/view/feature/2085/crossplatform_user_interface_.php?page=2
48. Interface Development
7. Standardize.
Either create or adhere to standards so that the player will have some idea of what
actions to take.
http://www.gamasutra.com/view/feature/2085/crossplatform_user_interface_.php?page=2
56. The 7 Kinds of Broken
according to Seth Godin.
Not my job.
Selfish jerks.
The world changed.
I didn’t know.
I’m not a fish.
Contradictions.
Broken on purpose.
http://vimeo.com/4246943
57. Required Reading
The Universal Principles of Design
By William Lidwell,
Kritina Holden,
Jill Butler
Free on Google Books:
http://bit.ly/nrKBmA