Combining Informal and Tangible Interfaces for Early Stages of Web Site Design

1. 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. Combining Informal and Tangible Interfaces for Early Stages of Web Site Design Raecine Sapien Mentor: Mark Newman Professor: Dr. James Landay

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

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

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

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

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

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

8. Lo-fi Prototype Testing

9. Lo-fi Prototype Testing • 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.

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

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

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

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

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

16. Second User Tests

17. Second User Tests 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

18. Gesture Evaluation by Users • 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

19. Gesture Evaluation Gesture Recognition Accuracy

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