SlideShare a Scribd company logo
1 of 59
USABILITY DESIGN
because it’s awesome

       @jensterjuice
Style




Business    UI     Psych




           Dev



UI 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. Design




Objective   Experience   Interaction   Design
               (UX)          (UI)
The Usability Process

   1             2                3
       Concept        Strategy        Solution




                 5                4
                     Innovation       Iteration




Get your UI as early in the process as you can.
1. Concept




You 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 Prototyping




Explore your designs as quickly as possible.
Use recycled paper. Seriously, don’t kill trees.
2. Strategy




Limitations and considerations.
Evolutionary Prototyping

1                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 and
understand what everything is supposed to do.
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.
Timing is Everything.




Plan temporal components, animation efficiency,
          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
OR ELSE
Flow of Information
               Where does it go?




           Input             Feedback




Each piece of information operates as one unit of
                   feedback.
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.
Flow of Information




There are a million different ways to organize your content
         structure, depending on what you need.
YOU MUST BE
ORGANIZED
YOU MUST BE
ORGANIZED
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
Visual Prototyping Tools




     http://www.omnigroup.com/products/omnigraffle/
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/fireworks.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/fireworks.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
Cool.
Now we can design a game.
3. Solution




     Make good design,
or Steve Jobs will punish you.
Understanding Human Bias
a.k.a. who the hell are you designing for?




The universality of imagery / Scott McCloud
Signal to Noise Ratio




  Signal                                  Noise




Design is not decoration. It is communicating the
 objective in the clearest, fastest way possible.
Given a choice between functionality equivalent
designs, the simplest design should be selected.
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
Usability Design: Because it's awesome
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 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
UI Patterns




 One of the keys to simplification is understanding
repetition, which is based on previously established
 standards. Patterns are fundamental visual tactics.
UI Patterns
      Some Resources on UI Patterns



http://patterntap.com/collections/
http://ui-patterns.com/
http://developer.yahoo.com/ypatterns/
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
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.
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
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
+ Innovation




Everyday is a redesign.
 Build a time machine.
“   The Artificial 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 broken
on every level of production
         regardless of how cool it looks.
Is that bad?
NO.
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
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 DESIGN
because it’s awesome

       @jensterjuice

More Related Content

What's hot

UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory sessionSooraj P R
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the DifferenceVibloo
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyCHI UX Indonesia
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for StartupsRichard Fang
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshopInova LLC
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESJeremy Robinson
 
A Lean Design Process for Creating Awesome UX
A Lean Design Process for Creating Awesome UXA Lean Design Process for Creating Awesome UX
A Lean Design Process for Creating Awesome UXAnnie Wang
 
User interface and user experience ui ux design basics
User interface  and user experience ui ux design basicsUser interface  and user experience ui ux design basics
User interface and user experience ui ux design basicsRavi Bhadauria
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designMorgan McKeagney
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaRoshan Karunarathna
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideBabajide Aroyewun
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience WorkshopMotivate Design
 

What's hot (20)

Look at UI/UX Design Process
Look at UI/UX Design ProcessLook at UI/UX Design Process
Look at UI/UX Design Process
 
UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
 
What is UX?
What is UX?What is UX?
What is UX?
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 
Lean UX
Lean UXLean UX
Lean UX
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
 
What is User Experience Design?
What is User Experience Design?What is User Experience Design?
What is User Experience Design?
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
 
A Lean Design Process for Creating Awesome UX
A Lean Design Process for Creating Awesome UXA Lean Design Process for Creating Awesome UX
A Lean Design Process for Creating Awesome UX
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
User interface and user experience ui ux design basics
User interface  and user experience ui ux design basicsUser interface  and user experience ui ux design basics
User interface and user experience ui ux design basics
 
UX design
UX designUX design
UX design
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience Workshop
 

Viewers also liked

Avoiding Death By Powerpoint Slideshare
Avoiding Death By Powerpoint SlideshareAvoiding Death By Powerpoint Slideshare
Avoiding Death By Powerpoint SlideshareNancy Verbrugghe
 
Basics in usability, process and methodologies - Sivaprasath Selvaraj
Basics in usability, process and methodologies - Sivaprasath SelvarajBasics in usability, process and methodologies - Sivaprasath Selvaraj
Basics in usability, process and methodologies - Sivaprasath SelvarajSivaprasath Selvaraj
 
