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