Computer Guidelines Principle and Theories Discussion

Ch. 3 discuses the differences in ”Guidelines, Principle and Theories” the pdf Most companies release their guidelines so that developers can follow them.

Follow the Android or IOS guidelines. Find three examples of apps that break or follow the system design guidelines. This can be all in one app or across 3 apps.

Android Guidelines

https://developer.android.com/design/

ios Guidelines

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

CHAPTER 3:
Guidelines, Principles, and Theories
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
Addison Wesley
is an imprint of
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Introduction to Guidelines,
Principles, and Theories
• Guidelines: Low-level focused advice about
good practices and cautions against dangers.
• Principles: Mid-level strategies or rules to
analyze and compare design alternatives.
• Theories: High-level widely applicable
frameworks to draw on during design and
evaluation, as well as to support communication
and teaching.
– Theories can also be predictive, such as those for
pointing times by individuals or posting rates for
community discussions.
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
1-2
3-2
Guidelines
• Shared language to promote consistency
among multiple designers in terminology
usage, appearance, and action sequences
• Based on best practices
• Critics
– Too specific, incomplete, hard to apply, and
sometimes wrong
• Proponents
– Encapsulate experience
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
1-3
3-3
Guidelines (continued)
• The early Apple and Microsoft guidelines, which were
influential for desktop-interface designers, have been
followed by dozens of guidelines documents for the Web
and mobile devices
Example of Apple guidelines for designing menus for the iWatch:
1-4
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-4
Navigating the interface
• Sample of the National Cancer Institute’s
guidelines (see www.usability.gov):
– Standardize task sequences
– Ensure that embedded links are descriptive
– Use unique and descriptive headings
– Use check boxes for binary choices
– Develop pages that will print properly
– Use thumbnail images to preview larger
images
1-5
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-5
Accessibility guidelines
• Sample Guidelines:
– Provide a text equivalent for every non-text element
– For any time-based multimedia presentation,
synchronize equivalent alternatives
– Information conveyed with color should also be
conveyed without it
– Title each frame to facilitate identification and
navigation
• References:
– U.S. Access Board
• http://www.access-board.gov/508.htm
– World Wide Web Consortium (W3C)
• http://www.w3.org/TR/WCAG20/
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
1-6
3-6
Organizing the display
• Smith and Mosier (1986) offer five highlevel goals
– Consistency of data display
– Efficient information assimilation by the user
– Minimal memory load on the user
– Compatibility of data display with data entry
– Flexibility for user control of data display
1-7
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-7
Mobile HCI Design
Constraints/Guidelines
Design constraints
•
•
•
•
Smaller screen size
Touch data entry can cause errors
Battery-power limitations
Data download speed or access
Design Guidelines
•
•
•
•
•
•
Spatial consistency
Show high-level information
Minimize number of steps (taps)
Minimize data entry
Focus on goals and optimize tasks
Emerging standards from manufacturers
1-8
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-8
Getting the user’s attention
•
•
•
•
•
•
•
•
Intensity
Marking
Size
Choice of fonts
Inverse video
Blinking
Color
Audio
1-9
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-9
Facilitate data entry
• Similar sequences of actions speed learning
• Fewer input actions mean greater operator productivity,
and usually less error
• Users should not be required to remember lengthy lists of
codes
• The format of data-entry information should be linked
closely to the format of displayed information, such as
dashes in telephone numbers
• Experienced users prefer to enter information in a
sequence that they can control, such as selecting the
color first or size first, when clothes shopping
1-10
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-10
Facilitate data entry (concluded)
• The guidelines website for Cerner designers and
developers
•
This particular guideline describes the three sizes of icons or glyph that should be
used in all electronic health record products (each consisting of hundreds of screens)
(https://design.cerner.com/)
1-11
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-11
Principles
• More fundamental, widely applicable, and
enduring than guidelines
• Need more clarification
• Fundamental principles
– Determine user’s skill levels
– Identify the tasks
•
•
•
•
5 primary interaction styles
8 golden rules of interface design
Prevent errors
Automation and human control
1-12
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-12
Determine user’s skill levels
•
•
•
“Know thy user”
Age, gender, physical and cognitive abilities,
education, cultural or ethnic background,
training, motivation, goals and personality
Design goals based on skill level
–
–
–
•
Novice or first-time users
Knowledgeable intermittent users
Expert frequent users
Multi-layer designs
1-13
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-13
Identify the tasks
•
•
•
Task Analysis usually involve long hours
observing and interviewing users
Decomposition of high level tasks
Relative task
frequencies
1-14
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-14
Choose an interaction style
•
•
•
•
•
Direct manipulation
Menu selection
Form fill-in
Command language
Natural language
1-15
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-15
Spectrum of directness
1-16
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-16
The 8 Golden Rules of
Interface Design
1.
2.
3.
4.
5.
6.
7.
8.
Strive for consistency
Cater to universal usability
Offer informative feedback
Design dialogs to yield closure
Prevent errors
Permit easy reversal of actions
Keep users in control
Reduce short-term memory load
1-17
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-17
Prevent errors
• Make error messages specific, positive in tone,
and constructive
• Mistakes and slips (Norman, 1983)
• Correct actions
– Gray out inappropriate actions
– Selection rather than freestyle typing
– Automatic completion
• Complete sequences
– Single abstract commands
– Macros and subroutines
1-18
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-18
Automation and human control
1-19
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-19
Automation and human control
(continued)
• Successful integration:
– Users can avoid:
• Routine, tedious, and error prone tasks
– Users can concentrate on:
• Making critical decisions, coping with
unexpected situations, and planning future
actions
1-20
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-20
Automation and human control
(continued)
•
Supervisory control needed to deal with real
world open systems
– e.g. air-traffic controllers with low frequency,
but high consequences of failure
– FAA: design should place the user in control
and automate only to improve system
performance, without reducing human
involvement
1-21
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-21
Automation and human control
(continued)
• Goals for autonomous agents
–
–
–
–
Knows user’s likes and dislikes
Makes proper inferences
Responds to novel situations
Performs competently with little guidance
• Tool-like interfaces versus autonomous
agents
1-22
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-22
Automation and human control
(continued)
•
User modeling for adaptive interfaces
– keeps track of user performance
– adapts behavior to suit user’s needs
– allows for automatically adapting system
•
response time, length of messages, density of feedback,
content of menus, order of menu items, type of feedback,
content of help screens
– can be problematic
•
•
•
system may make surprising changes
user must pause to see what has happened
user may not be able to:
– predict next change
– interpret what has happened
– restore system to previous state
1-23
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-23
Automation and human control
(continued)
• Alternative to agents
– user control, responsibility, accomplishment
– expand use of control panels
• style sheets for word processors
• specification boxes of query facilities
• information visualization tools
1-24
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-24
Automation and human control
(concluded)
• Users employ control panels to set physical parameters,
such as the cursor blinking speed or speaker volume,
and to establish personal preferences such as time/date
formats, color schemes, or the content of start menus.
1-25
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-25
Theories
• Beyond the specifics of guidelines
• Principles are used to develop theories
• Some theories are descriptive
• Explanatory
• Prescriptive
• Predictive
• Some theories are based on human capacity
• Motor task
• Perceptual
• Cognitive
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
1-26
3-26
Explanatory and predictive theories
• Explanatory theories:
– Observing behavior
– Describing activity
– Conceiving of designs
– Comparing high-level concepts of two designs
– Training
• Predictive theories:
– Enable designers to compare proposed
designs for execution time or error rates
1-27
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-27
Perceptual, cognitive,
and motor tasks
• Perceptual or cognitive subtasks
theories
– Predicting reading times for free text,
lists, or formatted displays
• Motor-task performance times
theories:
– Predicting keystroking or pointing times
1-28
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-28
Taxonomy (explanatory theory)
– Order on a complex set of phenomena
– Facilitate useful comparisons
– Organize a topic for newcomers
– Guide designers
– Indicate opportunities for novel products
1-29
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-29
Conceptual, semantic, syntactic, and
lexical model
• Foley and van Dam* four-level approach
– Conceptual level:
• User’s mental model of the interactive system
– Semantic level:
• Describes the meanings conveyed by the user’s command input and by the
computer’s output display
– Syntactic level:
• Defines how the units (words) that convey semantics are assembled into a
complete sentence that instructs the computer to perform a certain task
– Lexical level:
• Deals with device dependencies and with the precise mechanisms by which a
user specifies the syntax
• Approach is convenient for designers
– Top-down nature is easy to explain
– Matches the software architecture
– Allows for useful modularity during design
*Computer Graphics: Principles and Practice, Third Edition
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
1-30
3-30
Stages of action models
• Norman’s seven stages of action
1. Forming the goal
2. Forming the intention
3. Specifying the action
4. Executing the action
5. Perceiving the system state
6. Interpreting the system state
7. Evaluating the outcome
• Norman’s contributions
– Context of cycles of action and evaluation.
– Gulf of execution: Mismatch between the user’s intentions and
the allowable actions
– Gulf of evaluation: Mismatch between the system’s
representation and the user’s expectations
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
1-31
3-31
Stages of action models (concluded)
• Four principles of good design
– State and the action alternatives should be visible
– Should be a good conceptual model with a consistent system
image
– Interface should include good mappings that reveal the
relationships between stages
– User should receive continuous feedback
• Four critical points where user failures can occur
– Users can form an inadequate goal
– Might not find the correct interface object because of an
incomprehensible label or icon
– May not know how to specify or execute a desired action
– May receive inappropriate or misleading feedback
1-32
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-32
Consistency through grammars
Consistent user interface goal
– Definition is elusive – multiple levels sometimes in
conflict
– Sometimes advantageous to be inconsistent
Consistent
delete/insert character
delete/insert word
delete/insert line
delete/insert paragraph
Inconsistent A
delete/insert character
remove/bring word
destroy/create line
kill/birth paragraph
Inconsistent B
delete/insert character
remove/insert word
delete/insert line
delete/insert paragraph
Inconsistent action verbs
– Take longer to learn, cause more errors, slow down users, and
are harder for users to remember
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
1-33
3-33
Contextual theories
• Micro-HCI Theories
– Focus on measurable performance (such as speed and errors)
on multiple standard tasks taking seconds or minutes in
laboratory environments
• Design-by-levels
• Stages of action
• Consistency
• Macro-HCI Theories
– Focus on case studies of user experience over weeks and
months, in realistic usage contexts with rich social engagement
• Contextual
• Dynamic
1-34
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
3-34
Contextual theories (concluded)
• User actions are situated by time and place
– You may not have time to deal with shortcuts or device dependent
syntax (such as on mobile devices) when hurried
– Physical space is important in ubiquitous, pervasive and embedded
devices, e.g. a museum guide stating information about a nearby
painting
• A taxonomy for mobile device application
development could include:
–
–
–
–
–
Monitor and provide alerts, e.g. patient monitoring systems
Gather information
Participate in group collaboration
Locate and identify nearby object or site
Capture information about the object and share that information
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
1-35
3-35