i213: user interface design & development marti hearst march 1, 2007

i213: User Interface Design & Development

Marti HearstMarch 1, 2007

Today

WireframingBeing Formal Usability Studies

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

Example

(By Lisa Hankin)

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?

From http://www.gotomedia.com/macromedia/monterey/architecture/

From http://www.gotomedia.com/macromedia/monterey/architecture/

Wireframing Study

How to test a layoutStudy conducted by Thomas S. Tullis from Fidelity Investments in 1998Assessed 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

The Elements

1. Main content selections for this page 2. Page title 3. Person responsible for this page 4. Intranet-wide navigation (e.g., intranet home, search) 5. Last updated date 6. Intranet identifier/logo 7. Site navigation (e.g, major sections of this section of the

intranet) 8. Confidentiality/security (e.g, Public, Confidential, etc.) 9. Site news items

From http://www.useit.com/alertbox/980517.html

From http://www.useit.com/alertbox/980517.html

From http://www.useit.com/alertbox/980517.html

From http://www.useit.com/alertbox/980517.html

Wireframing Study

Different parts of the designs scored betterBest parts were taken from each design and combinedResulted in an overall better score

Results of Study

CorrectPage

Elements

Subjective Appeal

(-3 to +3)

Template 1 52% +1.3

Template 3 67% +0.9

Final Design 72% +2.1

Formal Usability Studies

Outline

Experiment Design– Factoring Variables– Interactions

Special considerations when involving human participants

Adapted from slide by James Landay

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

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

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

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

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!

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

Interactions among Attributes

A1 A2B1 3 5B2 6 8

A1 A2B1 3 5B2 6 12

A1

B1B1

A2

A1

B2

A2

B2

A and B do not interact A and B may interact

A2A2 A1A1

B1 B2B1 B2

Experiment Design

Another strategy: figure out which attributes are important firstDo 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

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

Between-Groups Design

Wilma and Betty use one interface

Dino and Fred use the other

Within-Groups Design

Everyone uses both interfaces

Adapted from slide by James Landay

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

• can’t use the same tasks on different systems

Between Groups ExampleComparing TextEdge to GraffitiWobbrock, 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).

Between Groups Example

Comparing TextEdge to GraffitiWobbrock, 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?

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

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

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

More Special Considerations

High variability among people

– especially when involved in reading/comprehension tasks

– especially when following hyperlinks! (can go all over the place)