SIMS 213: User Interface Design &

Development

Marti Hearst

Thurs Feb 22, 2001

Wireframing

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

– Bloopers Ch. 3, Sano reading from SIMS 202 Use the page layout to signal the flow of interaction Group conceptually related items together See lecture on graphic design as well

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 better Best parts were taken from each design and

combined Resulted in an overall better score

A view of how to tie it together

Kelly Goto & Eric Ott of Macromediahttp://www.gotomedia.com/macromedia/monterey/architecture/

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

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

Modes

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

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