Design basics and rules of human interface - PowerPoint PPT Presentation


Title: Design basics and rules of human interface


1
Design basics and rules of human interface
  • Dr. Yan Liu
  • Department of Biomedical, Industrial and Human
    Factors Engineering
  • Wright State University

2
To Err is Human
  • Many Accidents Are Inherent in Design or
    Installation of Human Interfaces (Example)
  • Bad interfaces are slow or error-prone to use
  • Bad interfaces cost money and lives
  • Making Mistakes is Humans Nature
  • Humans are not infallible consistent creatures
  • Systems should be designed to reduce the
    likelihood of those mistakes and to minimize the
    consequences when mistakes happen
  • The Core of Interface Design
  • Put the user first
  • Keep the user in the center
  • Remember the user at the end

3
Navigation Design
  • Navigation
  • The ability to find ones way around an
    application (e.g. website)
  • Think about structures
  • Local structure
  • Structure within a page or screen
  • Global structure
  • Structure of entire application, movement between
    screens or pages
  • Wider still
  • Relationships between different applications

4
Local Structure
  • Go-Seeking Behavior
  • Users have some idea of what they are after and a
    partial model of the system, and meander through
    the system to try to get closer to their goals
  • System needs to give the users enough knowledge
    to help them get closer to their goals

5
Local Structure
  • Four Design Rules
  • Users should know where they are
  • The web page or screen should make clear where
    the users are in terms of the interaction or
    state of the system
  • e.g. Some web pages show breadcrumbs at the top
    of the screen, the path of the titles which
    indicate where the page is in the entire website
  • Users should know what they can do
  • What can be pressed or clicked to go somewhere or
    do something
  • Users should know where they are going (or what
    will happen)
  • Where they will be taken after clicking a button
    or a link
  • Icons that are not self-explanatory should always
    be accompanied by labels or at the very least
    tooltips or some similar techniques
  • Users should know where they have been (or what
    they have done)
  • The system should give feedback or confirmation
    of what the users have done
  • e.g. When a file in Microsoft Word is being
    saved, a status bar at the bottom of its page
    shows its progress

6
Breadcrumbs Showing Path Through the Website
Hierarchy
7
Global Structure
  • Overall Structure of An Application
  • The way how various screens, pages or device
    states link together
  • Hierarchy Organization
  • Usually by functions of system elements, but can
    also by roles, user types, modules, etc.

Functional Hierarchy of a Messaging System
8
Global Structure
  • Hierarchy Organization (Cont.)
  • Detailed knowledge of the intended user is
    essential
  • Different people may have different internal
    structures for their knowledge and may use
    different vocabulary
  • It is not good to create a hierarchy that the
    designer understands but not the users
  • Deep hierarchies are difficult to navigate
  • It is better to have broad top-level categories
    or to present just a few levels of menu on one
    screen or web page
  • Items on a screen or page should be structured,
    depending on the users purpose
  • e.g. If the user wants to look up information of
    a particular state in the USA, an alphabetical
    list of all state names would be best if the
    user wants to search for states in a particular
    region, then a list by region would be more
    appropriate

9
Global Structure
  • Dialog
  • Describes the general flow of the wedding vow,
    with blanks for the names of the bride and groom
  • Shows the pattern of interaction between the
    three parties

10
Global Structure
  • Dialog (Cont.)
  • Human-computer dialogue
  • Overall patterns of interaction between the user
    and system
  • Details may differ
  • Network diagrams
  • Principal states or screens are linked together
    with arrows
  • They can
  • Show what leads to what
  • Show what happens when
  • Include branches and loops
  • Be more task-oriented than hierarchy

11
Network Diagram Showing the Process of Adding or
Removing a User from the Messaging System
12
Wider Still
  • Wider Still
  • Everything we design sits among other devices and
    applications
  • Implications
  • Style issues
  • Conform to platform standards to ensure
    consistency between applications
  • e.g. Main menus of windows are normally placed on
    the top of the windows
  • Functional issues
  • Be able to interact with files, read standard
    formats, and handle cut and paste across files
  • Navigation issues
  • Support linkages between applications
  • e.g. In a email, being able to double click an
    attachment icon and have the right application
    launched for the attachment

13
Screen Design and Layout
  • Form Follows Functions
  • Let the required interactions drive the design
    and layout
  • What actions do the users perform? What kinds of
    information do users need? In what order
    different kinds of information are likely to be
    needed?
  • Visual Tools for Layout
  • Grouping and structure of items
  • Order of groups and items
  • Decoration features
  • Alignment of items
  • White space between items

14
Screen Design and Layout
  • Grouping and Structure of Items
  • If items logically belong together, then they
    should physically be grouped together
  • Details for billing and delivery are grouped
    spatially
  • The list of items actually ordered are separated
    from billing and delivery details by a line as
    well as spatially

Grouping Related Items in an Order Screen
15
Screen Design and Layout
  • Order of Groups and Items
  • We need to think what is the natural order for
    the user? and match the natural order to the
    order on screen
  • Occasionally we may need to force a particular
    order
  • e.g. Forcing online customers to fill out their
    mailing addresses before inputting other
    information
  • Decoration
  • Features like font style, text or background
    colors can be used to emphasize groupings

