SlideShare une entreprise Scribd logo
1  sur  44
Télécharger pour lire hors ligne
Top 5:
     Usability
    Principles
       Erik Ralston
         BIS BoF
      April 15, 2010




1
What is Usability?


    A subjective evaluation of how easily users achieve goals

    Minimize user error and maximize user satisfaction

    Learning in the short-term and efficiency in the long-term




2
What is Usability?


    Communicated by user’s emotional response
      Users either “love” or “hate” the application


    “Mental Model” – A User’s internal understanding and
    expectations on how the system works
      Often very different than the real system internals


    “Intuitive” – Resonant with a user’s mental model
      Easy to Learn
      Familiar to Users



3
Understanding the User


    “Intuition” is built from emotionally rooted expectations
    and beliefs (biases resulting from previous experiences)

    Intuition is considered before reason
       Everyone's intuition is different; you must ask the user!


    Humans with neurologically hindered emotions often
    suffer from indecision and lack of motivation (Aboulia)
       Not evoking emotion makes the user unmotivated




4
Understanding the User

Spock uses only
  Vulcan logic




5
Understanding the User




                Stephen uses only his gut




6
Understanding Errors


    “Slip” – A temporary malfunction of the user
      Typing an extra letter
      Missing a click


    “Mistake” – A mismatch between user’s mental model
    and the real behavior of the system
      Gulf of Execution
      Gulf of Evaluation


    More a continuum than absolute categories
      Misspelling a word can be caused by either



7
Understanding Errors




8
Gulf of Execution
    “I don’t know what to do???”

    User can’t connect their goal to a decision in the interface

    Users are unaware of a decision that affects their goal




9
Gulf of Evaluation
     “What does that mean???”
       “What did I just do???”, “Where am I???”


     User can’t match current state to mental model
       User can’t connect a previous decision with a new state
       User was unaware they just made a decision that changed state


                    The user just feels…




10
Gulf of Evaluation




11
What is an interface really?


     An abstraction of the system for user interaction
        Enables user to act on the system
        Provides feedback from the system to the user


     A purposeful barrier between the user and the system
        Protects user from complexity
        Obfuscates even simple aspects of system




12
What is an interface really?


     Decisions – Actions the user may perform on the system

     Information – System data relevant to user

     Instructions – Description of decisions or information




13
What is an interface really?




14
What is an interface really?




15
Engineering “Intuitive”


     Suggestions for connecting interface to mental models
       Managing presentation of information, decisions, and instructions
       NOT infallible laws or requirements


     Embody the fundamentals of all good design
       Simplicity
       Consistency
       Clarity


     Principles extend to some everyday items as well



16
#5: Progressive Disclosure
     Maintain user focus by initially showing simple and relevant
            items; hiding advanced and rarely used items.




17
Recognition




18
Recognition




19
Recognition




20
Recognition




21
Progressive Disclosure




22
Progressive Disclosure

     Show the most common items and hide the rest
        20% of the interface provides 80% of the functionality
        Users can only read in a small radius; think 1 inch


     If an item is uncommon or very complicated, hide it

     Show users “their” information first (personalization)
       If a task is recent, then show it first




23
#4: No Dead Ends
                        (or Death Traps)
     At no time should a conspicuously valid decision lead to
          obstruction of the user goal, or even worse harm




24
No Dead Ends




25
No Dead Ends




26
No Dead Ends




27
No Dead Ends




28
No Dead Ends In Detail

     If a user decision would cause a system error or invalid
     state, then that decision should be inaccessible
        Hidden or disabled


     If a user decision is ambiguous, then accept ambiguity

     Error messages should guide the users on how to re-
     establish a path to their goals




29
#3: Recognition Over Recall
      Economize user memory by offering options instead of
              forcing recall of previous information




30
Recognition Over Recall
     Miller’s Law – Working memory is 7± 2 Items




31
Recognition Over Recall In Detail

     If the user must remember something to make a decision,
     then provide them options to choose amongst
        Essay or multiple choice?


     If it’s a small idea, connect it to a large idea (Hierarchy!)

     If it’s the same idea, give it the same name everywhere




