Design Principles - PowerPoint PPT Presentation

1 / 64
About This Presentation
Title:

Design Principles

Description:

... designer wants to build a high-quality interactive system that is admired by ... Quicken on Mac Option-P prints check, not current document. Output ... – PowerPoint PPT presentation

Number of Views:85
Avg rating:3.0/5.0
Slides: 65
Provided by: JohnS3
Category:

less

Transcript and Presenter's Notes

Title: Design Principles


1
Design Principles
2
Design Principles - Overview
  • Apply at multiple levels of design
  • Become obvious to user of poorly-designed Uis
  • Are easy to ignore
  • Are neither complete nor orthogonal
  • Have underpinnings in psychology or experience or
    common sense

3
UI Design Principles
  • Categories
  • 1. Learnability
  • Support for learning for users of all levels
  • 2. Flexibility
  • Support for multiple ways of doing tasks
  • 3. Robustness
  • Support for recovery
  • Always think about exceptions, suitability

4
Many Sets of Design Principles
  • Shneiderman, Designing the User Interface
  • Dix, Finlay, Abowd, Beale, Human-Computer
    Interaction
  • Foley et al, Computer Graphics Principles and
    Practice
  • And many more

5
1. Learnability Principles
  • Ease with which new users can begin effective
    interaction and achieve maximal performance
  • Predictability
  • Synthesizability
  • Familiarity Metaphor
  • Generalizability
  • Consistency

6
2. Flexibility Principles
  • Multiplicity of ways that users and system
    exchange information
  • Dialog Initiative
  • Multithreading
  • Task migratability
  • Substitutivity
  • Customizability

7
3. Robustness Principles
  • Supporting user in determining successful
    achievement and assessment of goals
  • Observability
  • Do not set the user up (for a fall, ie, an error)
  • Recoverability
  • Responsiveness
  • Task Conformance

8
Good Design (our goal!)
  • Every designer wants to build a high-quality
    interactive system that is admired by colleagues,
    celebrated by users, circulated widely, and
    imitated frequently. (Shneiderman, 1992, p.7)
  • and anything goes!

9
Why Principles Guidelines?
  • Because, well, not everything goes
  • Intended to prevent many bad designs before they
    begin, or evaluate existing designs on a
    scientific basis
  • Guidelines based on previous designs,
    experimental findings
  • Rules can all be broken (but usually in order
    to satisfy another principle)

10
Concepts, Principles, Guidelines
  • No cookbooks
  • No simple, universal checklists
  • There are many concepts, principles, and
    guidelines
  • Understand the higher level principles that apply
    across situations, display types, etc.
  • Implement the standards and guidelines
  • a few details

11
Levels of Consideration
  • Meta-display level
  • Apply to the whole system, across media across
    displays
  • Focus on this in Basic Layout Stage
  • Display Layout
  • Apply to groups of elements in a display
  • Focus on this in Prototyping and Redesign
  • Element level
  • Details about specific parts of a display
  • Colors, sound attributes, symbols

12
UI Design Principles
  • Categories
  • Learnability
  • Support for learning for users of all levels
  • Flexibility
  • Support for multiple ways of doing tasks
  • Robustness
  • Support for recovery
  • Always think about exceptions, suitability

13
1. Learnability Principles
  • Ease with which new users can begin effective
    interaction and achieve maximal performance
  • Predictability
  • Synthesizability
  • Familiarity
  • Generalizability
  • Consistency

14
1.1 Predictability
  • I think that this action will do.
  • Mental model can help
  • Operation visibilityCan see avail actions
  • e.g. menus vs. command shell
  • grayed menu items

15
Mental Models - Aid Predictability
  • Mental models are not always right
  • Two Classes
  • Functional model
  • Stimulus - response
  • Press the accelerator once, then turn the key
  • Structural model
  • Deeper sense of why it happens, not just what
    happens
  • Press the accelerator to engage the automatic
    choke on a carburetor

16
Another example - directions...
  • Functional model
  • Give turn-by-turn directions
  • East on Ponce, turn left just after Harrys in a
    Hurry, then go to the third set of lights

17
Another example - directions...
  • Structural model
  • Provide higher-level understanding
  • Using map, go to Virginia Highland

18
1.2 Synthesizability
  • Support for user in assessing the effect of past
    operations on current system state
  • Moving a file in UNIX shell vs. Mac/Windows
  • Is same feedback needed for all users, all apps?

19
1.3 Familiarity
  • Does UI task leverage existing real-world or
    domain knowledge?
  • Really relevant to first impressions
  • Use of metaphors
  • Potential pitfalls
  • Are there limitations on familiarity?