16
Screen Design and Layout
  • Alignment
  • For users who read text from left to right, lists
    of text items should normally be aligned to the
    left

Dix Finlay Abowd Beale
Dix Finaly Abowd Beale
17
Screen Design and Layout
  • Alignment (Cont.)
  • Numbers should normally be aligned to the right
    (for integers) or at the decimal point
  • Shape of the column gives an indication of
    magnitude

532.56179.3256.3171573.94810353.142497.6256
627.865 1.005763 382.5832502.56
432.935 2.0175 652.87 56.34
532179256157310355497
18
Screen Design and Layout
  • Alignment (Cont.)
  • In multiple column lists, text columns have to be
    wide enough for the largest item this means
    there can be large gaps between columns, which
    can make it hard to scan across rows
  • Using leaders lines of dots linking the columns
  • Using soft tone grays or colors for the
    background of the rows
  • It may sometimes be worth breaking other
    alignment rules to trade off good column
    alignment for the ability to see relationship
    across rows

sherbet 75toffee 120chocolate 35fruit
gums 27coconut dreams 85
19
sherbet 75toffee 120chocolate 35fruit
gums 27coconut dreams 85
Leaders
Color Background

sherbet 75

toffee 120
chocolate 35
fruit
gums 27
coconut dreams 85
Right Aligning Text Items (good if the user scans
the numbers frequently but only occasionally
scans the names of items)
20
Screen Design and Layout
  • White Space
  • Space to separate blocks
  • e.g. Gaps between paragraphs or space between
    sections in a report
  • Space to create complex structures
  • Space to highlight
  • e.g. Used frequently in magazines to highlight a
    quote or graphic

Space to Separate
Space to highlight
Space to Structure
21
Grouping of Controls
Defrost settings
Type of food
Time to cook
22
Order of Controls
  • Type of heating
  • Temperature
  • Time to cook
  • Start

1
2
3
4
23
Decoration
Different colors for different functions
Lines around related buttons (temp up/down)
24
White Space
Gaps to aid grouping
25
Screen Design and Layout
  • Appropriate Appearance
  • How to present information should depend on
  • The kind of information
  • Text, numbers, maps, tables, etc.
  • The technology available to present it
  • Character display, graphics, virtual reality,
    etc.
  • Depends on the purpose (Most Important!)
  • e.g. To present hierarchical structures, we may
    use node-link diagrams to present correlation
    relationships between variables, we may use
    scattered plots

26
Screen Design and Layout
  • Appropriate Appearance (Cont.)
  • Aesthetics and utility
  • Aesthetically pleasing designs
  • Can increase user satisfaction and improve
    productivity
  • Beauty and utility may conflict
  • e.g. Graphic designers like using excessively
    complex and strong backgrounds because they look
    good, but they may make the text hard to read
  • Beauty and utility can work together
  • Use of white space

good to look at, but hard to read
27
Screen Design and Layout
  • Appropriate Appearance
  • Color and 3D effects
  • Both often used very badly in interface design!
  • Color
  • Older monitors only support a limited range of
    primary colors
  • Overuse of color can be distracting
  • A significant portion of people suffer from
    color-blindness
  • Should be used sparingly to reinforce other
    information
  • 3D effects
  • Good for physical information and in some graphs
  • Poor in showing quantitative information
  • e.g. 3D pie chart is not effective in showing the
    volumes of the sections because of the
    perspective effect

28
Illustration of Perspective Effect
29
Design Rules
  • Overview
  • Rules that a designer can follow in order to
    increase the usability of the eventual product
  • Can be supported by psychological, cognitive,
    ergonomic, sociological, economic or
    computational theories
  • Types of Design Rules
  • Principles
  • Derived from knowledge of the psychological,
    computational and sociological aspects of the
    problem domains
  • Largely independent of the technology and
    dependent to a much greater extent on a deeper
    understanding of the human element in the
    interaction
  • Abstract design rules

30
Design Rules
  • Types of Design Rules (Cont.)
  • Guidelines
  • Less abstract than principles and often more
    technology oriented
  • Still general, so it is important for a designer
    to know what theoretical evidence there is to
    support them
  • Standards
  • Specific design rules, so it is less important
    for a designer to know the underlying theory

31
Design Rules
  • Issues
  • Conflicts between design rules
  • The theories underlying the design rules can help
    the designer understand the trade-off for the
    design
  • When to use design rules within the design
    process
  • Design rules would be most effective if they
    could be adopted in the earliest stages of the
    life cycle when the space of possible designs is
    still very large
  • Requirements specification, architectural design
  • Some specific design rules are applicable only in
    later stages of the design life cycle
  • e.g. Design rules on color vs. monochrome screens
    and two- versus three-button mouse depend on the
    particular hardware platform

32
Principles to Support Usability
  • Categories
  • Learnability
  • The ease with which new users can begin effective
    interaction and achieve maximal performance
  • Flexibility
  • The multiplicity of ways in which the user and
    system exchange information
  • Robustness
  • The level of support provided to the user to
    achieve the interaction goals and assessment of
    goals

