Post on 11-Apr-2017
RAPID PROTOTYPING:
2015
Its aMAD, MAD
World
Managing DirectorUser Experience
Marti GoldMarti Gold@martigold@martigold
Why Use Prototypes?
Static images cannot
communicate interactions
• Minimizes Risk
• Permits Innovation
• Saves Time andMoney
• Reduces misinterpretation
• Tests Assumptions
And the most direct benefit for you…
If a picture is worth 1,000 words…
…A prototype is worth 1,000 emails.
Traditional Workflow vs.
Prototyping Workflow
In Traditional Workflows…
Step 1: Management communicates a product idea
Step 2:
“The Powerpoint
Development Phase”
Step 3: “We’re Agile so we start coding.”
“Please sir, may I do some user testing?”
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…”
A DEVELOPER WITH A FREE HOUR
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.
But after all this work, what happens if users hate it?
Well, it could go back up the funnel
for revisions…
Or it could be released “as is” with the intention of
“fixing minor issues via future updates.”
This process is unavoidably
Company-Centric
The company builds products the company wants, and then hopes the User will like them.
When using prototypes, the workflow is very different.
A small team quickly gatherscore requirements and defines the product’s goals.
DEVELOPER
Sketching and paper prototypingstarts almost immediately.
Business, Design, and Dev are ALL involved, generating ideas and discussing problems.
THE GOAL:Get an early concept prototype in front of a real user as quickly as possible.
Features and interactions are rapidly refined by user feedback.
Each iteration’s prototypes increase in fidelity.
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
Powerpoints vs. Tested Prototypes
If you are an executive, which project are you most likely to approve?
Prototyping processes are inherently
User-Centric
The company builds products the User wants, and can be confident the User will like them.
<disclaimer> </disclaimer>
The Current State of UX Prototyping Tools:
“WHICH ONE?”
The Good News
There are many easy-to-use, inexpensive tools non-Developers can use for prototyping.
Most are Very Affordable
and
$15–$40 per user, per month
But…….EEEKKKK!!
“They All Sound the Same”
Prototyping Tool Selectorwww.cooper.com/prototyping-tools
by Emily Schwartzman
Every article comparing toolssent me here…
http://socialcompare.com/en/comparison/mockup-wireframing-design-tools
34” monitor? It STILL didn’t fit.
Then I found this….
And this is what it looks like vertically!
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.
medium.com called 2014
“The Year of Interactive Design Tools”
PTSD Prototyping ToolSelection Disorder
The UX disease of 2015
PTSD ?? Do you have symptoms of
“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!”
Have you become a “Free Trial Junkie”?
Advanced Cases?
$100+ a month in recurring billing
for apps younever even open?
OMG! I HAZ IT!OMG! I HAZ IT!
The Dangers of PTSD
#1: Staying with paper prototypes for too long
At some point you have to jump from…
This…. To This….
And then from…
This…. To This….
Danger #2: “We’re in a hurry…
so I’ll just do it in Photoshop.”
#3: Staying Current
The PTSD Recovery Process
First, identify “your preferred type”
Paper
Clickable Wireframe
Image-Based High Fidelity
Paper Prototyping Tools
Tools to workwith sketches and paper prototypes
remotely
POP
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.
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
Clickable Wireframe Tools
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
• No support for gestures (only mouse interactions
• No options for animated transitions (fade, wipe left, etc.)
• No templates for specific devices
HotGloo Pain Points
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.
“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…
Image Based Tools
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
Invision (invisionapp.com)
• The “Axure” of the image-based tools
• Widely used, lots of community support
• Important: Syncs with native .psds
• Great collaboration tools
I kept hitting the wall.”“Why did I give it up?
Hi-Fidelity Tools
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
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)
Proto.io (proto.io)
• Very popular for mobile app prototyping
• Extensive tools
• Great community support
• The only real problem? No desktop version.
So, what DO you use?
For Early Concept Work?
For Mobile App Prototypes?
https://mural.ly/bigD
…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.
But whatever tool you select…
Don’t “marry” your first visions• Prototypes WILL
uncover many unexpected things
• Logic flaws
• Critical overlooked features
• Incorrect assumptions
If you aren’tprototyping already,
just START.
Before I go…
Shameless Book Plug
CREATING COLLABORATIVE STANDARDS
MARTI GOLD
Thank you!
marti.gold@tonic3.com
@martigold