Talk for IGDA Manila @DLS-CSB July 2011

1. USABILITY DESIGN
because it’s awesome
@jensterjuice

2. Style
Business UI Psych
Dev
UI is AWESOME.

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/

4. User Experience vs. Design
Objective Experience Interaction Design
(UX) (UI)

5. The Usability Process
1 2 3
Concept Strategy Solution
5 4
Innovation Iteration
Get your UI as early in the process as you can.

6. 1. Concept
You want to make a game.
You must be crazy!

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)

8. Concept Prototyping
Explore your designs as quickly as possible.
Use recycled paper. Seriously, don’t kill trees.

9. 2. Strategy
Limitations and considerations.

10. Evolutionary Prototyping
1 2 3
Concept Strategy Solution
5 4
Innovation Iteration
Why Beta is betta.

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.

13. Timing is Everything.
Plan temporal components, animation efficiency,
and physics into your UX.

14. “ NOT always right. ”
The customer (user) is
People are poor at discriminating
between features they like, and
features that actually enhance
performance.

15. You are organizing content.
You MUST be organized.

16. OR ELSE

17. OR ELSE

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.

21. YOU MUST BE
ORGANIZED

22. YOU MUST BE
ORGANIZED

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

24. Visual Prototyping Tools
http://www.omnigroup.com/products/omnigraffle/

25. Visual Prototyping Tools
1. OmniGraffle
- Build schematics and
wireframes quickly
- Comprehensive GUI kits
- Multi-platform kits
- Dynamic linking to elements
within the schematic
- Comprehensive file type
exports (pdf, doc, png, etc.)
http://www.omnigroup.com/products/omnigraffle/

26. Visual Prototyping Tools
http://www.adobe.com/products/fireworks.html

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

28. Visual Prototyping Tools
http://creately.com/product/google-apps

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

30. Cool.

31. Now we can design a game.

32. 3. Solution
Make good design,
or Steve Jobs will punish you.

33. Understanding Human Bias
a.k.a. who the hell are you designing for?
The universality of imagery / Scott McCloud

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

38. Failure of design.
Something doesn’t communicate
the way you expect it to.

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

49. iPhone
iPad

50. iPhone
Facebook

51. 4-5. Iteration
+ Innovation
Everyday is a redesign.
Build a time machine.

52. “ The Artificial Reality Problem:
A good artist or modeler can make most any
”
design look like it will work.

53. But your product will most likely always be broken
on every level of production
regardless of how cool it looks.

54. Is that bad?

55. NO.

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

58. Thanks IGDA!

59. USABILITY DESIGN
because it’s awesome
@jensterjuice