SIMS 213: User Interface Design & Development

Marti HearstThurs, Feb 26, 2004

Today

Discuss Assignment 3WireframingCard Sorting

Wireframing

What is the main idea?– Separate content from layout and display– Next week:

• Use the page layout to signal the flow of interaction• Group conceptually related items together

– Nielsen: • What does the layout communicate?• Test if a page of content becomes more usable because of the layout• A template (for a home page) should contain what items?

How WireFraming Fits In

Kelly Goto & Eric Ott of Macromedia

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

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

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

How to Test A Layout

Study 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

Nielsen Wireframing Example

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

Card Sorting

Main purpose?– Determine how to organize a set of information– Determine good labels for the items in that organization

How is it done?– User-centered

• Write topics on cards• Ask different participants to organize them for a given task

– Need strategies for “difficult” cards• Consolidate the results

– Do another round for labels