Usability Design: Because it's awesome

USABILITY DESIGNbecause it’s awesome @jensterjuice

StyleBusiness UI Psych DevUI is AWESOME.

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/

User Experience vs. DesignObjective Experience Interaction Design (UX) (UI)

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

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

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)

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

2. StrategyLimitations and considerations.

Evolutionary Prototyping1 2 3 Concept Strategy Solution 5 4 Innovation Iteration Why Beta is betta.

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.

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 efﬁcient. Know when to cut the crap and get to the point.

Timing is Everything.Plan temporal components, animation efﬁciency, and physics into your UX.

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

You are organizing content.You MUST be organized.

OR ELSE

Flow of Information Where does it go? Input FeedbackEach piece of information operates as one unit of feedback.

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.

Flow of InformationThere are a million different ways to organize your content structure, depending on what you need.

YOU MUST BEORGANIZED

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

Visual Prototyping Tools http://www.omnigroup.com/products/omnigrafﬂe/

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/

Visual Prototyping Tools http://www.adobe.com/products/ﬁreworks.html

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/ﬁreworks.html

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

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

Now we can design a game.

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

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

Signal to Noise Ratio Signal NoiseDesign is not decoration. It is communicating the objective in the clearest, fastest way possible.

Given a choice between functionality equivalentdesigns, the simplest design should be selected.

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

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

Interface Development 2. Simplify the structure of tasks.Short term memory can only retain about ﬁve 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

UI Patterns One of the keys to simpliﬁcation is understandingrepetition, which is based on previously established standards. Patterns are fundamental visual tactics.

UI Patterns Some Resources on UI Patternshttp://patterntap.com/collections/http://ui-patterns.com/http://developer.yahoo.com/ypatterns/

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

Layout, Messaging, StyleYour objectives should always inﬂuence 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.

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

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

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.

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

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

iPhone iPad

iPhone Facebook

4-5. Iteration+ InnovationEveryday is a redesign. Build a time machine.

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

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

Is that bad?

The 7 Kinds of Brokenaccording to Seth Godin.Not my job.Selﬁsh jerks.The world changed.I didn’t know.I’m not a ﬁsh.Contradictions.Broken on purpose. http://vimeo.com/4246943

Required Reading The Universal Principles of Design By William Lidwell, Kritina Holden, Jill Butler Free on Google Books: http://bit.ly/nrKBmA

Thanks IGDA!

USABILITY DESIGNbecause it’s awesome @jensterjuice

http://www.martinbr.com	427
http://thiagomorello.tumblr.com	127
http://patternmag.com	57
http://hlmdesignthinking.blogspot.com	53
http://www.twylah.com	27
http://10.7.84.63	25
http://twitter.com	13
http://www.redditmedia.com	9
http://www.linkedin.com	6
http://a0.twimg.com	5
http://tweetedtimes.com	4
http://10.7.10.60	3
http://tube.deldig.com	1
http://scrap	1
http://www.blogger.com	1
http://posterous.com	1

Usability Design: Because it's awesome

by Jen Yu on Jul 25, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

16 Embeds 760

Statistics

Usability Design: Because it’s awesome — Presentation Transcript