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

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

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

• 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

14
(No Transcript)
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