SlideShare une entreprise Scribd logo
1  sur  25
Télécharger pour lire hors ligne
Design Principles
 from Don Norman’s “Design of Everyday Things” and
Preece, Rogers and Sharp’s “Beyond Interaction Design”
Design of Everyday Things
•   Donald Norman - cognitive scientist and engineer who
    has pioneered many ideas surrounding user centred-
    design
•   worked for Apple, Hewlett Packard, Northwestern
    University, UCSD
•   critiques and examines many everyday items as examples
    of problematic designs
•   design principles a framework for discussing and thinking
    about everyday interactions
•   Norman, Donald A. (1988). The Design of Everyday Things. New
     York: Basic Books.
Design Principles
•   Visibility- can is see it?
•   Feedback - what is it doing now?
•   Affordance - how do I use it?
•   Mapping - where am 1 and where can I go?
•   Constraint - why can’t I do that?
•   Consistency - I think I have seen this before?
Visibility
•   Can see the state of a device and possible actions
•   Car controls are positioned in a way that they can
    be easily found and used
Visibility
•   Problems arise when we cannot “see” how to do use
    a device
•   Sensor technology like auto faucets - not sure how
    to use - guess where to put hands
•   Visible knobs, dials and buttons have been replaced
    by invisible and ambiguous “active zones”
Visibility
•   Hiding certain functions can be
    advantageous in interface design
•   Certain functions are kept invisible
    until needed; also contained within
    a group of similar types
•   Google search makes it clear
    where to enter text
Visibility
•   Other examples of poor or good visibility in design?
Feedback
•   what is it doing now? what action has been
    performed?
•   needs to be immediate and synchronized with user
    action
Feedback
•   Sound works as feedback - examples?
Feedback
•   Other examples of feedback in everyday design?
Affordance
•   Perceived and actual properties of an object that give
    clues to its operation
Affordance
•   Perceived and actual properties of an object that give
    clues to its operation
Affordance
•   Perceived and actual properties of an object that give
    clues to its operation
Affordance
•   Other examples of affordances in everyday interactions?
Mapping
•   Relationship to controls and their effect
Mapping
•   Relationship to controls and their effect
Mapping
•   Relationship to controls and their effect
Constraints
•   Restricting the kind of interactions that can take place
Constraints
•   Restricting the kind of
    interactions that can take place
•   Reduce the chance of error
•   Can also work to focus user’s
    attention to needed task
Constraints
•   Other examples of good and bad
    constraints?
Consistency
    •    designing interfaces to have similar operations and use similar
         elements for achieving similar task
    •    systems are usable and learnable when similar concepts are
         expresses in similar ways
    •    enables people to quickly transfer prior knowledge to new
         contexts and focus on relevant tasks
•       Four types of consistency:
    •    aesthetic
    •    functional
    •    internal
    •    external
Consistency
Aesthetic
•   style and appearance is repeated to enhance
    recognition, communicates membership and sets
    emotional tone
•   Mercedes Benz vehicles are instantly
    recognizable because the company consistently
    feature its logo on all its vehicles
•   associated with quality and prestige; respected
    and admired; fine craftsmanship and reliable
Consistency
Functional
•   meaning and action are consistent to improve
    learnability and understanding
•   consistent use of symbols to represent similar
    concepts, leverages prior knowledge and makes
    new things easier to use
•   traffic always turns yellow before red
•   cassette recorder control symbols used on a
Consistency
Internal
•   consistency with other elements in the
    system
•   cultivates a sense of orientation and trust
•   indicates system is well thought out and
    planned
•   eg. park and trail signage
Consistency
External
•   consistent with other elements in the environment
•   extends the benefit of internal consistencies across
    multiple, independent systems
•   more difficult to achieve because different systems rarely
    observe the same design standards

Contenu connexe

Tendances

