• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Rapid Prototyping in UX Design
 

Rapid Prototyping in UX Design

on

  • 2,212 views

Prototyping is a great way of developing, communicating and validating design ideas and requirements in a quick and cost-effective manner, when devising a user experience. ...

Prototyping is a great way of developing, communicating and validating design ideas and requirements in a quick and cost-effective manner, when devising a user experience.

This presentation discusses what prototypes are, why they are useful, the various tools that can be used and some basic principles to adopt.

This presentation was delivered by Stephen Denning as part of the User Vision Breakfast Briefing series in 2012.

Statistics

Views

Total Views
2,212
Views on SlideShare
2,212
Embed Views
0

Actions

Likes
5
Downloads
0
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi Stephen,

    Really its a great effort and vry good presentation.
    Can i have this? please mail me this presentation at bimal.sb@gmail.com
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Rapid Prototyping in UX Design Rapid Prototyping in UX Design Presentation Transcript

    • Rapid PrototypingStephen Denning – Senior UX Consultant
    • 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 aproduct or system
    • Concept/Plan• Contextual Analysis• User Profiling/Personadevelopment• User Needs Analysis• Competitor AnalysisDesign• Wireframing• Prototyping• IA Analysis• Co-Design WorkshopsEvaluate• Usability Testing• Expert Evaluation• Eye-tracking• Accessibility AuditsLive Support• Customer Surveys• Analytics• A/B Testing• Multi-variate TestingA 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, insome 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 WireframesWireframe• Layout• Content• Structure• SpecificationPrototype• 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 toconvince yourself and others of an idea”An idea has no valueUnless it can be communicated!(Raskin)
    • Why use prototypes?“My perspective is that the bulk of our industry is organized around thedemonstratable myth that we know what we want at the start, and how toget it, and therefore build our process assuming that we will take anoptimal, direct path to get there. Nonsense. The process must reflect thatwe dont know and acknowledge that the sooner we make errors anddetect 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 designprocess and in a cost effective manner.
    • When applied early and often, the use of prototypes cansave time and effort, reduce waste and ultimately save moneyWhy use prototypes?Benefits They help to generate ideas They can communicate aspects of the design that cannot beadequately communicated by other artefacts They increase understanding, add clarity and reducemisinterpretation 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 - PaperPaper, pen, scissors, tape & post-its (Blue Peter prototyping)Best use: To test specific interactions or competing conceptsAdvantages: Fast, cheap, computer-less, lack of realism/aestheticsDisadvantages: Not easily distributed, lack of realism/aesthetics
    • #2 – Office toolsPowerPoint, Excel, KeynoteBest use: To add basic interaction to flat designs, dashboards (Excel)Advantages: Cheap, easy to pick up, easy to import graphics, someinteractivity, basic data/graph incorporation (Excel)Disadvantages: Largely linear, limited editing/drawing
    • #3 – Vector drawing toolse.g. MS Visio, Omnigraffle, Adobe InDesign, etc.Best use: Medium/high-fidelity screen mock-upsAdvantages: Use of stencils, precise layout, potential richer interactivityDisadvantages: More cost, interactivity requires coding knowledge
    • #4 – Web-based toolse.g. Protoshare, Mockingbird, ProtonotesBest use: For distributed teamsAdvantages: Online, collaborative, easily sharedDisadvantages: Less rich interactions, no HTML export
    • #4 – Web-based toolsExample: ProtoshareFeatures: Browser-based access Distributed comment &review States and dynamicinteractions Export HTML, CSS,JavaScript Produce Word/PDF specs
    • #5 – Prototyping toolse.g. Axure RP Pro, iRise, MockupScreens, Balsamiq, FireworksBest use: More complete/complex modelsAdvantages: Fast, rich interaction, collaboration, generate specs, HTMLexportDisadvantages: Costly, longer to pick up, not (always) reusable
    • #5 – Prototyping toolsExample: Axure RP ProFeatures: Drag-and-drop Custom widgets and masters Rich interactions Multiple platform templates Mobile prototypes Collaboration/version-control Export to HTML Word/PDF specs
    • #6 - HTMLFully-fledged web pagesBest use: For finalising design decisionsAdvantages: Full interaction, expandable, easily transportableDisadvantages: 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 substitutefor 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 ofthe problem as well as your solution• Use the process to evaluate, validate and clarify yourrequirements• 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 resourcesPrototypingTodd Zaki WarfelPaper PrototypingCarolyn SnyderEffective PrototypingJonathan ArnowitzSketching UserExperiencesBill BuxtonA 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 trackingQuestions?
    • Stephen DenningSenior User Experience ConsultantUser Vision55 North Castle StreetEdinburghEH2 3QAT: 0131 225 0850E: stephen@uservision.co.ukW: www.uservision.co.ukThank You