SlideShare a Scribd company logo
1 of 135
Title Mobile Prototyping EssentialsWeb Directions Unplugged Rachel Hinman Senior Research Scientist   Nokia Research Lab  Palo Alto, California USA
I used to be a web designer, too
How can we streamline the checkout process What makes mobile UX different? Q: Q:
Where do I begin
Where do I begin “I would have made different choices.”
Where do I begin Key Difference =  Different Design Choices
Our plan for today… Our plan for today Identify where things usually go wrong during the mobile UX process
Our plan for today… Our plan for today Identify where things usually go wrong during the mobile UX process Review the four “whys” of prototyping
Our plan for today… Our plan for today Identify where things usually go wrong during the mobile UX process Review the four “whys” of prototyping Identify the two genres of mobile prototyping
Our plan for today… Our plan for today Identify where things usually go wrong during the mobile UX process Review the four “whys” of prototyping Identify the two genres of mobile prototyping Overview/how-to of six mobile prototyping methods
Along the way… Along the way Watch for slides with this orange label! Slides Worth Keeping Design Principles Design Activities Shameless Opinion
Okay, let’s get started! Okay… let’s get started
A What are the similarities
A What are the similarities
A What are the similarities
? 16 Web designers know how to work in a rapidly evolving field
17 Web designers know how to work in a rapidly evolving field
Bad Decision-Making 18 Web designers know how to work in a rapidly evolving field
The final diamond is where good design decisions matter most… 19
The final diamond is where good design decisions matter most… …and where designers new to mobile have the least domain specific skill and confidence. 20 Web designers know how to work in a rapidly evolving field
Prototype Prototype Prototype Prototype Prototype Prototype 21 Prototype
PC Prototypingis considered a   Luxury A Um… duh!
Mobile Prototyping is Essential A Um… duh!
24 Differences in the mobile environment Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input
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 25
Designers new to mobile don’t have the domain specific skills or heuristics to lean on. A Um… duh!
The best way to develop those skills is to prototype early and often. A Um… duh!
Prototypes are the ultimate  decision-making aid.  A Um… duh!
What we learned from the web steal this slide! “Whys” of prototyping Improve your design decision-making Communicate an Idea Gather User Feedback Explore the “Unknowns” Fine-tune an Idea
Communicating an Idea or Experience YouTube Video
Hypothesis vs. Agenda Gather User Feedback
Hypothesis vs. Agenda Exploring the Unknowns
Hypothesis vs. Agenda Fine-Tune an Idea
Two Genres 34 Web designers know how to work in a rapidly evolving field
Tactical Prototyping
Hypothesis vs. Agenda Experiential Prototyping
You are working on a “focused” mobile project. 1 Sympathy to context principles Tactical Prototyping: Best suited for design explorations where: steal this slide! 2 Target mobile hardware and software scope is known. 3 The design space is relatively known.
You are working on a “broader” mobile project. 1 Sympathy to context principles Experiential Prototyping: Best suited for design explorations where: steal this slide! 2 Target mobile hardware and software scope is unknown.(perhaps being created). 3 The design space is relatively unchartered.
Hypothesis vs. Agenda Tactical Prototyping
What we learned from the web steal this slide! Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype
What we learned from the web steal this slide! Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype
Hypothesis vs. Agenda Sketching
Hypothesis vs. Agenda Great Mobile UIs Speak their Power
Speak their power? Huh? Q: A
A light switch
Shopping cart 46
Shopping cart 47
We can annotate expectations in the web world 48 We can annotate expectations in the web world
We can annotate expectations in the web world Free two-day shipping Look inside the book REALLY!Look inside the book Get it new OR used! Sell mine Add to cart Shipping! Collectible! Maybe a kindle!
Options have to be apparent and intuitive in mobile for people to
51 Text entry will never be easy Design for partial attention and interruption
How do you make interfaces that speak their power How do I create mobile interfaces that “speak their power”? Q: A
Edit!!! 53 Web designers know how to work in a rapidly evolving field
RuthlessEditing 54 Web designers know how to work in a rapidly evolving field
Each card speaks it’s power 55 It’s like a game of cards
Let the Content be the Star 56 It’s like a game of cards
Pivoting people through information 57
Pivoting people through information Claiming you can’t draw get’s you labeled a “whiner” 58
What we learned from the web steal this slide! Tips for Ruthless Editing What’s the primary purpose of this screen? What are the 3-5 secondary actions this screen must support? What is the most intuitive way to visualize this information? Will users know how to interact with the screen within three seconds? Is the information on this screen too dense? What can be removed?
Paper In-Screen Prototypes Following Process documented by Diego Pulidovia UX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine 60 http://www.uxmag.com/design/paper-in-screen-prototyping
Paper Prototype example 1. Sketch screen layouts.       61 Photo courtesy of Diego Pulido and UX Magazine
Paper Prototype example 1. Sketch screen layouts.    2. Scan or photograph      the sketches.     	 62 Photo courtesy of Diego Pulido and UX Magazine
Paper Prototype example 1. Sketch screen layouts.    2. Scan or photograph      the sketches.  3. Making sizing     adjustments to the     files.         63 Photo courtesy of Diego Pulido and UX Magazine
Paper Prototype example  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.       64 Photo courtesy of Diego Pulido and UX Magazine
 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.           65 Photo courtesy of Diego Pulido and UX Magazine
