SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Downloaden Sie, um offline zu lesen
Iterate quickly 
by designing and creating a clickable 
A hands-on 
workshop 
by Will 
Kesling & 
Nicole 
Capuana 
prototype you can test CC License - Flickr 
darkday
Will Kesling 
@willkesling 
Nicole Capuana 
@ncapuana
Concept > Prototype > Test 
CC License - Flickr 
Alberto Garcia
Cone of Uncertainty
Prototype Tools 
● InvisionApp 
● UXPin 
● Prototype on Paper 
● Flinto 
● Origami 
● Solidify 
Some 
● are free, some cost a bit - still 
overall pretty low cost and 
fairly easy to start with 
● are for mobile design only, 
others cover any interaction 
designs 
● have extensive UI libraries or 
building kits to get you started 
quickly 
● allow on device testing 
● allow for real-time 
collaboration and annotations 
Skala Preview 
Preview your mockups/designs on your mobile device (sends images, previews 
and Photoshop designs)
http://www.cooper.com/journal/2013/07/designers-toolkit-proto-testing-for-prototypes 
Excellent review 
by Cooper in 
“Designer’s 
Toolkit: Road 
Testing Prototype 
Tools”
Design tools 
Pen & 
Paper 
Keynotopia 
Balsamiq 
Sketch 
The monsters - 
Illustrator and 
Photoshop 
low Fidelity high
$1 Prototype 
Greg Nudelman - https://publishizer.com/1-prototype/ 
CC License - Flickr 
David Michalczuk
Let’s get started 
1. Form teams of 2 
2. Grab some post-its & markers 
3. Find a spot to work together
Here’s 
what we 
did 
An app for 
comedians to 
time their set
Design a mobile app 
Determine as a team what you want to design. 
Sketch screens - it doesn’t have to be the app in it’s entirety 
but just a path that we can test. 
You will have: 
● 5 minutes to come up with an idea 
● 10 minutes to sketch 
15 minutes
Our prototype
Create prototype 
Create an account at http://www.invisionapp.com/ 
With your free account you are allowed one project. 
Take photos of your sketches - you may have to resize them 
iOS 4 640 x 960 iOS 5 640 x 1136 
Drag or upload your photos 
Create hotspots and link your screens together 
15 minutes
How to structure a test 
Set objective of what you need to 
answer or learn - can they use it? 
Task based 
Create script for user and moderator
Our test 
Objective: User can set and use a cue timer 
Scenario: You need to set up a cue timer for your upcoming gig. You’ll have the 
stage for 5 minutes. 
Your tasks: 
● Launch the Stage Timer app and set up your timer. You want to know 
when you hit the 4 minute and 4:30 marks. 
● Answer the facilitator’s questions. 
For the facilitator: 
1. How do you create a new timer? 
2. How do you play/activate a timer? 
3. What do the colors mean?
Scoring
Draft your test 
● Write out your test objective 
● Draft your scenario, participant tasks & facilitator 
questions 
● Set up your scorecard 
15 minutes
Test with someone 
● Pair up with another team and test your app 
● 1 of you should be the facilitator (asking questions) 
● 1 of you should take notes and score 
● Switch and repeat 
15 minutes
Why this approach can help 
you validate, experiment 
and learn fast 
● Anyone on the team can do it - you don’t need a designer 
(although they will make you move faster) 
● Validate if a concept is worth pursuing 
● Easily experiment more 
● Your 1st design is never perfect 
● Cheap way to determine what to develop 
● Quick & objective 
● You will always learn something
Good reads 
How Prototyping is Replacing Documentation 
The power of prototypes and how to utilize them. 
https://medium.com/goodux-badux/how-prototyping-is-replacing-documentation-c42e97d07a11 
Vive le Prototype 
http://www.designmap.com/practice/vive-le-prototype/ 
Building Clickthrough Prototypes To Support Participatory Design 
http://www.smashingmagazine.com/2014/03/06/building-clickthrough-prototypes-to-support- 
participatory-design/ 
State of the Prototyping Union – A Review of the Top 5 Mobile Prototyping Tools 
http://www.openroad.ca/2013/09/13/mobile-prototyping-tools/

Weitere ähnliche Inhalte

Was ist angesagt?

What does it mean to be a test engineer?
What does it mean to be a test engineer?What does it mean to be a test engineer?
What does it mean to be a test engineer?
Andrii Dzynia
 

Was ist angesagt? (20)

Pct2010 product design
Pct2010 product designPct2010 product design
Pct2010 product design
 
Intro to design sprint
Intro to design sprintIntro to design sprint
Intro to design sprint
 
Product Development with Lean UX
Product Development with Lean UXProduct Development with Lean UX
Product Development with Lean UX
 
