Touchscreen Design WorkshopKirsten Miller ~ October 5, 2012 ~ Razorfish Austin

1

Credit where credit is due...

Dan SafferDirector, Interaction Design

Smart Design

Follow @odannyboy on Twitter to learn about his upcoming book, Microinteractions, to be published next spring by O’Reilly.

2

Keeping it basicWhat we'll be covering:

• Some guiding principles for creating touchscreen experiences, with a focus on smartphones and tablets (capacitive technology)

• Fingers and hands

• Activity zones

• Common app structures

• Multitouch and gestures

• Prototyping tools

What we won't be covering:

• Devices using touch technologies like infrared beams, cameras, ultrasonic waves, resistance

• Platform differences

• Resolution differences and responsive design

• Strategy

• Coding, development

3

Workshop activities

• Fun warm-up

• Smartphone sketch activity

• Tablet activity focusing on multitouch/gesture

http://genelu.com/2011/04/nike-plus-dogs/

4

Warm-up exercise!Sketch a touchscreen version of a simple household thermostat. (10 minutes)

Requirements:

• Accessed via whatever touchscreen interface(s) you choose

• See current temperature

• Set desired temperature

• See whether system is heating or cooling

• Turn system off or on

Not required for this exercise:Programming dates/times, controlling multiple rooms

5

Fingers and handstouch targets and coverage

6

Let’s talk about fingers

They’re far less accurate than a screen cursor.

1 mm 8-10 mm diameter(fingertip)

7

Touch target sizes

Saffer’s minimum size guidelines for touch targets:

8 mm

1 cm

2 mm

Option3Selected Option2

8

Touch target sizes

8 mm

1 cm

2 mm

Option3Selected Option2

Physical keyboard:8 mm

15 mm 4 mm

15 mm

Saffer’s minimum size guidelines for touch targets:

9

Touch target sizes

5 mm

6.5 mm 1 mmiOS keyboard, landscape:

Discuss.

8 mm

1 cm

2 mm

Option3Selected Option2Saffer’s minimum size guidelines for touch targets:

10

Touch target size tricks*

OK

* Require coordination with development!

Iceberg tips:(responsive area larger than visual)

11

Touch target size tricks*

Adaptive targets:(anticipates your next move)

Iceberg tips:(responsive area larger than visual)

OK

* Require coordination with development!

12

Touch target size tricksForthcoming from Steven Hoober, 4ourth Mobile Design

13

Let’s talk about handsThose pesky fingers are always attached to something that often blocks the view of much of the interface.

“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.”

(quote from Dan)

14

Let’s talk about handsThose pesky fingers are always attached to something that often blocks the view of much of the interface.

“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.”

(quote from Dan)

16-20 mmwide

14

Let’s talk about handsThose pesky fingers are always attached to something that often blocks the view of much of the interface.

“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.”

(quote from Dan)

16-20 mmwide

much bigger

14

Don’t talk to the hand!

TitleBack Save

My Selection

Hey! This action is undoable. Are you sure you want to proceed?

OK Cancel

TitleBack Save

Hey! This action is undoable. Are you sure you want to proceed?

OK Cancel

My Selection

TitleBack Save

15

Activity zoneseasy vs. reach

16

Easy vs. reach

“Some of the best [touchscreen apps] have placed controls in ways that best match the ergonomics of our hands while holding [the devices]… Put the high-use controls in the Easy zones, and controls that are less used (and certainly those you don’t want accidentally pressed) in the Reach zones.”

(Dan in a kickerstudio.com blog post)

17

Easy vs. reach

“Some of the best [touchscreen apps] have placed controls in ways that best match the ergonomics of our hands while holding [the devices]… Put the high-use controls in the Easy zones, and controls that are less used (and certainly those you don’t want accidentally pressed) in the Reach zones.”

(Dan in a kickerstudio.com blog post)

17

Easy vs. reach

