SlideShare ist ein Scribd-Unternehmen logo
1 von 35
Rapid Prototyping
Stephen Denning – Senior UX Consultant
Rapid Prototyping in UX Design
What we will cover…
• Background
• What is a prototype?
• Why use prototypes?
• A brief look at the toolkit
• Prototyping principles
What is the User Experience (UX)?
user experience:
n. the overall experience and satisfaction a user has when using a
product or system
Concept/Plan
• Contextual Analysis
• User Profiling/Persona
development
• User Needs Analysis
• Competitor Analysis
Design
• Wireframing
• Prototyping
• IA Analysis
• Co-Design Workshops
Evaluate
• Usability Testing
• Expert Evaluation
• Eye-tracking
• Accessibility Audits
Live Support
• Customer Surveys
• Analytics
• A/B Testing
• Multi-variate Testing
A User-Centred Design (UCD) process
Where are we…?
• Background
• What is a prototype?
• Why use prototypes?
• A brief look at the toolkit
• Prototyping principles
What is a prototype?
“An approximation of a product (or system) or its components, in
some form, for a definite purpose in its implementation”
(Chua, Leong & Lim)
“A visualisation of the requirements”
(Arnowitz)
“A representative model or simulation of the final system”
(Warfel)
What is a prototype?
What is a prototype?
Three dimensions:
1. Scope (Distinct aspect Entire product/service)
2. Form (Abstract Tangible)
3. Fidelity (Rough representation Exact representation)
Prototypes vs Wireframes
Wireframe
• Layout
• Content
• Structure
• Specification
Prototype
• Look
• Feel
• Experience
• Flow
Where are we…?
• Background
• What is a prototype?
• Why use prototypes?
• A brief look at the toolkit
• Prototyping principles
The goal of prototyping
“The goal of prototyping is to
convince yourself and others of an idea”
An idea has no value
Unless it can be communicated!
(Raskin)
Why use prototypes?
“My perspective is that the bulk of our industry is organized around the
demonstratable myth that we know what we want at the start, and how to
get it, and therefore build our process assuming that we will take an
optimal, direct path to get there. Nonsense. The process must reflect that
we don't know and acknowledge that the sooner we make errors and
detect and fix them, the less (not more) the cost.” (Bill Buxton)
Why use prototypes?
Prototyping allows us to...
 Brainstorm
 Design
 Create
 Test
 Communicate
...interaction design concepts and user interfaces, early in the design
process and in a cost effective manner.
When applied early and often, the use of prototypes can
save time and effort, reduce waste and ultimately save money
Why use prototypes?
Benefits
 They help to generate ideas
 They can communicate aspects of the design that cannot be
adequately communicated by other artefacts
 They increase understanding, add clarity and reduce
misinterpretation
 They can be updated quickly to reflect changes
 They can enable quicker identification of mistakes and risks
Where are we…?
• Background
• What is a prototype?
• Why use prototypes?
• A brief look at the toolkit
• Prototyping principles
A look at some tools
#1 Paper
#2 Office tools
#3 Vector drawing tools
#4 Web based tools
#5 Purpose-built prototyping tools
#6 HTML
#1 - Paper
Paper, pen, scissors, tape & post-its (Blue Peter prototyping)
Best use: To test specific interactions or competing concepts
Advantages: Fast, cheap, computer-less, lack of realism/aesthetics
Disadvantages: Not easily distributed, lack of realism/aesthetics
#2 – Office tools
PowerPoint, Excel, Keynote
Best use: To add basic interaction to flat designs, dashboards (Excel)
Advantages: Cheap, easy to pick up, easy to import graphics, some
interactivity, basic data/graph incorporation (Excel)
Disadvantages: Largely linear, limited editing/drawing
#3 – Vector drawing tools
e.g. MS Visio, Omnigraffle, Adobe InDesign, etc.
Best use: Medium/high-fidelity screen mock-ups
Advantages: Use of stencils, precise layout, potential richer interactivity
Disadvantages: More cost, interactivity requires coding knowledge
#4 – Web-based tools
e.g. Protoshare, Mockingbird, Protonotes
Best use: For distributed teams
Advantages: Online, collaborative, easily shared
Disadvantages: Less rich interactions, no HTML export
#4 – Web-based tools
Example: Protoshare
Features:
 Browser-based access
 Distributed comment &
review
 States and dynamic
interactions
 Export HTML, CSS,
JavaScript
 Produce Word/PDF specs
