Sketching Mobile Interactions

UPA Presentation
March 27, 2008
 a brief introduction

Michael Jefferson
Senior Design Analyst at frogNY

• frog: http://www.frogdesign.com
• personal: http://www.michaeljefferson.net

Interaction’08 02/10/08
Interaction’08 FALL 06
02/10/08
 we are frog.

Sony Presentation 3/28/06 Proprietary and Confidential 4

 we are frog.
We are a strategic-creative consulting firm.

Sony Presentation 3/28/06 Proprietary and Confidential 4

 abstract meets physical

Interaction’08 FALL 06
02/10/08
Interaction’08 FALL 06
02/10/08
 think and work in motion

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 7

 five observed methods

• Dialogue as a Sketch
• Paper Prototype/Sketch
• Video as a Sketch
• Portable Wires / 3rd screen (How-To)
• WOZ Environment

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 8

 method 1: dialogue as sketch

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 9

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 10
Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 11
 time-lapse of war room (fort)

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 12

 dialogue as sketch - what works
1. insights that carry through a project
2. becomes physical
3. invites people in - generating more dialogue
4. becomes a deliverable?

Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 13

 method 2: paper prototype

Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 14

Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 15
Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 16
 http://www.bodyartexpo.com/images/camcorder.jpg

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 17

Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 18
Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 19
Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 20
Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 21
Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 22
 paper as sketch - what works
1. it’s not about the device
2. grounds the conversation
3. matches fidelity with the state of the design
4. about exploring ideas not testing an idea
5. low resource involvement

Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 23

 method 3: video as a sketch

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 24

 play street scene interaction sequence

Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 25

 video as sketch - what works
1. reveals true timing
2. hard to cheat
3. provides a new perspective

Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 26

 method 4: portable wires

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 27

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 28
Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 29
Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 30
Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 31
Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 32
Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 33
Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 34
Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 35
Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 36
 • https://help.ubuntu.com/community/UMEGuide

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 37

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 38
 creating a 3rd monitor

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 39

 mobile wires - step 1
creating clickable image maps
‣ convert export your wires
to jpg files
‣ import in photoshop/
fireworks
‣ check size for desired pixel
dimensions
‣ import to html editor
‣ create clickable image
map sequence

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 40

 mobile wires - step 2
load new folder containing
html into your sites folder.

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 41

 mobile wires - step 3
in preferences/ sharing -
enable local file sharing.
this creates a lan. both
devices must share the same
wifi connection.

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 42

 mobile wires - hot spot alternate
another option is to create a
local network on your mac and
give it a name.

the personal site url will now

be something like http://
(network_name)/~user/

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 43

 mobile wires - step 5
connect to your network ~
(name)/(file).

Nuance Presentation: Discover Phase | 10/29/07 Proprietary & Confidential 44

 click through as sketch - what works
1. reveals device display constraints
2. low resources
3. quickly deployed tests
4. easily adaptable

Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 45

 method 5: wizard of OZ

Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 46

 Wizard-of-Oz User Testing: Technical Description

Test Subject Wizard

IP Network

Event TORNADO Event Find Biz

Manager Multi-user Socket Manager
GUI Events Server GUI Events
Weather

Boston

Wizard of Oz functionality (remote control) is Florist

acheived by using a centralized event dispatching
component, the Event Manager, that sends and Call Jim
receives events among peers.
Not Rec
Both remotely and locally generated events are
seen identically by the application. This is because
The Wizard application runs an
the Event Manager handles every application
identical copy of the phone's
event and every application component observes
application code augmented by a
events through this common Event Manager.
"sound board" to generate events
matching user utterences.
The Event Manager forwards specified local events
(e.g. key press) to peers via XML Socket. Events
are serialized to JSON format when passed across
the socket stream. Additional Observers
Upon receiving a remote event, the Event Event
Manager dispatches the event as if it was a local Manager
event.

Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 47

Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 48
 woz - what works
1. user testing sessions with device in hand
2. syndication of interaction
3. mobility

Sketching Mobile Interactions: UPA | 3/27/08 Proprietary & Confidential 49

 resources
• web
• iphone development tips | http://developer.apple.com/iphone/
• ubuntu documentation | https://help.ubuntu.com/community/UMEGuide
• screenshot app | http://www.antonypranata.com/screenshot/download-screenshot-symbian-os-s60

• shozu | http://www.shozu.com/portal/
• books
• skeching user experiences, bill buxton
• designing for small screens

Nuance Presentation: Design Phase | 12/18/07 Proprietary & Confidential

50