SIMS 213: User Interface Design & Development

Marti HearstThurs, March 6, 2003

Wireframing

What is the main idea?– Separate content from layout and display– From last 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

Modes

What are they?When are they useful?Why can they be problematic?How can these problems be fixed?

Modes

What are they?– The same user actions have different effects in different situations.

When are they useful?– Temporarily restrict users actions– When logical and clearly visible and easily switchable

• Drawing with paintbrush vs. pencil• Autocorrect (if easy to switch the mode)

Why can they be problematic?– Big memory burden– Source of many serious errors

How can these problems be fixed?– Don’t use modes – redesign the system to be modeless– Redundantly visible

Modal Blooper

Modal Blooper(and other

problems too)

Toolglass + Magic Lenses

An innovative way to deal with modes: – Make selection of operations visible as you are doing

the operations– Work by Fishkin, Stone, and Bier at Xerox PARC

Toolglass & Magic Lenses

A palette of tools

Applying the fill-color tool

Composing two tools – Fill-color and magnify

Toolglass + Magic Lenses

Magic Lenses are windows which know about what’s below them, and/or what’s above them.– Using them makes the mode explicit– They can alter input, output, or both.– They can be combined

See video