33
Learnability
  • Familiarity
  • The degree of correlation between the users
    prior knowledge and the knowledge required for
    using the new system
  • e.g. Most users expect a Microsoft office
    application to include a working space, a menu,
    some toolbars and help functions.
  • Predictability
  • Building a system that works in the way as the
    user expects
  • e.g. Advanced browsing options in Internet
    Explorer are under the item Internet Options
    Under the Tools menu. The same mechanism
    applies in Mozilla.
  • Consistency
  • The likeness in behavior arising from similar
    situations or similar task objectives
  • Users expect a program to act in a consistent
    fashion
  • e.g. If buttons OK and Cancel are placed next
    to each other in one part of the program, then
    they should always show up together

34
Learnability
  • Synthesizability
  • The ability of the user to assess the effect of
    past operations on the current state
  • Honesty of the system
  • The ability of the user interface to provide an
    observable and informative account of any change
    in the internal state of the system
  • In the best circumstance, this notification can
    come immediately, requiring no further
    interaction by the user (immediate honesty)
  • e.g. In a Windows system, to move a file from one
    directory to another directory, the user drags
    the visual icon of the file from the original
    directory to the destination directory where it
    remains visible
  • At the very least, the notification should appear
    eventually, after explicit user directives to
    make the change observable (eventual honesty)
  • e.g. In a command language system, the user would
    have to remember the destination directory and
    ask to see the contents the directory in order to
    verify that the file has been moved successfully

35
Flexibility
  • Dialog Initiative
  • Machine pre-emptive
  • The machine initiates all the dialogs and the
    user simply responds to requests for information
    allows little flexibility
  • e.g. The search dialog box at the WSU library
    website only allows users to input the search
    criterion
  • Usually undesirable but may be required in some
    situations
  • e.g. For safety reasons, it may be necessary to
    prohibit the user from the freedom to do
    potentially serious damages
  • User pre-emptive
  • The user is entirely free to initiate any action
    towards the system allows the maximum
    flexibility
  • A complete user pre-emptive is not necessary a
    desirable situation, as it increases the
    likelihood that the user will lose track of the
    tasks that have been initiated and not yet
    completed

36
Flexibility
  • Multi-Modality
  • Provides the user with multiple modes of
    interfacing with a system beyond the traditional
    keyboard and mouse input/output
  • Combines human visual, auditory, and haptic
    communication channels
  • e.g. To open a new window, the user can choose to
    click the new window icon or say opening a new
    window Error warnings usually contain a textual
    message accompanied by an audible beep

37
Flexibility
  • Task Migratability
  • The transfer of control for execution of tasks
    between machine and user
  • e.g. On the flight deck of an aircraft, there are
    so many control tasks that must be performed that
    a pilot would be overwhelmed if he had to perform
    them all. Therefore, mundane control of the
    aircrafts position within its flight envelope is
    greatly automated. However, in the event of an
    emergency, it must be possible to transfer flying
    controls easily and seamlessly from the machine
    to the pilot

38
Flexibility
  • Customizability
  • Modifiability of the user interface by the user
    or the system
  • Adaptability
  • The users ability to adjust the form of input
    and output
  • e.g. The user can adjust the position of the
    icons on the screen, change the font of texts,
    etc.
  • Adaptivity
  • Automatic customization of the user interface by
    the system
  • Decision for adaptation can be based on user
    expertise or observed repetition of certain task
    sequences
  • e.g. A system can be trained to recognize the
    behavior of an expert or novice and accordingly
    adjust its dialog control or help system
    automatically to match the needs of the current
    user
  • The users role is more implicit in adaptive
    interfaces than in adaptable ones

39
Robustness
  • Covers features that support the successful
    achievement and assessment of the goals
  • Observability
  • Allows the user to evaluate the internal state of
    the system by means of its perceivable
    representation at the interface
  • Browsability
  • Allows the user to explore the current internal
    state of the system via the limited view provided
    at the interface
  • e.g. Pressing CtrlAltDel keys brings up
    the Windows Task Manager window which shows the
    applications currently running in the computer
  • Availability of defaults
  • Assists the user by passive recall
  • e.g. Providing the user his login ID when he
    needs to access his account
  • Reduces the number of physical actions necessary
    for inputting

40
Robustness
  • Observability (Cont.)
  • Persistence
  • Deals with the duration of the effect of a
    communication act and the ability of the user to
    make use of that effect
  • The effect of vocal communication does not
    persist except in the memory of the receiver
  • e.g. If you are informed of a new email message
    by a beep at your terminal, you may know at that
    moment and for a short while after you have
    received a message. But if you do not attend to
    that message immediately, you may forget about it
  • Visual communication can remain as an object
    which the user can subsequently manipulate long
    after the act of presentation
  • e.g. If some persistent visual information (such
    as a flag going up on your email box) informs you
    of the incoming message, then that will serve as
    a reminder that an unread message remains long
    after its initial receipt

