Mobile Prototyping Essentials
-
Upload
rachel-hinman -
Category
Design
-
view
41.713 -
download
0
Transcript of Mobile Prototyping Essentials
![Page 1: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/1.jpg)
UX Australia 2011Mobile Prototyping
Essentials
Rachel HinmanSenior Research Scientist Nokia Research Lab Palo Alto, California USA
Hinman
![Page 2: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/2.jpg)
2
![Page 3: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/3.jpg)
Q:
What makes mobile UX different?
Q:
3
![Page 4: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/4.jpg)
A
4
![Page 5: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/5.jpg)
A :-(
5
![Page 6: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/6.jpg)
A
6
![Page 7: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/7.jpg)
?7
![Page 8: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/8.jpg)
88
![Page 9: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/9.jpg)
Bad Decision-Making
9
![Page 10: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/10.jpg)
The final diamonds are where good design decisions matter most… …and where designers new to mobile have the least domain specific skill and confidence.
10
![Page 11: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/11.jpg)
Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input
11
![Page 12: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/12.jpg)
12
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 13: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/13.jpg)
A
Designers new to mobile don’t have the domain specific skills or heuristics to lean on.
13
![Page 14: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/14.jpg)
PrototypePrototypePrototypePrototypePrototypePrototypePrototypePrototype
14
![Page 15: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/15.jpg)
A
PC Prototypingis considered a Luxur
y15
![Page 16: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/16.jpg)
A
Mobile Prototyping is
Essential16
![Page 17: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/17.jpg)
The best way to develop those skills is to prototype early and often.
17
![Page 18: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/18.jpg)
A
Prototypes are the ultimate decision-making aid
18
![Page 19: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/19.jpg)
Our plan for today…Review the four “whys” of mobile prototypingIdentify the two genres of prototyping and overview of six prototyping methodsReview the key differences between NUI and GUI interfacesOverview of animation principles that can be incorporated into your mobile experiencesThree hands-on activities
19
![Page 20: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/20.jpg)
Our plan for today…Review the four “whys” of mobile prototypingIdentify the two genres of prototyping and overview of six prototyping methodsReview the key differences between NUI and GUI interfacesOverview of animation principles that can be incorporated into your mobile experiencesThree hands-on activities
20
![Page 21: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/21.jpg)
Our plan for today…Review the four “whys” of mobile prototypingIdentify the two genres of prototyping and overview of six prototyping methodsReview the key differences between NUI and GUI interfacesOverview of animation principles that can be incorporated into your mobile experiencesThree hands-on activities
21
![Page 22: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/22.jpg)
Our plan for today…Review the four “whys” of mobile prototypingIdentify the two genres of prototyping and overview of six prototyping methodsReview the key differences between NUI and GUI interfacesOverview of animation principles that can be incorporated into your mobile experiencesThree hands-on activities
22
![Page 23: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/23.jpg)
Our plan for today…Review the four “whys” of mobile prototypingIdentify the two genres of prototyping and overview of six prototyping methodsReview the key differences between NUI and GUI interfacesOverview of animation principles that can be incorporated into your mobile experiencesThree hands-on activities
23
![Page 24: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/24.jpg)
Okay, let’s get started!
24
![Page 25: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/25.jpg)
Prototyping
25
![Page 26: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/26.jpg)
Explore the “Unknowns”
“Whys” of prototypingImprove your design decision-making
steal this slide!
Gather User Feedback
Communicate an Idea
Fine-tune an Idea26
![Page 28: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/28.jpg)
Gather User Feedback
28
![Page 29: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/29.jpg)
Explore the Unknowns
29
![Page 30: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/30.jpg)
Fine-Tune an Idea
30
![Page 31: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/31.jpg)
Two Genres
31
![Page 32: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/32.jpg)
Experiential Prototyping
32
![Page 33: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/33.jpg)
Tactical Prototyping
33
![Page 34: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/34.jpg)
You are working on a “broader” mobile project.1
Experiential Prototyping:Best suited for design explorations where:
Target mobile hardware and software scope is unknown.(perhaps being created).
2
steal this slide!
The design space is relatively unchartered.
334
![Page 35: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/35.jpg)
You are working on a “focused” mobile project.1
Tactical Prototyping:Best suited for design explorations where:
Target mobile hardware and software scope is known.
2
steal this slide!
The design space is relatively known.
335
![Page 36: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/36.jpg)
Experiential Prototyping
36
![Page 37: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/37.jpg)
37
![Page 38: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/38.jpg)
38
![Page 39: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/39.jpg)
39
Context Matters
![Page 40: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/40.jpg)
40
Context will likely beyour blindside
![Page 41: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/41.jpg)
Context Framework steal this slide!
41
![Page 42: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/42.jpg)
Context Framework steal this slide!
42
![Page 43: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/43.jpg)
43
Experiential Prototypingwill help you understand
context
![Page 44: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/44.jpg)
You are working on a “broader” mobile project.
Experiential Prototyping:Best suited for design explorations where:
Target mobile hardware and software scope is unknown.(perhaps being created).
The design space is relatively unchartered.
1
2
3
![Page 45: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/45.jpg)
Concept Videos
Experiential Prototypes
Storyboarding
Speed Dating Prototypes
Body Storming
![Page 46: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/46.jpg)
46
Bodystorming
![Page 47: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/47.jpg)
Through Lines
![Page 48: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/48.jpg)
![Page 49: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/49.jpg)
![Page 50: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/50.jpg)
![Page 51: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/51.jpg)
![Page 52: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/52.jpg)
In reality… people’s lives are messy
![Page 53: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/53.jpg)
53
Similar to improvisational theater, body storming involves acting out possible scenarios or use cases with actors and props. Unlike computer-based technology that is logic based and only makes visible the conditions that existed before, people are illogical, perceptive, aware, and self-correcting.
Body storming is a technique that helps capture and harness these messy yet essential aspects of human behavior and account for them in the mobile design process.
![Page 54: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/54.jpg)
Photo by Christian Crumlish (xian), 2009 on Flickr 54
1. Select groups of five to eight participants in a troupe.
![Page 55: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/55.jpg)
55
1. Select groups of five to eight participants in a troupe.
2. Identify 3-5 experience scenarios for your troupe to “perform.”
Examples: Purchasing a cup of coffee with my iPhone, selecting which phone to purchase in a carrier’s store.
Photo by Christian Crumlish (xian), 2009 on Flickr
![Page 56: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/56.jpg)
56
3. Every player must have a role; there should be no “trees” that are just for background. Use large cards that label the roles people are playing.
Photo by Christian Crumlish (xian), 2009 on Flickr
![Page 57: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/57.jpg)
57
4. Props can have feelings, thoughts, and the ability to speak. Use thought-bubble cards to show what a participant is thinking versus saying.
Photo by Christian Crumlish (xian), 2009 on Flickr
![Page 58: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/58.jpg)
58
5. Have a narrator or color commentator who can explain things. The narrator can pretend the scenario is like television, using a remote to stop action, rewind, or fast-forward.Photo by Christian Crumlish (xian), 2009 on
Flickr
![Page 59: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/59.jpg)
59
6. De-brief after each scenario. What did the group learn? What was surprising? What seemed important? Capture what you learned from the exercise and discuss how you can integrate it into what happens next. Photo by Christian Crumlish (xian), 2009 on
Flickr
![Page 60: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/60.jpg)
60
Bodystorming will help you capture the emotional tenor of
mobile interactions
![Page 61: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/61.jpg)
61
Design in Context
![Page 62: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/62.jpg)
Concept Videos
Experiential Prototypes
Storyboarding
Speed Dating Prototypes
Body Storming
![Page 63: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/63.jpg)
63
Speed Dating Prototypes
Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
![Page 64: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/64.jpg)
64
Scott Davidoff of CMU• Few design tools
• High Cost of Failure
• Unpredictable social consequences
Rapidly Exploring Application Design through Speed Dating
![Page 65: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/65.jpg)
Abundance brings perspective.
Speed Dating PrototypesBuilds on three theories:
Need to cross boundaries to know they exist.
Multiple low-cost engagements with multiple concepts enables a broader perspective to emerge.
1
2
3
65
![Page 66: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/66.jpg)
66
Step OneIdentify most promisingconcepts
![Page 67: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/67.jpg)
Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 67
Step TwoCreate storyboards thatdepict each concept
![Page 68: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/68.jpg)
68
Step ThreePresent storyboards tousers & gather feedback
![Page 69: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/69.jpg)
Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 69
Step FourCreate prototypes
![Page 70: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/70.jpg)
Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 70
Step FiveConduct user enactments with prototypes
![Page 71: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/71.jpg)
71
Speed Dating Prototypes are especially well-suited for gathering user impressions of a new-to-the-world experience
![Page 72: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/72.jpg)
Concept Videos
Experiential Prototypes
Storyboarding
Speed Dating Prototypes
Body Storming
![Page 73: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/73.jpg)
Concept Videos
Nokia 888 communicator concept phone design by Tamer Nakisci 73
![Page 74: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/74.jpg)
74
![Page 75: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/75.jpg)
7575
![Page 76: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/76.jpg)
• High Impact
• Highly Shareable
• Good for High-Level Ideas
• Technology still in development
Concept VideosPros
76
![Page 77: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/77.jpg)
• High Impact
• Highly Shareable
• Good for High-Level Ideas
• Technology still in development
Concept VideosPros
• Resource Intensive!!!
• Skill Intensive
• Cultural Fit
• Concept videos don’t make bad ideas good.
Cons
77
![Page 78: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/78.jpg)
78
The first step of creating a concept video is….
![Page 79: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/79.jpg)
Concept Videos
Experiential Prototypes
Storyboarding
Speed Dating Prototypes
Body Storming
79
![Page 80: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/80.jpg)
Storyboarding
80
![Page 81: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/81.jpg)
81
![Page 82: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/82.jpg)
Mobile UX StoryboardingIdentify the central idea(s) you are trying to communicate.
82
![Page 83: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/83.jpg)
Mobile UX StoryboardingIdentify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces.
83
![Page 84: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/84.jpg)
Mobile UX StoryboardingIdentify the central idea(s) you are trying to communicate.
Rough out a basic story.
Create a character and identify the key issues he/she currently faces.
84
![Page 85: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/85.jpg)
Start filling in the cells. Rough out the complete story, then fill in details.
Mobile UX StoryboardingIdentify the central idea(s) you are trying to communicate.
Rough out a basic story.
Create a character and identify the key issues he/she currently faces.
85
![Page 86: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/86.jpg)
Start filling in the cells. Rough out the complete story, then fill in details.
Mobile UX StoryboardingIdentify the central idea(s) you are trying to communicate.
Rough out the basic story
Create a character and identify the key issues he/she currently faces.
86
![Page 87: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/87.jpg)
87
![Page 88: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/88.jpg)
88
![Page 89: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/89.jpg)
ActivityYour Design Challenge!Storyboarding
89
![Page 90: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/90.jpg)
ActivityYour Design Challenge!Storyboarding: Ideas
90
![Page 91: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/91.jpg)
ActivityYour Design Challenge!Storyboarding
Select one concept you’d like to explore more deeply using the storyboarding technique.
Storyboard one scenario using the templates provided.
Remember to identify the key issues the character faces and rough out the complete story before filling in details.
1
2
3
![Page 92: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/92.jpg)
Tactical Prototyping
![Page 93: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/93.jpg)
Flash Prototype
Tactical Prototypes
In-Screen Mobile Prototypes
steal this slide!
Keynote/Powerpoint Prototypes
Mobile Browser Prototypes
Platform Specific Prototype
Sketching/Paper Prototyping
93
![Page 94: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/94.jpg)
Flash Prototype
Tactical Prototypes
In-Screen Mobile Prototypes
steal this slide!
Keynote/Powerpoint Prototypes
Mobile Browser Prototypes
Platform Specific Prototype
Sketching/Paper Prototyping
94
![Page 95: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/95.jpg)
Sketching
95
![Page 96: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/96.jpg)
Great mobile UIsspeak their power
96
![Page 97: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/97.jpg)
AHuh?Q
:
97
![Page 98: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/98.jpg)
98
![Page 99: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/99.jpg)
99
![Page 100: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/100.jpg)
100
![Page 101: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/101.jpg)
101
We can annotate expectations in the web world
![Page 102: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/102.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
102
![Page 103: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/103.jpg)
103
![Page 104: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/104.jpg)
104
Design for partial attention and interruption
![Page 105: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/105.jpg)
AHow do I create mobile interfaces that “speak their power”?
Q:
105
![Page 106: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/106.jpg)
Edit!!!
106
![Page 107: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/107.jpg)
RuthlessEditing
107
![Page 108: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/108.jpg)
108
A Brave NUI World
![Page 109: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/109.jpg)
109
![Page 110: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/110.jpg)
110
Seated in a relatively predictable environment
Large screen enables multi-tasking
Keyboard and a mouse for input
![Page 111: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/111.jpg)
111
We’re reaching the edges of what GUI can do
![Page 112: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/112.jpg)
112
Most mobile smartphones have touchscreens with Natural User Interfaces
![Page 113: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/113.jpg)
113
GUIs Become Brittleon a Mobile Device
![Page 114: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/114.jpg)
![Page 115: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/115.jpg)
![Page 116: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/116.jpg)
116
![Page 117: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/117.jpg)
117
GUI/NUI Chasm
![Page 118: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/118.jpg)
Key differences between NUI and GUI
118
![Page 119: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/119.jpg)
Defining Attributes of
GUIs…
119
![Page 120: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/120.jpg)
120
GUI Mental Model = Computer as tool
![Page 121: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/121.jpg)
121
GUI = Recognition“What you see is what you
get”
![Page 122: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/122.jpg)
GUI = Metaphorics, containment and place
122
![Page 123: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/123.jpg)
GUIs = Heavy Chrome, Icons & Buttons
123
![Page 124: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/124.jpg)
Defining Attributes of
NUIs…
124
![Page 125: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/125.jpg)
125
NUI Mental Model = Computer as media
![Page 126: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/126.jpg)
126
NUI = Intuition“What you do is what you
get”
![Page 127: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/127.jpg)
127
NUI = Fluid, Unmediated, and Organic
![Page 128: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/128.jpg)
NUIs = Content is the Star128
![Page 129: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/129.jpg)
129
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 130: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/130.jpg)
GUI = Experiences are anchored
130
![Page 131: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/131.jpg)
131
NUI = Experiences Unfold
![Page 132: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/132.jpg)
132
NUIs Unfold Like a Game
![Page 133: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/133.jpg)
NUIs Can Feel Anchor-less
133
![Page 134: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/134.jpg)
134
![Page 135: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/135.jpg)
The Nested Doll Pattern1
Mobile Experiences UnfoldPatterns for how mobile experiences unfold and progressively reveal their nature
steal this slide!
The Hub and Spoke Pattern2
The Bento Box Pattern3
The Filtered View Pattern4135
![Page 136: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/136.jpg)
136
Nested Doll Pattern
![Page 137: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/137.jpg)
137
Hub and Spoke Pattern
![Page 138: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/138.jpg)
138
Bento Box Pattern
![Page 139: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/139.jpg)
139
Filtered View Pattern
![Page 140: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/140.jpg)
A
140
Trick to unfolding = Information boulders to pebbles
![Page 141: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/141.jpg)
A
141
![Page 142: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/142.jpg)
A
142
![Page 143: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/143.jpg)
ActivityYour Design Challenge!From GUI to NUI
143
![Page 144: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/144.jpg)
ActivityYour Design Challenge!From GUI to NUI
Identify an interaction sequence you’d like to recreate using NUI principles.
Sketch out the interaction using the templates provided.
Identify how you’d like your mobile experience to unfold.
1
2
3
144
![Page 145: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/145.jpg)
145
![Page 146: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/146.jpg)
146
![Page 147: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/147.jpg)
147
ActivityREMEMBER!It’s easy to go crazy and try to do it all.Instead, focus on applying what we’ve covered…
Understanding the differences between graphical and natural user interfaces.
Experimenting with how your mobile experience can unfold and and progressively reveal its nature.
Play around with the unfolding patterns that have been presented… or invent some of your own.
![Page 148: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/148.jpg)
148
![Page 149: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/149.jpg)
149
Paper In-Screen Prototypes
Following Process documented by Diego Pulido via UX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine
![Page 150: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/150.jpg)
1. Sketch screen layouts.
Photo courtesy of Diego Pulido and UX Magazine 150
![Page 151: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/151.jpg)
1. Sketch screen layouts. 2. Scan or photograph the sketches.
Photo courtesy of Diego Pulido and UX Magazine 151
![Page 152: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/152.jpg)
1. Sketch screen layouts. 2. Scan or photograph the sketches.
3. Making sizing adjustments to the files.
Photo courtesy of Diego Pulido and UX Magazine
152
![Page 153: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/153.jpg)
4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly.
Photo courtesy of Diego Pulido and UX Magazine 153
![Page 154: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/154.jpg)
154
4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly.
5. Import the files into the mobile device’s photo gallery.
Photo courtesy of Diego Pulido and UX Magazine
![Page 155: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/155.jpg)
155
4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly.
5. Import the files into the mobile device’s photo gallery.
6. Click and swipe away.
Photo courtesy of Diego Pulido and UX Magazine
![Page 156: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/156.jpg)
156
ActivityYour Design Challenge!Create an in-screen prototype.
Hang your screen designs on the wall.
Photograph each design.
Transfer photos from the camera to computer and make any sizing adjustments.
Sync images to your mobile device and swipe away….
![Page 157: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/157.jpg)
Flash Prototype
Tactical Prototypes
In-Screen Mobile Prototypes
steal this slide!
Keynote/Powerpoint Prototypes
Mobile Browser Prototypes
Platform Specific Prototype
Sketching
157
![Page 158: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/158.jpg)
158
Paper Prototyping
![Page 159: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/159.jpg)
159
![Page 160: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/160.jpg)
160
Mobile Browser Prototypes
![Page 161: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/161.jpg)
161
Keynote/Powerpoint Prototypes
![Page 162: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/162.jpg)
162
![Page 163: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/163.jpg)
LOGOTagline
163Edit
![Page 164: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/164.jpg)
LOGOTagline
164Edit
Sydney Opera HouseThere is no doubt that the Sydney Opera House is his masterpiece. It is one of the great iconic buildings of the 20th century, an image of great beauty that has become known throughout the world – a symbol for not only a city, but a whole country and continent.
![Page 165: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/165.jpg)
LOGOTagline
165Edit
Sydney Opera HouseThere is no doubt that the Sydney Opera House is his masterpiece. It is one of the great iconic buildings of the 20th century, an image of great beauty that has become known throughout the world – a symbol for not only a city, but a whole country and continent.
![Page 166: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/166.jpg)
LOGOTagline
166Edit
Sydney Opera HouseThere is no doubt that the Sydney Opera House is his masterpiece. It is one of the great iconic buildings of the 20th century, an image of great beauty that has become known throughout the world – a symbol for not only a city, but a whole country and continent.
![Page 167: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/167.jpg)
LOGOTagline
167Edit
LOGOTagline
167Edit
Sydney Opera HouseThere is no doubt that the Sydney Opera House is his masterpiece. It is one of the great iconic buildings of the 20th century, an image of great beauty that has become known throughout the world – a symbol for not only a city, but a whole country and continent.
![Page 168: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/168.jpg)
LOGOTagline
168Edit
![Page 169: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/169.jpg)
Supports *some* gestures and transitions.
Reasons for Prototyping in Keynote/Powerpoint
steal this slide!
Level of fidelity is high – gives you an end result that looks and feels like a real app.
It’s as close as you can get to the real thing without digging into code.
It’s super efficient and fast!
169
![Page 170: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/170.jpg)
Supports *some* gestures and transitions.
Reasons for Prototyping in Keynote/Powerpoint
steal this slide!
Level of fidelity is high – gives you an end result that looks and feels like a real app.
It’s as close as you can get to the real thing without digging into code.
It’s super efficient and fast!
170
![Page 171: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/171.jpg)
Motion:New Design Material
171
![Page 172: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/172.jpg)
Animation & TransitionsA new design elements that can:
steal this slide!
Help users form a mental model of how information will “unfold”.
Help make your experience feel more intuitive for users.
Reinforce cognition.
Provide cues for interaction.
172
![Page 173: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/173.jpg)
Twelve Basic Principles of Animation
173
![Page 174: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/174.jpg)
Principle OneSquash and Stretch
174
![Page 175: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/175.jpg)
Principle OneSquash and Stretch
175
![Page 176: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/176.jpg)
Principle TwoAnticipation
176
![Page 177: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/177.jpg)
Principle TwoAnticipation
177
![Page 178: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/178.jpg)
Principle ThreeStaging
178
![Page 179: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/179.jpg)
Principle ThreeStaging
179
![Page 180: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/180.jpg)
Principle FourStraight Ahead and Pose to Pose
180
![Page 181: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/181.jpg)
Principle FourStraight Ahead and Pose to Pose
181
![Page 182: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/182.jpg)
Principle FiveFollow Throughand Overlapping Action
182
![Page 183: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/183.jpg)
183
Principle FiveFollow Throughand Overlapping Action
![Page 184: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/184.jpg)
Principle SixSlow in and Out
184
![Page 185: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/185.jpg)
Principle SixSlow in and Out
185
![Page 186: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/186.jpg)
Principle SevenArcs
186
![Page 187: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/187.jpg)
Principle SevenArcs
187
![Page 188: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/188.jpg)
Principle EightSecondary Action
188
![Page 189: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/189.jpg)
Principle EightSecondary Action
189
![Page 190: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/190.jpg)
Principle NineTiming
190
![Page 191: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/191.jpg)
Principle NineTiming
191
![Page 192: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/192.jpg)
Principle TenExaggeration
192
![Page 193: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/193.jpg)
Principle TenExaggeration
193
![Page 194: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/194.jpg)
Principle Eleven and TwelveSolid Drawing and Appeal
194
![Page 195: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/195.jpg)
195Sketches Courtesy of Greg NudelmenStoryboarding iPad Transitions
Specifying Transitions
![Page 196: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/196.jpg)
Transitions and AnimationMethods for specifying motion:
Build a prototype of key motion phrases using PowerPoint, Keynote or other prototyping tool.
Include specifications on wireframes.
196
Hand drawn sketches.
![Page 197: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/197.jpg)
197
Motion is an Art.There are no formulas.
![Page 198: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/198.jpg)
198
Fidelity
![Page 199: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/199.jpg)
199
Failure
![Page 200: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/200.jpg)
200
Prototyping is not a Panacea
![Page 201: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/201.jpg)
A
PC Prototypingis considered a Luxur
y
![Page 202: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/202.jpg)
A
Mobile Prototyping is
Essential
![Page 203: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/203.jpg)
Thank you!Email:[email protected]
Templates and Online Resources:www.rachelhinman.com/mobile_prototyping_essentials
![Page 204: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/204.jpg)
Oh! By the way, I’m writing a book..
The Mobile FrontierA Guide for Designing Mobile Experiences
Expected Publication: late 2011
Follow along…
![Page 205: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/205.jpg)
Q?
![Page 206: Mobile Prototyping Essentials](https://reader036.fdocuments.in/reader036/viewer/2022062901/58f9aa4d760da3da068b77a9/html5/thumbnails/206.jpg)
206
Different platforms express characteristics differently