rapid prototyping 2015: its a mad mad world

90
RAPID PROTOTYPING: 2015 Its a MAD, MAD World

Upload: marti-gold

Post on 11-Apr-2017

1.237 views

Category:

Design


10 download

TRANSCRIPT

Page 1: Rapid Prototyping 2015: Its a Mad Mad World

RAPID PROTOTYPING:

2015

Its aMAD, MAD

World

Page 2: Rapid Prototyping 2015: Its a Mad Mad World

Managing DirectorUser Experience

Marti GoldMarti Gold@martigold@martigold

Page 3: Rapid Prototyping 2015: Its a Mad Mad World

Why Use Prototypes?

Page 4: Rapid Prototyping 2015: Its a Mad Mad World

Static images cannot

communicate interactions

Page 5: Rapid Prototyping 2015: Its a Mad Mad World
Page 6: Rapid Prototyping 2015: Its a Mad Mad World

• Minimizes Risk

• Permits Innovation

• Saves Time andMoney

• Reduces misinterpretation

• Tests Assumptions

Page 7: Rapid Prototyping 2015: Its a Mad Mad World

And the most direct benefit for you…

Page 8: Rapid Prototyping 2015: Its a Mad Mad World

If a picture is worth 1,000 words…

Page 9: Rapid Prototyping 2015: Its a Mad Mad World

…A prototype is worth 1,000 emails.

Page 10: Rapid Prototyping 2015: Its a Mad Mad World

Traditional Workflow vs.

Prototyping Workflow

Page 11: Rapid Prototyping 2015: Its a Mad Mad World

In Traditional Workflows…

Step 1: Management communicates a product idea

Page 12: Rapid Prototyping 2015: Its a Mad Mad World

Step 2:

“The Powerpoint

Development Phase”

Page 13: Rapid Prototyping 2015: Its a Mad Mad World

Step 3: “We’re Agile so we start coding.”

Page 14: Rapid Prototyping 2015: Its a Mad Mad World

“Please sir, may I do some user testing?”

Page 15: Rapid Prototyping 2015: Its a Mad Mad World

NO“There’s no room in the timeline…”

“We don’t have the budget…”“There aren’t any available resources…”

“We can’t change the specs…”

“The project is already yellow…”

Page 16: Rapid Prototyping 2015: Its a Mad Mad World

A DEVELOPER WITH A FREE HOUR

Page 17: Rapid Prototyping 2015: Its a Mad Mad World

So now the clock is running… Tick tock, tick tock…..

The app is often in late alpha stage before a real user ever sees a working interface.

Page 18: Rapid Prototyping 2015: Its a Mad Mad World

But after all this work, what happens if users hate it?

Page 19: Rapid Prototyping 2015: Its a Mad Mad World

Well, it could go back up the funnel

for revisions…

Page 20: Rapid Prototyping 2015: Its a Mad Mad World

Or it could be released “as is” with the intention of

“fixing minor issues via future updates.”

Page 21: Rapid Prototyping 2015: Its a Mad Mad World

This process is unavoidably

Company-Centric

The company builds products the company wants, and then hopes the User will like them.

Page 22: Rapid Prototyping 2015: Its a Mad Mad World
Page 23: Rapid Prototyping 2015: Its a Mad Mad World

When using prototypes, the workflow is very different.

Page 24: Rapid Prototyping 2015: Its a Mad Mad World

A small team quickly gatherscore requirements and defines the product’s goals.

DEVELOPER

Page 25: Rapid Prototyping 2015: Its a Mad Mad World

Sketching and paper prototypingstarts almost immediately.

Business, Design, and Dev are ALL involved, generating ideas and discussing problems.

Page 26: Rapid Prototyping 2015: Its a Mad Mad World

THE GOAL:Get an early concept prototype in front of a real user as quickly as possible.

Page 27: Rapid Prototyping 2015: Its a Mad Mad World

Features and interactions are rapidly refined by user feedback.

Each iteration’s prototypes increase in fidelity.

Page 28: Rapid Prototyping 2015: Its a Mad Mad World

The “Go” or “NO Go” Decision

When prototype confidence reaches a certain level either…

• The idea is funded and approved for developmentOR…..

• The idea is abandoned

Page 29: Rapid Prototyping 2015: Its a Mad Mad World

Powerpoints vs. Tested Prototypes

If you are an executive, which project are you most likely to approve?

Page 30: Rapid Prototyping 2015: Its a Mad Mad World

Prototyping processes are inherently

User-Centric

The company builds products the User wants, and can be confident the User will like them.

Page 31: Rapid Prototyping 2015: Its a Mad Mad World

<disclaimer> </disclaimer>

Page 32: Rapid Prototyping 2015: Its a Mad Mad World

The Current State of UX Prototyping Tools:

“WHICH ONE?”