32
#2: Fitt’s Law
     Ease of reaching a goal is a function of size and distance




33
Fitt’s Law




34
Fitt’s Law in Detail
     Size implies importance
       If it’s used often, it should be big


     Proximity implies relationships
       If two elements are related, they should be close together
       If two elements are unrelated, they should be far apart
       Related elements elements should be adjacent


     Order implies path
       Think about a visual and logical “path” for the user to follow
       If a user must make a series of decisions, then they must be in a
       predictable order (ex: left-to-right or top-to-bottom)



35
#1: Affordance
     The possible actions for an object should be presented
                    obviously and consistently




36
Affordance

     Very Non-Standard Buttons

     Interaction that is really distraction

     Buttons that hide their destination




37
Affordance In Detail

     Different combinations between possibility and reality
        “Perceptible” visible and implemented decisions
        “Hidden” invisible and implemented decisions
        “False” visible and unimplemented decisions


     Do not require interaction to understand the possibilities
        Hovering shouldn’t be necessary, but perhaps clarifying


     If it looks the same, it should behave the same
        If it looks different, it should behave differently



38
Top 5 Usability Principles


     #5: Progressive Disclosure – 80-20 Rule for Interfaces

     #4: No Dead Ends – Remove invalid decisions

     #3: Recognition Over Recall – Choice not memory

     #2: Fitt’s Law – Ease of use is distance and size

     #1: Affordance – Action possibilities



39
#0: Ask the User!
     None of the principles are more useful than user opinion

     Usability is about making the user happy
        Only the user can decide when they are happy
        You can’t make them happy if you don’t ask them


     Use the principles to guide the user
        They can’t understand code, but they understand Usability
        Use the principles to take the lead and most users will follow




40
Your Principles?



41
Other Places of Insight


     Usability.gov
        The guide to making government website “usable & useful”


     OK/Cancel
        A blog/web-comic on usability design


     Windows User Experience Interaction Guidelines
        Microsoft’s wisdom on User Experience




42
Questions?



43
Thank You!



44

Contenu connexe

Tendances

Introduction to Design Pattern
Introduction to Design  PatternIntroduction to Design  Pattern
Introduction to Design PatternSanae BEKKAR
 
Design Principles
Design PrinciplesDesign Principles
Design PrinciplesDavid Gelb
 
Interaction design beyond human computer interaction
Interaction design beyond human computer interactionInteraction design beyond human computer interaction
Interaction design beyond human computer interactionKenny Nguyen
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile appsIvano Malavolta
 
Presentation Use Case Diagram and Use Case Specification.pptx
Presentation Use Case Diagram and Use Case Specification.pptxPresentation Use Case Diagram and Use Case Specification.pptx
Presentation Use Case Diagram and Use Case Specification.pptxazida3
 
The Design of Everyday Things
The Design of Everyday ThingsThe Design of Everyday Things
The Design of Everyday ThingsMatthew Portwood
 
SE2018_Lec 18_ Design Principles and Design Patterns
SE2018_Lec 18_ Design Principles and Design PatternsSE2018_Lec 18_ Design Principles and Design Patterns
SE2018_Lec 18_ Design Principles and Design PatternsAmr E. Mohamed
 
User interface (UI) for mobile applications
User interface (UI) for mobile applicationsUser interface (UI) for mobile applications
User interface (UI) for mobile applicationsAashish Uppal
 
Software Testing Strategies
Software Testing StrategiesSoftware Testing Strategies
Software Testing StrategiesAlpana Bhaskar
 
Component Based Development
Component Based DevelopmentComponent Based Development
Component Based DevelopmentBen McCormick
 
Artificial intelligence
Artificial intelligenceArtificial intelligence
Artificial intelligenceBiniam Behailu
 
Top 11 Mobile App Development Frameworks
Top 11 Mobile App Development FrameworksTop 11 Mobile App Development Frameworks
Top 11 Mobile App Development FrameworksAlbiorix Technology
 
