Upa Sketching Sm

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 Manager

GUI Events

TORNADO Multi-user Socket Server

GUI Events

Event Manager

Find Biz Weather Boston

Wizard of Oz functionality (remote control) is acheived by using a centralized event dispatching component, the Event Manager, that sends and receives events among peers. Both remotely and locally generated events are seen identically by the application. This is because the Event Manager handles every application event and every application component observes events through this common Event Manager. 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. Upon receiving a remote event, the Event Manager dispatches the event as if it was a local event.

Sketching Mobile Interactions: UPA | 3/27/08

Florist Call Jim Not Rec

The Wizard application runs an identical copy of the phone's application code augmented by a "sound board" to generate events matching user utterences.

Additional Observers Event Manager

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 | • shozu | http://www.shozu.com/portal/ • books

http://www.antonypranata.com/screenshot/download-screenshot-symbian-os-s60

• •

skeching user experiences, bill buxton designing for small screens

Nuance Presentation: Design Phase | 12/18/07

Proprietary & Confidential

50