slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
The End of Pointing and Clicking: Improving Computer Access with Goal Crossing PowerPoint Presentation
Download Presentation
The End of Pointing and Clicking: Improving Computer Access with Goal Crossing

Loading in 2 Seconds...

play fullscreen
1 / 67

The End of Pointing and Clicking: Improving Computer Access with Goal Crossing - PowerPoint PPT Presentation


  • 109 Views
  • Uploaded on

The End of Pointing and Clicking: Improving Computer Access with Goal Crossing. June 30, 2009. People. Design Criteria. Ease of motor-impaired performance How easy is it motor-wise to acquire the target? Efficiency? No  t No multiple steps Speed for able-bodied?

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'The End of Pointing and Clicking: Improving Computer Access with Goal Crossing' - ebony


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

The End of Pointing and Clicking:

Improving Computer Access with Goal Crossing

June 30, 2009

design criteria
Design Criteria

Ease of motor-impaired performance

How easy is it motor-wise to acquire the target?

Efficiency?

No t

No multiple steps

Speed for able-bodied?

Speed for motor-impaired?

Safety (Unwanted targets should not be accidentally triggered)

How easy/difficult is it to make a false selection?

Tolerance to movement error?

Is the design reversible?Is it cancelable? Can the user abort?

Scalability

Does it handle high-density layouts?

How does it scale to hundreds of menu items, links, buttons, and icons?

Is it compatible with conventional point-and-click widgets? Can both coexist?

Etc.

Are the benefits of crossing preserved (e.g., “follow-through,” “aggregation”)?

Is it easy to learn? Does it require preexisting knowledge?

How hard will it be to implement?

Is heavy animation required for the technique to work?

Can it lend itself to a nice visual design?

1 basic crossing ideas
1. Basic Crossing Ideas

1.1 Cross While Off-hand Button Held Down

1.2 Cross and Click Anywhere

1.3 Drag and Cross

1.4 Cross and Cross-back

1.5 Delta t

slide7

1.3 Drag and Cross

Drag

&

Cross

OK

slide8

1.4 Cross and Cross-back

Cross goal to activate

OK

Activated

Selected

Double clicked (or)

Drag (or)

Right clicked

Cross back to

confirm selection

OK

Cross goal to activate

Cross goal to activate

OK

OK

Cross back to

confirm selection

The target gives

visual feedback

OK

OK

slide9

1.4 Cross and Cross-back (cont.)

Activate an icon by crossing over icon and initial bar

OK

Then back over, turn 90-degrees and then cross the two bars

OK

Byron McMullen . Jacob Nelson . Tara Tarjoto . Tim Wibowo

slide10

1.5 Delta t

OK

Cross and stop for N seconds to confirm the selection

slide11

1.5 Delta t (cont.)

Cross and Stop

2 advanced crossing ideas
2. Advanced Crossing Ideas

2.1 Secondary Goal Crossing

2.2 Gesture

2.3 Corners and Edges

2.4 Moving Targets

2.5 Features of Crossing Event

slide13

2.1 Secondary Goal Crossing

  • BUTTON

g2

first goal: button

OK

second goal (g2): crossing the g1 initiates g2 to appear

OK

OK

OK

Length-to-the-g2 variation

angle variation

OK

OK

OK

OK

OK

G2 design variation: how to make it look like a goal?

slide14

2.1 Secondary Goal uArc-shape

Crossing the first target activates the arc

OK

(a)

Location of the 2nd goal changes depending on the approaching angle

slide15

2.1 Secondary Goal v L-Shape

g2 fades out if they are not being selected during a certain amount of time

Right-handed, left-handed

slide16

2.1 Secondary Goal w I-Shape

  • MULTI-LAYERED MENU: Red bar appears only when the menu has no underlying menu items
slide18

2.1 Secondary Goal y Cluster

Interactive prototype

Targets are clustered (3*3 or 2*2) and the secondary goals appear at the fixed location

T1

T2

T3

T4

T6

T7

T8

T9

2

3 4

slide19

2.2 Gesture uZig-zag / Scribble

Nope, it’s not selected

OK

OK

OK

Yes

Yes

slide22

2.2 Gesture x Hover Widget

cross

Turning 90° activates the most recently crossed goal. When the mouse crosses the end of the tunnel, the crossed goal is confirmed

cancel

slide23

2.2 Gesture yShivering Around a Target

Sparse layout, one small target

slide24

2.2 Gesture  Rectangle Lasso

Public Downloads

File Folder

To open

Philip Phung, Colin Booth, Mark Vitazko, Chris Claiborne

slide25

2.2 Gesture  Color In

Public Downloads

File Folder

Philip Phung, Colin Booth, Mark Vitazko, Chris Claiborne

slide26

2.2 Gesture  Letter gesture

Chris Sinco, RishiTalwar, Justin Wilbourne, Ken Wong

slide27

2.2 Gesture 

OK

OK

Alexei Bespalov, Kevin Merritt, James Rodgers

