SlideShare a Scribd company logo
Tap is the New Click
Dan Saffer, Principal, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
We're using bodies
evolved for hunting,
gathering, and gratuitous
violence for information-
age tasks like word
processing and
spreadsheet tweaking.
—David Liddle
Tap is the New Click // Dan Saffer, Kicker Studio
We’re in the midst
of an interaction
design revolution.



Tap is the New Click // Dan Saffer, Kicker Studio
How do we design for
interactive gestures?



Tap is the New Click // Dan Saffer, Kicker Studio
What we’re going
to talk about
   Brief history and sensors
   Touch targets
   Documenting
   Prototyping
   Communicating
   Choosing appropriate gestures


Tap is the New Click // Dan Saffer, Kicker Studio
Gesture: any physical
movement that can be
sensed and responded to
by a digital system
without the aid of a
traditional input device
such as a mouse or stylus.

Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Two types of
interactive gestures
   Touchscreen
      aka TUI
      Single and multi-touch
   Free-form
      Wide variety of forms



Tap is the New Click // Dan Saffer, Kicker Studio
Two types of
interactive gestures
   Touchscreen
      aka TUI
      Single and multi-touch
   Free-form
      Wide variety of forms



Tap is the New Click // Dan Saffer, Kicker Studio
The secret sauce: sensors




Tap is the New Click // Dan Saffer, Kicker Studio
Common sensors
   Pressure
   Light
   Proximity
   Acoustic
   Tilt
   Motion
   Orientation

Tap is the New Click // Dan Saffer, Kicker Studio
Common sensors
   Pressure
   Light
   Proximity
   Acoustic
   Tilt
   Motion
   Orientation

Tap is the New Click // Dan Saffer, Kicker Studio
Kinesiology & physiology




Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
16-20mm




Tap is the New Click // Dan Saffer, Kicker Studio
8-10mm



                                                    16-20mm




Tap is the New Click // Dan Saffer, Kicker Studio
8-10mm
                                        10-14mm

                                                    16-20mm




Tap is the New Click // Dan Saffer, Kicker Studio
Fingers
   Fingernails: Blessing                        Accessibility issues
   and curse
                                                Wrist support
   Fake fingernails: evil
                                                Gloves
   Finger oil
                                                Inaccurate (when
   Fingerprints                                 compared to a cursor)
   (Left) Handedness                            Attached to a hand aka
                                                Screen Coverage


Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Avoid putting essential
features or information
like a label below an
interface element that
can be touched, as it may
become hidden by the
user’s own hand.

Tap is the New Click // Dan Saffer, Kicker Studio
Touch events and targets




Tap is the New Click // Dan Saffer, Kicker Studio
Types of touchscreens
   Resistive: pressing two layers together creates the
   touch event
   Surface wave: finger disrupts ultrasonic waves
   Capacitive: finger conducts electricity
   Infrared: finger breaks grid of infrared beams




Tap is the New Click // Dan Saffer, Kicker Studio
Touch target size
   Remember Fitts’ Law! (Time it takes to get to a target
   = distance to target / size of target)
   As close to the user as possible to avoid users’
   covering the screen with their hands
   Create reasonably-sized targets: no smaller than
   1cm in diameter/square (the size of finger pads)




Tap is the New Click // Dan Saffer, Kicker Studio
Touch target size
comparisons



 ~25mm              ~18mm              ~13mm        ~8mm   5mm




Tap is the New Click // Dan Saffer, Kicker Studio
Two touch target tricks
   Iceberg tips
   Adaptive targets




Tap is the New Click // Dan Saffer, Kicker Studio
Two touch target tricks
   Iceberg tips
   Adaptive targets




Tap is the New Click // Dan Saffer, Kicker Studio
Traditional UI elements
to watch out for
   Cursors
   MouseOvers and hovers
   Double-click
   Right-click
   Selected default buttons
   Undo


Tap is the New Click // Dan Saffer, Kicker Studio
Documenting gestures




Tap is the New Click // Dan Saffer, Kicker Studio
Dance notation




Tap is the New Click // Dan Saffer, Kicker Studio
Annotated wireframes
still work




