An Event Apart Seattle - Day 3 Notes

Written by Joe Bibby  |  April 2, 2014  |  Permalink

Designing For Touch

Josh Clark
@globalmoxie

There is no one true input for the web

Designing for touch

  • touchscreen layouts
  • gestures
  • discoverability
  • phooey to touch

Favorite Attendee Apps
Four Score bluetooth foot pedal sheet music app
Letterpress
Mailbox

You’re not "just’ a visual designer
You’re an industrial designer

different way to hold determine how we should layout controls
on iOS edit button is out of standard thumb reach
navigation on the bottom (most used)

early apps all followed this model
apps like foursquare changed and moved checkin button to bottom middle
same with instagram, moved photo button

Controls on bottom, content on top

Android had touch buttons on bottom - good
But also added favorite icons right above this - stacked controls in touch gives increased user error

Early guidance suggested apps move their controls to top, still bad because you cover the screen to touch, but better because they aren’t stacked and cause less accidental touches

And the web?

Fixed nav bars get in the way - especially in landscape mode on iPhone

can put menu on the bottom - just use an anchor tag - then use progressive enhancement

“navigation is the miserable last resort of websites”

Phone Guidelines

  • iOS Apps
    controls at screen bottom
  • Android Apps
    controls at screen top
  • Web
    Controls at page bottom

How big?

44 pixels

missed taps greatly decrease at 5mm
7mm is the good enough number for touch targets

Dynamic Viewports

iPhone is 320 (reference) pixels wide

Set the viewport to actually be the device width

Apple standard DPI is 160

that’s how we get to 44 pixels for the optimal minimum touch target
also known as 2.74 ems

rem is a relative em, relative to the font size of the containing html element

44 pixels applies to both web and native apps (apple calls it points)

160 DPI
web 44 pixels
iOS 44 points
Android 44 dp

iOS keyboard keys are 44 x 29

Magic number 44 x 29

If you have 7mm touch targets give 2mm of padding

Interface Concept
Question, Answer, Ask, Receive

Touching information - the content becomes the control

Progressive Disclosure

Extra taps & clicks - NOT EVIL
Activity - Design an Flight booking screen

use add a flight to determine whether one-way, round-trip, or mutli-destinaion

also can use calendar to determine whether one way or round trip

Speed Matters

40% of users jump if it takes more than 3 seconds
33% more
80% of people would use mobile more if it were faster

Form Fields

reduce number of fields - smart parsing
address, phone numbers etc…

Credit card information all in one field
look in notes for link

Select Menus

select menus are very slow

keyboard entry using a data list element

Seek out single-tap interactions

turn things that make sense into buttons

Confirmation Buttons

simplest is undo

Gesture jiujitsu

Hotel Tonight app
Trace the bed to confirm your purchase

Carousels

Options - Entertainment tonight example
single tap interaction to replace carousel
featured top store, a couple sub stores, then an expand button to reveal the rest of the stories

Long Scroll

possibility to use a type of carousel
Off-canvas design pattern

the best touch interface is sometimes no touch at all

Kill
* extra fields
* select menus
* confirmation buttons
* detail views
* carousels
* the long scroll
* touch itself?

Windows 8 login

It’s hard to code gestures in Javascript

touchstart
touchmove
touchend

hammer.js - touch library

The browser hems you in

Browser Ninja

Adobe Proto - wireframing app for iPad

Facebook Paper

Uses a lot of gesture based control
limited use of buttons
first load video trains users in new controls
gestures are less discoverable - and no settled on gestures in apps beyond swipe, but what does swipe mean?

How to rethink selecting a date range or the date data object ?

  • swiping calendar to select beginning to end
  • touch calendar begin, touch calendar end
  • no monthly break, time just continues
  • iPod calendar wheel, accelerates as you spin

What gestures can you count on?

Tap

the touch version of click, but also contains the hover

Swipe

  • swipe to unlock
  • swipe to view hidden content

Double tap

usually means zoom in and zoom out
Chrome for Android disables double tap for zoom when you set device width
Boston Globe uses double tap to save an article
Android double tap and drag - creates zoom control

Pinch to zoom

semantic zoom
being somewhat replaced by double tap

Long press

brings a contextual action menu

Section overview

  • Buttons take cognitive & physical effort
  • Gestures = keyboard shortcuts
  • Use the entire screen as a control (course gesture)
  • Model data as a physical object
  • Standards emerging - tap, swipe, pinch/spread, long tap

Finding What You Can’t See

Most of us no longer look at what we type - but studies show we don’t know where the keys actually are
We rely on environmental cues to help until we obtain mastery

The medium is the message

We may finally be moving away from this

The message is the medium

the content is the control, the information is the interface

We don't read instructions because it seems like a diversion  

Al Gore Book - Our Choice
Intro video trying to explain how to interact with the book
Perhaps a manual is not the best way to teach a user how to use an app

Other on boarding options

tutorial type option - telling you how to do it
faster than a video, but still the same idea

Show. Don’t Tell