20
Metaphors at the UI - What
  • Metaphor - Application of name or descriptive
    term to another object which is not literally
    applicable
  • Use Natural transfer - apply existing knowledge
    to new, abstract tasks
  • Problem May introduce incorrect mental model
  • Macintosh -dragging CD to trash can to eject

21
Metaphor Creation - Prepare
  • Prepare
  • What functions are needed
  • What are users problems?

22
Metaphor Creation - Generate
  • Generate
  • Use metaphor that matches users conceptual tasks
  • Given choice, choose metaphor closest to way
    system really works
  • Ensure emotional tone is appropriate to users

23
Metaphor Creation - Evaluate
  • Evaluate
  • Ask users how they would do common tasks
  • Learn what is confusing and what is helpful
  • Evolve
  • Mental Models

24
1.4 Generalizability
  • Can knowledge of one system/UI be extended to
    other similar ones?
  • Example cut paste in different applications
  • Does knowledge of one aspect of a UI apply to
    rest of the UI?
  • Aid UI Developers guidelines

25
1.5 Consistency
  • Likeness in behavior between similar
    tasks/operations/situations/terminology
  • Interaction sequences
  • Quicken on Mac Option-P prints check, not
    current document
  • Output
  • Dialogue box always has a close button
  • Screen layout
  • Menu items always in same place - leverage
    muscle memory
  • Is this always desirable for all systems, all
    users?

26
Consistency (contd)
  • Avoid special cases and special rules
  • Supports generalization by user, avoids
    frustration
  • For command line systems - consistent syntax
  • Find consistency between commands, unify them -
    as in Unix pipes for file I/O and for process
    inter-communications

27
(In)Consistency Example
  • For a graphics program that uses a CSO
    (Currently-Selected Object)
  • Create a new primitive, it becomes the CSO
  • Duplicate a primitive, the old primitive remains
    as CSO

28
(In)Consistency Example - Macintosh
  • Drag a file icon to
  • Folder on same physical disk
  • Folder on another physical disk
  • Different disk
  • Trash can
  • Result
  • File is moved to folder
  • File is copied there
  • File is copied there
  • File is discarded

29
FSMs can Reveal Inconsistencies
30
2. Flexibility Principles
  • Multiplicity of ways that users and system
    exchange information
  • Dialog Initiative
  • Multithreading
  • Task migratability
  • Substitutivity
  • Customizability

31
2.1 Dialog Initiative
  • Not hampering the user by placing constraints on
    how dialog is done
  • User pre-emptive
  • User initiates actions
  • More flexible, generally more desirable
  • System pre-emptive
  • System does all prompts, user responds
  • Sometimes necessary

32
2.2 Multithreading
  • Allowing user to perform more than one task at a
    time
  • Two types
  • Concurrent
  • Input goes to multiple tasks simultaneously
  • Interleaved
  • Many tasks, but input goes to one at a time

33
2.3 Task Migratability
  • Ability to move performance of task to the entity
    (user or system) that can do it better
  • Spell-checking, safety controls in plant
  • For what kinds of tasks should the user be in
    control?

34
2.4 Substitutivity
  • Flexibility in details of operations
  • Allow user to choose suitable interaction methods
  • Allow different ways to
  • perform actions, specify data, configure
  • Allow different ways of presenting output
  • to suit task user

35
2.4 Substitutivity
  • Drafting page layout systems
  • Indicate positions with cursor
  • or
  • By typing in coordinates
  • Give temperature via slider or by typing
  • Examples of spatial vs. linguistic specification

36
2.5 Customizability
  • Ability of user to modify interface
  • By user - adaptability
  • Is this a good thing?
  • By system - adaptivity
  • Is this a good thing?

37
3. Robustness Principles
  • Supporting user in determining successful
    achievement and assessment of goals
  • Observability
  • Recoverability
  • Responsiveness
  • Task Conformance

38
3.1 Observability
  • Can user determine internal state of system from
    what she perceives?
  • Browsability
  • Explore current state (without changing it)
  • Reduces memory load
  • But dont overwhelm user with information either
  • Reachability
  • Navigate through observable states
  • Persistence
  • How long does observable state persist?
  • Observability also aids learnability

39
3.1 Observability - Role of Feedback
  • Feedback helps create observability
  • Feedback taxonomy (generally dont need all of
    these)
  • I understand what you have asked me to do
  • I am doing what you have asked me to do
  • And it will take me this much longer
  • Song and dance routine to distract user (busy
    interval as opposed to idle interval)
  • And here are some intermediate results to keep
    you happy until I am done
  • All done, whats next?