Tap is the New Click // Dan Saffer, Kicker Studio
Architectural
wireframestouchscreenoverview
                 “Master UI”                                                                      “Individual UI”
                                                  Run by presenter                                                        Used by show attendees




                                                                               Live Touchscreen
                                                                                Projection Area




                  [floor]                                                                         [floor]
                            [ showing typical arm’s reach for 6’ tall user ]                                [ showing typical arm’s reach for 6’ tall user ]




Tap is the New Click // Dan Saffer, Kicker Studio
Keyframes




Tap is the New Click // Dan Saffer, Kicker Studio
Gestural modules




Tap is the New Click // Dan Saffer, Kicker Studio
Gestural modules




Tap is the New Click // Dan Saffer, Kicker Studio
Storyboards




Tap is the New Click // Dan Saffer, Kicker Studio
Swim lanes framework




Tap is the New Click // Dan Saffer, Kicker Studio
Animation




Tap is the New Click // Dan Saffer, Kicker Studio
Movies




Tap is the New Click // Dan Saffer, Kicker Studio
Movies




Tap is the New Click // Dan Saffer, Kicker Studio
Prototyping gestures




Tap is the New Click // Dan Saffer, Kicker Studio
Low-fidelity:
Paper prototype




Tap is the New Click // Dan Saffer, Kicker Studio
Low-fidelity: The “man
behind the curtain”




Tap is the New Click // Dan Saffer, Kicker Studio
Low-fidelity:
Environments




Tap is the New Click // Dan Saffer, Kicker Studio
High-fidelity: Exact




Tap is the New Click // Dan Saffer, Kicker Studio
High-fidelity:
Off-the-Shelf




Tap is the New Click // Dan Saffer, Kicker Studio
High-fidelity:
Do It Yourself




Tap is the New Click // Dan Saffer, Kicker Studio
Turning gestures
into code
   Variables: what are you measuring?
   Data: get the data in from the sensor
   Computation: determine difference between data
   Patterns: what do the sums mean?
   Action: if a pattern is matched, do something




Tap is the New Click // Dan Saffer, Kicker Studio
Communicating
interactive gestures



Tap is the New Click // Dan Saffer, Kicker Studio
Three zones
of engagement




Tap is the New Click // Dan Saffer, Kicker Studio
Attraction




Tap is the New Click // Dan Saffer, Kicker Studio
Observation




Tap is the New Click // Dan Saffer, Kicker Studio
Interaction




Tap is the New Click // Dan Saffer, Kicker Studio
Attraction affordance




Designing Gestural Interfaces Workshop // Dan Saffer, Kicker Studio
Written instruction




Tap is the New Click // Dan Saffer, Kicker Studio
Illustration




Tap is the New Click // Dan Saffer, Kicker Studio
Demonstration




Tap is the New Click // Dan Saffer, Kicker Studio
Symbolic




Tap is the New Click // Dan Saffer, Kicker Studio
Determining the
appropriate gesture



Tap is the New Click // Dan Saffer, Kicker Studio
Three part equation
1. The available sensors and input devices
2. The task that needs to be performed
3. The physiology of the human body


   (This can be pretty straightforward)




Tap is the New Click // Dan Saffer, Kicker Studio
The ergonomics
of human gestures
  Avoid hyperextension or extreme stretches
  Avoid repetition
  Relax muscles
  Utilize relaxed, neutral positions
  Avoid staying in a static position
  Avoid internal or external force on joints


Tap is the New Click // Dan Saffer, Kicker Studio
The more complicated the
gesture, the fewer people
who will be able to
perform it.


Tap is the New Click // Dan Saffer, Kicker Studio
The complexity of the
gesture should match
the complexity of the
task at hand.


Tap is the New Click // Dan Saffer, Kicker Studio
The best designs are
those that “dissolve
into behavior.”
(Naoto Fukasawa)


Tap is the New Click // Dan Saffer, Kicker Studio
The best, most natural
designs, then, are those
that match the behavior
of the system to the
gesture humans might
already do to enable
that behavior.
Tap is the New Click // Dan Saffer, Kicker Studio
Thanks.
http://www.designinggesturalinterfaces.com

http://www.kickerstudio.com
dan@kickerstudio.com
Thanks.
http://www.designinggesturalinterfaces.com

http://www.kickerstudio.com
dan@kickerstudio.com

More Related Content

