i213: User Interface Design & Development

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

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 Adapted from slide by James Landay

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 A1 A2 A1 A2 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 • can’t use the same tasks on different systems Adapted from slide by James Landay

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)