Paper Prototype example 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.            66 Photo courtesy of Diego Pulido and UX Magazine
Paper Prototype example Paper Prototyping 67
68
Paper Prototype example Mobile Browser Prototypes 69
Paper Prototype example Keynote/Powerpoint Prototypes 70
Paper Prototype example 71
What we learned from the web steal this slide! Reasons for Prototyping in Keynote/Powerpoint It’s super efficient and fast! Level of fidelity is high – gives you an end result that looks and feels like a real app. Supports *some* gestures and transitions. It’s as close as you can get to the real thing without digging into code.
What we learned from the web steal this slide! Reasons for Prototyping in Keynote/Powerpoint It’s super efficient and fast! Level of fidelity is high – gives you an end result that looks and feels like a real app. Supports *some* gestures and transitions. It’s as close as you can get to the real thing without digging into code.
Paper Prototype example SCROLL GUI = “Desktop” and “Pages” as Anchors 74
NUIs Can Feel Anchor-less 75
Paper Prototype example [ ] + = 76
Paper Prototype example = 77
What we learned from the web Animation & TransitionsA new design elements that can: steal this slide! Reinforce cognition. Help users form a mental model of how information will “unfold”. Provide cues for interaction. Help make your experience feel more intuitive for users.
Paper Prototype example 79
Practice 80
How to prototype interactive iPad applications in 30 minutes or less using Apple KeynoteBy Amir Khella Photo courtesy of Amir Khella 81
Hypothesis vs. Agenda Experiential Prototyping
83 Context Framework Context Framework steal this slide!
84 Context Framework Context Framework steal this slide!
85 Relationships Chording Orchestration and Inflection
You are working on a “broader” mobile project. 1 Sympathy to context principles Experiential Prototyping: Best suited for design explorations where: steal this slide! 2 Target mobile hardware and software scope is unknown.(perhaps being created). 3 The design space is relatively unchartered.
What we learned from the web Experiential Prototypes Storyboarding Body Storming Speed Dating Prototypes Concept Videos
Paper Prototype example Storyboarding 88
89 “in the wild” ideation
What we learned from the web Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate.
What we learned from the web Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate.  Create a character and identify the key issues he/she currently faces.
What we learned from the web Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate.  Create a character and identify the key issues he/she currently faces.  Rough out the basic story
What we learned from the web Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate.  Create a character and identify the key issues he/she currently faces.  Rough out the basic story  Start filling in the cells. Rough out the complete story, then fill in details.
What we learned from the web Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate.  Create a character and identify the key issues he/she currently faces.  Rough out the basic story  Start filling in the cells. Rough out the complete story, then fill in details.
Paper Prototype example 95
Paper Prototype example 96
Paper Prototype example Bodystorming 97
Through Lines Company Secret © 2010  Nokia   August 2010	Hinman 98
In reality… people’s lives are messy
Paper Prototype example 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. 104
Select groups of five to eight participants in a troupe.  Photo by Christian Crumlish (xian), 2009 on Flickr 105
Paper Prototype example Select groups of five to eight participants in a troupe.  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 106
Paper Prototype example 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.   107 Photo by Christian Crumlish (xian), 2009 on Flickr
Paper Prototype example  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 108
Paper Prototype example 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 109
Paper Prototype example 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 110
Paper Prototype example Design in Context 111
Paper Prototype example Speed Dating Prototypes Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 112
Paper Prototype example Scott Davidoff of CMU ,[object Object]
High Cost of Failure
Unpredictable social        consequencesRapidly Exploring Application Design through Speed Dating 113
Speed Dating Prototypes Builds on three theories: Abundance brings perspective. 1 Sympathy to context principles 2 Need to cross boundaries to know they exist. 3 Multiple low-cost engagements with multiple concepts enables a broader perspective to emerge.
115 “in the wild” ideation
Paper Prototype example 1. Need Validation Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 116
Paper Prototype example 1. Need Validation 117
Paper Prototype example 2. User Enactments Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 118
Paper Prototype example 2. User Enactments Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 119
Paper Prototype example Concept Videos Nokia 888 communicator concept phone design by Tamer Nakisci 120
Paper Prototype example 121
Paper Prototype example 122
Paper Prototype example Concept Videos Pros ,[object Object]
Highly Shareable
Good for High-Level  Ideas
Technology still in  development 123
Paper Prototype example Concept Videos Pros Cons ,[object Object]
Highly Shareable
Good for High-Level  Ideas
Technology still in  development
Resource Intensive!!!
Skill intensive
Cultural Fit

More Related Content

What's hot

User Story Mapping for Minimum Lovable Products
User Story Mapping for Minimum Lovable ProductsUser Story Mapping for Minimum Lovable Products
User Story Mapping for Minimum Lovable Productsuxpin
 
Best Practices From 10 Years of Remote Research
Best Practices From 10 Years of Remote ResearchBest Practices From 10 Years of Remote Research
Best Practices From 10 Years of Remote Researchuxpin
 
Mural: Build Experiences Not Features
Mural: Build Experiences Not FeaturesMural: Build Experiences Not Features
Mural: Build Experiences Not FeaturesJohn Murray
 
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...uxpin
 