41
Robustness
  • Recoverability
  • The ability to reach a desired goal after
    recognition of some error in a previous
    interaction
  • Forward error recovery
  • Involves the acceptance of the current state and
    negotiation from that state towards the desired
    state
  • May be the only possibility for recovery if the
    effects of interaction are not revocable
  • e.g. In a text editor, after you save the changes
    you have made on a text, you cannot undo the
    effect of saving
  • Backward error recovery
  • An attempt to undo the effects of previous
    interaction in order to return to a prior state
    before proceeding
  • e.g. In a text editor, a mistyped keystroke may
    wipe out a large section of text, but you can
    retrieve the wiped out text by an equally simple
    undo button

42
Robustness
  • Recoverability (Cont.)
  • Commensurate effort
  • If it is difficult to undo a given effect on the
    state, then it should have been difficult to do
    in the first place easily undone actions should
    be easily doable
  • e.g. If it is difficult to recover files which
    have been deleted in an operating system, then it
    should at least require some effort to remove
    them in the first place

43
Guidelines
  • More Specific Than Principles
  • The more abstract a guideline, the more it
    resembles a principle
  • The more specific a guideline, the more suited it
    is to detailed design
  • Guidelines for Designing User Interface Software
    (Smith Mosier, 1986 http//www.hcibib.org/sam/)
  • A very comprehensive catalog of guidelines
  • Contains six basic categories data entry, data
    display, sequence control, user guidance, data
    transmission, and data protection

44
Guidelines
  • Principles and Guidelines in Software User
    Interface Design (Mayhew, 1997)
  • Another comprehensive catalog of general
    guidelines
  • One of the best sources for the experimental
    results which back the specific guidelines
  • Style Guides for Graphic User Interface (GUI)
    Systems
  • Not hard or fast rules, but suggestions on
    conventions for programming in that environment
  • Aim to promote consistency within and between
    applications on the same computer platform

45
Golden Rules and Heuristics
  • Heuristics
  • Rules of thumb for reasoning, a simplification,
    or educated guess that reduces or limits the
    search for solutions in domains that are
    difficult and poorly understood
  • May not be applicable to every situation, but
    provide a useful checklist or summary of the
    essence of design advice
  • Any designer following these simple rules will
    produce a better system than one who ignores them
  • Shneidermans eight golden rules
  • Designing the User Interface (Shneiderman,2004)
  • Provide a convenient and succinct summary of the
    key principles of interface design

46
Shneidermans Eight Golden Rules
  • Rule 1 Strive for Consistency
  • Consistent sequences of actions should be
    required in similar situations identical
    terminology should be used in prompts, menus, and
    help screens and consistent commands should be
    employed throughout
  • Rule 2 Enable Frequent Users to Use Shortcuts to
    Perform Regular, Familiar Actions More Quickly
  • As the frequency of use increases, so do the
    user's desires to reduce the number of
    interactions and to increase the pace of
    interaction. Abbreviations, function keys, hidden
    commands, and macro facilities are very helpful
    to an expert user
  • Rule 3 Offer Informative Feedback
  • For every operator action, there should be some
    system feedback. For frequent and minor actions,
    the response can be modest, while for infrequent
    and major actions, the response should be more
    substantial

47
Shneidermans Eight Golden Rules
  • Rule 4 Design Dialogs to Yield Closure
  • Sequences of actions should be organized into
    groups with a beginning, middle, and end. The
    informative feedback at the completion of a group
    of actions gives the operators the satisfaction
    of accomplishment, a sense of relief, the signal
    to drop contingency plans and options from their
    minds, and an indication that the way is clear to
    prepare for the next group of actions
  • Rule 5 Offer Simple Error Handling
  • As much as possible, design the system so the
    user cannot make a serious error. If an error is
    made, the system should be able to detect the
    error and offer simple, comprehensible mechanisms
    for handling the error

48
Shneidermans Eight Golden Rules
  • Rule 6 Permit Easy Reversal of Actions
  • This feature relieves anxiety, since the user
    knows that errors can be undone it thus
    encourages exploration of unfamiliar options. The
    units of reversibility may be a single action, a
    data entry, or a complete group of actions
  • Rule 7 Support Internal Locus of Control
  • Experienced operators strongly desire the sense
    that they are in charge of the system and that
    the system responds to their actions. Design the
    system to make users the initiators of actions
    rather than the responders
  • Rule 8 Reduce Short-Term Memory Load by Keeping
    Displays Simple, Consolidating Multiple Page
    Displays and Providing Time for Learning Action
    Sequences
  • The limitation of human information processing in
    short-term memory requires that displays be kept
    simple, multiple page displays be consolidated,
    window-motion frequency be reduced, and
    sufficient training time be allotted for codes,
    mnemonics, and sequences of actions

49
Cockpit Control Panels of B-17 Bombers in WWII
It was cheaper and faster to design and build the
panels using a series of closely spaced toggle
switches. Unfortunately, two of these adjacent
switches were the flaps and the landing gear.
When they were initially deployed, it was not
uncommon for a just-landed and taxiing B-17 to
suddenly belly-flop onto the concrete when the
pilot mistakenly hit the landing gear toggle
instead of the one for the flaps.
Back
View by Category
About This Presentation
Title:

Design basics and rules of human interface

Description:

... of a particular state in the USA, an alphabetical list of all state names would ... fruit gums 27. coconut dreams 85. Leaders. Color Background. Right ... – PowerPoint PPT presentation

Number of Views:143
Avg rating:3.0/5.0
Slides: 50
Provided by: yliu
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Design basics and rules of human interface


1
Design basics and rules of human interface
  • Dr. Yan Liu
  • Department of Biomedical, Industrial and Human
    Factors Engineering
  • Wright State University

2
To Err is Human
  • Many Accidents Are Inherent in Design or
    Installation of Human Interfaces (Example)
  • Bad interfaces are slow or error-prone to use
  • Bad interfaces cost money and lives
  • Making Mistakes is Humans Nature
  • Humans are not infallible consistent creatures
  • Systems should be designed to reduce the
    likelihood of those mistakes and to minimize the
    consequences when mistakes happen
  • The Core of Interface Design
  • Put the user first
  • Keep the user in the center
  • Remember the user at the end

3
Navigation Design
  • Navigation
  • The ability to find ones way around an
    application (e.g. website)
  • Think about structures
  • Local structure
  • Structure within a page or screen
  • Global structure
  • Structure of entire application, movement between
    screens or pages
  • Wider still
  • Relationships between different applications

4
Local Structure
  • Go-Seeking Behavior
  • Users have some idea of what they are after and a
    partial model of the system, and meander through
    the system to try to get closer to their goals
  • System needs to give the users enough knowledge
    to help them get closer to their goals

5
Local Structure
  • Four Design Rules
  • Users should know where they are
  • The web page or screen should make clear where
    the users are in terms of the interaction or
    state of the system
  • e.g. Some web pages show breadcrumbs at the top
    of the screen, the path of the titles which
    indicate where the page is in the entire website
  • Users should know what they can do
  • What can be pressed or clicked to go somewhere or
    do something
  • Users should know where they are going (or what
    will happen)
  • Where they will be taken after clicking a button
    or a link
  • Icons that are not self-explanatory should always
    be accompanied by labels or at the very least
    tooltips or some similar techniques
  • Users should know where they have been (or what
    they have done)
  • The system should give feedback or confirmation
    of what the users have done
  • e.g. When a file in Microsoft Word is being
    saved, a status bar at the bottom of its page
    shows its progress

6
Breadcrumbs Showing Path Through the Website
Hierarchy
7
Global Structure
  • Overall Structure of An Application
  • The way how various screens, pages or device
    states link together
  • Hierarchy Organization
  • Usually by functions of system elements, but can
    also by roles, user types, modules, etc.

Functional Hierarchy of a Messaging System
8
Global Structure
  • Hierarchy Organization (Cont.)
  • Detailed knowledge of the intended user is
    essential
  • Different people may have different internal
    structures for their knowledge and may use
    different vocabulary
  • It is not good to create a hierarchy that the
    designer understands but not the users
  • Deep hierarchies are difficult to navigate
  • It is better to have broad top-level categories
    or to present just a few levels of menu on one
    screen or web page
  • Items on a screen or page should be structured,
    depending on the users purpose
  • e.g. If the user wants to look up information of
    a particular state in the USA, an alphabetical
    list of all state names would be best if the
    user wants to search for states in a particular
    region, then a list by region would be more
    appropriate

9
Global Structure
  • Dialog
  • Describes the general flow of the wedding vow,
    with blanks for the names of the bride and groom
  • Shows the pattern of interaction between the
    three parties

10
Global Structure
  • Dialog (Cont.)
  • Human-computer dialogue
  • Overall patterns of interaction between the user
    and system
  • Details may differ
  • Network diagrams
  • Principal states or screens are linked together
    with arrows
  • They can
  • Show what leads to what
  • Show what happens when
  • Include branches and loops
  • Be more task-oriented than hierarchy

11
Network Diagram Showing the Process of Adding or
Removing a User from the Messaging System
12
Wider Still
  • Wider Still
  • Everything we design sits among other devices and
    applications
  • Implications
  • Style issues
  • Conform to platform standards to ensure
    consistency between applications
  • e.g. Main menus of windows are normally placed on
    the top of the windows
  • Functional issues
  • Be able to interact with files, read standard
    formats, and handle cut and paste across files
  • Navigation issues
  • Support linkages between applications
  • e.g. In a email, being able to double click an
    attachment icon and have the right application
    launched for the attachment

13
Screen Design and Layout
  • Form Follows Functions
  • Let the required interactions drive the design
    and layout
  • What actions do the users perform? What kinds of
    information do users need? In what order
    different kinds of information are likely to be
    needed?
  • Visual Tools for Layout
  • Grouping and structure of items
  • Order of groups and items
  • Decoration features
  • Alignment of items
  • White space between items

14
Screen Design and Layout
  • Grouping and Structure of Items
  • If items logically belong together, then they
    should physically be grouped together
  • Details for billing and delivery are grouped
    spatially
  • The list of items actually ordered are separated
    from billing and delivery details by a line as
    well as spatially

Grouping Related Items in an Order Screen
15
Screen Design and Layout
  • Order of Groups and Items
  • We need to think what is the natural order for
    the user? and match the natural order to the
    order on screen
  • Occasionally we may need to force a particular
    order
  • e.g. Forcing online customers to fill out their
    mailing addresses before inputting other
    information
  • Decoration
  • Features like font style, text or background
    colors can be used to emphasize groupings

16
Screen Design and Layout
  • Alignment
  • For users who read text from left to right, lists
    of text items should normally be aligned to the
    left

Dix Finlay Abowd Beale
Dix Finaly Abowd Beale
17
Screen Design and Layout
  • Alignment (Cont.)
  • Numbers should normally be aligned to the right
    (for integers) or at the decimal point
  • Shape of the column gives an indication of
    magnitude

532.56179.3256.3171573.94810353.142497.6256
627.865 1.005763 382.5832502.56
432.935 2.0175 652.87 56.34
532179256157310355497
18
Screen Design and Layout
  • Alignment (Cont.)
  • In multiple column lists, text columns have to be
    wide enough for the largest item this means
    there can be large gaps between columns, which
    can make it hard to scan across rows
  • Using leaders lines of dots linking the columns
  • Using soft tone grays or colors for the
    background of the rows
  • It may sometimes be worth breaking other
    alignment rules to trade off good column
    alignment for the ability to see relationship
    across rows

sherbet 75toffee 120chocolate 35fruit
gums 27coconut dreams 85
19
sherbet 75toffee 120chocolate 35fruit
gums 27coconut dreams 85
Leaders
Color Background

sherbet 75

toffee 120
chocolate 35
fruit
gums 27
coconut dreams 85
Right Aligning Text Items (good if the user scans
the numbers frequently but only occasionally
scans the names of items)
20
Screen Design and Layout
  • White Space
  • Space to separate blocks
  • e.g. Gaps between paragraphs or space between
    sections in a report
  • Space to create complex structures
  • Space to highlight
  • e.g. Used frequently in magazines to highlight a
    quote or graphic

Space to Separate
Space to highlight
Space to Structure
21
Grouping of Controls
Defrost settings
Type of food
Time to cook
22
Order of Controls
  • Type of heating
  • Temperature
  • Time to cook
  • Start

1
2
3
4
23
Decoration
Different colors for different functions
Lines around related buttons (temp up/down)
24
White Space
Gaps to aid grouping
25
Screen Design and Layout
  • Appropriate Appearance
  • How to present information should depend on
  • The kind of information
  • Text, numbers, maps, tables, etc.
  • The technology available to present it
  • Character display, graphics, virtual reality,
    etc.
  • Depends on the purpose (Most Important!)
  • e.g. To present hierarchical structures, we may
    use node-link diagrams to present correlation
    relationships between variables, we may use
    scattered plots

26
Screen Design and Layout
  • Appropriate Appearance (Cont.)
  • Aesthetics and utility
  • Aesthetically pleasing designs
  • Can increase user satisfaction and improve
    productivity
  • Beauty and utility may conflict
  • e.g. Graphic designers like using excessively
    complex and strong backgrounds because they look
    good, but they may make the text hard to read
  • Beauty and utility can work together
  • Use of white space

good to look at, but hard to read
27
Screen Design and Layout
  • Appropriate Appearance
  • Color and 3D effects
  • Both often used very badly in interface design!
  • Color
  • Older monitors only support a limited range of
    primary colors
  • Overuse of color can be distracting
  • A significant portion of people suffer from
    color-blindness
  • Should be used sparingly to reinforce other
    information
  • 3D effects
  • Good for physical information and in some graphs
  • Poor in showing quantitative information
  • e.g. 3D pie chart is not effective in showing the
    volumes of the sections because of the
    perspective effect

28
Illustration of Perspective Effect
29
Design Rules
  • Overview
  • Rules that a designer can follow in order to
    increase the usability of the eventual product
  • Can be supported by psychological, cognitive,
    ergonomic, sociological, economic or
    computational theories
  • Types of Design Rules
  • Principles
  • Derived from knowledge of the psychological,
    computational and sociological aspects of the
    problem domains
  • Largely independent of the technology and
    dependent to a much greater extent on a deeper
    understanding of the human element in the
    interaction
  • Abstract design rules

30
Design Rules
  • Types of Design Rules (Cont.)
  • Guidelines
  • Less abstract than principles and often more
    technology oriented
  • Still general, so it is important for a designer
    to know what theoretical evidence there is to
    support them
  • Standards
  • Specific design rules, so it is less important
    for a designer to know the underlying theory

31
Design Rules
  • Issues
  • Conflicts between design rules
  • The theories underlying the design rules can help
    the designer understand the trade-off for the
    design
  • When to use design rules within the design
    process
  • Design rules would be most effective if they
    could be adopted in the earliest stages of the
    life cycle when the space of possible designs is
    still very large
  • Requirements specification, architectural design
  • Some specific design rules are applicable only in
    later stages of the design life cycle
  • e.g. Design rules on color vs. monochrome screens
    and two- versus three-button mouse depend on the
    particular hardware platform

32
Principles to Support Usability
  • Categories
  • Learnability
  • The ease with which new users can begin effective
    interaction and achieve maximal performance
  • Flexibility
  • The multiplicity of ways in which the user and
    system exchange information
  • Robustness
  • The level of support provided to the user to
    achieve the interaction goals and assessment of
    goals

33
Learnability
  • Familiarity
  • The degree of correlation between the users
    prior knowledge and the knowledge required for
    using the new system
  • e.g. Most users expect a Microsoft office
    application to include a working space, a menu,
    some toolbars and help functions.
  • Predictability
  • Building a system that works in the way as the
    user expects
  • e.g. Advanced browsing options in Internet
    Explorer are under the item Internet Options
    Under the Tools menu. The same mechanism
    applies in Mozilla.
  • Consistency
  • The likeness in behavior arising from similar
    situations or similar task objectives
  • Users expect a program to act in a consistent
    fashion
  • e.g. If buttons OK and Cancel are placed next
    to each other in one part of the program, then
    they should always show up together

34
Learnability
  • Synthesizability
  • The ability of the user to assess the effect of
    past operations on the current state
  • Honesty of the system
  • The ability of the user interface to provide an
    observable and informative account of any change
    in the internal state of the system
  • In the best circumstance, this notification can
    come immediately, requiring no further
    interaction by the user (immediate honesty)
  • e.g. In a Windows system, to move a file from one
    directory to another directory, the user drags
    the visual icon of the file from the original
    directory to the destination directory where it
    remains visible
  • At the very least, the notification should appear
    eventually, after explicit user directives to
    make the change observable (eventual honesty)
  • e.g. In a command language system, the user would
    have to remember the destination directory and
    ask to see the contents the directory in order to
    verify that the file has been moved successfully

35
Flexibility
  • Dialog Initiative
  • Machine pre-emptive
  • The machine initiates all the dialogs and the
    user simply responds to requests for information
    allows little flexibility
  • e.g. The search dialog box at the WSU library
    website only allows users to input the search
    criterion
  • Usually undesirable but may be required in some
    situations
  • e.g. For safety reasons, it may be necessary to
    prohibit the user from the freedom to do
    potentially serious damages
  • User pre-emptive
  • The user is entirely free to initiate any action
    towards the system allows the maximum
    flexibility
  • A complete user pre-emptive is not necessary a
    desirable situation, as it increases the
    likelihood that the user will lose track of the
    tasks that have been initiated and not yet
    completed

36
Flexibility
  • Multi-Modality
  • Provides the user with multiple modes of
    interfacing with a system beyond the traditional
    keyboard and mouse input/output
  • Combines human visual, auditory, and haptic
    communication channels
  • e.g. To open a new window, the user can choose to
    click the new window icon or say opening a new
    window Error warnings usually contain a textual
    message accompanied by an audible beep

37
Flexibility
  • Task Migratability
  • The transfer of control for execution of tasks
    between machine and user
  • e.g. On the flight deck of an aircraft, there are
    so many control tasks that must be performed that
    a pilot would be overwhelmed if he had to perform
    them all. Therefore, mundane control of the
    aircrafts position within its flight envelope is
    greatly automated. However, in the event of an
    emergency, it must be possible to transfer flying
    controls easily and seamlessly from the machine
    to the pilot

38
Flexibility
  • Customizability
  • Modifiability of the user interface by the user
    or the system
  • Adaptability
  • The users ability to adjust the form of input
    and output
  • e.g. The user can adjust the position of the
    icons on the screen, change the font of texts,
    etc.
  • Adaptivity
  • Automatic customization of the user interface by
    the system
  • Decision for adaptation can be based on user
    expertise or observed repetition of certain task
    sequences
  • e.g. A system can be trained to recognize the
    behavior of an expert or novice and accordingly
    adjust its dialog control or help system
    automatically to match the needs of the current
    user
  • The users role is more implicit in adaptive
    interfaces than in adaptable ones

39
Robustness
  • Covers features that support the successful
    achievement and assessment of the goals
  • Observability
  • Allows the user to evaluate the internal state of
    the system by means of its perceivable
    representation at the interface
  • Browsability
  • Allows the user to explore the current internal
    state of the system via the limited view provided
    at the interface
  • e.g. Pressing CtrlAltDel keys brings up
    the Windows Task Manager window which shows the
    applications currently running in the computer
  • Availability of defaults
  • Assists the user by passive recall
  • e.g. Providing the user his login ID when he
    needs to access his account
  • Reduces the number of physical actions necessary
    for inputting

40
Robustness
  • Observability (Cont.)
  • Persistence
  • Deals with the duration of the effect of a
    communication act and the ability of the user to
    make use of that effect
  • The effect of vocal communication does not
    persist except in the memory of the receiver
  • e.g. If you are informed of a new email message
    by a beep at your terminal, you may know at that
    moment and for a short while after you have
    received a message. But if you do not attend to
    that message immediately, you may forget about it
  • Visual communication can remain as an object
    which the user can subsequently manipulate long
    after the act of presentation
  • e.g. If some persistent visual information (such
    as a flag going up on your email box) informs you
    of the incoming message, then that will serve as
    a reminder that an unread message remains long
    after its initial receipt

41
Robustness
  • Recoverability
  • The ability to reach a desired goal after
    recognition of some error in a previous
    interaction
  • Forward error recovery
  • Involves the acceptance of the current state and
    negotiation from that state towards the desired
    state
  • May be the only possibility for recovery if the
    effects of interaction are not revocable
  • e.g. In a text editor, after you save the changes
    you have made on a text, you cannot undo the
    effect of saving
  • Backward error recovery
  • An attempt to undo the effects of previous
    interaction in order to return to a prior state
    before proceeding
  • e.g. In a text editor, a mistyped keystroke may
    wipe out a large section of text, but you can
    retrieve the wiped out text by an equally simple
    undo button

42
Robustness
  • Recoverability (Cont.)
  • Commensurate effort
  • If it is difficult to undo a given effect on the
    state, then it should have been difficult to do
    in the first place easily undone actions should
    be easily doable
  • e.g. If it is difficult to recover files which
    have been deleted in an operating system, then it
    should at least require some effort to remove
    them in the first place

43
Guidelines
  • More Specific Than Principles
  • The more abstract a guideline, the more it
    resembles a principle
  • The more specific a guideline, the more suited it
    is to detailed design
  • Guidelines for Designing User Interface Software
    (Smith Mosier, 1986 http//www.hcibib.org/sam/)
  • A very comprehensive catalog of guidelines
  • Contains six basic categories data entry, data
    display, sequence control, user guidance, data
    transmission, and data protection

44
Guidelines
  • Principles and Guidelines in Software User
    Interface Design (Mayhew, 1997)
  • Another comprehensive catalog of general
    guidelines
  • One of the best sources for the experimental
    results which back the specific guidelines
  • Style Guides for Graphic User Interface (GUI)
    Systems
  • Not hard or fast rules, but suggestions on
    conventions for programming in that environment
  • Aim to promote consistency within and between
    applications on the same computer platform

45
Golden Rules and Heuristics
  • Heuristics
  • Rules of thumb for reasoning, a simplification,
    or educated guess that reduces or limits the
    search for solutions in domains that are
    difficult and poorly understood
  • May not be applicable to every situation, but
    provide a useful checklist or summary of the
    essence of design advice
  • Any designer following these simple rules will
    produce a better system than one who ignores them
  • Shneidermans eight golden rules
  • Designing the User Interface (Shneiderman,2004)
  • Provide a convenient and succinct summary of the
    key principles of interface design

46
Shneidermans Eight Golden Rules
  • Rule 1 Strive for Consistency
  • Consistent sequences of actions should be
    required in similar situations identical
    terminology should be used in prompts, menus, and
    help screens and consistent commands should be
    employed throughout
  • Rule 2 Enable Frequent Users to Use Shortcuts to
    Perform Regular, Familiar Actions More Quickly
  • As the frequency of use increases, so do the
    user's desires to reduce the number of
    interactions and to increase the pace of
    interaction. Abbreviations, function keys, hidden
    commands, and macro facilities are very helpful
    to an expert user
  • Rule 3 Offer Informative Feedback
  • For every operator action, there should be some
    system feedback. For frequent and minor actions,
    the response can be modest, while for infrequent
    and major actions, the response should be more
    substantial

47
Shneidermans Eight Golden Rules
  • Rule 4 Design Dialogs to Yield Closure
  • Sequences of actions should be organized into
    groups with a beginning, middle, and end. The
    informative feedback at the completion of a group
    of actions gives the operators the satisfaction
    of accomplishment, a sense of relief, the signal
    to drop contingency plans and options from their
    minds, and an indication that the way is clear to
    prepare for the next group of actions
  • Rule 5 Offer Simple Error Handling
  • As much as possible, design the system so the
    user cannot make a serious error. If an error is
    made, the system should be able to detect the
    error and offer simple, comprehensible mechanisms
    for handling the error

48
Shneidermans Eight Golden Rules
  • Rule 6 Permit Easy Reversal of Actions
  • This feature relieves anxiety, since the user
    knows that errors can be undone it thus
    encourages exploration of unfamiliar options. The
    units of reversibility may be a single action, a
    data entry, or a complete group of actions
  • Rule 7 Support Internal Locus of Control
  • Experienced operators strongly desire the sense
    that they are in charge of the system and that
    the system responds to their actions. Design the
    system to make users the initiators of actions
    rather than the responders
  • Rule 8 Reduce Short-Term Memory Load by Keeping
    Displays Simple, Consolidating Multiple Page
    Displays and Providing Time for Learning Action
    Sequences
  • The limitation of human information processing in
    short-term memory requires that displays be kept
    simple, multiple page displays be consolidated,
    window-motion frequency be reduced, and
    sufficient training time be allotted for codes,
    mnemonics, and sequences of actions

49
Cockpit Control Panels of B-17 Bombers in WWII
It was cheaper and faster to design and build the
panels using a series of closely spaced toggle
switches. Unfortunately, two of these adjacent
switches were the flaps and the landing gear.
When they were initially deployed, it was not
uncommon for a just-landed and taxiing B-17 to
suddenly belly-flop onto the concrete when the
pilot mistakenly hit the landing gear toggle
instead of the one for the flaps.
Back
About PowerShow.com