SlideShare a Scribd company logo
1
chapter 7
design rules
2
design rules
Designing for maximum usability
– the goal of interaction design
• Principles of usability
– general understanding
• Standards and guidelines
– direction for design
• Design patterns
– capture and reuse design knowledge
3
types of design rules
• principles
– abstract design rules
– low authority
– high generality
• standards
– specific design rules
– high authority
– limited application
• guidelines
– lower authority
– more general application
increasing authority
increasing
generality
Standards
Guidelines
increasing authority
increasing
generality
4
Principles to support usability
Learnability
the ease with which new users can begin effective
interaction and achieve maximal performance
Flexibility
the multiplicity of ways the user and system exchange
information
Robustness
the level of support provided the user in determining
successful achievement and assessment of goal-
directed behaviour
5
Principles of learnability
Predictability – users don’t like surprises (exception games and then only a
few)
– determining effect of future actions based on past interaction history
– operation visibility
Synthesizability – requires user to have a mental model (chap 1)
– assessing the effect of past actions
– immediate vs. eventual honesty – changing wysisyg doc vrs updating web pages
Familiarity
– how prior knowledge applies to new system
– guessability; affordance
Generalizability
– extending specific interaction knowledge to new situations
Consistency
– likeness in input/output behaviour arising from similar situations or task
objectives
6
Principles of flexibility
Dialogue initiative – system and users in a conversation
– freedom from system imposed constraints on input dialogue
– system vs. user pre-emptiveness
– understanding of main use-cases
Multithreading
– ability of system to support user interaction for more than one task at a time
– concurrent vs. interleaving
– multimodality – button click / alt + / menu item
Task migratability
– passing responsibility for task execution between user and system
– ultimate user control
Substitutivity
– allowing equivalent values of input and output to be substituted for each other
– representation multiplicity (graph/values)
– equal opportunity (define line by drawing or specifying length/position)
Customizability
– modifiability of the user interface by user (adaptability) or system (adaptivity)
7
Principles of robustness
Observability
– ability of user to evaluate the internal state of the system from its perceivable
representation
– browsability; defaults; reachability; persistence; operation visibility
Recoverability
– ability of user to take corrective action once an error has been recognized
– reachability; forward/backward recovery; commensurate effort
Responsiveness
– how the user perceives the rate of communication with the system
– Stability
Task conformance
– degree to which system services support all of the user's tasks
– task completeness; task adequacy
8
Standards
• set by national or international bodies to ensure
compliance by a large community of designers
standards require sound underlying theory and slowly
changing technology
– many large organisations have their own standards
• hardware standards more common than software high
authority and low level of detail
• ISO 9241 defines usability as effectiveness, efficiency
and satisfaction with which users accomplish tasks
• There are also some ISO standards for usability
reporting
9
Guidelines
• more suggestive and general
• many textbooks and reports full of guidelines
• abstract guidelines (principles) applicable
during early life cycle activities
• detailed guidelines (style guides) applicable
during later life cycle activities
• understanding justification for guidelines aids
in resolving conflicts
10
Golden rules and heuristics
• “Broad brush” design rules
• Useful check list for good design
• Better design using these than using nothing!
• Different collections e.g.
– Nielsen’s 10 Heuristics (see Chapter 9)
– Shneiderman’s 8 Golden Rules
– Norman’s 7 Principles
11
Nielsen’s 10 Usability Heuristics
1. Visibility of system status
2. Match between system and the real
world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and
recover from errors
10. Help and documentation
12
Shneiderman’s 8 Golden Rules
1. Strive for consistency
2. Enable frequent users to use
shortcuts
3. Offer informative feedback
4. Design dialogs to yield closure
5. Offer error prevention and simple
error handling
6. Permit easy reversal of actions
7. Support internal locus of control
8. Reduce short-term memory load
13
Norman’s 7 Principles
1. Use both knowledge in the world and
knowledge in the head.
2. Simplify the structure of tasks.
3. Make things visible: bridge the gulfs of
Execution and Evaluation.
4. Get the mappings right.
5. Exploit the power of constraints, both natural
and artificial.
6. Design for error.
7. When all else fails, standardize.
Web Guidelines
• The W3C Web Accessibility Guidelines are
a really good, very practical guide to
usability
• If you follow these guidelines your system
will be good, not only for visually impaired
users, but for all users
• Furthermore most of the guidelines apply
to all systems, not just web systems
• http://www.w3.org/WAI/
14
15
HCI design patterns
• An approach to reusing knowledge about
successful design solutions
• Originated in architecture: Alexander
• A pattern is an invariant solution to a
recurrent problem within a specific context.
• Examples
– Light on Two Sides of Every Room (architecture)
– Go back to a safe place (HCI)
• Patterns do not exist in isolation but are linked
to other patterns in languages which enable
complete designs to be generated
16
HCI design patterns (cont.)
• Characteristics of patterns
– capture design practice not theory
– capture the essential common properties of good
examples of design
– represent design knowledge at varying levels: social,
organisational, conceptual, detailed
– embody values and can express what is humane in
interface design
– are intuitive and readable and can therefore be used
for communication between all stakeholders
– a pattern language should be generative and assist
in the development of complete designs.
• Start point for more info
– http://www.hcipatterns.org/tiki-index.php
17
Summary & Exercise
Exercise
– Match Nielsen/ Shneiderman/Norman lists to earlier
principles
Principles for usability
– repeatable design for usability relies on maximizing benefit
of one good design by abstracting out the general
properties which can direct purposeful design
– The success of designing for usability requires both
creative insight (new paradigms) and purposeful principled
practice
Using design rules
– standards and guidelines to direct design activity