Creating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design SystemCreating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design Systemuxpin
 
How to prototype like a pro
How to prototype like a proHow to prototype like a pro
How to prototype like a proAmir Khella
 
UCLA Anderson Design Thinking Workshop
UCLA Anderson Design Thinking WorkshopUCLA Anderson Design Thinking Workshop
UCLA Anderson Design Thinking WorkshopSkot Carruth
 
Use Lean Startup Techniques on a Remote Team by William Donnell - The Lean St...
Use Lean Startup Techniques on a Remote Team by William Donnell - The Lean St...Use Lean Startup Techniques on a Remote Team by William Donnell - The Lean St...
Use Lean Startup Techniques on a Remote Team by William Donnell - The Lean St...Lean Startup Co.
 
Adapting Designers' tools, methodologies for the future
Adapting Designers' tools, methodologies for the futureAdapting Designers' tools, methodologies for the future
Adapting Designers' tools, methodologies for the futureAriana Koblitz
 
Design Systems: Parts, Products & People
Design Systems: Parts, Products & PeopleDesign Systems: Parts, Products & People
Design Systems: Parts, Products & Peoplenathanacurtis
 
Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...John Murray
 
Building a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case StudyBuilding a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case Studyuxpin
 
Carmen Brion - The value for product teams to design think
Carmen Brion - The value for product teams to design thinkCarmen Brion - The value for product teams to design think
Carmen Brion - The value for product teams to design thinkuxbri
 
The Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case StudyThe Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case Studyuxpin
 
Maximizing the impact of UX in an agile environment: Mixing agile and Lean UX
Maximizing the impact of UX in an agile environment: Mixing agile and Lean UXMaximizing the impact of UX in an agile environment: Mixing agile and Lean UX
Maximizing the impact of UX in an agile environment: Mixing agile and Lean UXJohn Whalen
 
Information Architecture Heuristics
Information Architecture HeuristicsInformation Architecture Heuristics
Information Architecture HeuristicsAbby Covert
 
Beyond Staggered Sprints: Integrating User Experience and Agile
Beyond Staggered Sprints: Integrating User Experience and AgileBeyond Staggered Sprints: Integrating User Experience and Agile
Beyond Staggered Sprints: Integrating User Experience and AgileJeff Gothelf
 

What's hot (20)

User Story Mapping for Minimum Lovable Products
User Story Mapping for Minimum Lovable ProductsUser Story Mapping for Minimum Lovable Products
User Story Mapping for Minimum Lovable Products
 
Best Practices From 10 Years of Remote Research
Best Practices From 10 Years of Remote ResearchBest Practices From 10 Years of Remote Research
Best Practices From 10 Years of Remote Research
 
Mural: Build Experiences Not Features
Mural: Build Experiences Not FeaturesMural: Build Experiences Not Features
Mural: Build Experiences Not Features
 
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
 
Creating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design SystemCreating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design System
 
Lean UX
Lean UXLean UX
Lean UX
 
How to prototype like a pro
How to prototype like a proHow to prototype like a pro
How to prototype like a pro
 
UCLA Anderson Design Thinking Workshop
UCLA Anderson Design Thinking WorkshopUCLA Anderson Design Thinking Workshop
UCLA Anderson Design Thinking Workshop
 
Use Lean Startup Techniques on a Remote Team by William Donnell - The Lean St...
Use Lean Startup Techniques on a Remote Team by William Donnell - The Lean St...Use Lean Startup Techniques on a Remote Team by William Donnell - The Lean St...
Use Lean Startup Techniques on a Remote Team by William Donnell - The Lean St...
 
Adapting Designers' tools, methodologies for the future
Adapting Designers' tools, methodologies for the futureAdapting Designers' tools, methodologies for the future
Adapting Designers' tools, methodologies for the future
 
Design Systems: Parts, Products & People
Design Systems: Parts, Products & PeopleDesign Systems: Parts, Products & People
Design Systems: Parts, Products & People
 
Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...
 
Building a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case StudyBuilding a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case Study
 
Carmen Brion - The value for product teams to design think
Carmen Brion - The value for product teams to design thinkCarmen Brion - The value for product teams to design think
Carmen Brion - The value for product teams to design think
 
The Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case StudyThe Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case Study
 
LeanUX - Presentation slides
LeanUX - Presentation slidesLeanUX - Presentation slides
LeanUX - Presentation slides
 
Maximizing the impact of UX in an agile environment: Mixing agile and Lean UX
Maximizing the impact of UX in an agile environment: Mixing agile and Lean UXMaximizing the impact of UX in an agile environment: Mixing agile and Lean UX
Maximizing the impact of UX in an agile environment: Mixing agile and Lean UX
 
Information Architecture Heuristics
Information Architecture HeuristicsInformation Architecture Heuristics
Information Architecture Heuristics
 
Fast Food Design
Fast Food DesignFast Food Design
Fast Food Design
 
Beyond Staggered Sprints: Integrating User Experience and Agile
Beyond Staggered Sprints: Integrating User Experience and AgileBeyond Staggered Sprints: Integrating User Experience and Agile
Beyond Staggered Sprints: Integrating User Experience and Agile
 

Viewers also liked

Anatomy of shoulder joint - vamshi kiran
Anatomy of shoulder joint - vamshi kiranAnatomy of shoulder joint - vamshi kiran
Anatomy of shoulder joint - vamshi kiranbadamvamshikiran
 
