I213: User Interface Design & Development Marti Hearst March 1, 2007.

Slides:



Advertisements
Similar presentations
Multiple Comparisons in Factorial Experiments
Advertisements

Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
1 Microsoft Access 2002 Tutorial 9 – Automating Tasks With Macros.
Visual Design Teppo Räisänen
Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target.
[Title of meeting] [Name of sponsor] [Date] For guidance on working with PowerPoint and reformatting slides, click on Help, then Microsoft PowerPoint Help,
SIMS 213: User Interface Design & Development Marti Hearst Thurs, March 6, 2003.
User Testing & Experiments. Objectives Explain the process of running a user testing or experiment session. Describe evaluation scripts and pilot tests.
P2-WIREFRAME Presented by Rahul Potghan Sonal Kulkarni.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 25, 2003.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, March 3, 2005.
Automating Tasks With Macros
Content Management System 213 Project Peter Roessler, Dhea Maloney, Chris Marin, Chan Jean Lee.
Statistics CSE 807.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, March 13, 2003.
SIMS 213: User Interface Design & Development Marti Hearst Tues, March 5, 2002.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 26, 2004.
Web Site Design Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development April 6, 1999.
Using Between-Subjects and Within-Subjects Experimental Designs
SIMS 213: User Interface Design & Development Marti Hearst March 9 and 16, 2006.
SIMS 213: User Interface Design & Development Marti Hearst Tues Feb 13, 2001.
SIMS 213: User Interface Design & Development Marti Hearst March 9 & 11, 2004.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Jan 22, 2004.
1 User Centered Design and Evaluation. 2 Overview My evaluation experience Why involve users at all? What is a user-centered approach? Evaluation strategies.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Jan 18, 2007.
Www: Greeked Templates Jakob Nielsen (useit.com & jnn.org) Thomas S. Tullis (Fidelity Investments)
SIMS 213: User Interface Design & Development Marti Hearst Thurs Feb 22, 2001.
Mining the Web for Design Guidelines Marti Hearst, Melody Ivory, Rashmi Sinha UC Berkeley.
Discount Usability Engineering Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development March 2, 1999.
Review an existing website Usability in Design. to begin with.. Meeting Organization’s objectives and your Usability goals Meeting User’s Needs Complying.
A02 Creating my website NAME ______________. UNIT 2 – A02 – Creating my Website The purpose of this assessment objective is to create 5 web pages containing.
Introduction to the design (and analysis) of experiments James M. Curran Department of Statistics, University of Auckland
Repeated Measures ANOVA Used when the research design contains one factor on which participants are measured more than twice (dependent, or within- groups.
Heuristic Evaluation “Discount” Usability Testing Adapted from material by Marti Hearst, Loren Terveen.
Paper Prototyping Source:
AZIZ KUSTIYO DEPARTEMEN ILMU KOMPUTER FMIPA IPB. INTRODUCTION TO EXPERIMENTAL DESIGN  The goal of a proper experimental design is to obtain the maximum.
بسم الله الرحمن الرحيم * this presentation about :- “experimental design “ * Induced to :- Dr Aidah Abu Elsoud Alkaissi * Prepared by :- 1)-Hamsa karof.
Research Methods in Psychology
What we know…. Use Lisa’s call in number 3 1 Instructional Multiplier Customized and Adaptive Scaffolded Support Active Engagement Accelerated Learning.
Design Experimental Control. Experimental control allows causal inference (IV caused observed change in DV) Experiment has internal validity when it fulfills.
SWE205 Review Spring Why is software unusable? Users are no longer trained. Why? Feature creep Inherently hard: a problem of communication Designed.
Involving Users in Interface Evaluation Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development April 8, 1999.
Introduction to Experimental Design
Scientific Research in Biotechnology 5.03 – Demonstrate the use of the scientific method in the planning and development of an experimental SAE.
Lecture 6 Title: Web Planning, Designing, Developing for E-Marketing By: Mr Hashem Alaidaros MKT 445.
Date 23 rd Jan Shatin 沙田 Mobile Information Architecture.
McGraw-Hill/Irwin Copyright © 2011 by The McGraw-Hill Companies, Inc. All rights reserved. Using Between-Subjects and Within- Subjects Experimental Designs.
Formal User Studies Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development April 13, 1999.
 Network  A _____ of computers that can _________ w/ each other  Examples of hardware  ______________ & communication lines  Internet  Hardware.
The Structure of the User Interface Lecture # 8 1 Gabriel Spitz.
Computer-based Media Language Elements Understanding how we communicate through media Stewart.C. (2007). Media: New Ways and Means. John Wiley & Sons:
COMM1PCOMM1P Alan Woolrych E-store lectures Monday 12/11/01 11:00 EC 13:00 ECA Page Layout 7.
With a focus on screen design and CRAP. The Joshua Tree Epiphany.
After testing users Compile Data Compile Data Summarize Summarize Analyze Analyze Develop recommendations Develop recommendations Produce final report.
The Structure of the User Interface Lecture # 2 Gabriel Spitz.
Software Interface Design Features / Issues. Learning Objectives Discuss the features affecting interface design.
Copyright © Terry Felke-Morris Learning Outcomes  In this chapter...  common types of website organization  principles of visual design  your target.
CANVAS Layout and Style for Usability. Aspects of Usability Content Importance, Necessity Aesthetic Interesting, evokes desired emotion Organization Leads.
Section 6.1 Section 6.2 Write Web text Use a mission statement
Web Site Design Plan Checklist
Web Development A Visual-Spatial Approach
Web Programming– UFCFB Lecture-4
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Benchmark Series Microsoft Word 2016 Level 2
i213: User Interface Design & Development
A02 Creating my website NAME ______________.
Introduction to the design (and analysis) of experiments
Presentation transcript:

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 –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

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

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

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

Results of Study Correct Page Elements Subjective Appeal (-3 to +3) Template 152%+1.3 Template 367%+0.9 Final Design72%+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? –WL1CPU1 Mem1Disk1 –WL1CPU1Mem1Disk2 –WL1CPU1Mem1Disk3 –WL1CPU1Mem2Disk1 –WL1CPU1Mem2Disk2 –…–… 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 A1A2 B135 B268 A1 A2 B135 B2612 A1 B1 A2 A1 B2 A2 B2 A and B do not interactA and B may interact A2 A1 B1B2B1B2

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

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 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).

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?

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)