1 / 35

i213: User Interface Design & Development

i213: User Interface Design & Development. Marti Hearst March 1, 2007. Today. Wireframing Being 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

wood
Download Presentation

i213: User Interface Design & Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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)

More Related