i213: User Interface Design

1
i213 User Interface Design Development

• Marti Hearst
• March 1, 2007

2
Today

• Wireframing
• Being Formal Usability Studies

3
Wireframing

• What is the main idea?
• A visual guide to suggest the layout and
  placement of fundamental design elements
• Separate content from layout and display
• Allow for development of variatinos of the layout
  to support consistency
• Use elements from graphic design
• Use the page layout to signal the flow of
  interaction
• Group conceptually related items together

4
Example

• (By Lisa Hankin)

5
Wireframing

• Nielsen
• usability of the layout specified by the template
  design
• usability of the specific content that has been
  poured into this template on the individual pages
  
• Questions to ask
• What does the layout communicate?
• Does a page of content becomes more usable
  because of the layout?
• A template (for a home page) should contain what
  items?

6
From http//www.gotomedia.com/macromedia/monterey/
architecture/
7
From http//www.gotomedia.com/macromedia/monterey/
architecture/
8
Wireframing Study

• How to test a layout
• Study conducted by Thomas S. Tullis from Fidelity
  Investments in 1998
• Assessed the usability of five alternative
  template designs for their intranets.
• Method
• Show templates with greeked text
• Draw labeled boxes around each page corresponding
  to 9 elements
• No overlapping allowed
• Indicate if something appears not to be there

9
The Elements

• Main content selections for this page
• Page title
• Person responsible for this page
• Intranet-wide navigation (e.g., intranet home,
  search)
• Last updated date
• Intranet identifier/logo
• Site navigation (e.g, major sections of this
  section of the intranet)
• Confidentiality/security (e.g, Public,
  Confidential, etc.)
• Site news items

10
From http//www.useit.com/alertbox/980517.html
11
From http//www.useit.com/alertbox/980517.html
12
From http//www.useit.com/alertbox/980517.html
13
From http//www.useit.com/alertbox/980517.html
14
Wireframing Study

• Different parts of the designs scored better
• Best parts were taken from each design and
  combined
• Resulted in an overall better score

15
Results of Study
Correct Page Elements Subjective Appeal (-3 to 3)
Template 1 52 1.3
Template 3 67 0.9
Final Design 72 2.1
16
Formal Usability Studies
17
Outline

• Experiment Design
• Factoring Variables
• Interactions
• Special considerations when involving human
  participants

18
Formal Usability Studies

• When useful
• to determine time requirements for task
  completion
• to compare two designs on measurable aspects
• time required
• number of errors
• effectiveness for achieving very specific tasks
• Requires Experiment Design

19
Experiment Design

• Experiment design involves determining how many
  experiments to run and which attributes to vary
  in each experiment
• Goal isolate which aspects of the interface
  really make a difference

20
Experiment Design

• Decide on
• Response variables
• the outcome of the experiment
• usually the system performance
• aka dependent variable(s)
• Factors (aka attributes)
• aka independent variables
• Levels (aka values for attributes)
• Replication
• how often to repeat each combination of choices

21
Experiment Design

• Example
• Studying a system (ignoring users)
• Say we want to determine how to configure the
  hardware for a personal workstation
• Hardware choices
• which CPU (three types)
• how much memory (four amounts)
• how many disk drives (from 1 to 3)
• Workload characteristics
• administration, management, scientific

22
Experiment Design

• We want to isolate the effect of each component
  for the given workload type.
• How do we do this?
• WL1 CPU1 Mem1 Disk1
• WL1 CPU1 Mem1 Disk2
• WL1 CPU1 Mem1 Disk3
• WL1 CPU1 Mem2 Disk1
• WL1 CPU1 Mem2 Disk2
• There are (3 CPUs)(4 memory sizes)(3 disk
  sizes)(3 workload types) 108 combinations!

23
Experiment Design

• One strategy to reduce the number of comparisons
  needed
• pick just one attribute
• vary it
• hold the rest constant
• Problems
• inefficient
• might miss effects of interactions

24
Interactions among Attributes
A and B do not interact
A and B may interact
A1 A2 B1 3 5 B2 6 12
A1 A2 B1 3 5 B2 6 8
B2
B2
B1
B1
A2
A1
A2
A1
A2
A2
A1
A1
B1
B2
B1
B2
25
Experiment Design

• Another strategy figure out which attributes are
  important first
• Do this by just comparing a few major attributes
  at a time
• if an attribute has a strong effect, include it
  in future studies
• otherwise assume it is safe to drop it
• This strategy also allows you to find
  interactions between attributes

26
Experiment Design

• Common practice Fractional Factorial Design
• Just compare important subsets
• Use experiment design to partially vary the
  combinations of attributes
• Blocking
• Group factors or levels together
• Use a Latin Square design to arrange the blocks

27
Between-Groups Design

• Wilma and Betty use one interface

• Dino and Fred use the other

28
Within-Groups Design

• Everyone uses both interfaces

29
Between-Groups vs. Within-Groups

• Between groups
• 2 or more groups of test participants
• each group uses only 1 of the systems
• Within groups
• one group of test participants
• each person uses all systems
• cant use the same tasks on different systems

30
Between Groups Example

• Comparing TextEdge to Graffiti
• Wobbrock, J.O., Myers, B.A. and Kembel, J.A.
  (2003) EdgeWrite A stylus-based text entry
  method designed for high accuracy and stability
  of motion. (UIST '03).

31
Between Groups Example

• Comparing TextEdge to Graffiti
• Wobbrock, J.O., Myers, B.A. and Kembel, J.A.
  (2003) EdgeWrite A stylus-based text entry
  method designed for high accuracy and stability
  of motion. (UIST '03).
• Independent Variables?
• Dependent Variables?
• Between or Within Subjects?

32
Between Groups Example

• Comparing TextEdge to Graffiti
• Independent Variables?
• TextEdge vs Graffiti!
• Dependent Variables?
• Time
• Errors
• Between or Within Subjects?
• Between, to control for learning effects

33
Between-Groups vs. Within-Groups

• Within groups design
• Pros
• Is more powerful statistically (can compare the
  same person across different conditions, thus
  isolating effects of individual differences)
• Requires fewer participants than between-groups
• Cons
• Learning effects
• Fatigue effects

34
Special Considerations for Formal Studies with
Human Participants

• Studies involving human participants vs.
  measuring automated systems
• people get tired
• people get bored
• people (may) get upset by some tasks
• learning effects
• people will learn how to do the tasks (or the
  answers to questions) if repeated
• people will (usually) learn how to use the system
  over time

35
More Special Considerations

• High variability among people
• especially when involved in reading/comprehension
  tasks
• especially when following hyperlinks! (can go all
  over the place)