Date post: | 14-Jul-2015 |
Category: |
Design |
Upload: | kirsten-miller |
View: | 287 times |
Download: | 3 times |
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
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
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
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
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
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
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
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
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
And many more...
• iMockups for iPad
• Flairbuilder
• Axure with libraries
• App Press
• Invision App
• App Cooker
• PhoneGap
43