Lecture 1: Human-Computer Interaction Introduction (2014)
Lecture 1: Human-Computer Interaction Introduction (2014)Lecture 1: Human-Computer Interaction Introduction (2014)
Lecture 1: Human-Computer Interaction Introduction (2014)Lora Aroyo
 
UX in a Nutshell
UX in a NutshellUX in a Nutshell
UX in a NutshellYing Jiang
 

Tendances (20)

Introduction to Design Pattern
Introduction to Design  PatternIntroduction to Design  Pattern
Introduction to Design Pattern
 
Design Principles
Design PrinciplesDesign Principles
Design Principles
 
Interaction design beyond human computer interaction
Interaction design beyond human computer interactionInteraction design beyond human computer interaction
Interaction design beyond human computer interaction
 
The Mobile Ecosystem
The Mobile EcosystemThe Mobile Ecosystem
The Mobile Ecosystem
 
Chapter 7 design rules
Chapter 7 design rulesChapter 7 design rules
Chapter 7 design rules
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile apps
 
Design pattern-presentation
Design pattern-presentationDesign pattern-presentation
Design pattern-presentation
 
Presentation Use Case Diagram and Use Case Specification.pptx
Presentation Use Case Diagram and Use Case Specification.pptxPresentation Use Case Diagram and Use Case Specification.pptx
Presentation Use Case Diagram and Use Case Specification.pptx
 
The Design of Everyday Things
The Design of Everyday ThingsThe Design of Everyday Things
The Design of Everyday Things
 
SE2018_Lec 18_ Design Principles and Design Patterns
SE2018_Lec 18_ Design Principles and Design PatternsSE2018_Lec 18_ Design Principles and Design Patterns
SE2018_Lec 18_ Design Principles and Design Patterns
 
User interface (UI) for mobile applications
User interface (UI) for mobile applicationsUser interface (UI) for mobile applications
User interface (UI) for mobile applications
 
Software Testing Strategies
Software Testing StrategiesSoftware Testing Strategies
Software Testing Strategies
 
Android OS 2019
Android OS 2019Android OS 2019
Android OS 2019
 
Usability Presentation
Usability PresentationUsability Presentation
Usability Presentation
 
Component Based Development
Component Based DevelopmentComponent Based Development
Component Based Development
 
Artificial intelligence
Artificial intelligenceArtificial intelligence
Artificial intelligence
 
drag and drop.pdf
drag and drop.pdfdrag and drop.pdf
drag and drop.pdf
 
Top 11 Mobile App Development Frameworks
Top 11 Mobile App Development FrameworksTop 11 Mobile App Development Frameworks
Top 11 Mobile App Development Frameworks
 
Lecture 1: Human-Computer Interaction Introduction (2014)
Lecture 1: Human-Computer Interaction Introduction (2014)Lecture 1: Human-Computer Interaction Introduction (2014)
Lecture 1: Human-Computer Interaction Introduction (2014)
 
UX in a Nutshell
UX in a NutshellUX in a Nutshell
UX in a Nutshell
 

En vedette

Usability & Design Principles
Usability & Design PrinciplesUsability & Design Principles
Usability & Design PrinciplesClaus Medvesek
 
Principles of Usability Testing For Historic Newspapers
Principles of Usability Testing For Historic NewspapersPrinciples of Usability Testing For Historic Newspapers
Principles of Usability Testing For Historic NewspapersEuropeana Newspapers
 
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile AppsCodeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile AppsIntelligent_ly
 
Usability Principles to Improve User Engagement
Usability Principles to Improve User EngagementUsability Principles to Improve User Engagement
Usability Principles to Improve User EngagementMelissa Eggleston
 
Mage Titans - Workshop - UI Components
Mage Titans - Workshop - UI ComponentsMage Titans - Workshop - UI Components
Mage Titans - Workshop - UI Componentsvkorotun
 
Firefox 3.5 Launch: Creative Workshop
Firefox 3.5 Launch: Creative WorkshopFirefox 3.5 Launch: Creative Workshop
Firefox 3.5 Launch: Creative WorkshopTshahian
 
