1. SIMS 213: User Interface Design & Development Marti Hearst Thurs, March 6, 2003

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

3. How WireFraming Fits In Kelly Goto & Eric Ott of Macromedia http://www.gotomedia.com/macrom edia/monterey/architecture/

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

6. How to Test A Layout Study conducted by Thomas S. Tullis from Fidelity Investments in 1998 Assessed 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

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

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

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

13. Results of Study Correct Page Elements Subjective Appeal (-3 to +3) Template 152%+1.3 Template 367%+0.9 Final Design72%+2.1

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

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

16. Modal Blooper

17. Modal Blooper (and other problems too)

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

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

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