40
3.1 Observability - Forest Trees
Represents overall drawing
Work area, showing part of a larger drawing
Represents portion of drawing seen in work area
Menus, feedback, etc.
Overall display area
41
3.1 Observability Acrobat Reader
  • Acrobat Reader with ToC to give context
  • Forest is the bookmarks, tree is the single page

42
3.1 Observability - Scroll Bar
  • Scroll bar size indicates in view - but does
    not indicate absolute sizes.
  • Can add other info, such as
  • Page 5 of 12

43
3.1 Observability - feedback placement
  • Where the eyes are
  • Cursor shape
  • In Newshole
  • Thumbs down problem
  • Buddha to encourage patience
  • Audio output avoids this issue

44
3.1 Observability - Memory Load
  • Use as a tool to decrease user memory load
  • Also to avoid mis-steps
  • Gray-out disabled menu items
  • Indicate type of input (alpha, numbers) expected

45
3.2 Do Not Set the User Up
  • Make it hard for the user to make errors
  • Instead of allowing them to make error and then
    saying tsk, tsk
  • Gray out disabled menu items
  • Ask for confirmation of major actions

46
3.2 Do Not Set the User Up
  • For command language applications, create
    matching end token when begin token is typed
  • ( -gt ) lttitlegt -gt lt/titlegt
  • begin -gt end
  • repeat -gt until
  • / -gt /

47
3.2 Do Not Set the User Up
  • Dont let the user do something that will lead to
    an error message

48
3.2 Recoverability
  • Ability to take corrective action upon
    recognizing error
  • Forward recovery
  • Ability to fix when we cant undo
  • Backward recovery
  • Undo previous error(s)
  • Abort operation underway
  • Only makes sense if is a slow operation
  • Encourages experimentation (hence learnability)
    by reducing cost of making mistakes

49
3.3 Responsiveness
  • Users perception of rate of communication with
    system (not always right)
  • Response time
  • Time for system to respond in some way to user
    action(s)
  • Response OK if matches user expectations
  • Once user enjoys fast response, is hard to go
    back to slower response
  • Dial-up versus DSL or Cable Modem

50
3.3 Responsiveness
  • Response to motor actions
  • Keyboarding, mouse movement - less than 100 msec.
  • Rich Human Factors literature on this
  • Consistency is important - experimental result
  • Users preferred longer but more consistent
    response time
  • Times that differed 10 to 20 were seen as same
  • Sometimes argued that too fast is not good
  • Makes user feel like they need to do something
    quickly to keep up with comptuer?

51
3.4 Task Conformance
  • Does system support all tasks user wishes to
    perform in expected ways?
  • Task completeness
  • Can system do all tasks of interest?
  • Task adequacy
  • Can user understand how to do tasks?
  • Does it allow user to define new tasks?
  • Extensibility

52
Using the Principles
  • In doing design and implementation of your
    project, revisit this list
  • Assess your design against these usability
    principles

53
Good Design (reminder!)
  • Every designer wants to build a high-quality
    interactive system that is admired by colleagues,
    celebrated by users, circulated widely, and
    imitated frequently. (Shneiderman, 1992, p.7)
  • and anything goes!

54
The Good
55
The Good
56
The Bad
57
The Bad
58
The Bad
59
The Ugly
60
The (really) Ugly
61
But What Makes it Good?
  • Functionality
  • Speed efficiency
  • Reliability, security, data integrity
  • Standardization, consistency
  • USABILITY !

62
A Philosophy
  • The human user of any system is the focus of the
    design process. Planning and implementation is
    done with the user in mind, and the system is
    made to fit the user, not the other way around.

63
Good Design Means
  • Systems are built for humans must be designed
    for the user
  • Recognize individual differences appreciate
    design implications of these human factors
  • Recognize the design of things, procedures, etc.,
    influences human behavior and well-being
  • Emphasize empirical data evaluation
  • Rely on the scientific method
  • Things, procedures, environments, and people do
    not exist in isolation

64
Good Design is NOT
  • NOT just applying checklists and guidelines
  • These can help, but UCD is a whole philosophy
  • NOT using oneself as the model user
  • Know your real users recognize variation in
    humans
  • NOT just common sense
  • Knowing how to design a fire alarm so it will be
    heard over background noise is not something we
    all know.
  • The HF specialist knows where or how to get the
    information needed to answer design questions
Write a Comment
User Comments (0)
About PowerShow.com