Creativity & Innovation - Technique - TEDO
Creativity & Innovation - Technique - TEDOCreativity & Innovation - Technique - TEDO
Creativity & Innovation - Technique - TEDOMayankRohatgi
 
Workshop Innovation War Room
Workshop Innovation War RoomWorkshop Innovation War Room
Workshop Innovation War RoomAlbregts Anke
 
Innovation Workshop –Games and Reality
Innovation Workshop –Games and RealityInnovation Workshop –Games and Reality
Innovation Workshop –Games and RealityDudi Peles
 
Le wagon UI & design crash course
Le wagon UI & design crash courseLe wagon UI & design crash course
Le wagon UI & design crash courseMathieu Le Roux
 
Workshop: Innovation Games
Workshop: Innovation GamesWorkshop: Innovation Games
Workshop: Innovation GamesBen Sykes
 
Talk : Innovation Games : Perfecting Your Brainstorming Technique for Killer...
Talk : Innovation Games : Perfecting Your Brainstorming Technique for  Killer...Talk : Innovation Games : Perfecting Your Brainstorming Technique for  Killer...
Talk : Innovation Games : Perfecting Your Brainstorming Technique for Killer...Ben Sykes
 

En vedette (20)

Usability & Design Principles
Usability & Design PrinciplesUsability & Design Principles
Usability & Design Principles
 
What Is Usability?
What Is Usability?What Is Usability?
What Is Usability?
 
Components Usability
Components UsabilityComponents Usability
Components Usability
 
Principles of Usability Testing For Historic Newspapers
Principles of Usability Testing For Historic NewspapersPrinciples of Usability Testing For Historic Newspapers
Principles of Usability Testing For Historic Newspapers
 
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile AppsCodeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
 
Usability Principles to Improve User Engagement
Usability Principles to Improve User EngagementUsability Principles to Improve User Engagement
Usability Principles to Improve User Engagement
 
Mage Titans - Workshop - UI Components
Mage Titans - Workshop - UI ComponentsMage Titans - Workshop - UI Components
Mage Titans - Workshop - UI Components
 
Innovation Workshop
Innovation WorkshopInnovation Workshop
Innovation Workshop
 
Firefox 3.5 Launch: Creative Workshop
Firefox 3.5 Launch: Creative WorkshopFirefox 3.5 Launch: Creative Workshop
Firefox 3.5 Launch: Creative Workshop
 
UI/UX Workshop
UI/UX WorkshopUI/UX Workshop
UI/UX Workshop
 
Creativity & Innovation - Technique - TEDO
Creativity & Innovation - Technique - TEDOCreativity & Innovation - Technique - TEDO
Creativity & Innovation - Technique - TEDO
 
Innovation Survey
Innovation SurveyInnovation Survey
Innovation Survey
 
Workshop Innovation War Room
Workshop Innovation War RoomWorkshop Innovation War Room
Workshop Innovation War Room
 
Innovation Workshop –Games and Reality
Innovation Workshop –Games and RealityInnovation Workshop –Games and Reality
Innovation Workshop –Games and Reality
 
Le wagon UI & design crash course
Le wagon UI & design crash courseLe wagon UI & design crash course
Le wagon UI & design crash course
 
Workshop: Innovation Games
Workshop: Innovation GamesWorkshop: Innovation Games
Workshop: Innovation Games
 
The 7 Navigation Types of Web Site
The 7 Navigation Types of Web SiteThe 7 Navigation Types of Web Site
The 7 Navigation Types of Web Site
 
Innovation workshop
Innovation workshopInnovation workshop
Innovation workshop
 
Talk : Innovation Games : Perfecting Your Brainstorming Technique for Killer...
Talk : Innovation Games : Perfecting Your Brainstorming Technique for  Killer...Talk : Innovation Games : Perfecting Your Brainstorming Technique for  Killer...
Talk : Innovation Games : Perfecting Your Brainstorming Technique for Killer...
 
UX/UI Workshop: Prototyping magic
UX/UI Workshop: Prototyping magicUX/UI Workshop: Prototyping magic
UX/UI Workshop: Prototyping magic
 