Towards Method Engineering of Model-Driven User Interface Development
Towards Method Engineering ofModel-Driven User Interface Development Towards Method Engineering ofModel-Driven User Interface Development
Towards Method Engineering of Model-Driven User Interface Development Jean Vanderdonckt
 
Usability - Zdradliwa mądrość - Tomasz Karwatka
Usability - Zdradliwa mądrość - Tomasz KarwatkaUsability - Zdradliwa mądrość - Tomasz Karwatka
Usability - Zdradliwa mądrość - Tomasz KarwatkaTomasz Karwatka
 
Usability Testing - Sivaprasath Selvaraj
Usability Testing - Sivaprasath SelvarajUsability Testing - Sivaprasath Selvaraj
Usability Testing - Sivaprasath SelvarajSivaprasath Selvaraj
 
Usability i UCD - case study Generali i Gazeta.pl
Usability i UCD - case study Generali i Gazeta.plUsability i UCD - case study Generali i Gazeta.pl
Usability i UCD - case study Generali i Gazeta.plTomasz Karwatka
 
Usability Engineering General guidelines
Usability Engineering General guidelinesUsability Engineering General guidelines
Usability Engineering General guidelinesREHMAT ULLAH
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDPreeti Chopra
 
Into the landscape of UX
Into the landscape of UXInto the landscape of UX
Into the landscape of UXVinny Wu
 
Articulo juridico de_prescripcion_e_hipoteca
Articulo juridico de_prescripcion_e_hipotecaArticulo juridico de_prescripcion_e_hipoteca
Articulo juridico de_prescripcion_e_hipotecaWilfredo Surichaqui Rojas
 
User Experience: What is it Anyway?
User Experience: What is it Anyway?User Experience: What is it Anyway?
User Experience: What is it Anyway?Sam O'Hara
 
User Experience Design
User Experience DesignUser Experience Design
User Experience DesignLanh Le
 
Signals and noise
Signals and noiseSignals and noise
Signals and noiseRavi Kant
 

Viewers also liked (20)

Avoiding Death By Powerpoint Slideshare
Avoiding Death By Powerpoint SlideshareAvoiding Death By Powerpoint Slideshare
Avoiding Death By Powerpoint Slideshare
 
Basics in usability, process and methodologies - Sivaprasath Selvaraj
Basics in usability, process and methodologies - Sivaprasath SelvarajBasics in usability, process and methodologies - Sivaprasath Selvaraj
Basics in usability, process and methodologies - Sivaprasath Selvaraj
 
Towards Method Engineering of Model-Driven User Interface Development
Towards Method Engineering ofModel-Driven User Interface Development Towards Method Engineering ofModel-Driven User Interface Development
Towards Method Engineering of Model-Driven User Interface Development
 
Usability - Zdradliwa mądrość - Tomasz Karwatka
Usability - Zdradliwa mądrość - Tomasz KarwatkaUsability - Zdradliwa mądrość - Tomasz Karwatka
Usability - Zdradliwa mądrość - Tomasz Karwatka
 
Usability Testing - Sivaprasath Selvaraj
Usability Testing - Sivaprasath SelvarajUsability Testing - Sivaprasath Selvaraj
Usability Testing - Sivaprasath Selvaraj
 
Usability i UCD - case study Generali i Gazeta.pl
Usability i UCD - case study Generali i Gazeta.plUsability i UCD - case study Generali i Gazeta.pl
Usability i UCD - case study Generali i Gazeta.pl
 
Usability Engineering General guidelines
Usability Engineering General guidelinesUsability Engineering General guidelines
Usability Engineering General guidelines
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UED
 
DWO 2011 - Usability
DWO 2011 - UsabilityDWO 2011 - Usability
DWO 2011 - Usability
 
Into the landscape of UX
Into the landscape of UXInto the landscape of UX
Into the landscape of UX
 
User Experience
User ExperienceUser Experience
User Experience
 
Articulo juridico de_prescripcion_e_hipoteca
Articulo juridico de_prescripcion_e_hipotecaArticulo juridico de_prescripcion_e_hipoteca
Articulo juridico de_prescripcion_e_hipoteca
 