Human Computer Interaction: The Design of Everyday Things (User Centered Des...
 Human Computer Interaction: The Design of Everyday Things (User Centered Des... Human Computer Interaction: The Design of Everyday Things (User Centered Des...
Human Computer Interaction: The Design of Everyday Things (User Centered Des...Shakil Mahmood
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basicsAlan Dix
 
HCI 3e - Ch 7: Design rules
HCI 3e - Ch 7:  Design rulesHCI 3e - Ch 7:  Design rules
HCI 3e - Ch 7: Design rulesAlan Dix
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTvicci4041
 
Human computer interaction -Input output channel with Scenario
Human computer interaction -Input output channel with ScenarioHuman computer interaction -Input output channel with Scenario
Human computer interaction -Input output channel with ScenarioN.Jagadish Kumar
 
Evaluation in hci
Evaluation in hciEvaluation in hci
Evaluation in hcisajid rao
 
"What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?""What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?"MITAcademy1
 
UX Lesson 2: User Research
UX Lesson 2: User ResearchUX Lesson 2: User Research
UX Lesson 2: User ResearchJoan Lumanauw
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshopInova LLC
 
Affordance,mapping,constraints and convention in hci
Affordance,mapping,constraints and convention in hciAffordance,mapping,constraints and convention in hci
Affordance,mapping,constraints and convention in hciShoaibidd514
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience DesignRavi Bhadauria
 

Tendances (20)

Human Computer Interaction: The Design of Everyday Things (User Centered Des...
 Human Computer Interaction: The Design of Everyday Things (User Centered Des... Human Computer Interaction: The Design of Everyday Things (User Centered Des...
Human Computer Interaction: The Design of Everyday Things (User Centered Des...
 
User centered Design
User centered DesignUser centered Design
User centered Design
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basics
 
HCI 3e - Ch 7: Design rules
HCI 3e - Ch 7:  Design rulesHCI 3e - Ch 7:  Design rules
HCI 3e - Ch 7: Design rules
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPT
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 
Human computer interaction -Input output channel with Scenario
Human computer interaction -Input output channel with ScenarioHuman computer interaction -Input output channel with Scenario
Human computer interaction -Input output channel with Scenario
 
Evaluation in hci
Evaluation in hciEvaluation in hci
Evaluation in hci
 
"What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?""What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?"
 
UX Lesson 2: User Research
UX Lesson 2: User ResearchUX Lesson 2: User Research
UX Lesson 2: User Research
 
User interface design
User interface designUser interface design
User interface design
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
Affordance,mapping,constraints and convention in hci
Affordance,mapping,constraints and convention in hciAffordance,mapping,constraints and convention in hci
Affordance,mapping,constraints and convention in hci
 
Ux design process
Ux design processUx design process
Ux design process
 
Heuristic evaluation principles
Heuristic evaluation principlesHeuristic evaluation principles
Heuristic evaluation principles
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
 
What is User Experience Design?
What is User Experience Design?What is User Experience Design?
What is User Experience Design?
 
Heuristic ux-evaluation
Heuristic ux-evaluationHeuristic ux-evaluation
Heuristic ux-evaluation
 
User interface-design
User interface-designUser interface-design
User interface-design
 

Similaire à Design Principles for Usable Interfaces

GHAMAS Design Principles
GHAMAS Design PrinciplesGHAMAS Design Principles
GHAMAS Design PrinciplesMichael Rawlins
 
UX Workshop at Startit@KBC
UX Workshop at Startit@KBCUX Workshop at Startit@KBC
UX Workshop at Startit@KBCUXprobe
 
Module 2nd USER INTERFACE DESIGN (15CS832) - VTU
Module 2nd USER INTERFACE DESIGN (15CS832) - VTUModule 2nd USER INTERFACE DESIGN (15CS832) - VTU
Module 2nd USER INTERFACE DESIGN (15CS832) - VTUSachin Gowda
 
Experience the Interface
Experience the InterfaceExperience the Interface
Experience the InterfaceNikhil Chandran
 
Interaction design patterns
Interaction design patternsInteraction design patterns
Interaction design patternsDCU_MPIUA
 
Week 8 & 10
Week 8 & 10Week 8 & 10
Week 8 & 10Study Geek
 
Usability & Agile Development
Usability & Agile DevelopmentUsability & Agile Development
Usability & Agile Developmentbinuvt
 
Ux Meets Code Interaction Usability
Ux Meets Code Interaction UsabilityUx Meets Code Interaction Usability
Ux Meets Code Interaction UsabilityArabella David
 
Design Principlesfrom Don Norman’s Design of Everyday Thing.docx
Design Principlesfrom Don Norman’s Design of Everyday Thing.docxDesign Principlesfrom Don Norman’s Design of Everyday Thing.docx
Design Principlesfrom Don Norman’s Design of Everyday Thing.docxtheodorelove43763
 
UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team Guilherme Rodrigues
 
Usability and User Experience Training Seminar
Usability and User Experience Training SeminarUsability and User Experience Training Seminar
Usability and User Experience Training Seminarlabecvar
 
10 Hinweise für Architekten
10 Hinweise für Architekten10 Hinweise für Architekten
10 Hinweise für Architektenadesso AG
 
Ten Advices for Architects
Ten Advices for ArchitectsTen Advices for Architects
Ten Advices for ArchitectsEberhard Wolff
 
Intro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiIntro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiThanos Makaronas
 
COMP 4010: Lecture 5 - Interaction Design for Virtual Reality
COMP 4010: Lecture 5 - Interaction Design for Virtual RealityCOMP 4010: Lecture 5 - Interaction Design for Virtual Reality
COMP 4010: Lecture 5 - Interaction Design for Virtual RealityMark Billinghurst
 
Lecture 6 Interaction Design for VR
Lecture 6 Interaction Design for VRLecture 6 Interaction Design for VR
Lecture 6 Interaction Design for VRMark Billinghurst
 
Validating Ideas Through Prototyping
Validating Ideas Through PrototypingValidating Ideas Through Prototyping
Validating Ideas Through PrototypingChris Risdon
 
COMP 4010 - Lecture 5: Interaction Design for Virtual Reality
COMP 4010 - Lecture 5: Interaction Design for Virtual RealityCOMP 4010 - Lecture 5: Interaction Design for Virtual Reality
COMP 4010 - Lecture 5: Interaction Design for Virtual RealityMark Billinghurst
 

Similaire à Design Principles for Usable Interfaces (20)

GHAMAS Design Principles
GHAMAS Design PrinciplesGHAMAS Design Principles
GHAMAS Design Principles
 
UX Workshop at Startit@KBC
UX Workshop at Startit@KBCUX Workshop at Startit@KBC
UX Workshop at Startit@KBC
 
Module 2nd USER INTERFACE DESIGN (15CS832) - VTU
Module 2nd USER INTERFACE DESIGN (15CS832) - VTUModule 2nd USER INTERFACE DESIGN (15CS832) - VTU
Module 2nd USER INTERFACE DESIGN (15CS832) - VTU
 
Experience the Interface
Experience the InterfaceExperience the Interface
Experience the Interface
 
Interaction design patterns
Interaction design patternsInteraction design patterns
Interaction design patterns
 
Week 8 & 10
Week 8 & 10Week 8 & 10
Week 8 & 10
 
Usability & Agile Development
Usability & Agile DevelopmentUsability & Agile Development
Usability & Agile Development
 
Ux Meets Code Interaction Usability
Ux Meets Code Interaction UsabilityUx Meets Code Interaction Usability
Ux Meets Code Interaction Usability
 
Design Principlesfrom Don Norman’s Design of Everyday Thing.docx
Design Principlesfrom Don Norman’s Design of Everyday Thing.docxDesign Principlesfrom Don Norman’s Design of Everyday Thing.docx
Design Principlesfrom Don Norman’s Design of Everyday Thing.docx
 
UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team
 
Usability and User Experience Training Seminar
Usability and User Experience Training SeminarUsability and User Experience Training Seminar
Usability and User Experience Training Seminar
 
10 Hinweise für Architekten
10 Hinweise für Architekten10 Hinweise für Architekten
10 Hinweise für Architekten
 
Ten Advices for Architects
Ten Advices for ArchitectsTen Advices for Architects
Ten Advices for Architects
 
Intro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiIntro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful ui
 
COMP 4010: Lecture 5 - Interaction Design for Virtual Reality
COMP 4010: Lecture 5 - Interaction Design for Virtual RealityCOMP 4010: Lecture 5 - Interaction Design for Virtual Reality
COMP 4010: Lecture 5 - Interaction Design for Virtual Reality
 
Lecture 6 Interaction Design for VR
Lecture 6 Interaction Design for VRLecture 6 Interaction Design for VR
Lecture 6 Interaction Design for VR
 
IxD talk
IxD talkIxD talk
IxD talk
 
Chapter 7 design rules
Chapter 7 design rulesChapter 7 design rules
Chapter 7 design rules
 
Validating Ideas Through Prototyping
Validating Ideas Through PrototypingValidating Ideas Through Prototyping
Validating Ideas Through Prototyping
 
COMP 4010 - Lecture 5: Interaction Design for Virtual Reality
COMP 4010 - Lecture 5: Interaction Design for Virtual RealityCOMP 4010 - Lecture 5: Interaction Design for Virtual Reality
COMP 4010 - Lecture 5: Interaction Design for Virtual Reality
 

Dernier

guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptMaryamAfzal41
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxNitish292041
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic global solution
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道yrolcks
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
Color Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioColor Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioThink360 Studio
 

Dernier (20)

guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing services
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
Color Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioColor Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 Studio
 

Design Principles for Usable Interfaces

  • 1. Design Principles from Don Norman’s “Design of Everyday Things” and Preece, Rogers and Sharp’s “Beyond Interaction Design”
  • 2. Design of Everyday Things • Donald Norman - cognitive scientist and engineer who has pioneered many ideas surrounding user centred- design • worked for Apple, Hewlett Packard, Northwestern University, UCSD • critiques and examines many everyday items as examples of problematic designs • design principles a framework for discussing and thinking about everyday interactions • Norman, Donald A. (1988). The Design of Everyday Things. New York: Basic Books.
  • 3. Design Principles • Visibility- can is see it? • Feedback - what is it doing now? • Affordance - how do I use it? • Mapping - where am 1 and where can I go? • Constraint - why can’t I do that? • Consistency - I think I have seen this before?
  • 4. Visibility • Can see the state of a device and possible actions • Car controls are positioned in a way that they can be easily found and used
  • 5. Visibility • Problems arise when we cannot “see” how to do use a device • Sensor technology like auto faucets - not sure how to use - guess where to put hands • Visible knobs, dials and buttons have been replaced by invisible and ambiguous “active zones”
  • 6. Visibility • Hiding certain functions can be advantageous in interface design • Certain functions are kept invisible until needed; also contained within a group of similar types • Google search makes it clear where to enter text
  • 7. Visibility • Other examples of poor or good visibility in design?
  • 8. Feedback • what is it doing now? what action has been performed? • needs to be immediate and synchronized with user action
  • 9. Feedback • Sound works as feedback - examples?
  • 10. Feedback • Other examples of feedback in everyday design?
  • 11. Affordance • Perceived and actual properties of an object that give clues to its operation
  • 12. Affordance • Perceived and actual properties of an object that give clues to its operation
  • 13. Affordance • Perceived and actual properties of an object that give clues to its operation
  • 14. Affordance • Other examples of affordances in everyday interactions?
  • 15. Mapping • Relationship to controls and their effect
  • 16. Mapping • Relationship to controls and their effect
  • 17. Mapping • Relationship to controls and their effect
  • 18. Constraints • Restricting the kind of interactions that can take place
  • 19. Constraints • Restricting the kind of interactions that can take place • Reduce the chance of error • Can also work to focus user’s attention to needed task
  • 20. Constraints • Other examples of good and bad constraints?
  • 21. Consistency • designing interfaces to have similar operations and use similar elements for achieving similar task • systems are usable and learnable when similar concepts are expresses in similar ways • enables people to quickly transfer prior knowledge to new contexts and focus on relevant tasks • Four types of consistency: • aesthetic • functional • internal • external
  • 22. Consistency Aesthetic • style and appearance is repeated to enhance recognition, communicates membership and sets emotional tone • Mercedes Benz vehicles are instantly recognizable because the company consistently feature its logo on all its vehicles • associated with quality and prestige; respected and admired; fine craftsmanship and reliable
  • 23. Consistency Functional • meaning and action are consistent to improve learnability and understanding • consistent use of symbols to represent similar concepts, leverages prior knowledge and makes new things easier to use • traffic always turns yellow before red • cassette recorder control symbols used on a
  • 24. Consistency Internal • consistency with other elements in the system • cultivates a sense of orientation and trust • indicates system is well thought out and planned • eg. park and trail signage
  • 25. Consistency External • consistent with other elements in the environment • extends the benefit of internal consistencies across multiple, independent systems • more difficult to achieve because different systems rarely observe the same design standards