Similaire à Top 5 Usability Principles

HCI Unit 3.pptx
HCI Unit 3.pptxHCI Unit 3.pptx
HCI Unit 3.pptxRaja980775
 
User Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid ProcessUser Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid ProcessbrindaN
 
Usability, Accessibility, and Design Evaluation
Usability, Accessibility, and Design EvaluationUsability, Accessibility, and Design Evaluation
Usability, Accessibility, and Design EvaluationDamian T. Gordon
 
20IT706PE User Interface Design - Unit 1.pptx
20IT706PE User Interface Design - Unit 1.pptx20IT706PE User Interface Design - Unit 1.pptx
20IT706PE User Interface Design - Unit 1.pptxParthibanSubramani7
 
User Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionUser Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionbrindaN
 
HCI_Week 5.pptx
HCI_Week 5.pptxHCI_Week 5.pptx
HCI_Week 5.pptxfika69
 
Heuristic principles
Heuristic principlesHeuristic principles
Heuristic principlesSwathy Tantry
 
HCI 1st and 2nd sessions
HCI  1st and 2nd sessionsHCI  1st and 2nd sessions
HCI 1st and 2nd sessionsHannesChimusi
 
App Development: Beginning with the end-user in mind
App Development: Beginning with the end-user in mindApp Development: Beginning with the end-user in mind
App Development: Beginning with the end-user in mindFemi Longe
 
Colleges yvonne van_laarhoven
Colleges yvonne van_laarhovenColleges yvonne van_laarhoven
Colleges yvonne van_laarhovenDigital Power
 
Did you check the UX Quality?-Rajarshi Ray
Did you check the UX Quality?-Rajarshi RayDid you check the UX Quality?-Rajarshi Ray
Did you check the UX Quality?-Rajarshi Raybhumika2108
 
Evaluating User Interfaces
Evaluating User InterfacesEvaluating User Interfaces
Evaluating User InterfacesNancy Jain
 
UI Evaluation for Mobile Dashboard based on Jakob Nielsen's Principles.pptx
UI Evaluation for Mobile Dashboard based on Jakob Nielsen's Principles.pptxUI Evaluation for Mobile Dashboard based on Jakob Nielsen's Principles.pptx
UI Evaluation for Mobile Dashboard based on Jakob Nielsen's Principles.pptxIshara Amarasekera
 

Similaire à Top 5 Usability Principles (20)

HCI Unit 3.pptx
HCI Unit 3.pptxHCI Unit 3.pptx
HCI Unit 3.pptx
 
HCI Quick Guide
HCI Quick GuideHCI Quick Guide
HCI Quick Guide
 
HCI
HCI HCI
HCI
 
User Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid ProcessUser Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid Process
 
Heuristic ux-evaluation
Heuristic ux-evaluationHeuristic ux-evaluation
Heuristic ux-evaluation
 
hci Evaluation Techniques.pptx
 hci Evaluation Techniques.pptx hci Evaluation Techniques.pptx
hci Evaluation Techniques.pptx
 
Usability, Accessibility, and Design Evaluation
Usability, Accessibility, and Design EvaluationUsability, Accessibility, and Design Evaluation
Usability, Accessibility, and Design Evaluation
 
20IT706PE User Interface Design - Unit 1.pptx
20IT706PE User Interface Design - Unit 1.pptx20IT706PE User Interface Design - Unit 1.pptx
20IT706PE User Interface Design - Unit 1.pptx
 
User Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionUser Interface Design - Module 1 Introduction
User Interface Design - Module 1 Introduction
 
HCI_Week 5.pptx
HCI_Week 5.pptxHCI_Week 5.pptx
HCI_Week 5.pptx
 
Intro Design Principles
Intro Design PrinciplesIntro Design Principles
Intro Design Principles
 
Hci activity#2
Hci activity#2Hci activity#2
Hci activity#2
 
Heuristic principles
Heuristic principlesHeuristic principles
Heuristic principles
 
HCI 1st and 2nd sessions
HCI  1st and 2nd sessionsHCI  1st and 2nd sessions
HCI 1st and 2nd sessions
 
