the hybrids are coming: the era of touchscreen hybrids
DESCRIPTION
Interaction Design For Keyboard / Touchscreen Hybrids: How Your Designs Need To Change John Whalen, UX Lead & Founder Brilliant Experience User Focus 2012 - UXPA-DC Learn how interaction design is changing in the era of "tablet transformers" and "touchscreen laptops". When do users click or touch? How do interaction designs need to change to provide a great user experience? Using some of the biggest sites on the web built here in Washington (e.g., Marriott, Living Social, USA Today) we will reveal the strengths and weaknesses of state-of-the-art designs. In a live "UX cage match" volunteers from the audience will race to find the answer to questions using different sorts of devices (small tablet, tablet with keyboard, tablet transformer, laptop), demonstrating the unique benefits and constraints of each device type. After that we will show clips from our research revealing how current designs fall short for users of touch/type hybrids. Based on the data we collected we will attempt to answer the key UX question: How are interaction design patterns changing and how will my site need to change to accommodate the next wave of devices?TRANSCRIPT
1
The hybrids are coming!
@johnwhalen #userfocus
Brilliant ExperienceUser Research Strategy & Ideation User Experience
@johnwhalen #userfocusMobile Apps
Brilliant Experience
@johnwhalen #userfocus
1.The hybrids are coming!
2. How behavior is changing.
3. How your team should adapt.
Source: http://ow.ly/ektFj
31%of US mobile phoneowners also have a
tablet computer
More web connected devices than people
by the end of 2012
23%of adults get
news on at leasttwo devices
@johnwhalen #userfocus
Sources: http://ow.ly/ekMrR, http://ow.ly/ekMg3
Touch devices are proliferating
Hmm, what’s this?
@johnwhalen #userfocus
Touch Type
@johnwhalen #userfocus
Source: http://ow.ly/ekNxO
Should we build a hybrid?
@johnwhalen #userfocus
iPad Hybrid:Touch + Type
@johnwhalen #userfocus
ASUS Android Hybrid:Touch + Type
@johnwhalen #userfocus
Microsoft Surface Hybrid@johnwhalen #userfocus
12Ultrabook@johnwhalen #userfocus
40+ Ultrabooks by end in 2012!@johnwhalen #userfocus
1.The hybrids are coming!
2. How behavior is changing.
3. How your team should adapt.
Our study:
@johnwhalen #userfocus
@johnwhalen #userfocus
@johnwhalen #userfocus
@johnwhalen #userfocus
@johnwhalen #userfocus
@johnwhalen #userfocus
@johnwhalen #userfocus
@johnwhalen #userfocus
@johnwhalen #userfocus
@johnwhalen #userfocus
What we found:
@johnwhalen #userfocus
People use touch more than expected.
Source: http://intel.com @johnwhalen #userfocus
Interaction 1. Form field touched to select
@johnwhalen #userfocus
Interaction 2: Finger scrolling (right hand)
@johnwhalen #userfocus
Interaction 3: Finger select
@johnwhalen #userfocus
Interaction 4: “Thumbs Up”
@johnwhalen #userfocus
“There is something about the interaction of actually touching the screen and pressing a button that feels more engaging.” (Sonia, 26-United States)
@johnwhalen #userfocus
1.The hybrids are coming!
2. How behavior is changing.
3. How your team should adapt.
1. Place actions in easy to click locations
Source: lukew.com@johnwhalen #userfocus
35@johnwhalen #userfocus
36@johnwhalen #userfocus
2. Ensure targets are sufficiently large
37Source: lukew.com
@johnwhalen #userfocus
Touch target sizes
38
23 x 23px (6mm)
Source: lukew.com@johnwhalen #userfocus
@johnwhalen #userfocus
Reconsider your responsive designs
@johnwhalen #userfocus
41@johnwhalen #userfocus
3. Limit the number of clickable items down the right where people scroll
@johnwhalen #userfocus
3. Limit the number of clickable items down the right where people scroll
@johnwhalen #userfocus
4. Reconsider your responsive designs - account for touch on large screens
@johnwhalen #userfocus
In Summary
@johnwhalen #userfocus
1. The hybrids are coming!
2. How behavior is changing.
3. How your team should adapt.
46
1. The hybrids are coming!@johnwhalen #userfocus
47@johnwhalen #userfocus
Finger form selecting
Finger scrolling
Touchselecting “Mr Thumbs”
2. Behavior is changing
48@johnwhalen #userfocus
1. Put actions in touch friendly locations
3. How your team should adapt:
49@johnwhalen #userfocus
2. Make sure your targets are large enough
How your team should adapt:
50@johnwhalen #userfocus
How your team should adapt:
3. Avoid links on right side of forms where people scroll
51@johnwhalen #userfocus
How your team should adapt:
4. Reconsider your responsive designs - account for touch on large screens
Brilliant Experience
@johnwhalen #userfocus
John Whalen
@johnwhalen
User Research Strategy User Experience
BrilliantExperience.com
Mobile