intro to sketching prototypes

28
Intro to Sketching Prototypes By Ambrose Little

Upload: ambrose-little

Post on 27-Jan-2015

111 views

Category:

Design


2 download

DESCRIPTION

This last Wednesday, we hosted a webinar called Intro to Sketching Prototypes (http://www.youtube.com/watch?v=RMMn88sP2NQ). These are the slides from that presentation. You can download the prototyping tool shown in the presentation here: http://www.infragistics.com/products/indigo-studio Webinar Description: Sketching prototypes? Yep, you heard that right—you'll have to watch to learn what it means! :) This webinar tangos with the theory behind effective prototyping, illustrates some of the tools at our disposal, and demonstrates how to effectively leverage a new software prototyping tool that tackles this practice head on--Indigo Studio. You'll come away more empowered to design software that exceeds expectations.

TRANSCRIPT

Page 1: Intro to Sketching Prototypes

Intro to Sketching PrototypesBy Ambrose Little

Page 2: Intro to Sketching Prototypes

Ambrose is just this guy, ya know?Designing and developing software since the late '90s at companies as small as one and as large as Verizon, working on internal systems, Web sites, and commercial software products.

Principal Design Technologist at Infragistics

(Product Manager, Indigo Studio)

Tweet @ambroselittle, @indigodesigned

http://linkedin.com/in/ambroselittle

Blog: ambroselittle.com

#prototyping #ux #ixd #design

Page 3: Intro to Sketching Prototypes

Prototypes, What Are They?

Page 4: Intro to Sketching Prototypes

What’s your definition?Functional/Interactive?Full App Simulation?

(from dictionary.com)

Page 5: Intro to Sketching Prototypes

The Two Bills

Bill Verplank Bill Buxton

Page 6: Intro to Sketching Prototypes

BillV says…

“‘Prototyping’ is externalizing and making concrete a design idea for the purpose of evaluation.”

Page 7: Intro to Sketching Prototypes

“Evaluation” is a big word.

Self-Reflection

Team CritiqueExpert Review

User Feedback/Critique

Observing Users

Client Review

Page 8: Intro to Sketching Prototypes

“Prototyping” is a big word, too.

But what’s at its core is that it’s not the final product. It’s on the opposite end of the lifecycle. One might say then that, ideally, a prototype is “sketchy”…

Page 9: Intro to Sketching Prototypes

BillB says…Sketching in the broad sense, as an activity, is not just a byproduct of design. It is central to design thinking and learning.

Sketching is:Quick. Timely. Inexpensive. Disposable. Plentiful.

A sketch suggests and explores more than confirms.

A sketch has minimal detail: “Going beyond ‘good enough’ is a negative.”

Sketching is a process of dialog, of learning.

Page 10: Intro to Sketching Prototypes

BillB also says…

“Sketches are not Prototypes!”

But he goes on to say this is because: “Much of this has to do with the related attributes of cost, timeliness, quantity, and disposability. Essentially, the investment in a prototype is larger than in a sketch, hence there are fewer of them, they are less disposable, and they take longer to build.”

Page 11: Intro to Sketching Prototypes

So… can you sketch prototypes?

Page 12: Intro to Sketching Prototypes

Yuhuh!

Emphatically, Yes!

The value of ‘sketching’ lies in its disposability, in the ability to efficiently explore many ideas with low cost.

Sketching prototypes is about just this—using tools that make it efficient to create many, quick, timely, disposable “sketches” of your design ideas so that you can get them out of your head and evaluate them.

Page 13: Intro to Sketching Prototypes

How to Effectively Sketch Prototypes

Page 14: Intro to Sketching Prototypes

1. What are you trying to learn?

Page 15: Intro to Sketching Prototypes

Some Reasons for Software Prototyping

Suggest/explore a user experience flow.

Suggest/explore particular interfaces on their own.

Evaluate the feasibility of a design.

Communicate a particular design for implementation.

Suggest/explore transitions & animations.

Full on application simulation.

Sket

chin

g Pr

otot

ypes

Page 16: Intro to Sketching Prototypes

2. Select the Right Tool for the Purpose

Page 17: Intro to Sketching Prototypes

Suggest/Explore a User Experience Flow

Writing – just narrate a story/scenario. (Leave out UI details.)

Storyboarding – narrate with words and pictures.http://uxmag.com/articles/storyboarding-in-the-software-design-process

Sketching Interaction Flow – design UI step-by-step for a particular flow.

Page 18: Intro to Sketching Prototypes

Challenges with Wireframes for Flow

Page 19: Intro to Sketching Prototypes

Suggest/Explore Particular Interfaces

Pen & Paper/Whiteboard – literally sketch in the traditional sense.

Wireframing – lay out static, low-fi UIs with a software tool.

Multiple Flows – design branches of different flows on same UI.

Page 20: Intro to Sketching Prototypes

Static Wireframes Require More Notes and Are Hard to Evaluate

Page 21: Intro to Sketching Prototypes

Suggest/Explore Transitions/Animations

Interactive Prototyping Tool – design animations with timelines, etc.

Animation Frameworks – code a prototype with an animation framework.

Page 22: Intro to Sketching Prototypes

Communicate for Implementation

Basically any artifact you create can be used to communicate design intent, so a sketchy prototype could be used for this purpose.

The drawback is it is probably lacking in a lot of details, so you will have to fill those in somehow: annotations, further fleshing out the prototype, ad hoc answering questions, etc.

These activities quickly leave the sketching aspect behind, so reserve filling in details for after the sketching phase when you’ve generated, synthesized, and iterated on your sketches.

Page 23: Intro to Sketching Prototypes

3. Keep It Throwawayly!

Sketching your prototype will utterly fail if you don’t stay focused.

- Prefer single path prototypes early on.- Omit irrelevant details (styling, perfect animations, pixel perfection, exact copy)- Fake it! Use images, icons, layers, shapes, groups—whatever is good enough to

explore and evaluate the idea.- This is not for production! Never start with the idea it will turn into productional

code. Bad!

Page 24: Intro to Sketching Prototypes

4. Don’t Stop with Your First Concept Ooh! That’s N

ice!

Page 25: Intro to Sketching Prototypes

5. Evaluate with REAL USERS.

You don’t have to evaluate every single concept, but you should at least evaluate one if not two prototypes that seem promising.

They don’t have to be fully functional, and probably shouldn’t be!

If not real users, then a user-like substance—someone who resembles them that is not on the team and is not the client/stakeholder.

Page 26: Intro to Sketching Prototypes

Keys to Effectively Sketching Prototypes

1. Know the purpose of your prototype—and don’t get distracted.

2. Select the right tool/method for your purpose.

3. Keep it throwawayly! Do the bare minimum.

4. Don’t stop with one concept—be fruitful and multiply.

5. Evaluate with real users.

Page 27: Intro to Sketching Prototypes

Sources Quoted

Page 28: Intro to Sketching Prototypes

Enjoy! Version 1 is Free Forever.

bit.ly/indigostudio | bit.ly/indigostudio-blog@indigodesigned