1. SIMS 213: User Interface Design & Development Marti Hearst Thurs Feb 22, 2001

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

3. From http://www.useit.com/alertbox/980517.html

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

8. A view of how to tie it together Kelly Goto & Eric Ott of Macromedia http://www.gotomedia.com/macromedia/monterey/architecture/

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

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

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

13. Toolglass & Magic Lenses A palette of tools Applying the fill-color tool Composing two tools – Fill-color and magnify

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