More Related Content

Similar to User Interface Design (UID) Rules for development (20)

PPT
DESIGN RULES in Interaction Design (UI/UX)
Titiksha Bhawsar
 
PPT
Design rules Human computer interaction.ppt
Sohail735908
 
PDF
e3-chap-07-090601111335-phpapp02 HCI design.pdf
engineerhaji12
 
PPT
Design rules and usability requirements
Andres Baravalle
 
PPT
Chapter 7 design rules
MLG College of Learning, Inc
 
PPTX
is type ki videos edit krei Inbox kro mujhe with similar portfolio 💼
QassimAbbasi
 
DOCX
Design principles
COMSATS INFORMATION TECHNOLOGY
 
PPT
Design Rule lect07.ppt Human Computer Interaction
TalhaNoor25
 
PPTX
Chapter 6.pptx human computer interaction
BiniyamLamesgen
 
PDF
01_Principles.pdf rata Tata principles and rules
wearemaskedmascots
 
PPTX
Design process design rules
Preeti Mishra
 
PPT
Usability evaluations (part 3)
Andres Baravalle
 
PPTX
HCI Unit 3.pptx
Raja980775
 
PDF
Interaction Design
Eiji Slideshare
 
PPT
Design rules
PhD Research Scholar
 
PPTX
Mobile UI Design – User Centered Design and UI Best Practices
OXD
 
PPT
Unit-3- Part-1 Principles of visual design including Gestalt Theory.ppt
SamarthPansala
 
PPT
Design-Principles.ppt
nazimsattar
 
DESIGN RULES in Interaction Design (UI/UX)
Titiksha Bhawsar
 
Design rules Human computer interaction.ppt
Sohail735908
 
e3-chap-07-090601111335-phpapp02 HCI design.pdf
engineerhaji12
 
Design rules and usability requirements
Andres Baravalle
 
Chapter 7 design rules
MLG College of Learning, Inc
 
is type ki videos edit krei Inbox kro mujhe with similar portfolio 💼
QassimAbbasi
 
Design Rule lect07.ppt Human Computer Interaction
TalhaNoor25
 
Chapter 6.pptx human computer interaction
BiniyamLamesgen
 
01_Principles.pdf rata Tata principles and rules
wearemaskedmascots
 
Design process design rules
Preeti Mishra
 
Usability evaluations (part 3)
Andres Baravalle
 
HCI Unit 3.pptx
Raja980775
 
Interaction Design
Eiji Slideshare
 
Design rules
PhD Research Scholar
 
Mobile UI Design – User Centered Design and UI Best Practices
OXD
 
Unit-3- Part-1 Principles of visual design including Gestalt Theory.ppt
SamarthPansala
 
Design-Principles.ppt
nazimsattar
 

Recently uploaded (20)

PPTX
NEUROMOROPHIC nu iajwojeieheueueueu.pptx
knkoodalingam39
 
PDF
PRIZ Academy - Change Flow Thinking Master Change with Confidence.pdf
PRIZ Guru
 
PDF
UNIT-4-FEEDBACK AMPLIFIERS AND OSCILLATORS (1).pdf
Sridhar191373
 
PPTX
UNIT DAA PPT cover all topics 2021 regulation
archu26
 