App Development: Beginning with the end-user in mind
App Development: Beginning with the end-user in mindApp Development: Beginning with the end-user in mind
App Development: Beginning with the end-user in mind
 
Colleges yvonne van_laarhoven
Colleges yvonne van_laarhovenColleges yvonne van_laarhoven
Colleges yvonne van_laarhoven
 
Did you check the UX Quality?-Rajarshi Ray
Did you check the UX Quality?-Rajarshi RayDid you check the UX Quality?-Rajarshi Ray
Did you check the UX Quality?-Rajarshi Ray
 
10 Usability Heuristics explained
10 Usability Heuristics explained10 Usability Heuristics explained
10 Usability Heuristics explained
 
Evaluating User Interfaces
Evaluating User InterfacesEvaluating User Interfaces
Evaluating User Interfaces
 
UI Evaluation for Mobile Dashboard based on Jakob Nielsen's Principles.pptx
UI Evaluation for Mobile Dashboard based on Jakob Nielsen's Principles.pptxUI Evaluation for Mobile Dashboard based on Jakob Nielsen's Principles.pptx
UI Evaluation for Mobile Dashboard based on Jakob Nielsen's Principles.pptx
 

Plus de Erik Ralston

Starting An Open Source Project
Starting An Open Source ProjectStarting An Open Source Project
Starting An Open Source ProjectErik Ralston
 
jQuery vs AJAX Control Toolkit
jQuery vs AJAX Control ToolkitjQuery vs AJAX Control Toolkit
jQuery vs AJAX Control ToolkitErik Ralston
 
Introduction to CodeRush Xpress
Introduction to CodeRush XpressIntroduction to CodeRush Xpress
Introduction to CodeRush XpressErik Ralston
 
BarTender History Explorer
BarTender History ExplorerBarTender History Explorer
BarTender History ExplorerErik Ralston
 

Plus de Erik Ralston (7)

Starting An Open Source Project
Starting An Open Source ProjectStarting An Open Source Project
Starting An Open Source Project
 
Choice
ChoiceChoice
Choice
 
.Net Threading
.Net Threading.Net Threading
.Net Threading
 
Flow
FlowFlow
Flow
 
jQuery vs AJAX Control Toolkit
jQuery vs AJAX Control ToolkitjQuery vs AJAX Control Toolkit
jQuery vs AJAX Control Toolkit
 
Introduction to CodeRush Xpress
Introduction to CodeRush XpressIntroduction to CodeRush Xpress
Introduction to CodeRush Xpress
 
BarTender History Explorer
BarTender History ExplorerBarTender History Explorer
BarTender History Explorer
 