Do. Don’t Read.

We are teaching people physical interactions. We are trying to get it into muscle memory.

Demonstration and Practice is how we learn

Mailbox

Interaction with the tutorial instead of just a view
Practicing, committing it to muscle memory

Nature doesn’t have instructions

It’s not that nature doesn’t have a challenging interface. We spend the first few years learning the “interface” to nature.

Bank on users deep understanding of nature and the world around us. Lean on physicality.  

Acts like is more important than looks like. Can still act like a physical device without making it skeuomorphic

Your interface metaphor tells you how to use a thing. If you go skeuomorphic, you have to go “whole hog”.

Don’t do looks like, if you can’t do acts like

Love the One You’re With

Model our apps on the way we work with the world
Look at the way kids use touch screens - they get it - they understand the physicality of these things

Play more video games

Great examples of teaching new interfaces
teaches you in the game, while playing - how can we apply this to apps

Games teach in 3 ways
1. Coaching
2. Leveling up
3. Power ups

Coaching

e.g. Dead Space - overlay that shows a user who to control the avatar - doesn’t come back because you know how to use it

The Walkthrough

App: Noted - uses a walkthrough to teach user how to use the app by actually using the app with overlays.
Can’t do anything on your own, you have to go through the steps.

App: Paper - shows you as you get to each new action and includes text

Bad examples of this is Clippy from office
said the same thing over and over, and was usually wrong
It was a timing and content problem. Didn’t learn what we already knew

USA Today original app - used an animation to make the scrolling news selector to imply that there is more options to select news category
Stopped showing the animation when you demonstrated you’ve learned it by sculling the menu

Leveling Up

App: Infinity Blade - Taught interface elements during the first interaction of that type. Block - paused game right before the first time you need to block and shows you how to block.
Freezing the action and making the user do something

OSX Lion Scrolling - popup required demonstration of new scrolling and then once you did it you could click ok to move on

Power Ups

Power ups are achievements and improve the character
It’s about getting better at something - a new skill
A reward and an achievement

App: Twitter iOS 6 release - Twitter moved Direct Messages into the Me tab. But they also added a hidden gesture that allowed you to swipe on the Me tab. But it wasn’t discoverable.
Could have added a hint after user dove into direct messages after X times

Build in smart messaging / notification system to reward smart users

Designing for the Future

phooey to Touch

Sensors Give Us Superpowers

We still approach mobile devices as if they are companion devices to the “real” computing experience of desktops/laptops

Augmented Reality - demos well, looks really cool - but doesn’t always work out very well

Does work well in games and toys

App: Skinvaders - aliens land on your face and you have to kill them

IKEA Scan a page from the catalog to see more
Word Lens - live translation of text

Minimize Input

Maximize Output

App: Table Drum - Drum machine app - can be taught sounds and then use that to interact with the screen elements

Designing for Sensors and Not just Screens

Custom Sensors

App: Asthmapolis (renamed to Propeller Health) - starts with a sensor you put in your asthma inhaler - get regular updates based on how your asthma is being controlled. Being distributed into clinics. Phone adds gps information and relays time/location to server

Proteus - pill that doubles as a raido so it can track whether you take it
sensor itself about eh size of a grain of sand. same stuff you find in a vitamin. copper and magnesium hit your gastric acid, turning this thing into a battery.
Sensors everywhere, even in your body.

**Botanicus Interactus ** - Plant UI

Even in Cows

Digital Becomes Physical
Physical Becomes Digital

Mirroring (screen sharing)

Airplay - share your screen with Apple TV

Samsung Smart TV

I don’t want more operating systems in my life

What does it mean to make something a better microwave? Does it need to be “smart”?
What if it just actually kept the correct time?

Remote Control

Part of maintaining our sanity is limit the number of platforms

App: Metalstorm: Wingman

Chromecast experimenting with remote control

My example - CarPlay

Migrating Interfaces

Bluetooth car interface that shifts to your phone when you leave your car

App: Scrabble - multi-device game interface

A Day Made of Glass - Corning - tablet to closet wall
This is a tall order of course. But wow

Gesture Prototype - ideas of possible gestures

Sifteo - toys that recognize when they are near each other. Games, learning, etc..

App: Knock - knock to unlock

Passive Interfaces

Nest Thermostat - proximity sensors, humidity sensors, temp, wifi, etc..

Nest Protect - smart smoke detector - wave to disable

FitBit Flex - talking on its own the smart devices around it

Dumb Devices

VISA Card with an LED screen and a keyboard

Smartwatches

How will our websites look on these devices?

Your API is the Application

We need to get better as designers to push our skills down the stack
The API gives you the ingredients for the interface

A Cloud of Social Devices

Presentation deprecates - we are building a service
These products that we build don’t last. The thing that lasts is the underlying content and service
Whole systems that can support lots of devices

Parting Thoughts

  • Push Sensors
  • Think Social
  • Your Ecosystem
  • We’re All Cloud Developers
  • Your API is the application
  • New input methods
  • The future is here