PDF
MOBILE AND WEB BASED REMOTE BUSINESS MONITORING SYSTEM
ijait
 
PDF
Introduction to Productivity and Quality
মোঃ ফুরকান উদ্দিন জুয়েল
 
PPTX
Hashing Introduction , hash functions and techniques
sailajam21
 
PPTX
265587293-NFPA 101 Life safety code-PPT-1.pptx
chandermwason
 
PDF
Additional Information in midterm CPE024 (1).pdf
abolisojoy
 
PPTX
The Role of Information Technology in Environmental Protectio....pptx
nallamillisriram
 
PDF
Ethics and Trustworthy AI in Healthcare – Governing Sensitive Data, Profiling...
AlqualsaDIResearchGr
 
PPT
Oxygen Co2 Transport in the Lungs(Exchange og gases)
SUNDERLINSHIBUD
 
PPTX
drones for disaster prevention response.pptx
NawrasShatnawi1
 
PPTX
artificial intelligence applications in Geomatics
NawrasShatnawi1
 
PPTX
MobileComputingMANET2023 MobileComputingMANET2023.pptx
masterfake98765
 
PPTX
REINFORCEMENT AS CONSTRUCTION MATERIALS.pptx
mohaiminulhaquesami
 
PPTX
原版一样(Acadia毕业证书)加拿大阿卡迪亚大学毕业证办理方法
Taqyea
 
PPTX
site survey architecture student B.arch.
sri02032006
 
PPTX
EC3551-Transmission lines Demo class .pptx
Mahalakshmiprasannag
 
PPTX
Introduction to Neural Networks and Perceptron Learning Algorithm.pptx
Kayalvizhi A
 
NEUROMOROPHIC nu iajwojeieheueueueu.pptx
knkoodalingam39
 
PRIZ Academy - Change Flow Thinking Master Change with Confidence.pdf
PRIZ Guru
 
UNIT-4-FEEDBACK AMPLIFIERS AND OSCILLATORS (1).pdf
Sridhar191373
 
UNIT DAA PPT cover all topics 2021 regulation
archu26
 
MOBILE AND WEB BASED REMOTE BUSINESS MONITORING SYSTEM
ijait
 
Introduction to Productivity and Quality
মোঃ ফুরকান উদ্দিন জুয়েল
 
Hashing Introduction , hash functions and techniques
sailajam21
 
265587293-NFPA 101 Life safety code-PPT-1.pptx
chandermwason
 
Additional Information in midterm CPE024 (1).pdf
abolisojoy
 
The Role of Information Technology in Environmental Protectio....pptx
nallamillisriram
 
Ethics and Trustworthy AI in Healthcare – Governing Sensitive Data, Profiling...
AlqualsaDIResearchGr
 
Oxygen Co2 Transport in the Lungs(Exchange og gases)
SUNDERLINSHIBUD
 
drones for disaster prevention response.pptx
NawrasShatnawi1
 
artificial intelligence applications in Geomatics
NawrasShatnawi1
 
MobileComputingMANET2023 MobileComputingMANET2023.pptx
masterfake98765
 
REINFORCEMENT AS CONSTRUCTION MATERIALS.pptx
mohaiminulhaquesami
 
原版一样(Acadia毕业证书)加拿大阿卡迪亚大学毕业证办理方法
Taqyea
 
site survey architecture student B.arch.
sri02032006
 
EC3551-Transmission lines Demo class .pptx
Mahalakshmiprasannag
 
Introduction to Neural Networks and Perceptron Learning Algorithm.pptx
Kayalvizhi A
 
Ad