Page 33: Rapid Prototyping 2015: Its a Mad Mad World

The Good News

There are many easy-to-use, inexpensive tools non-Developers can use for prototyping.

Page 34: Rapid Prototyping 2015: Its a Mad Mad World

Most are Very Affordable

and

$15–$40 per user, per month

Page 35: Rapid Prototyping 2015: Its a Mad Mad World

But…….EEEKKKK!!

Page 36: Rapid Prototyping 2015: Its a Mad Mad World

“They All Sound the Same”

Page 37: Rapid Prototyping 2015: Its a Mad Mad World

Prototyping Tool Selectorwww.cooper.com/prototyping-tools

by Emily Schwartzman

Every article comparing toolssent me here…

Page 38: Rapid Prototyping 2015: Its a Mad Mad World

http://socialcompare.com/en/comparison/mockup-wireframing-design-tools

34” monitor? It STILL didn’t fit.

Then I found this….

Page 39: Rapid Prototyping 2015: Its a Mad Mad World

And this is what it looks like vertically!

Page 40: Rapid Prototyping 2015: Its a Mad Mad World

The Really Bad News?

• ALL of them still have at least one major, potentially “deal killing” shortcoming

• Very few of us have time to discover what those shortcomings are.

Page 41: Rapid Prototyping 2015: Its a Mad Mad World

medium.com called 2014

“The Year of Interactive Design Tools”

Page 42: Rapid Prototyping 2015: Its a Mad Mad World

PTSD Prototyping ToolSelection Disorder

The UX disease of 2015

Page 43: Rapid Prototyping 2015: Its a Mad Mad World

PTSD ?? Do you have symptoms of

Page 44: Rapid Prototyping 2015: Its a Mad Mad World

“How can I callmyself a UX Pro?I only know Visio!

“I’ve nevereven heard

of those apps!”

“Please stop talking about prototyping

before someone asks me which app I use!”

Page 45: Rapid Prototyping 2015: Its a Mad Mad World

Have you become a “Free Trial Junkie”?

Page 46: Rapid Prototyping 2015: Its a Mad Mad World

Advanced Cases?

$100+ a month in recurring billing

for apps younever even open?

Page 47: Rapid Prototyping 2015: Its a Mad Mad World

OMG! I HAZ IT!OMG! I HAZ IT!

Page 48: Rapid Prototyping 2015: Its a Mad Mad World

The Dangers of PTSD

Page 49: Rapid Prototyping 2015: Its a Mad Mad World

#1: Staying with paper prototypes for too long

Page 50: Rapid Prototyping 2015: Its a Mad Mad World

At some point you have to jump from…

This…. To This….

Page 51: Rapid Prototyping 2015: Its a Mad Mad World

And then from…

This…. To This….

Page 52: Rapid Prototyping 2015: Its a Mad Mad World

Danger #2: “We’re in a hurry…

so I’ll just do it in Photoshop.”

Page 53: Rapid Prototyping 2015: Its a Mad Mad World

#3: Staying Current

Page 54: Rapid Prototyping 2015: Its a Mad Mad World

The PTSD Recovery Process

Page 55: Rapid Prototyping 2015: Its a Mad Mad World

First, identify “your preferred type”

Page 56: Rapid Prototyping 2015: Its a Mad Mad World

Paper

Clickable Wireframe

Image-Based High Fidelity

Page 57: Rapid Prototyping 2015: Its a Mad Mad World

Paper Prototyping Tools

Page 58: Rapid Prototyping 2015: Its a Mad Mad World
Page 59: Rapid Prototyping 2015: Its a Mad Mad World
Page 60: Rapid Prototyping 2015: Its a Mad Mad World

Tools to workwith sketches and paper prototypes

remotely

Page 61: Rapid Prototyping 2015: Its a Mad Mad World

POP

Page 62: Rapid Prototyping 2015: Its a Mad Mad World

POP - Pros and Cons

• PRO: Photos can come from the camera, camera roll, Adobe Creative Cloud, or Dropbox

• PRO: Easy “hot spot” based interactions

• PRO: Companion web app

• PRO: Sharing via email, SMS, Facebook, or Twitter

• Deal Killer? Only that its very limited — but the convenience may be worth it in many instances.

Page 63: Rapid Prototyping 2015: Its a Mad Mad World

Mural (www.mural.ly)

Page 64: Rapid Prototyping 2015: Its a Mad Mad World

Mural - Pros and Cons

• BIG PRO: Lets you create, update, and even TEST sketches and paper prototypes with participants in remote locations

• PRO: VERY easy to use and learn

• PRO: Creates a “Paper Prototype Paper Trail”

• Deal Killer? I haven’t found one yet

Page 65: Rapid Prototyping 2015: Its a Mad Mad World

Clickable Wireframe Tools

