nathan – peter - kaitlyn. initial design sketches
TRANSCRIPT
![Page 1: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/1.jpg)
Nathan – Peter - Kaitlyn
![Page 2: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/2.jpg)
Initial Design Sketches
![Page 3: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/3.jpg)
Started with Crossing
Cross over, cross back, etc Gestures Acceleration/Velocity based
Select
![Page 4: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/4.jpg)
Wright Cursor
![Page 5: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/5.jpg)
Wright Cursor
![Page 6: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/6.jpg)
Wright Cursor
![Page 7: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/7.jpg)
Wright Cursor
![Page 8: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/8.jpg)
Wright Cursor
![Page 9: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/9.jpg)
Wright Cursor
![Page 10: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/10.jpg)
Wright Cursor
![Page 11: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/11.jpg)
Wright Cursor
![Page 12: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/12.jpg)
Wright Cursor
![Page 13: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/13.jpg)
Wright Cursor
![Page 14: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/14.jpg)
Wright Cursor
![Page 15: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/15.jpg)
Wright Cursor
![Page 16: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/16.jpg)
Pure crossing seems to be: Error-prone Unusable in current interfaces Unsafe
![Page 17: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/17.jpg)
So we went to : EDGES!
![Page 18: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/18.jpg)
Edges:
Very accurate Still Crossing, just like Mac Menubar Pretty Safe
Ah Ha! – Make everything as easy to click as the buttons on a screen edge!
![Page 19: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/19.jpg)
Flipbooks: Hash out our Ideas
1 2
34
5 6
We also tried a binary search, quadrant area cursor.
While it has potential, we think edges are too powerful to pass up.
![Page 20: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/20.jpg)
An area cursor follows the mouse, separating the selection area into 4 quadrants.
6
4
1
2 3
5
![Page 21: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/21.jpg)
6
4
1
2 3
5
Activation causes the cursor to move independently of the area cursor.
![Page 22: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/22.jpg)
6
4
Moving to the edge of a quadrant modifies the selection to contain only the items from that quadrant. The edge constrains the mouse and keeps it in the area cursor.
1
2 3
5
![Page 23: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/23.jpg)
The items from the selected quadrant are rearranged into quadrants. Now, going into a quadrant selects the remaining items. If more than one item is in the quadrant, the process is repeated.
1 2
34
5 6
![Page 24: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/24.jpg)
1 2
34
5 6
![Page 25: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/25.jpg)
26
![Page 26: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/26.jpg)
2
Selecting a quadrant with only one remaining target selects the target.
![Page 27: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/27.jpg)
Target
Activate tunnels• Keystroke• Click
![Page 28: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/28.jpg)
Target
What if the mouse is over a pliant region?… that ISN’T your target?
![Page 29: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/29.jpg)
Target
What if the mouse is over a pliant region?… that IS your target?
![Page 30: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/30.jpg)
Target
What about right-clicking?
Open
Copy
Properties
![Page 31: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/31.jpg)
Edge.Point
![Page 32: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/32.jpg)
Interaction Time!
![Page 33: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/33.jpg)
Pros: Plausible!
Does not hamper user who do not need or want pointing assistance.
Works with current desktop interfaces. Effective widths of targets = ∞ Steering tasks are automated by
tunnels. Resize area cursor via mouse-wheel.
![Page 34: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/34.jpg)
Cons:
Must deploy area cursor to gain assistive benefit.
Mouse buttons are used. Algorithms could be improved to better
map tunnels to the cursor.
![Page 35: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/35.jpg)
User Tests
![Page 36: Nathan – Peter - Kaitlyn. Initial Design Sketches](https://reader031.vdocuments.us/reader031/viewer/2022012916/56649d1b5503460f949f0b6f/html5/thumbnails/36.jpg)
Without explanation or practice, the technique was very hard to use for our subjects.
They ended up just pointing and clicking the icons. Normal interaction still works perfectly, a feature of our system.