1Fall 2005 6.831 UI Design and Implementation 1 Fall 2005 6.831 UI Design and Implementation 2 Fall 2005 6.831 UI Design and Implementation 3 Paper prototypes Computer prototypes Wizard of Oz prototypesFall 2005 6.831 UI Design and Implementation 4 Get feedback earlier, cheaper Experiment with alternatives Easier to change or throw away2Fall 2005 6.831 UI Design and Implementation 5 Low fidelity: omits details High fidelity: more like finished productFall 2005 6.831 UI Design and Implementation 6! Breadth: % of features covered Only enough features for certain tasks Depth: degree of functionality Limited choices, canned responses, no error handlinghorizontalprototypeverticalprototypescenariofront enddifferent featuresback endFall 2005 6.831 UI Design and Implementation 7! " Look: appearance, graphic design Sketchy, hand-drawn Feel: input method Pointing & writing feels very different from mouse & keyboardFall 2005 6.831 UI Design and Implementation 8 Interactive paper mockup Sketches of screen appearance Paper pieces show windows, menus, dialog boxes Interaction is natural Pointing with a finger = mouse click Writing = typing A person simulates the computer s operation Putting down & picking up pieces Writing responses on the screen Describing effects that are hard to show on paper Low fidelity in look & feel High fidelity in depth (person simulates the backend)3Fall 2005 6.831 UI Design and Implementation 9 Faster to build Sketching is faster than programming Easier to change Easy to make changes between user tests, or even during a user test No code investment everything will be thrown away (except the design) Focuses attention on big picture Designer doesn t waste time on details Customer makes more creative suggestions, not nitpicking Nonprogrammers can help Only kindergarten skills are requiredFall 2005 6.831 UI Design and Implementation 10 White poster board (11x14) For background, window frame Big (unlined) index cards (4x6, 5x8) For menus, window contents, and dialog boxes Restickable glue For keeping pieces fixed White correction tape For text fields, checkboxes, short messages Overhead transparencies For highlighting, user typing Photocopier For making multiple blanks Pens & markers, scissors, tapeFall 2005 6.831 UI Design and Implementation 11# Make it larger than life Make it monochrome Replace tricky visual feedback with audible descriptions Tooltips, drag & drop, animation, progress bar Keep pieces organized Use folders & open envelopesFall 2005 6.831 UI Design and Implementation 12$"% &4Fall 2005 6.831 UI Design and Implementation 13'! Fall 2005 6.831 UI Design and Implementation 14 (")Fall 2005 6.831 UI Design and Implementation 15$# #Fall 2005 6.831 UI Design and Implementation 16% Roles for design team Computer Simulates prototype Doesn t give any feedback that the computer wouldn t Facilitator Presents interface and tasks to the user Encourages user to think aloud by asking questions Keeps user test from getting off track Observer Keeps mouth shut, sits on hands if necessary Takes copious notes5Fall 2005 6.831 UI Design and Implementation 17 *+ Conceptual model Do users understand it? Functionality Does it do what s needed? Missing features? Navigation & task flow Can users find their way around? Are information preconditions met? Terminology Do users understand labels? Screen contents What needs to go on the screen?Fall 2005 6.831 UI Design and Implementation 18 *+ Look: color, font, whitespace, etc Feel: Fitts s Law issues Response time Are small changes noticed? Even the tiniest change to a paper prototype is clearly visible to user Exploration vs. deliberation Users are more deliberate with a paper prototype; they don t explore or thrash as muchFall 2005 6.831 UI Design and Implementation 19+ Interactive software simulation High-fidelity in look & feel Low-fidelity in depth Paper prototype had a human simulating the backend; computer prototype doesn t Computer prototype is typically horizontal: covers most features, but no backendFall 2005 6.831 UI Design and Implementation 20 *+ + Everything you learn from a paper prototype, plus: Screen layout Is it clear, overwhelming, distracting, complicated? Can users find important elements? Colors, fonts, icons, other elements Well-chosen? Interactive feedback Do users notice & respond to status bar messages, cursor changes, other feedback Fitts s Law issues Controls big enough? Too close together? Scrolling list is too long?6Fall 2005 6.831 UI Design and Implementation 21 Faster than coding No debugging Easier to change or throw away Don t let Java do your graphic designFall 2005 6.831 UI Design
View Full Document
Unlocking...