Cuss hajar!
Cuss hajar!Cuss hajar!
Cuss hajar!
 
Data-driven design
Data-driven designData-driven design
Data-driven design
 
Product design - ProductCamp Toronto 2010
Product design  - ProductCamp Toronto 2010Product design  - ProductCamp Toronto 2010
Product design - ProductCamp Toronto 2010
 
Creating Impact Through Product Design
Creating Impact Through Product DesignCreating Impact Through Product Design
Creating Impact Through Product Design
 
Innovations Accelerated - Design Sprint
Innovations Accelerated - Design SprintInnovations Accelerated - Design Sprint
Innovations Accelerated - Design Sprint
 
Design Thinking in an Agile process: why, how, what's the impact on business
Design Thinking in an Agile process: why, how, what's the impact on businessDesign Thinking in an Agile process: why, how, what's the impact on business
Design Thinking in an Agile process: why, how, what's the impact on business
 
Product Managers: How To Get Your Developers To Love You
Product Managers: How To Get Your Developers To Love YouProduct Managers: How To Get Your Developers To Love You
Product Managers: How To Get Your Developers To Love You
 
Kickstart Your Product with a Design Sprint by thestartupfactory.tech
Kickstart Your Product with a Design Sprint by thestartupfactory.techKickstart Your Product with a Design Sprint by thestartupfactory.tech
Kickstart Your Product with a Design Sprint by thestartupfactory.tech
 
Design studio-workshop (short session)
Design studio-workshop (short session)Design studio-workshop (short session)
Design studio-workshop (short session)
 
Design sprint
Design sprintDesign sprint
Design sprint
 
Innovation Pipeline
Innovation PipelineInnovation Pipeline
Innovation Pipeline
 
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni MahariashaUX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
 
Design Sprint
Design SprintDesign Sprint
Design Sprint
 
Onboarding through persuasion
Onboarding through persuasionOnboarding through persuasion
Onboarding through persuasion
 
Erste Bank — How to Cut off Development Times & Get Feedback From Real Users,...
Erste Bank — How to Cut off Development Times & Get Feedback From Real Users,...Erste Bank — How to Cut off Development Times & Get Feedback From Real Users,...
Erste Bank — How to Cut off Development Times & Get Feedback From Real Users,...
 
What does it mean to be a test engineer?
What does it mean to be a test engineer?What does it mean to be a test engineer?
What does it mean to be a test engineer?
 
Design sprint
Design sprintDesign sprint
Design sprint
 

Andere mochten auch

Andere mochten auch (7)

Incorporating a UX Mindset Early in Product Development
Incorporating a UX Mindset Early in Product DevelopmentIncorporating a UX Mindset Early in Product Development
Incorporating a UX Mindset Early in Product Development
 
Validate your product with usability testing
Validate your product with usability testingValidate your product with usability testing
Validate your product with usability testing
 
Design Thinking Action Lab: Prototype and Test
Design Thinking Action Lab: Prototype and TestDesign Thinking Action Lab: Prototype and Test
Design Thinking Action Lab: Prototype and Test
 
The Startup (User) Experience
The Startup (User) ExperienceThe Startup (User) Experience
The Startup (User) Experience
 
Rapid Paper Prototyping Workshop — Campus Party GDL 2016
Rapid Paper Prototyping Workshop — Campus Party GDL 2016Rapid Paper Prototyping Workshop — Campus Party GDL 2016
Rapid Paper Prototyping Workshop — Campus Party GDL 2016
 
Design Thinking & Innovation Games : Presented by Cedric Mainguy
Design Thinking & Innovation Games : Presented by Cedric MainguyDesign Thinking & Innovation Games : Presented by Cedric Mainguy
Design Thinking & Innovation Games : Presented by Cedric Mainguy
 
Designing with Lean UX : Rapid Product Design (Handouts only) [UX Lisbon 2014]
Designing with Lean UX : Rapid Product Design (Handouts only)  [UX Lisbon 2014]Designing with Lean UX : Rapid Product Design (Handouts only)  [UX Lisbon 2014]
Designing with Lean UX : Rapid Product Design (Handouts only) [UX Lisbon 2014]
 

Ähnlich wie Iterate quickly with a prototype you can test

(Sprint 1) besser childress logerquist-swain
(Sprint 1) besser   childress logerquist-swain(Sprint 1) besser   childress logerquist-swain
(Sprint 1) besser childress logerquist-swain
KristadeSwain
 
Engl317 project4 slidedoc4_screencasting_usability_testfinding
Engl317 project4 slidedoc4_screencasting_usability_testfindingEngl317 project4 slidedoc4_screencasting_usability_testfinding
Engl317 project4 slidedoc4_screencasting_usability_testfinding
Zachary Williamson
 