Page 66: Rapid Prototyping 2015: Its a Mad Mad World
Page 67: Rapid Prototyping 2015: Its a Mad Mad World

HotGloo (hotgloo.com)

• Good news — its no longer Flash-based

• Solid library of UI elements

• Support for responsive design

• Designed to create work in the tool - painful to if you have existing mockups

Page 68: Rapid Prototyping 2015: Its a Mad Mad World

• No support for gestures (only mouse interactions

• No options for animated transitions (fade, wipe left, etc.)

• No templates for specific devices

HotGloo Pain Points

Page 69: Rapid Prototyping 2015: Its a Mad Mad World

Balsamiq Mockups (https://balsamiq.com/products/mockups/)

• Intentionally keeps wireframes rough and hand-drawn looking using “Sketch Skin”

• Works on all major OS

• Lots of community support

• Now has Google Drive integration

• Known for its clean interface and ease of use.

Page 70: Rapid Prototyping 2015: Its a Mad Mad World

“We think that in most cases, wireframes + running code is much better than prototyping.

…We consciously decided not to let users specify interactivity other than the ability to link wireframes together into a storyboard.”

The Balsamiq

Deal Killer

(for me)

from their website…

Page 71: Rapid Prototyping 2015: Its a Mad Mad World

Image Based Tools

Page 72: Rapid Prototyping 2015: Its a Mad Mad World

Flinto (flinto.com)

• POP on steroids

• Easy to drag links from one hots spot to another

• Can be sent to anyone via SMS

• Looks like a native app - icon on home screen

Page 73: Rapid Prototyping 2015: Its a Mad Mad World

Flinto for Mac (flinto.com/mac)

Page 74: Rapid Prototyping 2015: Its a Mad Mad World

Invision (invisionapp.com)

• The “Axure” of the image-based tools

• Widely used, lots of community support

• Important: Syncs with native .psds

• Great collaboration tools

Page 75: Rapid Prototyping 2015: Its a Mad Mad World

I kept hitting the wall.”“Why did I give it up?

Page 76: Rapid Prototyping 2015: Its a Mad Mad World

Hi-Fidelity Tools

Page 77: Rapid Prototyping 2015: Its a Mad Mad World

Justinmind ( justinmind.com)

• Will feel very familiar to Adobe users

• Lots of UI tools and widgets

• Lets you add conditionals, data sets, even does math

• App is a download, so you can work offline

Page 78: Rapid Prototyping 2015: Its a Mad Mad World

You could create it, but editing anything was a NIGHTMARE.

Need to change a complex interaction? Throw it all away and start over.

No styles? No Master Pages? SRSLY???

Next….

The JustinMindDeal Killer

(for me)

Page 79: Rapid Prototyping 2015: Its a Mad Mad World

Proto.io (proto.io)

• Very popular for mobile app prototyping

• Extensive tools

• Great community support

• The only real problem? No desktop version.

Page 80: Rapid Prototyping 2015: Its a Mad Mad World

So, what DO you use?

Page 81: Rapid Prototyping 2015: Its a Mad Mad World

For Early Concept Work?

For Mobile App Prototypes?

https://mural.ly/bigD

Page 82: Rapid Prototyping 2015: Its a Mad Mad World

…and for Responsive Web?

• My favorite tool doesn’t appear on a single prototyping app list

• Creates prototypes for desktop, tablet, and mobile

• Integrates seamlessly with Photoshop and Illustrator, but I usually createeverything I need directly in the app

• Has Master pages and grid support; plus paragraph, character, and object styles

• Reusable libraries of UI elements - built in, third-party, or my own

• Generates readable HTML/CSS, and I can name my own classes

• Can be instantly published and viewed by anyone, on any device with a browser

• Has extremely active corporate, third-party, and community support

• If you are familiar with Adobe products, you can learn it in about 15 minutes.

• You probably already have the full working version, and have just never opened it.

Page 83: Rapid Prototyping 2015: Its a Mad Mad World
Page 84: Rapid Prototyping 2015: Its a Mad Mad World
Page 85: Rapid Prototyping 2015: Its a Mad Mad World

But whatever tool you select…

Page 86: Rapid Prototyping 2015: Its a Mad Mad World

Don’t “marry” your first visions• Prototypes WILL

uncover many unexpected things

• Logic flaws

• Critical overlooked features

• Incorrect assumptions

Page 87: Rapid Prototyping 2015: Its a Mad Mad World

If you aren’tprototyping already,

just START.

Page 88: Rapid Prototyping 2015: Its a Mad Mad World

Before I go…

Page 89: Rapid Prototyping 2015: Its a Mad Mad World

Shameless Book Plug

CREATING COLLABORATIVE STANDARDS

MARTI GOLD

Page 90: Rapid Prototyping 2015: Its a Mad Mad World

Thank you!

[email protected]

@martigold