“Some of the best [touchscreen apps] have placed controls in ways that best match the ergonomics of our hands while holding [the devices]… Put the high-use controls in the Easy zones, and controls that are less used (and certainly those you don’t want accidentally pressed) in the Reach zones.”

(Dan in a kickerstudio.com blog post)

17

Easy vs. reach

18

Easy vs. reach

What about lefties?

18

Easy vs. reach

What about these people?

19

A brief survey

Thumbs Fingers

phone:

20

A brief survey

Thumbs Fingers

tablet:

21

Common app structuresflat, star, decentralized

22

Flat

Detail Detail Detail Detail Detail

23

Flat

24

Star

Detail

Detail

Home

Detail

Detail

Detail

25

Star

Home DetailDetail

26

Decentralized

Overview Overview Overview Overview Detail

Detail

Detail

Detail Detail

DetailDetailpersistent menu:

27

Decentralized

Overview Overview Overview Overview Detail

Detail

Detail

Detail Detail

DetailDetailpersistent menu:

“Strive for a single entryway into any screen.”

(quote from Dan)

27

Decentralized

28

Too many taps?

29

Too many taps?

“Counting taps is often a pointless exercise. Taps aren’t as odious as clicks.

“But watch for excess taps around high-frequency actions.”

Dan the Man

29

What’s wrong?

30

What’s wrong?

30

Keep app chrome to a minimum

31

Keep app chrome to a minimum

31

Smartphone exercise!

Sketch a smartphone app that quickly updates a user’s

multiple Google calendars with out-of-office status. (15 minutes)

Requirements:

• Set start and end dates

• Set status as all-day or as specific hours

• Option to decline meeting requests automatically

• Choose which Google calendars to apply status to

Ack! Susie always forgets to put something in her Google calendar to let her co-workers know she’s out of the office!

Not required for this exercise:Naming events, custom replies

Tip:Consider smart defaults

32

Multitouch and gesturescareful now

33

Ground rules

• Use multitouch sparingly, i.e., only when a tap or swipe won’t do.

• Use multitouch as you would use common command key shortcuts in a desktop app.

• Don’t try to reinvent standard gestures.

• Don’t use an established gesture to do something very different from the established use.

34

Do we need it?

• What is the task that must be performed?

• Is there a standard gesture for this task within the OS?

• Is there a familiar gesture we could extend?

• Is the proposed custom gesture easy for the human hand to perform?

35

Complexity

• The more important the task, the more discoverable the interaction should be.

• Attract and instruct.

• Match the complexity of the gesture to the complexity of the task.

• Do make it difficult to perform certain gestures (to protect the user).

36

Multitouch/gesture exercise!You’re working on a tablet app for creating simple architectural drawings.

Identify touches and gestures for the following tasks: (10 minutes)

• Add a window or door on an existing wall

• Remove a window or door on an existing wall

• Remove a wall to combine two rooms into one

• Switch between 2D (floorplan) and 3D (elevation) views

• Rotate the 3D view

• When in 3D view, make a wall invisible (to see through) and then visible again

Not required for this exercise:Adding rooms/walls, sizing anything

Tip:Don’t overlook the simplest options

37

Prototypingtools to check out

38

Prototyping toolsStencils for Omnigraffle and VisioExport to clickable PDF

39

Prototyping tools

Keynotopia with Keynote and PowerPointExport to clickable PDF

Watch the 19-minute video at the bottom of the page at keynotopia.com!

40

Prototyping tools

TAP plugin with FireworksMultitouch/gesture

41

Prototyping tools

Adobe ProtoThe tablet app that creates tablet app wireframes, prototypes

42

Prototyping tools

And many more...

• iMockups for iPad

• Flairbuilder

• Axure with libraries

• App Press

• Invision App

• App Cooker

• PhoneGap

43

Credit where credit is due...

Dan SafferDirector, Interaction Design

Smart Design

Follow @odannyboy on Twitter to learn about his upcoming book, Microinteractions, to be published next spring by O’Reilly.

44