rapid prototyping and sketching
Post on 07-Apr-2017
274 Views
Preview:
TRANSCRIPT
Prototyping
Christian Glover Wilson
The Experience is Everything
March 2014
Contents
Approaches
Facilitation
Prototyping
Sketching vs Prototyping
Sketching vs Prototyping
Elaboration of Ideas
Reduction of Ideas
DESIGN PROCESS
Laseau’s Funnel
Sketching vs Prototyping
Prototyping “Incremental iterative refinement”
Design vs Prototyping
Design “Branching Exploration”
vs
Sketching User ExperiencesBill Buxton
Prototyping “Getting the design right”
Design “Getting the right design”
vs
Design vs Prototyping
Prototyping
What is a prototype?
For end-user testing and for communicating functionality to stakeholders
Not fully functioning entity
Designed quickly, tested and iterated
Tells us something
What is rapid prototyping?
Prototyping Create mock-ups, factoring
in prior feedback, user experience standards and
best practices
Reviewing Users experience the
prototype and evaluate whether it meets their
needs and expectations
Refining Integrate feedback by
identifying areas that need to be tuned
iteration
Types of prototype?
Native Code
Paper Prototypes
HTML Prototype
Printouts
Storyboards
Swipeable Gallery
Tapable Prototype
Presentation
TimeRe-use
Cost
So much to choose from….!What is a prototype?
Storyboards
Good for: • Getting started • User flows • Product-market fit
Pros: • Fast • Cheap • Easy • Disposable
Cons: • None
Paper Prototypes
Good for: • Brainstorming UIs • Proofs of Concept • Quick user feedback
Pros: • Fast • Cheap • Easy • Disposable
Cons: • Not detailed • Can’t share remotely • Difficult to update
Printouts (Wireframes or Mockups)
Good for: • UI consistency • Screen flow • User feedback
Pros: • Detailed • Fast to iterate • Cheaper than code
Cons: • Slower than sketching
Swipeable Photo Gallery
Good for: • UI consistency • Screen flow • User feedback
Pros: • Detailed • Faster than code • Cheaper than code • On-device experience
Cons: • Miss UI and flow issues
uncovered with printouts • Inherently linear
Keynote/PowerPoint clickable Prototype
Good for: • UI consistency • Screen flow • User feedback • Simple animations
Pros: • Very quick to create • Shareable • High fidelity • Some transitions and
gestures
Cons: • Very limited control of
logic and flow
Tappable Prototype
Good for: • UI consistency • Screen flow • User feedback • Proof of concept • Living spec
Pros: • Fast • Cheap • Easy • Highly shareable
Cons: • Slower than paper • Limited to capabilities of
tool employed
HTML prototype
Good for: • Troubleshooting
scalability issues • Testing across devices • Complete control
Pros: • See what the user sees • High level of control of
experience
Cons: • Slow • Requires code • Skill set
Native Code Prototype
Good for: • Proof of concept • Troubleshooting • Screen flow • User feedback • Living spec
Pros: • “Real life” user
experience • Allow hardware
interactions
Cons: • Extra step • Not very rapid • Require deployment • Target specific devices
Prototyping Tools
Tool Barrier to Entry Cost Time Devices Transitions Shareability
Code High Free Highest All Yes Remote
Axure Medium $289 Medium All Yes Remote
InVision Medium $15/mo Low All Yes Remote
Flinto Low $8/mo Lower iPhone Yes Remote
POP App Lower Free Lower iPhone Android Yes In person
Photo Album Lower Free Lower iOSAndroid Some In person
Keynote Low Free Low iOSAndroid Some Remote
Paper Lowest Free Lowest All Yes In person
Experiential vs Tactical prototyping
Emphasis on context and human experience
• Bodystorming • Storyboarding • Concept videos
Emphasis on user interface and tasks
• Sketching • Paper prototypes • On device prototypes
So why Prototype?
Involve users in refining the usability
Clearly communicate and demonstrate value to secure funding and support
Can utilize spare resource even for short bursts
Interesting and motivating for participants
Contextual Influences
User’s Considerations
Device Capability
Mobile context
Why prototyping is so important for mobile
Flow is everything (actions span multiple screens)
Animations carry meaning
More expensive to code
Harder to correct issues after deployment
Approaches
Hackathons
Usually public
Typically one day to one week
Focused on a technology, API or context
Often several competing teams
Usually start and end with presentations
Hack days
Usually internal
Typically one day to one week
Scope may come from team or management
Connect disparate parts of the company
Find products and value you didn’t know you had
Workshops
Mix of internal and external team
Typically one or two days
Starts with a clear brief
Co-located team, ideally off-site
Gamified incentives to participate
Outspoken team with required skills or knowledge
Facilitation
What causes failure?
No champion of the process Lack of understanding
Insufficient content Team composition (experience or attitude)
Funding Corporate culture (release control, resource bandwidth)
Ambiguous scope Unmanageable expectations
What leads to success?
Realistic expectations Skilled coordinator
Right tools and equipment A multi-discipline team
Version control Efficient reuse
Documentation
Setting scope - questions to ask
• What needs to be prototyped?
• How extensive is the prototype?
• What fidelity is required?
Some things to test
• Flow through the experience • Human Interface principles • Icons language • Custom gestures or animations • Non-standard UI controls • Consistency of designs • Device support … within reason
Internal PR points
Fantastic Return on Investment
Demonstrates functionality
Utilizes resources efficiently
Builds consensus
In conclusion, consider prototyping to
…improve your design decision-making …communicate an idea …gather user feedback
…explore the new territory …fine-tune an idea …kick off a project
Christian Glover Wilson, VP, Technology & Strategychristian.gloverwilson@tigerspike.com | +1 917 310 5249
top related