More from CHI*Atlanta

Wine is Not Just Grape Juice: How Content is Essential to UX
Wine is Not Just Grape Juice: How Content is Essential to UXWine is Not Just Grape Juice: How Content is Essential to UX
Wine is Not Just Grape Juice: How Content is Essential to UX
CHI*Atlanta
 
Beyond the iPhone: A UX Approach for Scalable Design
Beyond the iPhone: A UX Approach for Scalable DesignBeyond the iPhone: A UX Approach for Scalable Design
Beyond the iPhone: A UX Approach for Scalable Design
CHI*Atlanta
 
Ethnographic Research for Design Innovation
Ethnographic Research for Design InnovationEthnographic Research for Design Innovation
Ethnographic Research for Design Innovation
CHI*Atlanta
 
Workhorse Strategy For Workhorse Content by Rahel Bailie
Workhorse Strategy For Workhorse Content by Rahel BailieWorkhorse Strategy For Workhorse Content by Rahel Bailie
Workhorse Strategy For Workhorse Content by Rahel Bailie
CHI*Atlanta
 
Book Chat: Content Strategy for the Web
Book Chat: Content Strategy for the WebBook Chat: Content Strategy for the Web
Book Chat: Content Strategy for the Web
CHI*Atlanta
 
Atlanta Showcase: CDC's Social & Interactive Media Tools
Atlanta Showcase: CDC's Social & Interactive Media ToolsAtlanta Showcase: CDC's Social & Interactive Media Tools
Atlanta Showcase: CDC's Social & Interactive Media Tools
CHI*Atlanta
 
EHRs, PHRs, EMRs: Making Sense of the Alphabet Soup
EHRs, PHRs, EMRs: Making Sense of the Alphabet SoupEHRs, PHRs, EMRs: Making Sense of the Alphabet Soup
EHRs, PHRs, EMRs: Making Sense of the Alphabet Soup
CHI*Atlanta
 
What Is Content Strategy? (ACS July Meetup)
What Is Content Strategy? (ACS July Meetup)What Is Content Strategy? (ACS July Meetup)
What Is Content Strategy? (ACS July Meetup)
CHI*Atlanta
 

More from CHI*Atlanta (8)

Wine is Not Just Grape Juice: How Content is Essential to UX
Wine is Not Just Grape Juice: How Content is Essential to UXWine is Not Just Grape Juice: How Content is Essential to UX
Wine is Not Just Grape Juice: How Content is Essential to UX
 
Beyond the iPhone: A UX Approach for Scalable Design
Beyond the iPhone: A UX Approach for Scalable DesignBeyond the iPhone: A UX Approach for Scalable Design
Beyond the iPhone: A UX Approach for Scalable Design
 
Ethnographic Research for Design Innovation
Ethnographic Research for Design InnovationEthnographic Research for Design Innovation
Ethnographic Research for Design Innovation
 
Workhorse Strategy For Workhorse Content by Rahel Bailie
Workhorse Strategy For Workhorse Content by Rahel BailieWorkhorse Strategy For Workhorse Content by Rahel Bailie
Workhorse Strategy For Workhorse Content by Rahel Bailie
 
Book Chat: Content Strategy for the Web
Book Chat: Content Strategy for the WebBook Chat: Content Strategy for the Web
Book Chat: Content Strategy for the Web
 
Atlanta Showcase: CDC's Social & Interactive Media Tools
Atlanta Showcase: CDC's Social & Interactive Media ToolsAtlanta Showcase: CDC's Social & Interactive Media Tools
Atlanta Showcase: CDC's Social & Interactive Media Tools
 
EHRs, PHRs, EMRs: Making Sense of the Alphabet Soup
EHRs, PHRs, EMRs: Making Sense of the Alphabet SoupEHRs, PHRs, EMRs: Making Sense of the Alphabet Soup
EHRs, PHRs, EMRs: Making Sense of the Alphabet Soup
 
What Is Content Strategy? (ACS July Meetup)
What Is Content Strategy? (ACS July Meetup)What Is Content Strategy? (ACS July Meetup)
What Is Content Strategy? (ACS July Meetup)
 

Recently uploaded

JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Data Hops
 

Recently uploaded (20)

JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
 

Tap is the New Click