#5 – Prototyping tools
e.g. Axure RP Pro, iRise, MockupScreens, Balsamiq, Fireworks
Best use: More complete/complex models
Advantages: Fast, rich interaction, collaboration, generate specs, HTML
export
Disadvantages: Costly, longer to pick up, not (always) reusable
#5 – Prototyping tools
Example: Axure RP Pro
Features:
 Drag-and-drop
 Custom widgets and masters
 Rich interactions
 Multiple platform templates
 Mobile prototypes
 Collaboration/version-control
 Export to HTML
 Word/PDF specs
#6 - HTML
Fully-fledged web pages
Best use: For finalising design decisions
Advantages: Full interaction, expandable, easily transportable
Disadvantages: Time and effort, requires expertise
Where are we…?
• Background
• What is a prototype?
• Why use prototypes?
• A brief look at the toolkit
• Prototyping principles
Six Prototyping principles (Raskin)
#1 Your first try will be wrong.
• No matter how good you are, there is no substitute
for trying it out
• Budget for it
• Design for it
Six Prototyping principles (Raskin)
#2 Aim to finish a usable artifact in a day
• This helps you focus and scope
• Do less
• Don’t be afraid to start again
Six Prototyping principles (Raskin)
#3 You are making a touchable sketch
• Do not fill in all the blanks
• Focus on key contentelements
• Remember the goal of the prototype
Six Prototyping principles (Raskin)
#4 You are iterating your understanding of
the problem as well as your solution
• Use the process to evaluate, validate and clarify your
requirements
• Be prepared to admit you were wrong!
• Establish a tight feedback loop
Six Prototyping principles (Raskin)
#5 Borrow liberally
• Don’t reinvent the wheel
• Don’t waste time with the painting and decorating
Six Prototyping principles (Raskin)
#6 Tell a story with your prototype
• Think about your personas
• Think about your user’s journey
• It isn’t just a set of features
• Sell the idea!
Other resources
Prototyping
Todd Zaki Warfel
Paper Prototyping
Carolyn Snyder
Effective Prototyping
Jonathan Arnowitz
Sketching User
Experiences
Bill Buxton
A few web resources:
• Prototyping Tools Review (http://goo.gl/QHI6m)
• “Prototypically speaking” prototyping blog (http://softwareprototyping.net/)
• Effective Prototyping site (http://www.effectiveprototyping.com/)
Eye tracking
Questions?
Stephen Denning
Senior User Experience Consultant
User Vision
55 North Castle Street
Edinburgh
EH2 3QA
T: 0131 225 0850
E: stephen@uservision.co.uk
W: www.uservision.co.uk
Thank You

Weitere ähnliche Inhalte

Ähnlich wie Rapid Prototyping in UX Design

User Vision Breakfast Briefing - Prototyping
User Vision Breakfast Briefing - PrototypingUser Vision Breakfast Briefing - Prototyping
User Vision Breakfast Briefing - PrototypingUser Vision
 
User Experience Design: 5 Techniques for Creating Better Websites and Applica...
User Experience Design: 5 Techniques for Creating Better Websites and Applica...User Experience Design: 5 Techniques for Creating Better Websites and Applica...
User Experience Design: 5 Techniques for Creating Better Websites and Applica...nForm User Experience
 
User Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyUser Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyJoshua Randall
 
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 MahariashaAnton Chandra
 
Lean UX in an Agency Environment
Lean UX in an Agency EnvironmentLean UX in an Agency Environment
Lean UX in an Agency EnvironmentJef Bekes
 
Introduction to Prototyping - Scottish UPA - June 2011
Introduction to Prototyping - Scottish UPA - June 2011Introduction to Prototyping - Scottish UPA - June 2011
Introduction to Prototyping - Scottish UPA - June 2011Neil Allison
 
L8_COMP1649_Prototyping_1819.pdf
L8_COMP1649_Prototyping_1819.pdfL8_COMP1649_Prototyping_1819.pdf
L8_COMP1649_Prototyping_1819.pdfMozxai
 
Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface designZdeněk Lanc
 
Design Thinking: A Common Sense Process
Design Thinking: A Common Sense ProcessDesign Thinking: A Common Sense Process
Design Thinking: A Common Sense ProcessMichael Zarro, Ph.D.
 
User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an OverviewJulie Grundy
 
MHIT 603: Introduction to Prototyping
MHIT 603: Introduction to PrototypingMHIT 603: Introduction to Prototyping
MHIT 603: Introduction to PrototypingMark Billinghurst
 
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 EdinburghNeil Allison
 
Alice Phieu - UI/UX For Developers
Alice Phieu - UI/UX  For DevelopersAlice Phieu - UI/UX  For Developers
Alice Phieu - UI/UX For DevelopersAlice Phieu
 
prototyping-chap-03.ppt
prototyping-chap-03.pptprototyping-chap-03.ppt
prototyping-chap-03.pptCustomerYZ
 
Rapid Prototyping For Augmented Reality
Rapid Prototyping For Augmented RealityRapid Prototyping For Augmented Reality
Rapid Prototyping For Augmented RealityMark Billinghurst
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Michele Ide-Smith
 
05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&process05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&processSheSaysCREATIVE
 
Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practicesuxpin
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your ProjectsKarl Kaufmann
 

Ähnlich wie Rapid Prototyping in UX Design (20)

User Vision Breakfast Briefing - Prototyping
User Vision Breakfast Briefing - PrototypingUser Vision Breakfast Briefing - Prototyping
User Vision Breakfast Briefing - Prototyping
 
User Experience Design: 5 Techniques for Creating Better Websites and Applica...
User Experience Design: 5 Techniques for Creating Better Websites and Applica...User Experience Design: 5 Techniques for Creating Better Websites and Applica...
User Experience Design: 5 Techniques for Creating Better Websites and Applica...
 
User Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyUser Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the Ugly
 
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
 
Lean UX in an Agency Environment
Lean UX in an Agency EnvironmentLean UX in an Agency Environment
Lean UX in an Agency Environment
 
Introduction to Prototyping - Scottish UPA - June 2011
Introduction to Prototyping - Scottish UPA - June 2011Introduction to Prototyping - Scottish UPA - June 2011
Introduction to Prototyping - Scottish UPA - June 2011
 
L8_COMP1649_Prototyping_1819.pdf
L8_COMP1649_Prototyping_1819.pdfL8_COMP1649_Prototyping_1819.pdf
L8_COMP1649_Prototyping_1819.pdf
 
Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface design
 
Design process
Design processDesign process
Design process
 
Design Thinking: A Common Sense Process
Design Thinking: A Common Sense ProcessDesign Thinking: A Common Sense Process
Design Thinking: A Common Sense Process
 
User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an Overview
 
MHIT 603: Introduction to Prototyping
MHIT 603: Introduction to PrototypingMHIT 603: Introduction to Prototyping
MHIT 603: Introduction to Prototyping
 
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
 
Alice Phieu - UI/UX For Developers
Alice Phieu - UI/UX  For DevelopersAlice Phieu - UI/UX  For Developers
Alice Phieu - UI/UX For Developers
 
prototyping-chap-03.ppt
prototyping-chap-03.pptprototyping-chap-03.ppt
prototyping-chap-03.ppt
 
Rapid Prototyping For Augmented Reality
Rapid Prototyping For Augmented RealityRapid Prototyping For Augmented Reality
Rapid Prototyping For Augmented Reality
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013
 
05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&process05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&process
 
Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practices
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your Projects
 

Mehr von Stephen Denning

Bringing Order to the Chaos: Good UX Governance
Bringing Order to the Chaos: Good UX GovernanceBringing Order to the Chaos: Good UX Governance
Bringing Order to the Chaos: Good UX GovernanceStephen Denning
 
UX & GDPR - Building Customer Trust with your Digital Experiences
UX & GDPR - Building Customer Trust with your Digital ExperiencesUX & GDPR - Building Customer Trust with your Digital Experiences
UX & GDPR - Building Customer Trust with your Digital ExperiencesStephen Denning
 
Effective use of eye-tracking in UX research
Effective use of eye-tracking in UX researchEffective use of eye-tracking in UX research
Effective use of eye-tracking in UX researchStephen Denning
 
Axure 8 User Vision Breakfast Briefing
Axure 8 User Vision Breakfast BriefingAxure 8 User Vision Breakfast Briefing
Axure 8 User Vision Breakfast BriefingStephen Denning
 
UXPA 2015 UX Strategy Tutorial
UXPA 2015 UX Strategy TutorialUXPA 2015 UX Strategy Tutorial
UXPA 2015 UX Strategy TutorialStephen Denning
 
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in DesignUCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in DesignStephen Denning
 
Intro to Axure 7 - User Vision Breakfast Briefing
Intro to Axure 7 - User Vision Breakfast BriefingIntro to Axure 7 - User Vision Breakfast Briefing
Intro to Axure 7 - User Vision Breakfast BriefingStephen Denning
 
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI DesignThe Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI DesignStephen Denning
 

Mehr von Stephen Denning (8)

Bringing Order to the Chaos: Good UX Governance
Bringing Order to the Chaos: Good UX GovernanceBringing Order to the Chaos: Good UX Governance
Bringing Order to the Chaos: Good UX Governance
 
UX & GDPR - Building Customer Trust with your Digital Experiences
UX & GDPR - Building Customer Trust with your Digital ExperiencesUX & GDPR - Building Customer Trust with your Digital Experiences
UX & GDPR - Building Customer Trust with your Digital Experiences
 
Effective use of eye-tracking in UX research
Effective use of eye-tracking in UX researchEffective use of eye-tracking in UX research
Effective use of eye-tracking in UX research
 
Axure 8 User Vision Breakfast Briefing
Axure 8 User Vision Breakfast BriefingAxure 8 User Vision Breakfast Briefing
Axure 8 User Vision Breakfast Briefing
 
UXPA 2015 UX Strategy Tutorial
UXPA 2015 UX Strategy TutorialUXPA 2015 UX Strategy Tutorial
UXPA 2015 UX Strategy Tutorial
 
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in DesignUCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
UCD 2013 - Shapes & Patterns: The Role of Pre-Attentive Psychology in Design
 
Intro to Axure 7 - User Vision Breakfast Briefing
Intro to Axure 7 - User Vision Breakfast BriefingIntro to Axure 7 - User Vision Breakfast Briefing
Intro to Axure 7 - User Vision Breakfast Briefing
 
The Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI DesignThe Role of Pre-Attention in UI Design
The Role of Pre-Attention in UI Design
 

Kürzlich hochgeladen

Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 

Kürzlich hochgeladen (20)

Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 

Rapid Prototyping in UX Design

  • 1. Rapid Prototyping Stephen Denning – Senior UX Consultant
  • 3. What we will cover… • Background • What is a prototype? • Why use prototypes? • A brief look at the toolkit • Prototyping principles
  • 4. What is the User Experience (UX)? user experience: n. the overall experience and satisfaction a user has when using a product or system
  • 5. Concept/Plan • Contextual Analysis • User Profiling/Persona development • User Needs Analysis • Competitor Analysis Design • Wireframing • Prototyping • IA Analysis • Co-Design Workshops Evaluate • Usability Testing • Expert Evaluation • Eye-tracking • Accessibility Audits Live Support • Customer Surveys • Analytics • A/B Testing • Multi-variate Testing A User-Centred Design (UCD) process
  • 6. Where are we…? • Background • What is a prototype? • Why use prototypes? • A brief look at the toolkit • Prototyping principles
  • 7. What is a prototype? “An approximation of a product (or system) or its components, in some form, for a definite purpose in its implementation” (Chua, Leong & Lim) “A visualisation of the requirements” (Arnowitz) “A representative model or simulation of the final system” (Warfel)
  • 8. What is a prototype?
  • 9. What is a prototype? Three dimensions: 1. Scope (Distinct aspect Entire product/service) 2. Form (Abstract Tangible) 3. Fidelity (Rough representation Exact representation)
  • 10. Prototypes vs Wireframes Wireframe • Layout • Content • Structure • Specification Prototype • Look • Feel • Experience • Flow
  • 11. Where are we…? • Background • What is a prototype? • Why use prototypes? • A brief look at the toolkit • Prototyping principles
  • 12. The goal of prototyping “The goal of prototyping is to convince yourself and others of an idea” An idea has no value Unless it can be communicated! (Raskin)
  • 13. Why use prototypes? “My perspective is that the bulk of our industry is organized around the demonstratable myth that we know what we want at the start, and how to get it, and therefore build our process assuming that we will take an optimal, direct path to get there. Nonsense. The process must reflect that we don't know and acknowledge that the sooner we make errors and detect and fix them, the less (not more) the cost.” (Bill Buxton)
  • 14. Why use prototypes? Prototyping allows us to...  Brainstorm  Design  Create  Test  Communicate ...interaction design concepts and user interfaces, early in the design process and in a cost effective manner.
  • 15. When applied early and often, the use of prototypes can save time and effort, reduce waste and ultimately save money Why use prototypes? Benefits  They help to generate ideas  They can communicate aspects of the design that cannot be adequately communicated by other artefacts  They increase understanding, add clarity and reduce misinterpretation  They can be updated quickly to reflect changes  They can enable quicker identification of mistakes and risks
  • 16. Where are we…? • Background • What is a prototype? • Why use prototypes? • A brief look at the toolkit • Prototyping principles
  • 17. A look at some tools #1 Paper #2 Office tools #3 Vector drawing tools #4 Web based tools #5 Purpose-built prototyping tools #6 HTML
  • 18. #1 - Paper Paper, pen, scissors, tape & post-its (Blue Peter prototyping) Best use: To test specific interactions or competing concepts Advantages: Fast, cheap, computer-less, lack of realism/aesthetics Disadvantages: Not easily distributed, lack of realism/aesthetics
  • 19. #2 – Office tools PowerPoint, Excel, Keynote Best use: To add basic interaction to flat designs, dashboards (Excel) Advantages: Cheap, easy to pick up, easy to import graphics, some interactivity, basic data/graph incorporation (Excel) Disadvantages: Largely linear, limited editing/drawing
  • 20. #3 – Vector drawing tools e.g. MS Visio, Omnigraffle, Adobe InDesign, etc. Best use: Medium/high-fidelity screen mock-ups Advantages: Use of stencils, precise layout, potential richer interactivity Disadvantages: More cost, interactivity requires coding knowledge
  • 21. #4 – Web-based tools e.g. Protoshare, Mockingbird, Protonotes Best use: For distributed teams Advantages: Online, collaborative, easily shared Disadvantages: Less rich interactions, no HTML export
  • 22. #4 – Web-based tools Example: Protoshare Features:  Browser-based access  Distributed comment & review  States and dynamic interactions  Export HTML, CSS, JavaScript  Produce Word/PDF specs
  • 23. #5 – Prototyping tools e.g. Axure RP Pro, iRise, MockupScreens, Balsamiq, Fireworks Best use: More complete/complex models Advantages: Fast, rich interaction, collaboration, generate specs, HTML export Disadvantages: Costly, longer to pick up, not (always) reusable
  • 24. #5 – Prototyping tools Example: Axure RP Pro Features:  Drag-and-drop  Custom widgets and masters  Rich interactions  Multiple platform templates  Mobile prototypes  Collaboration/version-control  Export to HTML  Word/PDF specs
  • 25. #6 - HTML Fully-fledged web pages Best use: For finalising design decisions Advantages: Full interaction, expandable, easily transportable Disadvantages: Time and effort, requires expertise
  • 26. Where are we…? • Background • What is a prototype? • Why use prototypes? • A brief look at the toolkit • Prototyping principles
  • 27. Six Prototyping principles (Raskin) #1 Your first try will be wrong. • No matter how good you are, there is no substitute for trying it out • Budget for it • Design for it
  • 28. Six Prototyping principles (Raskin) #2 Aim to finish a usable artifact in a day • This helps you focus and scope • Do less • Don’t be afraid to start again
  • 29. Six Prototyping principles (Raskin) #3 You are making a touchable sketch • Do not fill in all the blanks • Focus on key contentelements • Remember the goal of the prototype
  • 30. Six Prototyping principles (Raskin) #4 You are iterating your understanding of the problem as well as your solution • Use the process to evaluate, validate and clarify your requirements • Be prepared to admit you were wrong! • Establish a tight feedback loop
  • 31. Six Prototyping principles (Raskin) #5 Borrow liberally • Don’t reinvent the wheel • Don’t waste time with the painting and decorating
  • 32. Six Prototyping principles (Raskin) #6 Tell a story with your prototype • Think about your personas • Think about your user’s journey • It isn’t just a set of features • Sell the idea!
  • 33. Other resources Prototyping Todd Zaki Warfel Paper Prototyping Carolyn Snyder Effective Prototyping Jonathan Arnowitz Sketching User Experiences Bill Buxton A few web resources: • Prototyping Tools Review (http://goo.gl/QHI6m) • “Prototypically speaking” prototyping blog (http://softwareprototyping.net/) • Effective Prototyping site (http://www.effectiveprototyping.com/)
  • 35. Stephen Denning Senior User Experience Consultant User Vision 55 North Castle Street Edinburgh EH2 3QA T: 0131 225 0850 E: stephen@uservision.co.uk W: www.uservision.co.uk Thank You