2. Combining Informal and Tangible Interfaces for Early Stages of Web Site Design Raecine Sapien Mentor: Mark Newman Professor: Dr. James Landay This presentation will probably involve audience discussion, which will create action items. Use PowerPoint to keep track of these action items during your presentation In Slide Show, click on the right mouse button Select “Meeting Minder” Select the “Action Items” tab Type in action items as they come up Click OK to dismiss this box This will automatically create an Action Item slide at the end of your presentation with your points entered.

3. Where does my system fit into DENIM and web site design? Taken from Contextual Design Beyer & Holtzblatt

4. Design Process  Tasks and Scenarios  Initial Design  Lo-fi prototype  User tests  Modified Design  Implementation  Second user tests

5. Tasks and Scenarios  Researched early web site design  Contextual inquiry  Information gathering  User goals  Card sorting tasks

6. Design Process  Tasks and Scenarios  Initial Design  Lo-fi prototype  User tests  Modified Design  Implementation  Second user tests

7. Initial Design Description  Physical components  Vision system  CrossPad  Digital Desk  Command Area  System Behavior  System Feedback  Physical vs. Virtual

8. Design Process  Tasks and Scenarios  Initial Design  Lo-fi prototype  User tests  Modified Design  Implementation  Second user tests

9. Lo-fi Prototype Testing

10.  Users group post-its in many different shapes.  Users want to interact with the system using one input device.  Users feel that underlining group names and pressing the upload button are tedious tasks.

11. Design Process  Tasks and Scenarios  Initial Design  Lo-fi prototype  User tests  Modified Design  Implementation  Second user tests

12. Modified Design Description  System Behavior  Recognizes a variety of group shapes  Group names shown by color distinction  Performs straightening of post-its when requested or when saving  Vision System  More responsibility taken on by vision system  System Interaction  Gestures performed on desk  Dialog with the system performed on CrossPad LCD  Use digital/inking pen for all interaction

13. Design Process  Tasks and Scenarios  Initial Design  Lo-fi prototype  User tests  Modified Design  Implementation  Second user tests

14. Implementation  Implement virtual portion of the design using Java Swing and SATIN  SATIN:  Sheet  Style  Patch  Interpreter

16. Design Process  Tasks and Scenarios  Initial Design  Lo-fi prototype  User tests  Modified Design  Implementation  Second user tests

17. Second User Tests

18.  System details the users disliked  Grating sound of pen across the desk when moving  Failed gesture attempts  Slow writing  Features users want to see added  Copy, erase writing, speech input, modify color scheme

19.  Memorability  Save, Group, and Undo rated highly  Redo and Cut not as intuitive  Ease of Learning  Gestures rated high overall  Grouping rated harder to learn  Ease of Use  Similar ratings as ease of learning although Grouping rated a little higher Gesture Evaluation by Users

20. Gesture Evaluation Gesture Recognition Accuracy

21. Future Work  Program the CrossPad to use the LCD to interact with user  Implement the uploading process  Vision System