Validating Ideas Through Prototyping

Validating Ideas Through Prototyping

Chris RisdonLead Experience Designer, Adaptive Path

@chrisrisdon

Prototypes

Ideation Design Principles(theory)

Testing Ideas(Prototyping)

Prototype(Usability) Refined DesignDesign Principles

(refined)




(refined)




(refined)

Fail early, fail cheaplyWhy do this?

Before you invest time and money

Prototype for areas you don’t know

Test risky functionality

Validate:

• Core interactions

• Application patterns

• How content is organized

What are we prototyping?

Concepts

Concepts?

FrameworksParadigms

Approaches

Design IdeasIdeation

Ready to prototype?Not so fast.

What makes a prototype a prototype?

Prototypes vs. StoriesOr Interactive Prototypes vs. Narative Prototypes

The experience prototype allows designers to show and test the solution through an active participation of the users.

(2000) Marion Buchenau, Jane Fulton Suri, Experience Prototyping, paper presented at the Symposium on Designing Interactive Systems.

The experience prototype allows designers to show and test the solution through an active participation of the users.

(2000) Marion Buchenau, Jane Fulton Suri, Experience Prototyping, paper presented at the Symposium on Designing Interactive Systems.

We all use stories to communicate...and inspire. Basing stories on fact will help you communicate your own ideas effectively. Tell your story well: you'll get buy-in for the design and you'll have everyone on the same page.

Whitney Quesenbery, Storytelling for User Experience

We all use stories to communicate...and inspire. Basing stories on fact will help you communicate your own ideas effectively. Tell your story well: you'll get buy-in for the design and you'll have everyone on the same page.

Whitney Quesenbery, Storytelling for User Experience

Prototypes often requires moderation, facilitation, or context explained

Storytelling stands on it’s own, doesn’t need context

3rd person 1st person

Prototypes tests parts of the experience

Storytelling describes a complete experience

ExplorationExplanation

Narrative Prototype (Story or Scenario)

Interactive Prototype

Prototyping Ideas

Prototyping Ideas

• Not about rapid, or paper, or high-fidelity or which software

• It’s for users, not stakeholders

• It’s about the ideas

Prototyping Ideas

• Does it make sense to users?

• Is the framework valid?(collection of features that play nice together)

• Does the application pattern work?(common ways to present task based applications)

• Is the content organized logically? Is it the right content?

• Getting questions answered!

It’s not about requirements.(at least not yet)

BroadNot deep

What to prototype

• What you don’t know• The product's story• Everything you need to convey

the product experience (but no more)

Fast.Cheep.

Portable.Easy.

$20 in the app store.No cheaper software for prototyping.

But more on Keynote later.

Really, I don’t care what you use.

Testing concepts?Who and what.

We use prototypes to answer design questions?

So what are those questions?

What do you need to know about your designs?

Does it support the value proposition?

Does it support the vision?

Does it make sense to users?

Is this framework work best for users?

(Do the collection of features support the users mental model?)

Are users making sense of the content?

Not usability testing.Stay out of the weeds.

(again, broad not deep)

Not (small scale) usability testing.

You’ll uncover large scale usability issues.

• Prototype for areas you don’t know

• Core interactions

• Application patterns

• Content

• Risky functionality

“The better it looks, the more narrow the feedback.”

—Kathy Sierra

Use design principles

Charmr Design Principles

Adaptive Path’s User Intensive, 2011

Charmr Design Principles

• Wear it during sex• Make better use of data• Easy to learn and teach/No numbers• Less stuff• Keep diabetics in control• Keep diabetics motivated


Palm Pilot Design Principles

■ Fits in a shirt pocket

■ Syncs seamlessly with PC

■ Fast and easy sync

■ No more than $299


Design Principles

• More than just requirements or specs. Non specific!

• Combines the structured findings of research with the best ideas of ideation

• Should be specific as possible and catchy

• Unique to your product or design

• More important than any one design

• Use to determine what concept to move forward with

• Also for making decisions during the project


Just one prototype?Um, no.

• Develop multiple ideas

• Test against design principles

• Extremes in concepts for contrast and comparison

Different concepts

Make them different

• Different IA: Labels, navigation, content

• Different Information Design: Hierarchy and emphasis

• Different Interactions: Different design patterns (ex: sliders vs. dropdowns, hovers vs. lightboxes)

Make them different

• Making each unique

• Design extremes between concepts

• Welcome gaps

• More interactive > less interactive

• More content heavy > less content heavy

• Different messaging, or prioritized content differently

• Different order of steps

• Different interaction models (example: slider vs. drop-downs)

Ideas on a spectrum

When not Keynote?When custom

interactions are the ‘thing’ you need to validate

Real content!Your design idea is too abstract to the user

without real content.

Determine criteria you use to evaluate the design. Keeps it from being “I like this” or “I don’t like that”

Evaluating Ideas

Evaluating Criteria• Discoverable• Trustworthy• Appropriate• Responsive• Smart• Clever• Meaningful• Pleasurable For more, read

Designing for Interactionby Dan Saffer

Hitting many is great, but usually you are going to just hit a few key criteria depending on goals.

• Discoverable• Trustworthy• Appropriate• Responsive• Smart• Clever• Meaningful• Pleasurable

Hitting many is great, but usually you are going to just hit a few key criteria depending on goals.

• Discoverable• Trustworthy• Appropriate• Responsive• Smart• Clever• Meaningful• Pleasurable

Name your concepts.

“The One Pager”

“The Policy Explorer”

“The Worksheet”

Concept: The One-pager

Successes:• easy to understand the steps• very narrative• good mix of visual and textual

information• everything in one place/page

