Mobile User Experience: What Web Designers Need to Know
-
Upload
rachel-hinman -
Category
Design
-
view
63.957 -
download
1
description
Transcript of Mobile User Experience: What Web Designers Need to Know
![Page 1: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/1.jpg)
Rachel Hinman
What web designers need to know..
Mobile User ExperienceWhat Web Designers Need to Know
![Page 2: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/2.jpg)
I used to be a web designer.
I used to be a web designer, too
![Page 3: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/3.jpg)
What can we do with mobile?
How can we streamline the checkout process?
How can we streamline the checkout process
Q:
How can we get community on our site?
Q:
What can we do with mobile?
Q:
![Page 4: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/4.jpg)
What can we do with mobile?
How can we streamline the checkout process?
How can we streamline the checkout process
Q:
How can we get community on our site?
Q:
What can we do with mobile?
Q:
![Page 5: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/5.jpg)
Q: Where do I begin?
Where do I begin
![Page 6: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/6.jpg)
Our plan for today…
Our plan for today
Similarities and differences between designing for web and mobile
![Page 7: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/7.jpg)
Our plan for today…
Our plan for today
Similarities and differences between designing for web and mobile
Three most important attributes of great mobile experiences
![Page 8: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/8.jpg)
Our plan for today…
Our plan for today
Similarities and differences between designing for web and mobile
Three most important attributes of great mobile experiences
A set of mobile design principles
![Page 9: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/9.jpg)
Our plan for today…
Our plan for today
Similarities and differences between designing for web and mobile
Three most important attributes of great mobile experiences
A set of mobile design principles
Three mobile design activities
![Page 10: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/10.jpg)
Along the way…
Along the way
Slides Worth Keeping
Shameless Opinion
Design Activities
Design Principles
Watch for slides with this orange label!
![Page 11: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/11.jpg)
Okay, let’s get started!
Okay… let’s get started
![Page 12: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/12.jpg)
A
What are the similarities
What are the similarities?Q:
![Page 13: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/13.jpg)
Web designers know how to work in a rapidly evolving field
13
Web designers know how to work in a rapidly evolving field
![Page 14: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/14.jpg)
Web designers understand how to create experiences within technical constraints
14
Ability to work within technical constraints
![Page 15: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/15.jpg)
Web designers use similar tools and processes
15
Similar Tools… Similar processes
![Page 16: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/16.jpg)
A
What are the differences?
Q: What are the differences?
![Page 17: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/17.jpg)
A mobile phone is not a computer
17
A mobile phone is not a computer
![Page 18: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/18.jpg)
A umm…. duh!
Um… duh!
![Page 19: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/19.jpg)
19
Differences in the mobile environment
Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input
![Page 20: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/20.jpg)
20
Differences in the mobile environment
Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input
![Page 21: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/21.jpg)
21
Differences in the mobile environment
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 User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/22.jpg)
22
Mobile phones started out as a one-to-one
![Page 23: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/23.jpg)
They evoloved
23
![Page 24: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/24.jpg)
Mobile phones evolved from the landline phone
24
![Page 25: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/25.jpg)
25
Smartphone… added
![Page 26: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/26.jpg)
26
Smartphone… added 26
Opinion!
![Page 27: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/27.jpg)
27
iPhone
Mobile phones aren’t really phones anymore
![Page 28: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/28.jpg)
28
Mobile presents an opportunity to invent new ways…
Mobile presents an opportunity to invent new ways for users to interact with information.
Opinion!
![Page 29: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/29.jpg)
29
Shift your perspective and point of view
Expert to Explorer
![Page 30: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/30.jpg)
30
How?
Understand your assumptions
![Page 31: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/31.jpg)
are uniquely mobile1
Great Mobile user experiences
Great Mobile Experiences:
are sympathetic to context2
speak their power3
steal this slide!
![Page 32: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/32.jpg)
are uniquely mobile1
Great Mobile user experiences
Great Mobile Experiences:
![Page 33: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/33.jpg)
A
Do you remember a time…
Do you remember a time when the web was new?
Q:
![Page 34: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/34.jpg)
A
Do you remember a time…
“We need a web presence!”!
![Page 35: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/35.jpg)
35
Solution: Brochure - online
Brochureware
![Page 36: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/36.jpg)
“we need a web presence”
A“We need online commerce!”!
![Page 37: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/37.jpg)
37
Online commerce
What about shipping?
![Page 38: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/38.jpg)
A
Make it like the world
A“Let’s make our site like…”!
![Page 39: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/39.jpg)
39
Southwest airlines
![Page 40: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/40.jpg)
We confused the solution with the need.
What we learned from the web
Lessons Learned from Web
steal this slide!
We borrowed broken models. Too focused on tactics.
We didn’t focus on what the web could do well.
![Page 41: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/41.jpg)
A
How do we not do that again?
AHow do we NOT do that again?
Q:
![Page 42: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/42.jpg)
Focus on needs instead of tactics and solutions.
What we learned from the web
Design Principles:Uniquely Mobile
Mobile is a different medium - focus on what it can do well.
Don’t get hung up on heuristics and technology - they change rapidly.
steal this slide!
![Page 43: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/43.jpg)
Identify your assumptions upfront. Unpack your computer baggage.
1
Three tips for uniquely mobile experiences
Three tips for creating uniquely mobile experiences
Identify the difference betweenneeds and solutions.
2
Focus on what makes mobile unique.3
steal this slide!
![Page 44: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/44.jpg)
44
Identify your assumptions
Unpack your computerand mobile baggage…
Activity
![Page 45: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/45.jpg)
45
information needs
What are the needs?Activity
What need does this information fill?
Frame it as a question from the perspective of a user.
![Page 46: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/46.jpg)
46
Identify information needs
What are the needs?Activity
What need does this information fill?
Frame it as a question from the perspective of a user.
I wonder if this restaurant is popular?What neighborhood is
this place in?
Public Transport?
![Page 47: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/47.jpg)
47
Identify information needs
What are the needs?Activity
![Page 48: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/48.jpg)
A The web was not a direct translation…
The web was not a direct translation
![Page 49: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/49.jpg)
A … mobile won’t be either.
And mobile won’t be either.
![Page 50: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/50.jpg)
are uniquely mobile1
Great Mobile user experiences
Great Mobile Experiences:
are sympathetic to context2
![Page 51: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/51.jpg)
Pictures of mobile contexts
AWhat exactly do you mean by mobile “context” ?
Q:
![Page 52: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/52.jpg)
A
Pictures of mobile contexts
![Page 53: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/53.jpg)
More pictures of mobile contexts
![Page 54: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/54.jpg)
Social context
![Page 55: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/55.jpg)
A
Context is complex
Context is complex!!
![Page 56: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/56.jpg)
A
Context is about understanding human relationships to the people, places and things in the world.
Context is about understanding the relationships
![Page 57: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/57.jpg)
57
Context Framework
Context Framework steal this slide!
![Page 58: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/58.jpg)
58
Context Framework
Context Framework steal this slide!
![Page 59: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/59.jpg)
59
Relationships Chording
Orchestration and Inflection
![Page 60: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/60.jpg)
QuickTime™ and aTIFF (LZW) decompressor
are needed to see this picture.
60
Peanut butter
![Page 61: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/61.jpg)
61
Google: Facebook
Spatial
![Page 62: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/62.jpg)
62
Temporal
Temporal
![Page 63: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/63.jpg)
63
Spatial - peanut butter
Social
![Page 64: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/64.jpg)
64
Google: Facebook
Semantic
![Page 65: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/65.jpg)
65
Peanut butter in Denver
Peanut butter in Denver right now?
![Page 66: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/66.jpg)
A
The web is good at people and things.
The web is good at semantic relationships.(and okay at social relationships)
Context is about understanding the relationships
![Page 67: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/67.jpg)
67
Context Framework
Mobile is good at places… steal this slide!
![Page 68: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/68.jpg)
68
Context Framework
steal this slide!Mobile is good at spatial and temporal relationships.
![Page 69: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/69.jpg)
69
Google maps - PC vs. Mobile
![Page 70: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/70.jpg)
Temporal and spatial relationships are underserved
There are currently not many technologiesthat help us understand place, and temporal and spatial relationships.
70
![Page 71: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/71.jpg)
How do you get that understanding?
How do we get that understanding?
Q:
![Page 72: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/72.jpg)
Design for partial attention and interruption
1
Sympathy to context principles
Design Principles:Sympathy to Context
Reduce cognitive load and opportunity cost
2
steal this slide!
Ideate in the wild3
![Page 73: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/73.jpg)
73
Text entry will never be easy
Design for partial attention and interruption
![Page 74: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/74.jpg)
74
Wand in the world
ActivityGet sympathetic to the mobile context…
![Page 75: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/75.jpg)
75
“in the wild” ideation
Activity
The Kate Rutter Wand in the World Activity
![Page 76: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/76.jpg)
76
“in the wild” ideation
Activity
![Page 77: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/77.jpg)
77
“in the wild” ideation
ActivityThen ideate…
![Page 78: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/78.jpg)
78
“in the wild” ideation
ActivityThen ideate…
![Page 79: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/79.jpg)
are uniquely mobile1
Great Mobile user experiences
Great Mobile Experiences:
are sympathetic to context2
speak their power3
![Page 80: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/80.jpg)
Speak their power?
AHuh?Q:
![Page 81: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/81.jpg)
A light switch
81
![Page 82: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/82.jpg)
Shopping cart
82
![Page 83: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/83.jpg)
Shopping cart
83
![Page 84: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/84.jpg)
We can annotate expectations in the web world
84
We can annotate expectations in the web world
![Page 85: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/85.jpg)
We can annotate expectations in the web world
85
We can annotate expectations in the web world
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
![Page 86: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/86.jpg)
Options in mobile have to be readily apparent
86
Options have to be apparent and intuitive in mobile for people to
![Page 87: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/87.jpg)
How do you make interfaces that speak their power
AHow do I create mobile interfaces that “speak their power”?
Q:
![Page 88: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/88.jpg)
Say good bye to done
Say good-bye to “done”.1
Design Principles:Interfaces that speak their power
steal this slide!
Think possibilities, not tasks.2
Dismantle the page metaphor. Boulders to pebbles.
3
![Page 89: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/89.jpg)
89
Wireframe
This should look familiar…
![Page 90: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/90.jpg)
90
Wireframe
This should look familiar…
![Page 91: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/91.jpg)
91
Wireframe
This should look familiar…
The web has evolved around a task-efficiency model.
Mobile is different.
![Page 92: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/92.jpg)
92
Mobile is different
Mobile is different….
![Page 93: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/93.jpg)
93
Mobile is different
Mobile is different….
![Page 94: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/94.jpg)
94
Mobile is different
Mobile is different….
Mobile is about pivoting people through information quickly.
It’s about exposing possibilities.
![Page 95: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/95.jpg)
What’s the point?
“What’s the point?” “What can happen?”
TASK POSSIBILITIES
![Page 96: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/96.jpg)
96
Tasks are about completion
Tasks are about completion…
![Page 97: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/97.jpg)
97
Tasks are about completion
Tasks are about completion…
Possibilities are interactions that accrue over time…
![Page 98: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/98.jpg)
… or facilitate exploration…
98
Tasks are about completion
Tasks are about completion…
Possibilities are interactions that accrue over time…
![Page 99: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/99.jpg)
… or facilitate exploration…
99
Tasks are about completion
Tasks are about completion…
Possibilities are interactions that accrue over time…
..or are about SENSING
INTENT!
![Page 100: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/100.jpg)
100
Example -
![Page 101: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/101.jpg)
101
Example -
![Page 102: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/102.jpg)
102
Example -
![Page 103: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/103.jpg)
103
Example -
![Page 104: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/104.jpg)
104
Example -
![Page 105: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/105.jpg)
105
Example -
![Page 106: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/106.jpg)
How do you make interfaces that speak their power
AHow do I design for possibilities?
Q:
![Page 107: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/107.jpg)
How do you make interfaces that speak their power
A
107
![Page 108: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/108.jpg)
How do you make interfaces that speak their power
A
108
![Page 109: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/109.jpg)
How do you make interfaces that speak their power
A
109
![Page 110: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/110.jpg)
It’s like a card game…110
It’s like a game of cards
![Page 111: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/111.jpg)
Each card speaks it’s power111
It’s like a game of cards
![Page 112: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/112.jpg)
You win with a good hand112
It’s like a game of cards
![Page 113: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/113.jpg)
Pivoting people through information
113
ActivityCreate a winning hand.
![Page 114: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/114.jpg)
Pivoting people through information
114
![Page 115: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/115.jpg)
Pivoting people through information
115
ActivityCreate a winning hand.
![Page 116: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/116.jpg)
Pivoting people through information
116
ActivityCreate a winning hand.
Allow people to pivot through information quickly
Stitch cards together to answer the question
![Page 117: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/117.jpg)
117
Prototype
PrototypePrototypePrototypePrototypePrototypePrototype
![Page 118: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/118.jpg)
118
Can users grok it?
Can users grok it?
Does each card speak it’s power?
Can I simplify this?
Is this intuitive?
Q:
Q:
Q:
Q:
![Page 119: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/119.jpg)
119
Analogy of cards
Prototyping “Swirl”Process
![Page 120: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/120.jpg)
120
Analogy of cards
Plan for a lot of it!1
Tips for mobile prototypingsteal this slide!
Work at scale and print it out!2
Get it on the device as soon as you can.
2
![Page 121: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/121.jpg)
121
Analogy of cards
Prototype at every stageProcess
![Page 122: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/122.jpg)
Paper Prototype example
122
![Page 123: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/123.jpg)
High fidelity prototype example
![Page 124: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/124.jpg)
Where do I begin?
Q: Where do I begin?
![Page 125: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/125.jpg)
are uniquely mobile1
Great Mobile user experiences
Great Mobile Experiences:
are sympathetic to context2
speak their power3
steal this slide!
![Page 126: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/126.jpg)
Everybody starts somewhere
Everybody starts somewhere….
![Page 127: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/127.jpg)
Good luck
Good luck!
![Page 129: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/129.jpg)
Resources:MOBILE RESOURCES
Ultimate iPhone Stencil for Omnigrafflehttp://graffletopia.com/stencils/413
mooTools http://mootools.netiUI iPhone navigation (javascript):http://code.google.com/p/iui/
jQuery (javascript):http://jquery.com/
TweenMax (actionscript):http://blog.greensock.com/tweenmaxas3/
Bruce Sterling speaks on the future of mobilehttp://tinyurl.com/6m7kwc
RESOURCES
![Page 130: Mobile User Experience: What Web Designers Need to Know](https://reader035.fdocuments.net/reader035/viewer/2022081802/53f080588d7f72e94b8b4654/html5/thumbnails/130.jpg)
Q?
Q&A: final break