Getting Started with Camtasia-A Seflin Round Table discussion
Getting Started with Camtasia-A Seflin Round Table discussionGetting Started with Camtasia-A Seflin Round Table discussion
Getting Started with Camtasia-A Seflin Round Table discussion
Alyse Ergood McKeal
 

Ähnlich wie Iterate quickly with a prototype you can test (20)

Rapid Prototyping Nearsoft Workshop
Rapid Prototyping Nearsoft WorkshopRapid Prototyping Nearsoft Workshop
Rapid Prototyping Nearsoft Workshop
 
Introduction to UX Design Workshop | CodingGirls
Introduction to UX Design Workshop | CodingGirlsIntroduction to UX Design Workshop | CodingGirls
Introduction to UX Design Workshop | CodingGirls
 
Tools to Save Time
Tools to Save TimeTools to Save Time
Tools to Save Time
 
Supercharge your application with the best UX practices
Supercharge your application with the best UX practicesSupercharge your application with the best UX practices
Supercharge your application with the best UX practices
 
Hack 2.0 Lego Agile Workshop
Hack 2.0 Lego Agile WorkshopHack 2.0 Lego Agile Workshop
Hack 2.0 Lego Agile Workshop
 
Five parallel design sprints. What possibly can go wrong?
Five parallel design sprints. What possibly can go wrong?Five parallel design sprints. What possibly can go wrong?
Five parallel design sprints. What possibly can go wrong?
 
UXUI Shanghai Meetup March 21st
UXUI Shanghai Meetup March 21st UXUI Shanghai Meetup March 21st
UXUI Shanghai Meetup March 21st
 
(Sprint 1) besser childress logerquist-swain
(Sprint 1) besser   childress logerquist-swain(Sprint 1) besser   childress logerquist-swain
(Sprint 1) besser childress logerquist-swain
 
The Guide to Agile UX Design Sprint Playbook
The Guide to Agile UX Design Sprint PlaybookThe Guide to Agile UX Design Sprint Playbook
The Guide to Agile UX Design Sprint Playbook
 
Usable Software Design
Usable Software DesignUsable Software Design
Usable Software Design
 
Essential Prototyping for Entrepreneurs
Essential Prototyping for EntrepreneursEssential Prototyping for Entrepreneurs
Essential Prototyping for Entrepreneurs
 
Agile_basics
Agile_basicsAgile_basics
Agile_basics
 
Develop a good product - 3 phases 3 methodologies - detail
Develop a good product - 3 phases 3 methodologies - detailDevelop a good product - 3 phases 3 methodologies - detail
Develop a good product - 3 phases 3 methodologies - detail
 
Execute Idea
Execute Idea Execute Idea
Execute Idea
 
Engl317 project4 slidedoc4_screencasting_usability_testfinding
Engl317 project4 slidedoc4_screencasting_usability_testfindingEngl317 project4 slidedoc4_screencasting_usability_testfinding
Engl317 project4 slidedoc4_screencasting_usability_testfinding
 
Prototyping - the what, why and how at the University of Edinburgh
Prototyping - the what, why and how at the University of EdinburghPrototyping - the what, why and how at the University of Edinburgh
Prototyping - the what, why and how at the University of Edinburgh
 
Ruby on Rails Session 02 - UX Design
Ruby on Rails Session 02 - UX DesignRuby on Rails Session 02 - UX Design
Ruby on Rails Session 02 - UX Design
 
Prototyping & User Testing
Prototyping & User TestingPrototyping & User Testing
Prototyping & User Testing
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Getting Started with Camtasia-A Seflin Round Table discussion
Getting Started with Camtasia-A Seflin Round Table discussionGetting Started with Camtasia-A Seflin Round Table discussion
Getting Started with Camtasia-A Seflin Round Table discussion
 

Mehr von Nicole Capuana

Mehr von Nicole Capuana (6)

Women, Wine & Web Design - workshop
Women, Wine & Web Design - workshopWomen, Wine & Web Design - workshop
Women, Wine & Web Design - workshop
 
Design for Use - Workshop
Design for Use - WorkshopDesign for Use - Workshop
Design for Use - Workshop
 
Light Weight Methods to Drive Your Designs Forward
Light Weight Methods to Drive Your Designs ForwardLight Weight Methods to Drive Your Designs Forward
Light Weight Methods to Drive Your Designs Forward
 
Joyful Error Messages & Other Musings on Eliciting Emotion in Our Digital Life
Joyful Error Messages & Other Musings on Eliciting Emotion in Our Digital LifeJoyful Error Messages & Other Musings on Eliciting Emotion in Our Digital Life
Joyful Error Messages & Other Musings on Eliciting Emotion in Our Digital Life
 