User Interface Design (UID) Rules for development

  • 2. 2 design rules Designing for maximum usability – the goal of interaction design • Principles of usability – general understanding • Standards and guidelines – direction for design • Design patterns – capture and reuse design knowledge
  • 3. 3 types of design rules • principles – abstract design rules – low authority – high generality • standards – specific design rules – high authority – limited application • guidelines – lower authority – more general application increasing authority increasing generality Standards Guidelines increasing authority increasing generality
  • 4. 4 Principles to support usability Learnability the ease with which new users can begin effective interaction and achieve maximal performance Flexibility the multiplicity of ways the user and system exchange information Robustness the level of support provided the user in determining successful achievement and assessment of goal- directed behaviour
  • 5. 5 Principles of learnability Predictability – users don’t like surprises (exception games and then only a few) – determining effect of future actions based on past interaction history – operation visibility Synthesizability – requires user to have a mental model (chap 1) – assessing the effect of past actions – immediate vs. eventual honesty – changing wysisyg doc vrs updating web pages Familiarity – how prior knowledge applies to new system – guessability; affordance Generalizability – extending specific interaction knowledge to new situations Consistency – likeness in input/output behaviour arising from similar situations or task objectives
  • 6. 6 Principles of flexibility Dialogue initiative – system and users in a conversation – freedom from system imposed constraints on input dialogue – system vs. user pre-emptiveness – understanding of main use-cases Multithreading – ability of system to support user interaction for more than one task at a time – concurrent vs. interleaving – multimodality – button click / alt + / menu item Task migratability – passing responsibility for task execution between user and system – ultimate user control Substitutivity – allowing equivalent values of input and output to be substituted for each other – representation multiplicity (graph/values) – equal opportunity (define line by drawing or specifying length/position) Customizability – modifiability of the user interface by user (adaptability) or system (adaptivity)
  • 7. 7 Principles of robustness Observability – ability of user to evaluate the internal state of the system from its perceivable representation – browsability; defaults; reachability; persistence; operation visibility Recoverability – ability of user to take corrective action once an error has been recognized – reachability; forward/backward recovery; commensurate effort Responsiveness – how the user perceives the rate of communication with the system – Stability Task conformance – degree to which system services support all of the user's tasks – task completeness; task adequacy
  • 8. 8 Standards • set by national or international bodies to ensure compliance by a large community of designers standards require sound underlying theory and slowly changing technology – many large organisations have their own standards • hardware standards more common than software high authority and low level of detail • ISO 9241 defines usability as effectiveness, efficiency and satisfaction with which users accomplish tasks • There are also some ISO standards for usability reporting
  • 9. 9 Guidelines • more suggestive and general • many textbooks and reports full of guidelines • abstract guidelines (principles) applicable during early life cycle activities • detailed guidelines (style guides) applicable during later life cycle activities • understanding justification for guidelines aids in resolving conflicts
  • 10. 10 Golden rules and heuristics • “Broad brush” design rules • Useful check list for good design • Better design using these than using nothing! • Different collections e.g. – Nielsen’s 10 Heuristics (see Chapter 9) – Shneiderman’s 8 Golden Rules – Norman’s 7 Principles
  • 11. 11 Nielsen’s 10 Usability Heuristics 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation
  • 12. 12 Shneiderman’s 8 Golden Rules 1. Strive for consistency 2. Enable frequent users to use shortcuts 3. Offer informative feedback 4. Design dialogs to yield closure 5. Offer error prevention and simple error handling 6. Permit easy reversal of actions 7. Support internal locus of control 8. Reduce short-term memory load
  • 13. 13 Norman’s 7 Principles 1. Use both knowledge in the world and knowledge in the head. 2. Simplify the structure of tasks. 3. Make things visible: bridge the gulfs of Execution and Evaluation. 4. Get the mappings right. 5. Exploit the power of constraints, both natural and artificial. 6. Design for error. 7. When all else fails, standardize.
  • 14. Web Guidelines • The W3C Web Accessibility Guidelines are a really good, very practical guide to usability • If you follow these guidelines your system will be good, not only for visually impaired users, but for all users • Furthermore most of the guidelines apply to all systems, not just web systems • http://www.w3.org/WAI/ 14
  • 15. 15 HCI design patterns • An approach to reusing knowledge about successful design solutions • Originated in architecture: Alexander • A pattern is an invariant solution to a recurrent problem within a specific context. • Examples – Light on Two Sides of Every Room (architecture) – Go back to a safe place (HCI) • Patterns do not exist in isolation but are linked to other patterns in languages which enable complete designs to be generated
  • 16. 16 HCI design patterns (cont.) • Characteristics of patterns – capture design practice not theory – capture the essential common properties of good examples of design – represent design knowledge at varying levels: social, organisational, conceptual, detailed – embody values and can express what is humane in interface design – are intuitive and readable and can therefore be used for communication between all stakeholders – a pattern language should be generative and assist in the development of complete designs. • Start point for more info – http://www.hcipatterns.org/tiki-index.php
  • 17. 17 Summary & Exercise Exercise – Match Nielsen/ Shneiderman/Norman lists to earlier principles Principles for usability – repeatable design for usability relies on maximizing benefit of one good design by abstracting out the general properties which can direct purposeful design – The success of designing for usability requires both creative insight (new paradigms) and purposeful principled practice Using design rules – standards and guidelines to direct design activity