mobile prototyping essentials workshop: part 1
DESCRIPTION
TRANSCRIPT
![Page 1: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/1.jpg)
Rachel HinmanSenior Research Scientist Nokia Research Lab Palo Alto, California USA
Hinman
Part I
Mobile Prototyping Essentials
![Page 2: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/2.jpg)
2004
![Page 3: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/3.jpg)
Q: Where do I begin?
![Page 4: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/4.jpg)
Q:
What can we do with mobile?
Q:
![Page 5: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/5.jpg)
Q: Where do I begin?
![Page 6: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/6.jpg)
Our plan for today…8:30am - Noon
What makes mobile UX different?Two Design/Mobile UX Exercises:• Identifying Mobile Needs• Ideating in the Wild
1:30pm – 5:30pm
Mobile prototyping essentialsThree Mobile Prototyping Exercises• Storyboarding• Practice Ruthless Editing/Translating GUI to NUI• Creating an In-Screen Prototype
Noon – 1:30pm - LUNCH
![Page 7: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/7.jpg)
8:30am - Noon
What makes mobile UX different?
Similarities and differences between designing for web and mobileThree most important attributes of great mobile experiences
A set of mobile design principles
Three mobile design activities
![Page 8: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/8.jpg)
8:30am - Noon
What makes mobile UX different?
Similarities and differences between designing for web and mobileThree most important attributes of great mobile experiences
A set of mobile design principles
Three mobile design activities
![Page 9: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/9.jpg)
8:30am - Noon
What makes mobile UX different?
Similarities and differences between designing for web and mobileThree most important attributes of great mobile experiences
A set of mobile design principles
Three mobile design activities
![Page 10: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/10.jpg)
8:30am - Noon
What makes mobile UX different?
Similarities and differences between designing for web and mobileThree most important attributes of great mobile experiences
A set of mobile design principles
Three mobile design activities
![Page 11: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/11.jpg)
Okay, let’s get started!
![Page 12: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/12.jpg)
A
What are the similarities?
Q:
![Page 13: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/13.jpg)
UX designers know how to work in a rapidly evolving field
13
![Page 14: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/14.jpg)
UX designers understand how to create experiences within technical
constraints14
![Page 15: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/15.jpg)
UX designers use similar
tools and processes15
![Page 16: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/16.jpg)
AQ: What are the
differences?
Q:
![Page 17: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/17.jpg)
A mobile phone is not a computer
17
![Page 18: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/18.jpg)
A umm…. duh!
![Page 19: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/19.jpg)
19
Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input
![Page 20: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/20.jpg)
20
Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input
![Page 21: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/21.jpg)
21
Highly variable context and environment
Small screen size and limited text input
UI takes up the entire screen
Difficult to multi-task and easy to get lost
![Page 22: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/22.jpg)
22
![Page 23: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/23.jpg)
23
![Page 24: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/24.jpg)
24
![Page 25: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/25.jpg)
![Page 26: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/26.jpg)
26
![Page 27: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/27.jpg)
2727
Opinion!
![Page 28: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/28.jpg)
The Rearview Mirror Effect
![Page 29: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/29.jpg)
Even in situations in which a spirit of exploration and freedom exist, where faculty are free to experiment to work beyond physical
and social constraints, our cognitive habits often get in the
way.
Marshall McLuhan called it “the rear-view mirror effect,” noting that “We see the world through a
rear-view mirror. We march backwards into the future.”
Even in situations in which a spirit of exploration and freedom exist, where we are free to experiment and work beyond
physical and social constraints, our cognitive habits often get in the
way.
Marshall McLuhan called it “the rear-view mirror effect,” noting that
“We see the world through a rear-view mirror. We march backwards into the
future.”
![Page 30: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/30.jpg)
30
Mobile presents an
opportunity to invent new ways for users to interact with information.
Opinion!
![Page 31: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/31.jpg)
31
Mobile phones aren’t really phones anymore
![Page 32: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/32.jpg)
![Page 33: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/33.jpg)
![Page 34: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/34.jpg)
![Page 35: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/35.jpg)
![Page 36: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/36.jpg)
A What’s the first step?Q:
![Page 37: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/37.jpg)
3Steps
37
![Page 38: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/38.jpg)
38
Step One: Become familiar with the medium you’re designing for
![Page 39: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/39.jpg)
39
NO EXCUSES!
Buy a modern mobile devices
![Page 40: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/40.jpg)
40
Step Two: Mobile culture indoctrination
![Page 41: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/41.jpg)
41
Images needed
Observe the culture you’re designing for
![Page 42: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/42.jpg)
42
Step Three: Brace yourself for a fast and exciting ride
![Page 43: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/43.jpg)
43
Rapid Evolution
“The rapid development of cell phones is killing early cell phones much faster than it's killing any of the early, older legacy technologies.
I think that is a real principle... something you have to understand if you're going to be in this line of work. It's very romantic. It's very fast moving.
You are building dead lumps of plastic. When people come out and they show you an iPhone, or an Android... they are showing you larval versions of something much more sophisticated.
The world you are building right now is the ground floor for something much larger -- and the soil beneath that ground floor is violently unstable.”
-- Mobile Monday Amsterdam – November 2008
![Page 44: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/44.jpg)
are uniquely mobile
Great Mobile Experiences:
are sympathetic to contextspeak their power3
1
2
3
![Page 45: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/45.jpg)
are uniquely mobile
Great Mobile Experiences:
are sympathetic to contextspeak their power3
1
2
3
![Page 46: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/46.jpg)
ADo you remember a time when the web was new?
Q:
![Page 47: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/47.jpg)
A“We need a web presence!”
!
![Page 48: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/48.jpg)
48
Brochureware
![Page 49: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/49.jpg)
A“We need online commerce!”
!
![Page 50: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/50.jpg)
50
What about shipping?
![Page 51: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/51.jpg)
AA“Let’s make our site like…”
!
![Page 52: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/52.jpg)
52
![Page 53: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/53.jpg)
We confused the solution with the need.
Lessons Learned from Web
We borrowed broken models. Too focused on tactics.
We didn’t focus on what the web could do well.
![Page 54: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/54.jpg)
AAHow do we NOT do that again?
Q:
![Page 55: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/55.jpg)
Technology can guide, but should not be the focus.
Focus on needs instead of tactics and solutions.
Design PrinciplesUniquely Mobile
Mobile is a unique & different medium - focus on what it can do well.
steal this slide!
![Page 56: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/56.jpg)
Design Principle: Uniquely Mobile
Focus on what mobile can do well
![Page 57: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/57.jpg)
A mobile phone is not a computer
57
![Page 58: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/58.jpg)
![Page 59: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/59.jpg)
![Page 60: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/60.jpg)
60
![Page 61: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/61.jpg)
![Page 62: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/62.jpg)
Design Principle: Uniquely Mobile
Focus on what mobile can do well
• Gesture• Sound/Voice• Image/Video• GPS• Animation• Facial Recognition• Sensors• Microphone and Speaker
• Small form factor
• Limited battery
• Inconsistent network access
• Vast and unpredictable contexts of use
• Highly personal
• Touchscreen
![Page 63: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/63.jpg)
VS.
![Page 64: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/64.jpg)
64
vs
![Page 65: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/65.jpg)
65
vs
![Page 66: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/66.jpg)
Design Principle: Uniquely Mobile
Technology can help guide, but should not be the focus
![Page 67: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/67.jpg)
Design Principle: Uniquely Mobile
Need vs. Solution
![Page 68: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/68.jpg)
68
Research Techniques
Diary Studies
Contextualinterviews
INVASIVE
LESS INVASIVE
RESEARCHERPRESENT
RESEARCHERNOT PRESENT
Deprivation Study
OnlineSurvey
Shop Alongs
Prototype Testing
TrafficStudies
Shadowing
![Page 69: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/69.jpg)
69
Research Techniques
Diary Studies
Contextualinterviews
INVASIVE
LESS INVASIVE
RESEARCHERPRESENT
RESEARCHERNOT PRESENT
Deprivation Study
OnlineSurvey
Shop Alongs
Prototype Testing
TrafficStudies
Shadowing
Use Two Techniques
![Page 70: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/70.jpg)
70
Solution Speak…Solution Need
Database of Dr. Names Find a Doctor near me
Map Get from point A to Point B
Calendar I need to know what may happen
Email I need to communicate
Facebook Updates I need to feel connected
LinkedIn I need to manage my identit
Search I need to find information
Picassa I need to share
![Page 71: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/71.jpg)
are uniquely mobile
Great Mobile Experiences:
are sympathetic to contextspeak their power3
1
2
3
![Page 72: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/72.jpg)
AWhat exactly do you mean by mobile “context” ?
Q:
![Page 73: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/73.jpg)
A
![Page 74: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/74.jpg)
![Page 75: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/75.jpg)
![Page 76: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/76.jpg)
AContext is complex!!
![Page 77: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/77.jpg)
77
Context Matters
![Page 78: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/78.jpg)
78
Context will likely beyour blindside
![Page 79: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/79.jpg)
A
Context is about understanding human relationships to the people, places and things in the world.
![Page 80: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/80.jpg)
80
Context Frameworksteal this slide!
![Page 81: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/81.jpg)
81
Context Frameworksteal this slide!
![Page 82: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/82.jpg)
82
Orchestration and Inflection
![Page 83: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/83.jpg)
83
![Page 84: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/84.jpg)
84
Spatial
![Page 85: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/85.jpg)
85
Temporal
![Page 86: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/86.jpg)
86
Social
![Page 87: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/87.jpg)
87
Semantic
![Page 88: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/88.jpg)
88
Peanut butter in Melbourne right now?
![Page 89: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/89.jpg)
A
The web is good at people and things.
The web is really good at semantic relationships.(and okay at social relationships)
![Page 90: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/90.jpg)
90
Mobile is good at places…
![Page 91: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/91.jpg)
91
Mobile is good at spatial and temporal relationships.
![Page 92: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/92.jpg)
92
![Page 93: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/93.jpg)
There are currently not many technologiesthat help us understand place, and temporal and spatial relationships.
93
![Page 94: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/94.jpg)
How do we get that understanding?
Q:
![Page 95: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/95.jpg)
![Page 96: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/96.jpg)
![Page 97: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/97.jpg)
![Page 98: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/98.jpg)
![Page 99: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/99.jpg)
![Page 100: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/100.jpg)
![Page 101: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/101.jpg)
A
![Page 102: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/102.jpg)
A
Throughout the design process, our work should be situated in the contexts where it will be used.
![Page 103: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/103.jpg)
Go to the Gemba
![Page 104: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/104.jpg)
Go to the Gemba
![Page 105: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/105.jpg)
Go to the Gemba
![Page 106: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/106.jpg)
106
Ideate in the wild…
![Page 107: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/107.jpg)
107
Your Design Challenge!Activity
How might Starbucks use mobile devices to improve their customer
experience?
![Page 108: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/108.jpg)
108
Your Design Challenge!Step 1: Identifying Needs
Activity
1. Divide into groups2. Head to the nearest
Starbucks.3. Observe mobile users in a
mobile context4. Develop a list of
customer needs based on your observations using the needs worksheet.
30 Minutes
![Page 109: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/109.jpg)
109
ActivityYour Design Challenge!Step 2: Sympathy to the mobile context
1. Head to the streets
2. Ideate in the wild – Create 2-3 concepts based on the needs your team identified
30 Minutes
![Page 110: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/110.jpg)
110
Activity
Go outside and brainstorm ideas
![Page 111: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/111.jpg)
111
Activity25 Minutes
![Page 112: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/112.jpg)
112
Activity
![Page 113: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/113.jpg)
113
Mobile is good at places…
![Page 114: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/114.jpg)
114
Mobile is good at places…
![Page 115: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/115.jpg)
115
One Hour!
![Page 116: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/116.jpg)
are uniquely mobile
Great Mobile Experiences:
are sympathetic to contextspeak their power3
1
2
3
![Page 117: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/117.jpg)
AHuh?Q
:
![Page 118: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/118.jpg)
118
![Page 119: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/119.jpg)
119
![Page 120: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/120.jpg)
120
![Page 121: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/121.jpg)
121
We can annotate expectations in the web world
![Page 122: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/122.jpg)
Add to cart
Free two-day shipping
Shipping!
Collectible!
Maybe a kindle!
Look inside the book
REALLY!Look inside the book
Get it new OR used!
Sell mine
122
![Page 123: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/123.jpg)
123
![Page 124: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/124.jpg)
AHow do I create mobile interfaces that “speak their power”?
Q:
![Page 125: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/125.jpg)
Edit!!!
125
![Page 126: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/126.jpg)
RuthlessEditing
126
![Page 127: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/127.jpg)
“We made the web in the image of ourselves, and in the U.S., that means OBESE.”
~Jason Grigsby
![Page 128: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/128.jpg)
A
128
![Page 129: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/129.jpg)
129
![Page 130: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/130.jpg)
![Page 131: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/131.jpg)
131
![Page 132: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/132.jpg)
A
132
![Page 133: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/133.jpg)
A
133
![Page 134: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/134.jpg)
A
134
![Page 135: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/135.jpg)
![Page 136: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/136.jpg)
![Page 137: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/137.jpg)
![Page 138: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/138.jpg)
![Page 139: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/139.jpg)
Josh Clark Example
139
![Page 140: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/140.jpg)
Josh Clark Example
140
![Page 141: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/141.jpg)
Historically, we start with structure…
![Page 142: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/142.jpg)
Try hiding the structure…
![Page 143: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/143.jpg)
Try starting with instinct and intuition
![Page 144: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/144.jpg)
More on this after lunch…
![Page 145: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/145.jpg)
are uniquely mobile
Great Mobile Experiences:
are sympathetic to contextspeak their power3
1
2
3
![Page 146: Mobile Prototyping Essentials Workshop: Part 1](https://reader038.vdocuments.site/reader038/viewer/2022103111/54c7ee734a795916268b468c/html5/thumbnails/146.jpg)
LUNCH!12 – 1pm