Design basics of human interface

1
Design basics of human interface

• Dr. Yan Liu
• Department of Biomedical, Industrial and Human
  Factors Engineering
• Wright State University

2
What is Design

• Achieving Goals within Constraints
• Goals the purposes of the design
• Who is it for? Why do they want it?
• e.g. Suppose you are designing a wireless
  personal movie player, you may think about young
  affluent users wanting to watch the latest movie
  while on the move and perhaps wanting to share
  the experience with friends
• Constraints
• Material, cost, time, regulation, etc.
• Trade-off
• Choose which goals or constraints can be relaxed
  so that others can be met
• e.g. You may find that an eye-mounted video
  display, similar to those used in virtual
  reality, would give the most stable images while
  walking along. This, however, would not allow you
  to share the images with friends

3
The Golden Rule of Design

• Understanding the Materials

A chair with a steel frame and a chair with a
wooden frame are quite different. Often the steel
frames are tabular or thin L or H section steel,
whereas wooden chairs have thick solid legs. Why?
What would happen if a wooden chair were made
using the design for a metal one and vice versa?

• For HCI, the Materials are Human and Computer.
  Therefore, We Must
• Understand humans
• Psychological and social aspects, human error,
  etc.
• Understand computers
• Limitations, capacities, tools, platforms, etc.
• Understand their interaction

4
To Err is Human

• More often than not accidents are inherent in
  poor design or installation of the human
  interfaces (Example)
• Bad interfaces are error-prone to use
• Bad interfaces cost money and lives
• It is the Nature of Humans to Make Mistakes
• 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 Interaction Design
• Put the user first
• Keep the user in the center
• Remember the user at the end

5
Scenarios

• Scenario-Based Design (Carroll, 1995)
• Useful in situations when there is no detailed
  conception of exactly which work activities
  should be supported and in which way the system
  should be designed
• Scenarios
• Concrete stories about peoples activities in
  using the system
• e.g. Go to Wright State Wings website by typing
  its URL, enter user name, enter password, click
  Login button .
• Presented with plain text descriptions, or
  supplemented with storyboards
• e.g. Sketches, simulated screen shots, etc.

6
Scenarios

• Simple Yet the Most Flexible and Powerful Design
  Representation
• Understand users needs and the context the users
  are operating in
• What can they see?
• What can they do?
• What are they thinking?
• Communicate with others
• Concrete examples of use are far easier to share
  than abstract ideas
• Validate other models
• A detailed scenario can be played against various
  more formal representations
• Express dynamics
• Envision how the system behaves rather than
  merely a sense of what the system would look like
  

7
Scenarios

• Linearity of Scenarios
• Each scenario represents a single path among all
  the potential interactions
• Pros
• Life and time are linear
• Easy to understand linear stories and narratives
• Cons
• No alternatives
• Real interactions that have choices can not be
  demonstrated
• Miss unintended actions by users
• Use several scenarios

8
Navigation Design

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

9
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

10
Local Structure

• Four Design Rules
• Users should know where they are
• The 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. Most web browsers offer a history system and
  also a back button that keeps a list of
  recently visited pages

11
Breadcrumbs Showing Path Through the Website
Hierarchy
12
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
13
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 fast if the
  user wants to search for states in a particular
  region, then a list by region would be more
  appropriate

14
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

15
Global Structure

• Dialog (Cont.)
• Human-computer dialogue
• Overall patterns of interaction between the user
  and system
• Details differ each time
• 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

16
Network Diagram Showing the Process of Adding or
Removing a User from the Messaging System
17
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

18
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
• Decorative features
• Alignment of items
• White space between items

19
Screen Design and Layout

• Grouping and Structure of Items
• If items logically belong together, then we
  should normally physically group them 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
20
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
• Decorative Features
• Features like font style, text or background
  colors can be used to emphasize groupings

21
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
22
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
Find the largest number in each column
23
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
24
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)
25
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
26
Grouping of Controls
Defrost settings
Type of food
Time to cook
27
Order of Controls

• Type of heating
• Temperature
• Time to cook
• Start

1
2
3
4
28
Decoration
Different colors for different functions
Lines around related buttons (temp up/down)
29
White Space
Gaps to aid grouping
30
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

31
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
32
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

33
Illustration of Perspective Effect
34
Design Rationale

• Information that explains why a computer system
  is the way it is
• Structural or architectural description
• Functional or behavioral description
• Benefits of Design Rationale
• Facilitates communication
• Understanding what critical decisions were made,
  what alternatives were investigated, and the
  reason why one alternative was chosen over the
  others
• Enables reuse of design knowledge across products
• Accumulated knowledge in the form of design
  rationales for a set of products can be reused to
  transfer what has worked in one situation to
  another situation which has similar needs
• Enforces design discipline
• The effort required to produce a design rationale
  forces the designer to deliberate more carefully
  about design decisions

35
Design Rationale

• Benefits of Design Rationale (Cont.)
• Presents arguments for design trade-offs
• Organizes potentially large design space
• The space of alternatives can be so vast that it
  is unlikely for the designer to discover the
  optimal alternative within the time and/or cost
  constraints
• Captures contextual information
• The usability of an interactive system depends on
  the context of its use
• Capturing the context in which a design decision
  is made will help later when new products are
  designed
• If the context remains the same, then the old
  rationale can be adopted without revision
• If the context has changed somehow, the old
  rationale can be reexamined to see if any
  rejected alternatives are now more favorable or
  if any new alternatives are now possible

36
Process-Oriented Design Rationale

• Overview
• Concentrates on providing a historical records of
  design decisions
• Used during the actual design discussions
• IBIS (Issue-Based Information System Rittel
  Webber, 1973)
• The design is documented as a hierarchical
  structure
• Primitives
• Issues questions that the design is addressing
  one root issue
• Positions potential resolutions of issues
• Arguments those that support or refute positions
  
• Graphic Version of IBIS (gIBIS Conklin
  Yakemovic, 1991)
• Issues, positions and arguments are nodes in the
  directed graph, and the connections between them
  are labeled to depict the relationship between
  connected nodes

37
Structure of a gIBIS Design Rationale
38
An Example of IBIS Discussion
39
(No Transcript)
40
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