Mecanismos de lesión
Mecanismos de lesiónMecanismos de lesión
Mecanismos de lesiónHeron Ramirez
 
Corporate Governance
Corporate GovernanceCorporate Governance
Corporate GovernanceAliza Racelis
 
Music Recommendation Tutorial
Music Recommendation TutorialMusic Recommendation Tutorial
Music Recommendation TutorialOscar Celma
 
Political Development of the Philippine Government
Political Development of the Philippine GovernmentPolitical Development of the Philippine Government
Political Development of the Philippine GovernmentJheng Reyes
 
The New Multiscreen World By Google
The New Multiscreen World By GoogleThe New Multiscreen World By Google
The New Multiscreen World By Googleservicesmobiles.fr
 
Assembly language 8086
Assembly language 8086Assembly language 8086
Assembly language 8086John Cutajar
 
Gallery of Great LinkedIn Sponsored Updates
Gallery of Great LinkedIn Sponsored UpdatesGallery of Great LinkedIn Sponsored Updates
Gallery of Great LinkedIn Sponsored UpdatesLinkedIn
 
Hiv recent guidelines naco 2015
Hiv recent guidelines naco 2015Hiv recent guidelines naco 2015
Hiv recent guidelines naco 2015Mehakinder Singh
 
Environmental Impact Assessment (EIA) report on Rampal 1320MW coal-based powe...
Environmental Impact Assessment (EIA) report on Rampal 1320MW coal-based powe...Environmental Impact Assessment (EIA) report on Rampal 1320MW coal-based powe...
Environmental Impact Assessment (EIA) report on Rampal 1320MW coal-based powe...Probir Bidhan
 
Personal SWOT for Teachers
Personal SWOT for TeachersPersonal SWOT for Teachers
Personal SWOT for Teachersm nagaRAJU
 
Journalising- easy way to learn journal entries for beginners in Accounting S...
Journalising- easy way to learn journal entries for beginners in Accounting S...Journalising- easy way to learn journal entries for beginners in Accounting S...
Journalising- easy way to learn journal entries for beginners in Accounting S...Sarat Kumar Budumuru
 
Importance of antenatal care
Importance of antenatal careImportance of antenatal care
Importance of antenatal careAbir Chowdhury
 
Muslim Contribution to Science
Muslim Contribution to ScienceMuslim Contribution to Science
Muslim Contribution to Sciencetrkyem
 
From the Semantic Web to the Web of Data: ten years of linking up
From the Semantic Web to the Web of Data: ten years of linking upFrom the Semantic Web to the Web of Data: ten years of linking up
From the Semantic Web to the Web of Data: ten years of linking upDavide Palmisano
 
Social Media Crisis Management: Three Case Studies
Social Media Crisis Management: Three Case StudiesSocial Media Crisis Management: Three Case Studies
Social Media Crisis Management: Three Case StudiesElisha Tan
 
Steam Reforming - Practical Operations
Steam Reforming - Practical OperationsSteam Reforming - Practical Operations
Steam Reforming - Practical OperationsGerard B. Hawkins
 
Social Network Analysis & an Introduction to Tools
Social Network Analysis & an Introduction to ToolsSocial Network Analysis & an Introduction to Tools
Social Network Analysis & an Introduction to ToolsPatti Anklam
 
Fracking The Social Web - 2014
Fracking The Social Web - 2014Fracking The Social Web - 2014
Fracking The Social Web - 2014John V Willshire
 

Viewers also liked (20)

Anatomy of shoulder joint - vamshi kiran
Anatomy of shoulder joint - vamshi kiranAnatomy of shoulder joint - vamshi kiran
Anatomy of shoulder joint - vamshi kiran
 
Mecanismos de lesión
Mecanismos de lesiónMecanismos de lesión
Mecanismos de lesión
 
Corporate Governance
Corporate GovernanceCorporate Governance
Corporate Governance
 
Music Recommendation Tutorial
Music Recommendation TutorialMusic Recommendation Tutorial
Music Recommendation Tutorial
 
Political Development of the Philippine Government
Political Development of the Philippine GovernmentPolitical Development of the Philippine Government
Political Development of the Philippine Government
 
Real Estate Listing Presentation
Real Estate Listing PresentationReal Estate Listing Presentation
Real Estate Listing Presentation
 
The New Multiscreen World By Google
The New Multiscreen World By GoogleThe New Multiscreen World By Google
The New Multiscreen World By Google
 
Assembly language 8086
Assembly language 8086Assembly language 8086
Assembly language 8086
 
Gallery of Great LinkedIn Sponsored Updates
Gallery of Great LinkedIn Sponsored UpdatesGallery of Great LinkedIn Sponsored Updates
Gallery of Great LinkedIn Sponsored Updates
 
Hiv recent guidelines naco 2015
Hiv recent guidelines naco 2015Hiv recent guidelines naco 2015
Hiv recent guidelines naco 2015
 
Environmental Impact Assessment (EIA) report on Rampal 1320MW coal-based powe...
Environmental Impact Assessment (EIA) report on Rampal 1320MW coal-based powe...Environmental Impact Assessment (EIA) report on Rampal 1320MW coal-based powe...
Environmental Impact Assessment (EIA) report on Rampal 1320MW coal-based powe...
 