slide28

2.3 Corners and Edges u

Constraining mouse movement with edges

slide29

2.3 Corners and Edges v

Now only Listen to X-Movements

OK

Only Listen to Y-Movements

  • Basic Idea: Person can make the computer ignore x or y movements, creating an edge to travel along.
  • The edges (or guidelines, or whatever we call them) could be activated with a keyboard/mouse button? Any other options?
  • Maybe both can be activated to keep the from moving during a click?
  • Could be used for crossing too.
slide30

2.3 Corners and Edges w Box

Click!

Skip

Select All

Select

Corners are easy to hit.

Make a context menu out of a square, where corners are options.

slide31

2.3 Corners and Edges x

Cancel

Open

C.M

OK

OK

slide32

2.3 Corners and Edges y Diamond

Crossing one object

Crossing more than one object

Open

Open

Cancel

Cancel

Context Menu (C.M.)

Previous

Open

Open

Open all

Cancel

(Cancel)

Cancel

Context Menu (C.M.)

Previous

slide33

2.3 Corners and Edges z Hover Widget + Diamond

Crossing one object

Crossing more than one object

Open current

X

Open

multiple

Context Menu

X

Open current

Open

Open multiple

Context Menu

C.M

Open

C.M

  • Hitting the corner triggers the queued up targets (aggregation)
  • Select or delete the targets that are in the queue
slide36

2.3 Corners and Edges 

The mouse can travel through either of the entrances/exits to begin activating the button, but the cursor must travel all the way through to the other side in order to fully trigger the button’s action.

OK

OK

OK

Once the cursor enters the button, barriers at the top and bottom of the button prevent the passage out of the button. These barriers exist only once the mouse moves in a vertical direction.

Chris Sinco, RishiTalwar, Justin Wilbourne, Ken Wong

slide37

2.3 Corners and Edges Bounding Buttons

Certain elements have un-mousable “screen edges” affixed to them to avoid pointer overshoot.

Ballistic movement can now hit and stick to targets.

Nathan – Peter - Kaitlyn

slide38

2.4 Moving target u Coming Toward

Closest target is triggered, and then the target is coming toward the cursor

slide39

2.4 Moving target v Stepping Backward

Closest target is triggered, and then the target is stepping backward from the cursor

slide41

2.5 Features of Crossing Event u Velocity

Not selected

Selected

Too slow

Needs to cross above certain speed in order to select the target

slide42

2.5 Features of Crossing Event v Acceleration

Not selected

Selected

a= 0

Stop and then accelerate the crossing speed (A>0)

slide43

2.5 Features of Crossing Event Angle

Selected

Not selected

Orthogonal crossing: selected

3 other crossing ideas
3. Other Crossing Ideas

3.1 Kinematic Template

3.2 Accessible Bubble Cursor

3.3 Switch

3.4 The Clock

3.5 Guideline

3.6 Trapezoid

3.7 Extended Crossing Line

3.8 Plough / Force Field Cursor

3.9 Edge.Point

3.10 Area Crosser

3.11 Stabbing

3.12 The Casual Fan

3.13 Triple Cross

3.14 Cross and Cross Back with Hover Widget

3.15 Corner Pocket

slide45

3.1 Kinematic Template

Passive template: the cursor goes through the button with the help of the (passive) template

OK

OK

slide46

3.2 Accessible Bubble Cursor

Tab through targets!

OK

OK

OK

OK

Cancel

Cancel

Cancel

Cancel

Menu

Menu

Menu

Menu

Options

Options

Options

Edit

Edit

Edit

Edit

Open

Open

Open

slide47

3.3 Switch

Gravity effect + visual feedback

activated

OK

Switching on

OK

OK

slide48

3.4 The Clock

In this concept, a lever appears inside a circular overlay on the target when the cursor gets close to a goal. To trigger the selection of a target, the user “pushes” the lever (like a clock hand) in a circle until a full rotation is made.

The cursor “sticks” to lever, facilitating rotation like the hand on a clock. Once the rotation movement has begun, the user can escape the “stickiness” by sliding the curser off the outer edge of the lever towards the outside of the circle.

Clarke Freeman, Alex Jansen, Kristofer Martin, Josh Rakita

slide49

3.5 Guideline

Selected

If the cursor follows the guideline for a certain amount of time and then cross, the target is selected

Stop for a while -> guideline appears

Not Selected

Selected

slide51

3.7 Extended Crossing Line u

Voronoi tessellation

Extended Crossing Goal

slide52

3.7 Extended Crossing Line v

Voronoi tessellation

Clustering targets around the cursor

Extended Crossing Goal

slide53

3.8 Plough / Force Field Cursor

Cross with acceleration

Inspired by specifically considering the difficult circumstance of a densely arranged set of targets, the force field cursor effectively pushes targets around a circle, or force field, which remains centered on the cursor during tracking movement. Multiple targets in contact with the force field are distributed around the entire circumference. Selection is made by accelerating towards one of the acquired potential targets, achieving an “escape velocity” that allows the cursor leave the center of the field and cross over the desired target.