If you build it they MIGHT come
If you build it they MIGHT comeIf you build it they MIGHT come
If you build it they MIGHT come
 
IA to the rescue & other tales from the UX trenches - World Usability Day Cle...
IA to the rescue & other tales from the UX trenches - World Usability Day Cle...IA to the rescue & other tales from the UX trenches - World Usability Day Cle...
IA to the rescue & other tales from the UX trenches - World Usability Day Cle...
 

Kürzlich hochgeladen

Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
wpkuukw
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
eqaqen
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
eeanqy
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion pills in Kuwait Cytotec pills in Kuwait
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
Isadora Agency
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
gajnagarg
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
nirzagarg
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
nirzagarg
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 

Kürzlich hochgeladen (20)

Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
 
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
 
Hackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdfHackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdf
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
 
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
Eye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docxEye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docx
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 

Iterate quickly with a prototype you can test

  • 1. Iterate quickly by designing and creating a clickable A hands-on workshop by Will Kesling & Nicole Capuana prototype you can test CC License - Flickr darkday
  • 2. Will Kesling @willkesling Nicole Capuana @ncapuana
  • 3. Concept > Prototype > Test CC License - Flickr Alberto Garcia
  • 5. Prototype Tools ● InvisionApp ● UXPin ● Prototype on Paper ● Flinto ● Origami ● Solidify Some ● are free, some cost a bit - still overall pretty low cost and fairly easy to start with ● are for mobile design only, others cover any interaction designs ● have extensive UI libraries or building kits to get you started quickly ● allow on device testing ● allow for real-time collaboration and annotations Skala Preview Preview your mockups/designs on your mobile device (sends images, previews and Photoshop designs)
  • 6. http://www.cooper.com/journal/2013/07/designers-toolkit-proto-testing-for-prototypes Excellent review by Cooper in “Designer’s Toolkit: Road Testing Prototype Tools”
  • 7. Design tools Pen & Paper Keynotopia Balsamiq Sketch The monsters - Illustrator and Photoshop low Fidelity high
  • 8. $1 Prototype Greg Nudelman - https://publishizer.com/1-prototype/ CC License - Flickr David Michalczuk
  • 9. Let’s get started 1. Form teams of 2 2. Grab some post-its & markers 3. Find a spot to work together
  • 10. Here’s what we did An app for comedians to time their set
  • 11. Design a mobile app Determine as a team what you want to design. Sketch screens - it doesn’t have to be the app in it’s entirety but just a path that we can test. You will have: ● 5 minutes to come up with an idea ● 10 minutes to sketch 15 minutes
  • 13. Create prototype Create an account at http://www.invisionapp.com/ With your free account you are allowed one project. Take photos of your sketches - you may have to resize them iOS 4 640 x 960 iOS 5 640 x 1136 Drag or upload your photos Create hotspots and link your screens together 15 minutes
  • 14. How to structure a test Set objective of what you need to answer or learn - can they use it? Task based Create script for user and moderator
  • 15. Our test Objective: User can set and use a cue timer Scenario: You need to set up a cue timer for your upcoming gig. You’ll have the stage for 5 minutes. Your tasks: ● Launch the Stage Timer app and set up your timer. You want to know when you hit the 4 minute and 4:30 marks. ● Answer the facilitator’s questions. For the facilitator: 1. How do you create a new timer? 2. How do you play/activate a timer? 3. What do the colors mean?
  • 17. Draft your test ● Write out your test objective ● Draft your scenario, participant tasks & facilitator questions ● Set up your scorecard 15 minutes
  • 18. Test with someone ● Pair up with another team and test your app ● 1 of you should be the facilitator (asking questions) ● 1 of you should take notes and score ● Switch and repeat 15 minutes
  • 19. Why this approach can help you validate, experiment and learn fast ● Anyone on the team can do it - you don’t need a designer (although they will make you move faster) ● Validate if a concept is worth pursuing ● Easily experiment more ● Your 1st design is never perfect ● Cheap way to determine what to develop ● Quick & objective ● You will always learn something
  • 20. Good reads How Prototyping is Replacing Documentation The power of prototypes and how to utilize them. https://medium.com/goodux-badux/how-prototyping-is-replacing-documentation-c42e97d07a11 Vive le Prototype http://www.designmap.com/practice/vive-le-prototype/ Building Clickthrough Prototypes To Support Participatory Design http://www.smashingmagazine.com/2014/03/06/building-clickthrough-prototypes-to-support- participatory-design/ State of the Prototyping Union – A Review of the Top 5 Mobile Prototyping Tools http://www.openroad.ca/2013/09/13/mobile-prototyping-tools/