Personal SWOT for Teachers
Personal SWOT for TeachersPersonal SWOT for Teachers
Personal SWOT for Teachers
 
Journalising- easy way to learn journal entries for beginners in Accounting S...
Journalising- easy way to learn journal entries for beginners in Accounting S...Journalising- easy way to learn journal entries for beginners in Accounting S...
Journalising- easy way to learn journal entries for beginners in Accounting S...
 
Importance of antenatal care
Importance of antenatal careImportance of antenatal care
Importance of antenatal care
 
Muslim Contribution to Science
Muslim Contribution to ScienceMuslim Contribution to Science
Muslim Contribution to Science
 
From the Semantic Web to the Web of Data: ten years of linking up
From the Semantic Web to the Web of Data: ten years of linking upFrom the Semantic Web to the Web of Data: ten years of linking up
From the Semantic Web to the Web of Data: ten years of linking up
 
Social Media Crisis Management: Three Case Studies
Social Media Crisis Management: Three Case StudiesSocial Media Crisis Management: Three Case Studies
Social Media Crisis Management: Three Case Studies
 
Steam Reforming - Practical Operations
Steam Reforming - Practical OperationsSteam Reforming - Practical Operations
Steam Reforming - Practical Operations
 
Social Network Analysis & an Introduction to Tools
Social Network Analysis & an Introduction to ToolsSocial Network Analysis & an Introduction to Tools
Social Network Analysis & an Introduction to Tools
 
Fracking The Social Web - 2014
Fracking The Social Web - 2014Fracking The Social Web - 2014
Fracking The Social Web - 2014
 

Similar to Mobile Prototyping Essentials

Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping EssentialsRachel Hinman
 
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper PrototypingAPIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper PrototypingEuropean Innovation Academy
 
Human Computer Interaction: Academia and Industry
Human Computer Interaction: Academia and IndustryHuman Computer Interaction: Academia and Industry
Human Computer Interaction: Academia and Industrystudiotelon
 
Mobile UX Essentials
Mobile UX EssentialsMobile UX Essentials
Mobile UX EssentialsRachel Hinman
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesomeJen Yu
 
Rapid Product Design in the Wild
Rapid Product Design in the WildRapid Product Design in the Wild
Rapid Product Design in the WildMichele Ide-Smith
 
Design in Startups
Design in StartupsDesign in Startups
Design in StartupsALPHA Camp
 
UX Beers - A Story about product management at uman.ai - Jasper Verplanken
UX Beers - A Story about product management at uman.ai - Jasper VerplankenUX Beers - A Story about product management at uman.ai - Jasper Verplanken
UX Beers - A Story about product management at uman.ai - Jasper VerplankenUX Antwerp Meetup
 
Wireframe and prototyping google Campus talk by Zoe Guiraudon
Wireframe and prototyping google Campus talk by Zoe GuiraudonWireframe and prototyping google Campus talk by Zoe Guiraudon
Wireframe and prototyping google Campus talk by Zoe GuiraudonZoé Guiraudon
 
Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora Designing for Multiple Devices - Sarit Arora
Designing for Multiple Devices - Sarit AroraSTC India UX SIG
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your ProjectsKarl Kaufmann
 
UX South Africa 2014 - Keynote
UX South Africa 2014 - KeynoteUX South Africa 2014 - Keynote
UX South Africa 2014 - KeynotePhil Barrett
 
UX, Agile and product management
UX, Agile and product managementUX, Agile and product management
UX, Agile and product managementPhil Barrett
 
How to build a kick-ass mobile experience
How to build a kick-ass mobile experienceHow to build a kick-ass mobile experience
How to build a kick-ass mobile experienceMichael Dick
 
EPFL - PxS, week 4 - UX design techniques
EPFL - PxS, week 4 - UX design techniquesEPFL - PxS, week 4 - UX design techniques
EPFL - PxS, week 4 - UX design techniqueshendrikknoche
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototypingMarcelo Graciolli
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?Marc Miquel
 
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface DesignA Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface DesignHoltstrom
 
Design Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeDesign Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeGessica Puri
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User InterfacesFreerange Future
 

Similar to Mobile Prototyping Essentials (20)

Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
 
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper PrototypingAPIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
 
Human Computer Interaction: Academia and Industry
Human Computer Interaction: Academia and IndustryHuman Computer Interaction: Academia and Industry
Human Computer Interaction: Academia and Industry
 
Mobile UX Essentials
Mobile UX EssentialsMobile UX Essentials
Mobile UX Essentials
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesome
 
Rapid Product Design in the Wild
Rapid Product Design in the WildRapid Product Design in the Wild
Rapid Product Design in the Wild
 
Design in Startups
Design in StartupsDesign in Startups
Design in Startups
 
UX Beers - A Story about product management at uman.ai - Jasper Verplanken
UX Beers - A Story about product management at uman.ai - Jasper VerplankenUX Beers - A Story about product management at uman.ai - Jasper Verplanken
UX Beers - A Story about product management at uman.ai - Jasper Verplanken
 
