Paper - PDF document

������������������������� ����������������������� Fall 2004 6.831 UI Design and Implementation 1 Fall 2004 6.831 UI Design and Implementation 2 �������������� ������������� � Paper prototypes � Get feedback earlier, cheaper � Wizard of Oz prototypes � Experiment with alternatives � Easier to change or throw away Fall 2004 6.831 UI Design and Implementation 3 Fall 2004 6.831 UI Design and Implementation 4 1

������������������ ������������!��������������� � Low fidelity: omits details � Breadth: % of features covered � Only enough features for certain tasks � High fidelity: more like finished product � Depth: degree of functionality � Limited choices, canned responses, no error handling horizontal front end prototype vertical scenario prototype back end different features Fall 2004 6.831 UI Design and Implementation 5 Fall 2004 6.831 UI Design and Implementation 6 !����"��������������������� ��������������� � Interactive paper mockup � Look: appearance, graphic design � Sketches of screen appearance � Sketchy, hand-drawn � Paper pieces show windows, menus, dialog boxes � Interaction is natural � Feel: input method � Pointing with a finger = mouse click � Pointing & writing feels very different from � Writing = typing � A person simulates the computer � s operation mouse & keyboard � 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) Fall 2004 6.831 UI Design and Implementation 7 Fall 2004 6.831 UI Design and Implementation 8 2

��������������������� ��������������������������� � White poster board (11 � x14 � ) � Faster to build � For background, window frame � Sketching is faster than programming � Big (unlined) index cards (4 � x6 � , 5 � x8 � ) � Easier to change � For menus, window contents, and dialog boxes � Easy to make changes between user tests, or even during a � Restickable glue user test � For keeping pieces fixed � No code investment � everything will be thrown away (except � White correction tape the design) � Focuses attention on big picture � For text fields, checkboxes, short messages � Overhead transparencies � Designer doesn � t waste time on details � For highlighting, user � typing � � Customer makes more creative suggestions, not nitpicking � Photocopier � Nonprogrammers can help � For making multiple blanks � Only kindergarten skills are required � Pens & markers, scissors, tape Fall 2004 6.831 UI Design and Implementation 9 Fall 2004 6.831 UI Design and Implementation 10 ���������#�������������������� ��$�������������������������� � Make it larger than life � Roles for design team � Computer � Make it monochrome � Simulates prototype � Replace tricky visual feedback with � Doesn � t give any feedback that the computer wouldn � t � Facilitator audible descriptions � Presents interface and tasks to the user � Tooltips, drag & drop, animation, progress � Encourages user to � think aloud � by asking questions bar � Keeps user test from getting off track � Keep pieces organized � Observer � Keeps mouth shut, sits on hands if necessary � Use folders & open envelopes � Takes copious notes Fall 2004 6.831 UI Design and Implementation 11 Fall 2004 6.831 UI Design and Implementation 12 3

����%���&���������� ����%���&������������������������������� � Conceptual model � Look: color, font, whitespace, etc � Do users understand it? � Feel: Fitts � s Law issues � Functionality � Response time � Does it do what � s needed? Missing features? � Navigation & task flow � Are small changes noticed? � Can users find their way around? � Even the tiniest change to a paper prototype is � Are information preconditions met? clearly visible to user � Terminology � Exploration vs. deliberation � Do users understand labels? � Users are more deliberate with a paper prototype; � Screen contents they don � t explore or thrash as much � What needs to go on the screen? Fall 2004 6.831 UI Design and Implementation 13 Fall 2004 6.831 UI Design and Implementation 14 �'�������('���������� � Software simulation with a human in the loop to help � � Wizard of Oz � = � man behind the curtain � � Wizard is usually but not always hidden � Often used to simulate future technology � Speech recognition � Learning � Issues � Two UIs to worry about: user � s and wizard � s � Wizard has to be mechanical Fall 2004 6.831 UI Design and Implementation 15 4