More Related Content Similar to Guidelines principle and theories in UID (20) More from KrishnaVeni451953 (7) Guidelines principle and theories in UID1. © 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Addison Wesley
is an imprint of
Designing the User Interface:
Strategies for Effective Human-Computer Interaction
Sixth Edition
Ben Shneiderman, Catherine Plaisant,
Maxine S. Cohen, Steven M. Jacobs, and Niklas Elmqvist
in collaboration with
Nicholas Diakopoulos
Guidelines, Principles and theories
2. 1-2
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Navigating the Interface
1. Standardize task sequence
2. Ensure that embedded links are descriptive
3. Use unique and descriptive headings
4. Use check boxes for binary choices
5. Develop pages that will print properly
6. Use thumb nail images to view larger images
2
3. 1-3
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Accessibility Guidelines
1. Provide a text equivalent for every nontext element
2. For any time-based multimedia presentation
synchronize equivalent alternatives
3. Information conveyed with color should also be
conveyed without it
4. Title each frame to facilitate identification and navigation
3
4. 1-4
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Organizing the display
Five high level goals
1. Consistency of data display
2. Efficient information assimilation by the user
3. Minimal memory load on the user
4. Compatibility of data display with data entry
5. Flexibility of user control of data display
4
5. 1-5
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Getting the user attention
1. Intensity
2. Marking
3. Size
4. Choice of fonts
5. Inverse Video
6. Blinking
7. Color
8. Audio
5
6. 1-6
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Principles
1. More fundamental, widely applicable and enduring than
guidelines
2. Need more clarification
3. Fundamental principles
– Determine User’s skill levels
– Identify the tasks
4. Five primary interaction styles
5. Eight golden rules of interface design
6. Prevent errors
7. Automation and human controls
6
7. 1-7
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Determine User Skill level
1. Know thy User
2. Age, gender, Physical and cognitive abilities,
educational, cultural or ethnic background, training
motivation, goals and personality
3. Multi layer designs
4. Design goals based on skill levels
– First time users
– Knowledgeable intermittent users
– Expert frequent users
7
8. 1-8
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Identify the task
1. Task Analysis involve long hours observing and
interviewing users
2. Decomposition of high-level tasks
3. Relative task frequencies
8
9. 1-9
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Determine User Skill level
9
16. © 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Addison Wesley
is an imprint of
Designing the User Interface:
Strategies for Effective Human-Computer Interaction
Sixth Edition
Ben Shneiderman, Catherine Plaisant,
Maxine S. Cohen, Steven M. Jacobs, and Niklas Elmqvist
in collaboration with
Nicholas Diakopoulos
CHAPTER 2:
Universal Usability
17. 1-17
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Universal usability
Topics
1. Universal Design [from Majed Al Zayer]
2. Introduction to Universal Usability
3. Variations in physical abilities and physical workplaces
4. Diverse cognitive and perceptual abilities
5. Personality differences
6. Cultural and international diversity
7. Users with disabilities
8. Older adult users
9. Children
10. Accommodating hardware and software diversity
17
18. 1-18
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** What is Universal Design?
Designing technology that is equally
usable to everyone irrespective of
their individual, cultural, physical or
cognitive differences
Note: Headers in purple preceded by *** indicate added
slide by CS 420/620 course instructor(s)
18
19. 1-19
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Importance of universal design:
Social effects
What do you think?
19
20. 1-20
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Importance of universal design:
Social effects
• Social isolation
• Learned helplessness
• Loss of valuable human resources
20
21. 1-21
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Importance of universal design:
It’s a human right
“desire and commitment to build a people-centred,
inclusive and development-oriented Information Society,
where everyone can create, access, utilize and share
information and knowledge, enabling individuals,
communities and peoples to achieve their full potential in
promoting their sustainable development and improving
their quality of life, premised on the purposes and principles
of the Charter of the United Nations and respecting fully and
upholding the Universal Declaration of Human Rights.“
- World summit on the
information society,
2003
21
22. 1-22
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Importance of universal design:
It’s a law
• Rehabilitation Act, Section 508
– Accessibility requirements for developed and procured
government software
• Americans with Disabilities Act
– Government websites
– Public accommodations (e.g., stores, hotels, video
rentals)
• US Justice department
– Websites and instructional materials of universities
• European Union Mandate 376
– Accessibility requirements for procured software
22
23. 1-23
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Importance of universal design:
It’s a law
23
• National Federation of the Blind vs.Target, 2006
– Target to pay $6 million in damages
• National Federation of the Deaf vs. Netflix, 2011
– Netflix to pay $755,000 in legal fees and damages
• National Federation of the Deaf vs. Harvard &
MIT, 2015
– pending
24. 1-24
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Importance of universal design:
Business effects
• Loss of user base
– ~ 785,000,000 people (15% of world
population) live with a disability
• Risk of lawsuits
– 240+ companies sued over lack of website
accessibility since 2015
24
25. 1-25
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Importance of universal design:
Pays off for all
25
• Video captioning for the deaf and hard hearing
• Auto completion for the disabled and elderly
• Controllable font sizes for the visually impaired
• Greyscale mobile screens for the visually
impaired
26. 1-26
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Introduction to Universal Usability
• As a profession, we will be remembered for how
well we meet our users’ needs
• That is the ultimate goal: addressing the needs
of all users
• The huge international consumer market in
mobile devices has raised the pressure for
designs that are universally usable
26
27. 1-27
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Introduction to Universal Usability
(concluded)
• The website of “Raising the Floor” includes universal
accessibility features such as options for emphasizing the
links or making buttons larger, offering several font sizes,
contrast, text descriptions of photos, translation services,
etc. (www.raisingthefloor.net).
27
28. 1-28
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Variations in physical abilities and
physical workplaces
• Basic data about human dimensions
comes from research in anthropometry
• There is no average user, either
compromises must be made or multiple
versions of a system must be created
• Physical measurement of human
dimensions are not enough, take into
account dynamic measures such as reach,
strength or speed
28
29. 1-29
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Variations in physical abilities and
physical workplaces (continued)
– Screen-brightness preferences vary substantially,
designers customarily provide a knob to enable
user control
– Account for variances of the user population's
sense perception
• Vision: depth, contrast, color blindness, and motion sensitivity
• Touch: keyboard and touchscreen sensitivity
• Hearing: audio clues must be distinct
– Workplace design can both help and hinder work
performance
29
30. 1-30
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Variations in physical abilities and
physical workplaces (concluded)
• The standard ANSI/HFES 100-2007 Human
Factors Engineering of Computer Workstations
(2007) lists these concerns:
– Work-surface and display-support height
– Clearance under work surface for legs
– Work-surface width and depth
– Adjustability of heights and angles for chairs and work
surfaces
– Posture – seating depth and angle; back-rest height
and lumbar support
– Availability of armrests, footrests, and palmrests
30
31. 1-31
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Diverse cognitive and perceptual
abilities
• The human ability to interpret sensory input
rapidly and to initiate complex actions makes
modern computer systems possible
• The journal Ergonomics Abstracts offers this
classification of human cognitive processes:
‒ Long-term and semantic memory
‒ Short-term and working memory
‒ Problem solving and reasoning
‒ Decision making and risk assessment
‒ Language communication and comprehension
‒ Search, imagery, and sensory memory
‒ Learning, skill development, knowledge acquisition, and
concept attainment
31
32. 1-32
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Diverse cognitive and perceptual
abilities (concluded)
• They also suggest this set of factors affecting
perceptual and motor performance:
‒ Arousal and vigilance
‒ Fatigue and sleep deprivation
‒ Perceptual (mental) load
‒ Knowledge of results and feedback
‒ Monotony and boredom
‒ Sensory deprivation
‒ Nutrition and diet
‒ Fear, anxiety, mood, and emotion
‒ Drugs, smoking, and alcohol
‒ Physiological rhythms
• But note, in any application, background experience
and knowledge in the task domain and the interface
domain play key roles in learning and performance
32
33. 1-33
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Personality differences
• There is no set taxonomy for identifying user
personality types
• Designers must be aware that populations are
subdivided and that these subdivisions have
various responses to different stimuli
• Myers-Briggs Type Indicator (MBTI)
– extroversion vs. introversion
– sensing vs. intuition
– perceptive vs. judging
– feeling vs. thinking
33
34. 1-34
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Cultural and international diversity
• Characters, numerals, special characters, and diacriticals
• Left-to-right versus right-to-left versus vertical input and reading
• Date and time formats
• Numeric and currency formats
• Weights and measures
• Telephone numbers and addresses
• Names and titles (Mr., Ms., Mme.)
• Social-security, national identification, and passport numbers
• Capitalization and punctuation
• Sorting sequences
• Icons, buttons, colors
• Pluralization, grammar, spelling
• Etiquette, policies, tone, formality, metaphors
34
35. 1-35
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Cultural and international diversity
(concluded)
• Designing for cell phones can open the door to a wider
audience, e.g. in developing countries where:
– feature phones often are the only way to access the internet
– literacy may be an issue
– users have very low monthly limits on the data volume they can
use
35
36. 1-36
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Users with disabilities
• Designers must plan early to accommodate users with
disabilities
• Early planning is more cost efficient than adding on
later
• Businesses must comply with the "Americans With
Disabilities Act” for some applications
• Growing world-wide support, for example:
‒ European Union Mandate 376 will require procurement and
development of accessible technologies by EU governments
(http://www.mandate376.eu/)
‒ United Nations Convention on the Rights of Persons with Disabilities
(CRPD), an international human rights agreement
(http://www.un.org/disabilities/convention/conventionfull.shtml)
36
37. 1-37
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Users with disabilities (concluded)
• A user with disability is using a television with the help of
assistive technology
37
38. 1-38
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Older adult users
• Including the elderly is fairly easy
• As the world’s population ages, designers in
many fields are adapting their work to serve
older adults, which can benefit all users
• Designers should allow for variability within their
applications via settings for sound, color,
brightness, font sizes, etc. with less distracting
animation
38
39. 1-39
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Older adult users (concluded)
• HomeAssist is an assisted living platform for older adults,
installed in homes in Bordeaux, France
• The tablet is used to show alerts (e.g. when the front door was left opened) and
reminders, but also to run a slide show of photographs when not in use
(http://phoenix.inria.fr/research-projects/homeassist)
39
40. 1-40
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Children
• Using Digital Mysteries on a tablet, two elementary
school children work together to read information slips,
group them and create a sequence to create an answer
to the question “Who killed King Ted?”
– The blue pop-up pie menu allows the selection of tools.
– A larger tabletop version allows larger groups to collaborate.
(www.reflectivethinking.com)
40
41. 1-41
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Accommodating hardware and
software diversity
• Three of the main technical challenges will be:
1. Producing satisfying and effective Internet interaction
on high-speed (broadband) and slower (dial-up and
some wireless) connections
2. Responsive design enabling access to web services
from large displays (3200 × 2400 pixels or larger)
and smaller mobile devices (1024 × 768 pixels and
smaller)
3. Supporting easy maintenance of or automatic
conversion to multiple languages
41
42. 1-42
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Physical differences
• Static
– Weight, height, …
• Dynamic
– Reach speed, pressure of finger touch, ….
• How do we deal with these variations? (your
ideas?)
42
43. 1-43
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Physical differences [source:
ourworldindata.org]
43
44. 1-44
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Physical differences
• Alternative 1: Design for the
average user
• 1940s: multiple crashes per day by Air
Force pilots [see article by Todd Rose,
The Star, 2016]
– Planes were designed for the
average pilot dimensions
– 4,000 pilots were measured against
the average
– Zero pilots were found to fit the
average!
44
45. 1-45
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Physical differences
• Alternative 2: Accommodate all variations with
configurable design
45
46. 1-46
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Cognitive differences due to …
• Fatigue & sleep deprivation
• Cognitive load
• Fear & anxiety
• Intoxication
• Background experience
46
47. 1-47
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Personality differences
• Different people learn differently
Haptic Visual Auditory
47
48. 1-48
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Cultural differences & design:
Colors perception
It’s a
boy!
Meaning of white color
The East vs. the West
49. 1-49
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Cultural differences & design:
Colors perception
Check out more on color meanings
across continents and countries at
webdesignerdepot
50. 1-50
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Cultural differences & design:
Cultural characteristics
• A travel booking page at TravelBird.com
51. 1-51
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Cultural differences & design:
Cultural characteristics
• The German culture
associates
systematic details
with well-thought-
out design
52. 1-52
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Cultural differences & design:
Cultural characteristics
• A better
design that
suites the
values of the
German
culture
53. 1-53
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
*** Cultural differences & design:
Internationalization
• Thoughtful translation
• Text direction
• Date & time formats
• Numeric formats (What’s 1,00 or 1,000 to you?)
• Currency
• Measurement units
• Name formalities
55. © 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Addison Wesley
is an imprint of
Designing the User Interface:
Strategies for Effective Human-Computer Interaction
Sixth Edition
Ben Shneiderman, Catherine Plaisant,
Maxine S. Cohen, Steven M. Jacobs, and Niklas Elmqvist
in collaboration with
Nicholas Diakopoulos
Understanding and conceptualizing
interaction
64. © 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Addison Wesley
is an imprint of
Designing the User Interface:
Strategies for Effective Human-Computer Interaction
Sixth Edition
Ben Shneiderman, Catherine Plaisant,
Maxine S. Cohen, Steven M. Jacobs, and Niklas Elmqvist
in collaboration with
Nicholas Diakopoulos
Usability