Wireframe and prototyping google Campus talk by Zoe Guiraudon
Wireframe and prototyping google Campus talk by Zoe GuiraudonWireframe and prototyping google Campus talk by Zoe Guiraudon
Wireframe and prototyping google Campus talk by Zoe Guiraudon
 
Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora Designing for Multiple Devices - Sarit Arora
Designing for Multiple Devices - Sarit Arora
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your Projects
 
UX South Africa 2014 - Keynote
UX South Africa 2014 - KeynoteUX South Africa 2014 - Keynote
UX South Africa 2014 - Keynote
 
UX, Agile and product management
UX, Agile and product managementUX, Agile and product management
UX, Agile and product management
 
How to build a kick-ass mobile experience
How to build a kick-ass mobile experienceHow to build a kick-ass mobile experience
How to build a kick-ass mobile experience
 
EPFL - PxS, week 4 - UX design techniques
EPFL - PxS, week 4 - UX design techniquesEPFL - PxS, week 4 - UX design techniques
EPFL - PxS, week 4 - UX design techniques
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototyping
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?
 
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface DesignA Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
 
Design Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeDesign Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: Wireframe
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
 

More from Rachel Hinman

Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2Rachel Hinman
 
Mobile Prototyping Essentials Workshop: Part 1
Mobile Prototyping Essentials Workshop: Part 1Mobile Prototyping Essentials Workshop: Part 1
Mobile Prototyping Essentials Workshop: Part 1Rachel Hinman
 
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part IIMobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part IIRachel Hinman
 
Mobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part OneMobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part OneRachel Hinman
 
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontierFinal virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontierRachel Hinman
 
Technology as a Cultural Practice - UX Australia
Technology as a Cultural Practice - UX AustraliaTechnology as a Cultural Practice - UX Australia
Technology as a Cultural Practice - UX AustraliaRachel Hinman
 
Technology as a Cultural Practice
Technology as a Cultural PracticeTechnology as a Cultural Practice
Technology as a Cultural PracticeRachel Hinman
 
They Call it Surfing for a Reason
They Call it Surfing for a ReasonThey Call it Surfing for a Reason
They Call it Surfing for a ReasonRachel Hinman
 

More from Rachel Hinman (9)

Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2
 
Mobile Prototyping Essentials Workshop: Part 1
Mobile Prototyping Essentials Workshop: Part 1Mobile Prototyping Essentials Workshop: Part 1
Mobile Prototyping Essentials Workshop: Part 1
 
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part IIMobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
 
Mobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part OneMobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part One
 
Final virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontierFinal virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
 
The Mobile Frontier
The Mobile FrontierThe Mobile Frontier
The Mobile Frontier
 
Technology as a Cultural Practice - UX Australia
Technology as a Cultural Practice - UX AustraliaTechnology as a Cultural Practice - UX Australia
Technology as a Cultural Practice - UX Australia
 
Technology as a Cultural Practice
Technology as a Cultural PracticeTechnology as a Cultural Practice
Technology as a Cultural Practice
 
They Call it Surfing for a Reason
They Call it Surfing for a ReasonThey Call it Surfing for a Reason
They Call it Surfing for a Reason
 

Recently uploaded

Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一Fi sss
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一F dds
 
办理澳大利亚国立大学毕业证ANU毕业证留信学历认证
办理澳大利亚国立大学毕业证ANU毕业证留信学历认证办理澳大利亚国立大学毕业证ANU毕业证留信学历认证
办理澳大利亚国立大学毕业证ANU毕业证留信学历认证jdkhjh
 
Apresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoApresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoCarolTelles6
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social MediaD SSS
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Yantram Animation Studio Corporation
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdfvaibhavkanaujia
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfShivakumar Viswanathan
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Servicejennyeacort
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfworkingdev2003
 
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一D SSS
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Nightssuser7cb4ff
 
Chapter 6(1)system devolopment life .ppt
Chapter 6(1)system devolopment life .pptChapter 6(1)system devolopment life .ppt
Chapter 6(1)system devolopment life .pptDoaaRezk5
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改yuu sss
 

Recently uploaded (20)

Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
 
办理澳大利亚国立大学毕业证ANU毕业证留信学历认证
办理澳大利亚国立大学毕业证ANU毕业证留信学历认证办理澳大利亚国立大学毕业证ANU毕业证留信学历认证
办理澳大利亚国立大学毕业证ANU毕业证留信学历认证
 
Apresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoApresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus Rizzo
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdf
 
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
 
Chapter 6(1)system devolopment life .ppt
Chapter 6(1)system devolopment life .pptChapter 6(1)system devolopment life .ppt
Chapter 6(1)system devolopment life .ppt
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
 

