Date post: | 20-Dec-2015 |
Category: |
Documents |
View: | 215 times |
Download: | 1 times |
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)