User Experience: What is it Anyway?
User Experience: What is it Anyway?User Experience: What is it Anyway?
User Experience: What is it Anyway?
 
User Experience
User ExperienceUser Experience
User Experience
 
UX for Dummies
UX for DummiesUX for Dummies
UX for Dummies
 
Ns ux-session-1
Ns ux-session-1Ns ux-session-1
Ns ux-session-1
 
User Experience Design
User Experience DesignUser Experience Design
User Experience Design
 
Signals and noise
Signals and noiseSignals and noise
Signals and noise
 
UX Fails / Talk at Incube
UX Fails / Talk at IncubeUX Fails / Talk at Incube
UX Fails / Talk at Incube
 
UX for Dummies
UX for DummiesUX for Dummies
UX for Dummies
 

Similar to Usability Design: Because it's awesome

Guerrilla Usability: Insight on a Shoestring
Guerrilla Usability: Insight on a ShoestringGuerrilla Usability: Insight on a Shoestring
Guerrilla Usability: Insight on a ShoestringDavid Sturtz
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyChad Currie
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?Marc Miquel
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping EssentialsRachel Hinman
 
10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App DevelopersJigyasa Makkar
 
The Next Generation of Flash User Experience
The Next Generation of Flash User ExperienceThe Next Generation of Flash User Experience
The Next Generation of Flash User ExperienceKevin Suttle
 
Design Workshop I @ Cornell Tech
Design Workshop I @ Cornell TechDesign Workshop I @ Cornell Tech
Design Workshop I @ Cornell TechZaid Haque
 
Being a Little Agile
Being a Little AgileBeing a Little Agile
Being a Little AgileDaniel Blair
 
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping ToolsMHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping ToolsMark Billinghurst
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypestec
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningPaul Crimi
 
Tech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping WorkshopTech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping WorkshopNetSquared
 
Designing Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDesigning Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDave Malouf
 
Managing change with prototyping
Managing change with prototypingManaging change with prototyping
Managing change with prototypingGeorge Abraham
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipallanchao
 
Mobile Design at Gilt
Mobile Design at GiltMobile Design at Gilt
Mobile Design at GiltDavid Park
 
Web valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app developmentWeb valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app developmentEamonn Maguire
 
Citrix Labs Rapid Prototyping Workshop
Citrix Labs Rapid Prototyping WorkshopCitrix Labs Rapid Prototyping Workshop
Citrix Labs Rapid Prototyping WorkshopReuven Cohen
 

Similar to Usability Design: Because it's awesome (20)

Guerrilla Usability: Insight on a Shoestring
Guerrilla Usability: Insight on a ShoestringGuerrilla Usability: Insight on a Shoestring
Guerrilla Usability: Insight on a Shoestring
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think Responsively
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
 
10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers
 
The Next Generation of Flash User Experience
The Next Generation of Flash User ExperienceThe Next Generation of Flash User Experience
The Next Generation of Flash User Experience
 
Design Workshop I @ Cornell Tech
Design Workshop I @ Cornell TechDesign Workshop I @ Cornell Tech
Design Workshop I @ Cornell Tech
 
Being a Little Agile
Being a Little AgileBeing a Little Agile
Being a Little Agile
 
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping ToolsMHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & Planning
 
Android UI Design Tips
Android UI Design TipsAndroid UI Design Tips
Android UI Design Tips
 
Tech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping WorkshopTech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping Workshop
 
Designing Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDesigning Powerful Web Applications - Monterey
Designing Powerful Web Applications - Monterey
 
Ux guide
Ux guideUx guide
Ux guide
 
Managing change with prototyping
Managing change with prototypingManaging change with prototyping
Managing change with prototyping
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
 
Mobile Design at Gilt
Mobile Design at GiltMobile Design at Gilt
Mobile Design at Gilt
 
Web valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app developmentWeb valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app development
 
Citrix Labs Rapid Prototyping Workshop
Citrix Labs Rapid Prototyping WorkshopCitrix Labs Rapid Prototyping Workshop
Citrix Labs Rapid Prototyping Workshop
 

Recently uploaded

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 

Recently uploaded (19)

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 

Usability Design: Because it's awesome

  • 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.
  • 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
  • 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.
  • 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
  • 59. USABILITY DESIGN because it’s awesome @jensterjuice

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n