Clarke Freeman, Alex Jansen, Kristofer Martin, Josh Rakita

slide54

3.9 Edge.Point

As you move your mouse around the screen all Icons in the range shown by the area cursor will visually “tunnel” to your cursor. To toggle between freezing and releasing the area cursor press space bar. Freezing the cursor will also freeze all tunnels that are displayed. While tunnels are frozen they will “catch” your mouse cursor and bound it within the tunnel. This allows for easy and quick navigation to all available targets. As a reminder the tunnels and their bounding properties can be escaped from at any time by hitting space bar.

Nathan – Peter - Kaitlyn

slide55

3.10 Area Crosser

An area cursor that traces a path from the mouse cursor to each target. Instead of traveling down the entire path, a goal is presented at the very beginning to cross and thus activate the button.

Pros: Pure crossing goal, reduces cursor travel distance.

Cons: Hard to implement actions other than "cross."

CLICK!

Nathan – Peter - Kaitlyn

slide56

3.11 Stabbing

A user moves to a group of items; as the cursor approaches them, the items move around the cursor in a fan motion allowing for the user to select one by moving their mouse backwards over the target. The user is then presented with a menu of possible selection, which they can thereby make their selection by passing back over the icon.

Select Delete

Philip Phung, Colin Booth, Mark Vitazko, Chris Claiborne

slide57

3.12 The Casual Fan

45° arch to commit to selection

Cancel

90° arch for escape selection

Activate the target

45° arch to commit to selection

Activate the target

Chris Sinco, RishiTalwar, Justin Wilbourne, Ken Wong

slide58

3.13 Triple Cross

The technique works by having the user cross over a goal three times, before he crosses over any other goals three times within additional crosses of the original goal. This technique is similar to the cross and cross-back technique, however it adds both safety and flexibility to the technique by adding a third cross of the goal.

Alexei Bespalov, Kevin Verritt, James Rodgers

slide59

3.14 Cross & Cross-back with Hover Widget

Public Downloads

File Folder

Copy

Send

Properties

Open

Rename

Delete

Cut

The technique works by having the user cross over a goal three times, before he crosses over any other goals three times within additional crosses of the original goal. This technique is similar to the cross and cross-back technique, however it adds both safety and flexibility to the technique by adding a third cross of the goal.

Alexei Bespalov, Kevin Verritt, James Rodgers

slide60

3.15 Corner Pocket

Greg Bickford, Don Bushell, Gavin Elster, Andy Boer

4 designing actions and context menu
4. Designing Actions and Context Menu

4.1 Accessing context menu with Hover Widget (list)

4.2 Accessing context menu with Hover Widget (circular)

4.3 Accessing context menu with Hover Widget + Diamond (list)

4.4 Accessing context menu with Hover Widget + Diamond (circular)

4.5 Accessing context menu with Secondary goal crossing

slide62

4.1 Accessing Context Menu with Hover Widget (list)

  • Right turn: Access context menu(=right click)
  • List context menu can handle sub-context menu well

Move

Copy

Delete

Open with…

Cut

Select

Group

  • Properties

Confirm

  • OpenOffice.org

Microsoft Powerpoint

Keynote

  • ‘Select’ corresponds to the single left click in Windows

Move

Copy

Delete

Open with…

Cut

Select

Group

  • Properties

Move

Copy

Delete

Open with…

Cut

Select

Group

  • Properties
  • Absolute 90-degree turn
  • Relative turn
slide63

4.2 Accessing Context Menu with Hover Widget (circular)

  • Right turn: Access context menu

Cancel

Move

Select

Cut

Group

Copy

Properties

Open with…

Cancel

Move

Move

Move

Copy

Copy

Copy

Cancel

Cancel

Cancel

Select

Select

Select

Open with…

Open with…

Open with…

slide64

4.3 Accessing Context Menu with Hover Widget + Diamond (list)

  • Turn right
  • Left turn, and at the right corner of the diamond

‘Select all’ becomes one of the context menu items

Down

Up

Move

Copy

Select all

Open with…

Cut

Delete

Group

  • Properties
  • Back

Open

Cut

Copy

Move

Delete

Select

Rename

Properties

Open

slide65

4.4 Accessing Context Menu with Hover Widget + Diamond (circular)

Open

Previous

C.M

Cancel

Delete

Open

Group

Previous

C.M

C.M

Open with…

Select

Copy

Cancel

slide66

4.5 Accessing Context Menu with Secondary Goal Crossing

Open with…

  • Sequence
  • cross -> secondary goal appears -> turn 90 degree
  • Cancel
  • timeout
  • menu item
  • cross back
  • loophole

Copy

Open

Cancel

Move

Cancel

Select

Copy

Copy

Move

Move

Open

Open with…

Open

Open with…

Select

Select

merge left-click, right-click, single-click and double-click