Top 5 Usability Principles

  • 1. Top 5: Usability Principles Erik Ralston BIS BoF April 15, 2010 1
  • 2. What is Usability? A subjective evaluation of how easily users achieve goals Minimize user error and maximize user satisfaction Learning in the short-term and efficiency in the long-term 2
  • 3. What is Usability? Communicated by user’s emotional response Users either “love” or “hate” the application “Mental Model” – A User’s internal understanding and expectations on how the system works Often very different than the real system internals “Intuitive” – Resonant with a user’s mental model Easy to Learn Familiar to Users 3
  • 4. Understanding the User “Intuition” is built from emotionally rooted expectations and beliefs (biases resulting from previous experiences) Intuition is considered before reason Everyone's intuition is different; you must ask the user! Humans with neurologically hindered emotions often suffer from indecision and lack of motivation (Aboulia) Not evoking emotion makes the user unmotivated 4
  • 5. Understanding the User Spock uses only Vulcan logic 5
  • 6. Understanding the User Stephen uses only his gut 6
  • 7. Understanding Errors “Slip” – A temporary malfunction of the user Typing an extra letter Missing a click “Mistake” – A mismatch between user’s mental model and the real behavior of the system Gulf of Execution Gulf of Evaluation More a continuum than absolute categories Misspelling a word can be caused by either 7
  • 9. Gulf of Execution “I don’t know what to do???” User can’t connect their goal to a decision in the interface Users are unaware of a decision that affects their goal 9
  • 10. Gulf of Evaluation “What does that mean???” “What did I just do???”, “Where am I???” User can’t match current state to mental model User can’t connect a previous decision with a new state User was unaware they just made a decision that changed state The user just feels… 10
  • 12. What is an interface really? An abstraction of the system for user interaction Enables user to act on the system Provides feedback from the system to the user A purposeful barrier between the user and the system Protects user from complexity Obfuscates even simple aspects of system 12
  • 13. What is an interface really? Decisions – Actions the user may perform on the system Information – System data relevant to user Instructions – Description of decisions or information 13
  • 14. What is an interface really? 14
  • 15. What is an interface really? 15
  • 16. Engineering “Intuitive” Suggestions for connecting interface to mental models Managing presentation of information, decisions, and instructions NOT infallible laws or requirements Embody the fundamentals of all good design Simplicity Consistency Clarity Principles extend to some everyday items as well 16
  • 17. #5: Progressive Disclosure Maintain user focus by initially showing simple and relevant items; hiding advanced and rarely used items. 17
  • 23. Progressive Disclosure Show the most common items and hide the rest 20% of the interface provides 80% of the functionality Users can only read in a small radius; think 1 inch If an item is uncommon or very complicated, hide it Show users “their” information first (personalization) If a task is recent, then show it first 23
  • 24. #4: No Dead Ends (or Death Traps) At no time should a conspicuously valid decision lead to obstruction of the user goal, or even worse harm 24
  • 29. No Dead Ends In Detail If a user decision would cause a system error or invalid state, then that decision should be inaccessible Hidden or disabled If a user decision is ambiguous, then accept ambiguity Error messages should guide the users on how to re- establish a path to their goals 29
  • 30. #3: Recognition Over Recall Economize user memory by offering options instead of forcing recall of previous information 30
  • 31. Recognition Over Recall Miller’s Law – Working memory is 7± 2 Items 31
  • 32. Recognition Over Recall In Detail If the user must remember something to make a decision, then provide them options to choose amongst Essay or multiple choice? If it’s a small idea, connect it to a large idea (Hierarchy!) If it’s the same idea, give it the same name everywhere 32
  • 33. #2: Fitt’s Law Ease of reaching a goal is a function of size and distance 33
  • 35. Fitt’s Law in Detail Size implies importance If it’s used often, it should be big Proximity implies relationships If two elements are related, they should be close together If two elements are unrelated, they should be far apart Related elements elements should be adjacent Order implies path Think about a visual and logical “path” for the user to follow If a user must make a series of decisions, then they must be in a predictable order (ex: left-to-right or top-to-bottom) 35
  • 36. #1: Affordance The possible actions for an object should be presented obviously and consistently 36
  • 37. Affordance Very Non-Standard Buttons Interaction that is really distraction Buttons that hide their destination 37
  • 38. Affordance In Detail Different combinations between possibility and reality “Perceptible” visible and implemented decisions “Hidden” invisible and implemented decisions “False” visible and unimplemented decisions Do not require interaction to understand the possibilities Hovering shouldn’t be necessary, but perhaps clarifying If it looks the same, it should behave the same If it looks different, it should behave differently 38
  • 39. Top 5 Usability Principles #5: Progressive Disclosure – 80-20 Rule for Interfaces #4: No Dead Ends – Remove invalid decisions #3: Recognition Over Recall – Choice not memory #2: Fitt’s Law – Ease of use is distance and size #1: Affordance – Action possibilities 39
  • 40. #0: Ask the User! None of the principles are more useful than user opinion Usability is about making the user happy Only the user can decide when they are happy You can’t make them happy if you don’t ask them Use the principles to guide the user They can’t understand code, but they understand Usability Use the principles to take the lead and most users will follow 40
  • 42. Other Places of Insight Usability.gov The guide to making government website “usable & useful” OK/Cancel A blog/web-comic on usability design Windows User Experience Interaction Guidelines Microsoft’s wisdom on User Experience 42