Concept: The WorksheetSuccesses:• Great for feedback about

process and progress• Good for monitoring the

“running total”• A good format for making

suggestions (e.g. things you might need to provide for with your coverage)

• Easy to take in at a glance or take away to share

Concept: The Policy Explorer

Successes:• Everything all in one place• Easy to play with and see the

connections and implications between the concepts

• Less about process and more about action

64

ThemesWhat follows are the major themes we saw during concept testing with customers. We’ve called out specific aspects, features, etc. of the concepts that represent these themes.

Since last time: Concepts and Testing

Themes: Estimating is central65

• The estimate serves as a high-level anchor

• An estimate of some sort needs to be front and center (either a real estimate/quote or examples like the snapshot grid)

• Members must be able to quickly get to a number (either because we suggest something, or it’s easy to generate)

• Use “Estimate” rather than “quote”

• Saving estimates is important (but in way that highlights differences)

Snapshot grid

Quick access to estimate

Realtime estimate update

Themes: Provide deeper information66

• Deep information should not be “in the way” but should be easily accessible

• Contextual relevance is key -- offer things at the right time/place

• Content should be accessible in levels or “escalation”

1. Links to available content (call out or tool tip, highly contextual)

2. Nugget (“executive summary”)3. Full detail (not necessarily long

article)• Explaining policies is the most important

area for deeper information• People appreciate and trust the

company’s expertise; they want deeper, editorialized information from you (“Tell Me More”)

Explanation of policy, executive summary

Contextual help

Highlight explanation of policies

Themes: Comparisons67

• Policy and prices side by side is powerful

• Comparisons should come with suggestions or the company’s POV

• Allow comparison at different levels1. Static/initial (snapshot grid)2. Personalized (when selecting a

policy/estimate, contrast to other options)

3. Custom (comparing saved quotes – what were the differences?)

Policy comparison grid

Policy Comparison with suggestions

Themes: Play Around68

• Let people perform tasks quickly• Keep as much in one place as possible• Allow adjustability and quick feedback -

“massaging the data”• Allow them to hit the target that is right

for them (could be price or coverage or policy)

• Especially good for numerical adjustments, but may be more difficult to use for policy and health

Policy characteristics

Policy, coverage, and health

Interactive Prototype (landing page)

70

Interactive Prototype (worksheet: quick estimate )

Guiding the userduring testing

• Thinking out load

• Nobody likes to admit they don’t know something or can’t figure something out

• Designers observe

• Tell participants: no wrong answers

• Can’t offend us (“not my design”)

• Interview based tasks

Create a protocol!

• Prompts for your interview session

• Based on key objectives you want to learn, or key questions you want answered

• Is meant as reminders, not a rigid script

Interview based tasksIn interview-based tasks, the participants interests are discovered, not assigned. Unlike scavenger-hunt tasks, the test's facilitator and participant negotiate the tasks during the tests, instead of proceeding down a list of predefined tasks.

Because each task is drawn from the experience and interest of each participant, no two participants perform exactly the same tasks. As we're looking for the usability problems that pop up, we're also looking for how the user approaches their problem and the level of detail they require.

Surprisingly, we often see multiple participants run into the same problems. Even though their tasks are radically different, they have very similar experiences.

As each participant designs their own tasks, they are telling us how they think about the content on the site, giving us insight into the words we choose for links and how we organize the material.

Jared Spool (http://www.uie.com/articles/interview_based_tasks/)

http://www.uie.com/articles/interview_based_tasks/

http://www.uie.com/articles/interview_based_tasks/

Keynote: An Introduction

(the very basics)

Inspectors (AKA Palettes)

Document

Text

Shape effects

Linking

Links

Blue arrow indicates an object is linked

about us

Nulla dui purus

about us

Doesn’t show when you ‘play’ prototype presentation

Master Slides: Time Saver

Create your templates here

Can be applied to multiple pages

Create master slide templates for elements you know will be the same from page to page (or state to state)

Linking Pages

Select objects on screen and link to new page or state

Use the palette to select where you want the link to go. (it will remember the slide if you change the order)

about us blog contact

CatagoriesBlogNulla dui purusConsequatAeneanEtiam imperdiet

Nulla dui purus, eleifend vel, consequat non, dictum porta dui purus, eleifend vel, consequat. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Read more >

Home

Archives

Nulla dui purusConsequatAeneanEtiam imperdietNulla dui purus, eleifend vel, consequat non,

dictum porta dui purus, eleifend vel, consequat. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Read more >




Home

Archives






Home

Archives






Home

Archives






Home

Archives




Big Headline Goes Here

Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue.

about features



Nulla dui purus, eleifend vel, consequat non, dictum porta dui purus, eleifend vel, consequat

Nulla dui purus, eleifend vel, consequat non, dictum porta dui purus, eleifend vel, consequat

Home

Get Started!




Home

Archives



about us blog contactHome

Inbox

Starred

Drafts

Sent

Junk

work

home

sports

entertainment

baby

work

home

sports

entertainment

baby

Tags To:

From:

Subject:

Nulla dui purus, eleifend vel, consequat non, dictum porta dui purus, eleifend vel, consequat. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue.

That get’s you up and running today.But for proper advanced Keynote prototyping:

http://www.slideshare.net/tbisaacs/keynote-kungfu-black-belt

Keynote Kungfu Black BeltTravis Isaacs’

http://www.slideshare.net/tbisaacs/keynote-kungfu-black-belt

Thank you!

Chris RisdonLead Experience Designer, Adaptive Path

@chrisrisdon

Date post:	27-Jan-2015
Category:	Design
Upload:	chris-risdon
View:	106 times
Download:	0 times