Taxonomy of Touch

Taxonomy of Touch @natekoechley #yuiconf 20101109

Touch input intent implement invent

More on touch: • Finger Tips: Lessons Learned From Building a Touch-Based Experience Mark Kawakami, Today @ 3pm, C4 • A phone, a tablet and a laptop walk into a bar...YUI's approach to mobile web development Satyen Desai, Tomorrow @ 4:30pm, C5

Touch is input.

Categories of Input • Modes (mechanical, audio, visual) • Discrete vs Continuous • Various Degrees of Freedom “Pointing” devices specifically: • Direct vs. Indirect • Absolute vs. Relative

1875—Christopher Sholes

1963—Bill English & Douglas Engelbart

1971—Dr. Sam Hurst

1995—Mouse Systems’ ProAgio

WheelEvents

WheelEvents = DOM 3

201,700

Touch is direct and absolute, discrete and continuous, and with a high degree of freedom. A promising combination!!

Click, Two-button click, 360º scroll, Screen zoom, Two-finger swipe

Scroll

Rotate

The Big Mobile Players • iOS • webOS • Blackberry • Android • WP7

Mobile Gesture Support Drag (2- Tap DblTap Fling Drag Spread Pinch Press Rotate Fngr) Pinch Pinch Touch & 2-Finger iOS Tap DblTap Flick Drag X Open Close Hold Scroll Touch & WP7 Tap DblTap Flick Pan Pinch Pinch X X Hold Swipe / Touch & webOS Tap DblTap Flick Touch & Spread Pinch X Rotate Drag Hold Touch & Android Tap DblTap Flick Drag Pinch Pinch X X Hold thanks to @lukew

2010/10/28 14:30:32

@w3cwebevents 8 days 4 tweets 67 followers

Web Events WG Charter • Browsers and devices making increasing use of touch-sensitive inputs... • ...this enables web developers to build more intuitive and sophisticated applications that fit naturally with the device being used.

Fit the user. “Implementation Model to Mental Model.” Now, fit the device!

Web Events WG Charter • Deliverables include a spec and APIs for: “low-level physical events” “high-level representational events”

Touch is physical intent.

“I want to see more” v1 • When the user wants to see more of a view at once, the user moves two fingers toward each other, in a pinching gesture, with the conventional meaning of zoom-out.

“I want to see more” v2 • User moves two touches toward each other in a pinching gesture which zooms out on the object so the user can see more of it.

“I want to see more” v3 User moves two touches toward each other... ...in a pinching gesture... ...which zooms the object out... ...so the user can see more of it.

Pinching In • Physical: “When the user moves two touches toward each other” • Gestural: “in a pinching gesture” • Representational: “the conventional meaning is zoom-out” • Intention: User wants to see more of an object being manipulated. • ...

Conceptual Layers of Touch • Physical — lowest level; physical actions • Gestural — middle layer; describes specific mappings. Often device-specific • Representational — highest level of abstraction; means to the end (zoom) • Intentional — above the APIs. What’s the user goal? (ex: see more) (Also: physical metadata may be important, such as which pen color?)

iOS GestureRecognizers Libs • StatePossible • StateBegan • StateChanged • StateEnded • StateCancelled • StateFailed • StateRecognized = StateEnded

Implement. (What’s in YUI Today)

That’s YUI3: A solid foundation for the future!

Events Evolved. http://developer.yahoo.com/yui/theater/ video.php?v=smith-yuiconf2009-events (Luke FTW)

Synthetic Events • YUI3/event/event-synthetic.js • Define new events beyond DOM • Like Custom Events, label interesting moments...but on the page rather than in your application • Then subscribe like you would any DOM event Y.Event.define(name, config)

• Body text • event/event-touch.js • event-gestures/event-flick.js • event-gestures/event-move.js • event-gestures/event-gestures.js

event-touch • Adds touch event facade normalization properties (touches, changedTouches, targetTouches etc.) to the DOM event facade

gesturemovestart • On touch devices, fires in response to a single finger “touchstart” • On mouse devices, fires in response to a “mousedown” • minDistance • minTime • button • preventDefault

gesturemove • On touch devices, fires in response to a single finger “touchmove” • On mouse devices, fires in response to a “mousemove” • Only fires after gesturemovestart by default • standAlone • root • preventDefault

gesturemoveend • On touch devices, fires in response to a single finger “touchend” • On mouse devices, fires in response to a “mouseup” • Again, by default only fires as part of a sequence • standAlone • root • preventDefault

flick • Fires a flick event in response to user’s flick gesture • minDistance (px) • minVelocity (px/ms) • preventDefault • axis

Example Swipe to Delete

YUI().use("node-base", "node-event-delegate", "event-move", function(Y) { Y.Node.one("#swipe").delegate("gesturemovestart", function(e) { // store the data on the node instead of passing it along item.setData("swipeStart", e.pageX); // only need one, and auto-detach item.once("gesturemoveend", function(e) { // compare coords and deterine is left swipe var swipeStart = item.getData("swipeStart"), swipeEnd = e.pageX, isSwipeLeft = (swipeStart - swipeEnd) > MIN_SWIPE; if (isSwipeLeft) { item.one("." + DELETE).removeClass(HIDDEN); } }, "li", { preventDefault:true }); });

Example Scrollview

#yuiconf2011

Invent.

Opera’s gestures (~2001.04) • Navigation: Previous page, next page, parent directory, fast forward, rewind, homepage, reload page, stop loading. • Page: browse in new tab, duplicate tab, restore/ maximize, minimize, close • Link: open link in new tab, open link in background • Wheel: scroll up and down, zoom in and out, restore default zoom, move back/forth in tab history, cycle through open tabs, panning.

Room to grow • WP7 platform supports multi-touch of up to 10 simultaneous touch points.

Hold = context menu?

Character Gestures ?

More on touch: • Finger Tips: Lessons Learned From Building a Touch-Based Experience Mark Kawakami, Today @ 3pm, C4 • A phone, a tablet and a laptop walk into a bar...YUI's approach to mobile web development Satyen Desai, Tomorrow @ 4:30pm, C5

thanks! nate.koechley.com

Taxonomy of Touch

by Nate Koechley on Nov 23, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 17

Statistics

Taxonomy of Touch — Presentation Transcript

http://lanyrd.com	16
http://www.lucabacchi.it	1