Usability Design: Because it's awesome

13,557 views

Published on

Talk for IGDA Manila @DLS-CSB July 2011

Published in: Design, Technology
1 Comment
54 Likes
Statistics
Notes
No Downloads
Views
Total views
13,557
On SlideShare
0
From Embeds
0
Number of Embeds
901
Actions
Shares
0
Downloads
0
Comments
1
Likes
54
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Usability Design: Because it's awesome

    1. USABILITY DESIGNbecause it’s awesome @jensterjuice
    2. StyleBusiness UI Psych DevUI 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. DesignObjective Experience Interaction Design (UX) (UI)
    5. The Usability Process 1 2 3 Concept Strategy Solution 5 4 Innovation IterationGet your UI as early in the process as you can.
    6. 1. ConceptYou 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 PrototypingExplore your designs as quickly as possible.Use recycled paper. Seriously, don’t kill trees.
    9. 2. StrategyLimitations and considerations.
    10. Evolutionary Prototyping1 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 andunderstand what everything is supposed to do.
    12. Performance vs. Preferencesit 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 FeedbackEach piece of information operates as one unit of feedback.
    19. Flow of Information They usually have conditions. Input Feedback Crazy Yes No FeedbackA life cycle of each component will always spawn new life cycles of new components, and so on.
    20. Flow of InformationThere are a million different ways to organize your content structure, depending on what you need.
    21. YOU MUST BEORGANIZED
    22. YOU MUST BEORGANIZED
    23. Flow of Information Some Resources on making great UXhttp://www.ixda.org/resourceshttp://www.lukew.com/ff/entry.asp?156http://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 Biasa.k.a. who the hell are you designing for?The universality of imagery / Scott McCloud
    34. Signal to Noise Ratio Signal NoiseDesign is not decoration. It is communicating the objective in the clearest, fastest way possible.
    35. Given a choice between functionality equivalentdesigns, the simplest design should be selected.
    36. Interface DevelopmentHome 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
    37. Failure of design.Something doesn’t communicate the way you expect it to.
    38. Interface Development 2. Simplify the structure of tasks.Short term memory can only retain about five unrelated items. [Unless you work atBlizzard] if a UI screen is too complicated, then the user has to waste time trying tounderstand the design of the screen, delaying play time, and lowering the players enjoyment. http://www.gamasutra.com/view/feature/2085/crossplatform_user_interface_.php?page=2
    39. UI Patterns One of the keys to simplification is understandingrepetition, which is based on previously established standards. Patterns are fundamental visual tactics.
    40. UI Patterns Some Resources on UI Patternshttp://patterntap.com/collections/http://ui-patterns.com/http://developer.yahoo.com/ypatterns/
    41. Interface Development 3. Make things visible. Its not just the visual clues about audible ones as well. A good user interface willprovide 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
    42. Layout, Messaging, StyleYour 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.
    43. Interface Development 4. Get the mappings right.Dont 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
    44. 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
    45. 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.
    46. 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
    47. 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
    48. iPhone iPad
    49. iPhone Facebook
    50. 4-5. Iteration+ InnovationEveryday is a redesign. Build a time machine.
    51. “ The Artificial Reality Problem: A good artist or modeler can make most any ” design look like it will work.
    52. But your product will most likely always be brokenon every level of production regardless of how cool it looks.
    53. Is that bad?
    54. NO.
    55. The 7 Kinds of Brokenaccording 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
    56. Required Reading The Universal Principles of Design By William Lidwell, Kritina Holden, Jill Butler Free on Google Books: http://bit.ly/nrKBmA
    57. Thanks IGDA!
    58. USABILITY DESIGNbecause it’s awesome @jensterjuice

    ×