Mobile Prototyping Essentials

  • 1. Title Mobile Prototyping EssentialsWeb Directions Unplugged Rachel Hinman Senior Research Scientist Nokia Research Lab Palo Alto, California USA
  • 2. I used to be a web designer, too
  • 3. How can we streamline the checkout process What makes mobile UX different? Q: Q:
  • 4. Where do I begin
  • 5. Where do I begin “I would have made different choices.”
  • 6. Where do I begin Key Difference = Different Design Choices
  • 7. Our plan for today… Our plan for today Identify where things usually go wrong during the mobile UX process
  • 8. Our plan for today… Our plan for today Identify where things usually go wrong during the mobile UX process Review the four “whys” of prototyping
  • 9. Our plan for today… Our plan for today Identify where things usually go wrong during the mobile UX process Review the four “whys” of prototyping Identify the two genres of mobile prototyping
  • 10. Our plan for today… Our plan for today Identify where things usually go wrong during the mobile UX process Review the four “whys” of prototyping Identify the two genres of mobile prototyping Overview/how-to of six mobile prototyping methods
  • 11. Along the way… Along the way Watch for slides with this orange label! Slides Worth Keeping Design Principles Design Activities Shameless Opinion
  • 12. Okay, let’s get started! Okay… let’s get started
  • 13. A What are the similarities
  • 14. A What are the similarities
  • 15. A What are the similarities
  • 16. ? 16 Web designers know how to work in a rapidly evolving field
  • 17. 17 Web designers know how to work in a rapidly evolving field
  • 18. Bad Decision-Making 18 Web designers know how to work in a rapidly evolving field
  • 19. The final diamond is where good design decisions matter most… 19
  • 20. The final diamond is where good design decisions matter most… …and where designers new to mobile have the least domain specific skill and confidence. 20 Web designers know how to work in a rapidly evolving field
  • 21. Prototype Prototype Prototype Prototype Prototype Prototype 21 Prototype
  • 22. PC Prototypingis considered a Luxury A Um… duh!
  • 23. Mobile Prototyping is Essential A Um… duh!
  • 24. 24 Differences in the mobile environment Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input
  • 25. 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 25
  • 26. Designers new to mobile don’t have the domain specific skills or heuristics to lean on. A Um… duh!
  • 27. The best way to develop those skills is to prototype early and often. A Um… duh!
  • 28. Prototypes are the ultimate decision-making aid. A Um… duh!
  • 29. What we learned from the web steal this slide! “Whys” of prototyping Improve your design decision-making Communicate an Idea Gather User Feedback Explore the “Unknowns” Fine-tune an Idea
  • 30. Communicating an Idea or Experience YouTube Video
  • 31. Hypothesis vs. Agenda Gather User Feedback
  • 32. Hypothesis vs. Agenda Exploring the Unknowns
  • 33. Hypothesis vs. Agenda Fine-Tune an Idea
  • 34. Two Genres 34 Web designers know how to work in a rapidly evolving field
  • 36. Hypothesis vs. Agenda Experiential Prototyping
  • 37. You are working on a “focused” mobile project. 1 Sympathy to context principles Tactical Prototyping: Best suited for design explorations where: steal this slide! 2 Target mobile hardware and software scope is known. 3 The design space is relatively known.
  • 38. You are working on a “broader” mobile project. 1 Sympathy to context principles Experiential Prototyping: Best suited for design explorations where: steal this slide! 2 Target mobile hardware and software scope is unknown.(perhaps being created). 3 The design space is relatively unchartered.
  • 39. Hypothesis vs. Agenda Tactical Prototyping
  • 40. What we learned from the web steal this slide! Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype
  • 41. What we learned from the web steal this slide! Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype
  • 43. Hypothesis vs. Agenda Great Mobile UIs Speak their Power
  • 44. Speak their power? Huh? Q: A
  • 48. We can annotate expectations in the web world 48 We can annotate expectations in the web world
  • 49. We can annotate expectations in the web world Free two-day shipping Look inside the book REALLY!Look inside the book Get it new OR used! Sell mine Add to cart Shipping! Collectible! Maybe a kindle!
  • 50. Options have to be apparent and intuitive in mobile for people to
  • 51. 51 Text entry will never be easy Design for partial attention and interruption
  • 52. How do you make interfaces that speak their power How do I create mobile interfaces that “speak their power”? Q: A
  • 53. Edit!!! 53 Web designers know how to work in a rapidly evolving field
  • 54. RuthlessEditing 54 Web designers know how to work in a rapidly evolving field
  • 55. Each card speaks it’s power 55 It’s like a game of cards
  • 56. Let the Content be the Star 56 It’s like a game of cards
  • 57. Pivoting people through information 57
  • 58. Pivoting people through information Claiming you can’t draw get’s you labeled a “whiner” 58
  • 59. What we learned from the web steal this slide! Tips for Ruthless Editing What’s the primary purpose of this screen? What are the 3-5 secondary actions this screen must support? What is the most intuitive way to visualize this information? Will users know how to interact with the screen within three seconds? Is the information on this screen too dense? What can be removed?
  • 60. Paper In-Screen Prototypes Following Process documented by Diego Pulidovia UX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine 60 http://www.uxmag.com/design/paper-in-screen-prototyping
  • 61. Paper Prototype example 1. Sketch screen layouts.      61 Photo courtesy of Diego Pulido and UX Magazine
  • 62. Paper Prototype example 1. Sketch screen layouts.   2. Scan or photograph the sketches.     62 Photo courtesy of Diego Pulido and UX Magazine
  • 63. Paper Prototype example 1. Sketch screen layouts.   2. Scan or photograph the sketches. 3. Making sizing adjustments to the files.         63 Photo courtesy of Diego Pulido and UX Magazine
  • 64. Paper Prototype example  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.       64 Photo courtesy of Diego Pulido and UX Magazine
  • 65.  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.          65 Photo courtesy of Diego Pulido and UX Magazine
  • 66. Paper Prototype example 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.           66 Photo courtesy of Diego Pulido and UX Magazine
  • 67. Paper Prototype example Paper Prototyping 67
  • 68. 68
  • 69. Paper Prototype example Mobile Browser Prototypes 69
  • 70. Paper Prototype example Keynote/Powerpoint Prototypes 70
  • 72. What we learned from the web steal this slide! Reasons for Prototyping in Keynote/Powerpoint It’s super efficient and fast! Level of fidelity is high – gives you an end result that looks and feels like a real app. Supports *some* gestures and transitions. It’s as close as you can get to the real thing without digging into code.
  • 73. What we learned from the web steal this slide! Reasons for Prototyping in Keynote/Powerpoint It’s super efficient and fast! Level of fidelity is high – gives you an end result that looks and feels like a real app. Supports *some* gestures and transitions. It’s as close as you can get to the real thing without digging into code.
  • 74. Paper Prototype example SCROLL GUI = “Desktop” and “Pages” as Anchors 74
  • 75. NUIs Can Feel Anchor-less 75
  • 78. What we learned from the web Animation & TransitionsA new design elements that can: steal this slide! Reinforce cognition. Help users form a mental model of how information will “unfold”. Provide cues for interaction. Help make your experience feel more intuitive for users.
  • 81. How to prototype interactive iPad applications in 30 minutes or less using Apple KeynoteBy Amir Khella Photo courtesy of Amir Khella 81
  • 82. Hypothesis vs. Agenda Experiential Prototyping
  • 83. 83 Context Framework Context Framework steal this slide!
  • 84. 84 Context Framework Context Framework steal this slide!
  • 85. 85 Relationships Chording Orchestration and Inflection
  • 86. You are working on a “broader” mobile project. 1 Sympathy to context principles Experiential Prototyping: Best suited for design explorations where: steal this slide! 2 Target mobile hardware and software scope is unknown.(perhaps being created). 3 The design space is relatively unchartered.
  • 87. What we learned from the web Experiential Prototypes Storyboarding Body Storming Speed Dating Prototypes Concept Videos
  • 88. Paper Prototype example Storyboarding 88
  • 89. 89 “in the wild” ideation
  • 90. What we learned from the web Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate.
  • 91. What we learned from the web Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces.
  • 92. What we learned from the web Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces. Rough out the basic story
  • 93. What we learned from the web Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces. Rough out the basic story Start filling in the cells. Rough out the complete story, then fill in details.
  • 94. What we learned from the web Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces. Rough out the basic story Start filling in the cells. Rough out the complete story, then fill in details.
  • 97. Paper Prototype example Bodystorming 97
  • 98. Through Lines Company Secret © 2010 Nokia August 2010 Hinman 98
  • 99.
  • 100.
  • 101.
  • 102.
  • 103. In reality… people’s lives are messy
  • 104. Paper Prototype example 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. 104
  • 105. Select groups of five to eight participants in a troupe. Photo by Christian Crumlish (xian), 2009 on Flickr 105
  • 106. Paper Prototype example Select groups of five to eight participants in a troupe. 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 106
  • 107. Paper Prototype example 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.   107 Photo by Christian Crumlish (xian), 2009 on Flickr
  • 108. Paper Prototype example  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 108
  • 109. Paper Prototype example 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 109
  • 110. Paper Prototype example 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 110
  • 111. Paper Prototype example Design in Context 111
  • 112. Paper Prototype example Speed Dating Prototypes Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 112
  • 113.
  • 114. High Cost of Failure
  • 115. Unpredictable social consequencesRapidly Exploring Application Design through Speed Dating 113
  • 116. Speed Dating Prototypes Builds on three theories: Abundance brings perspective. 1 Sympathy to context principles 2 Need to cross boundaries to know they exist. 3 Multiple low-cost engagements with multiple concepts enables a broader perspective to emerge.
  • 117. 115 “in the wild” ideation
  • 118. Paper Prototype example 1. Need Validation Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 116
  • 119. Paper Prototype example 1. Need Validation 117
  • 120. Paper Prototype example 2. User Enactments Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 118
  • 121. Paper Prototype example 2. User Enactments Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 119
  • 122. Paper Prototype example Concept Videos Nokia 888 communicator concept phone design by Tamer Nakisci 120
  • 125.
  • 128. Technology still in development 123
  • 129.
  • 132. Technology still in development
  • 136. Concept videos don’t make bad ideas good.124
  • 137. Paper Prototype example Things to remember… 125
  • 138. Paper Prototype example Fidelity 126
  • 139. Paper Prototype example Failure 127
  • 140. Paper Prototype example Prototyping is not a Panacea 128
  • 141. Our plan for today… Our plan for today Identify where things usually go wrong during the mobile UX process Review the four “whys” of prototyping Identify the two genres of mobile prototyping Overview/how-to of six mobile prototyping methods
  • 142. PC Prototypingis considered a Luxury A Um… duh!
  • 143. Mobile Prototyping is Essential A Um… duh!
  • 144. Good luck Good luck!
  • 145. Thanks, and next up… Thank you! Email: rachel.hinman@nokia.com
  • 146. Oh! By the way, I’m writing a book.. The Mobile Frontier A Guide for Designing Mobile Experiences Expected Publication: late 2011 Follow along…
  • 147. Q? Q&A: final break