managing change with prototyping
TRANSCRIPT
Managing Change with Prototyping
GEORGE ABRAHAM, Ph.DProduct Design Manager for Indigo Studio
Twitter @jabbersga / [email protected]
Change is unavoidable!whether you like it or not
Users have changed UI patterns changed Business has changed!Yours is not the only system
in the market! Competition is nipping at your heels.
Touch is not the only Interaction pattern that has changed. Desktop apps have also
evolved!
Some digital/physical products have moved on to become web
enabled services.
OverviewWhy Prototype?
How to Prototype?
Prototyping for large-ish applications with custom UI librariesIndigodesigned.com
Prototyping basics for Indigo Studio
Change is unavoidable!whether you like it or not
Users have changed
UI patterns changed
Business has changed!Yours is not the only
system in the market! Competition is nipping at
your heels!
Touch is not the only Interaction pattern that has
changed. Desktop apps have also evolved!
Some digital/physical products have moved on to
become web enabled services.
Software is not something you take to an Antiques Roadshow.
www.pbs.org/wgbh/roadshow/
Why Prototype?
It’s UX season!Do you “speak” user experience?
What users can give actionable feedback on is a small piece ( by evaluating prototypes)
Your UX processYour Annotated WireframesYour design rationaleYour PersonasYour Scenariosand so on…
Users Don’t Care About …
Why Prototype?
Shared Learningnot deliverables
Why Prototype?
Shared Learning with UsersNot deliverables
Images from https://ubuntu.mybalsamiq.com/projects/ubuntuphonecoreapps
Delivering wireframes is NOT the goal of a good design process.
Annotated wireframes is complex enough for the team, let alone the user.
Only serves as one of many ways to start a design conversation. Not with users
Why Prototype?
Evaluate Experience for AdoptionWITH USERS, IN USE, IN CONTEXT
LESS OF
THIS
MORE OF
THIS!
Stop “presenting” your design. Start “evaluating” it with users.
Observations gathered by evaluating with users is more actionable and relevant to design iteration
If the context is a device, try to evaluate it on a device
Why Prototype?
Trying it Out - Finding Outwith users, in use, in context
Evaluate in Use,
with Users, in the right
context.
New Insights/Le
arnings
NEED MOREINFORMATIO
N?
Trying it out
On your own
Idea/Question
Why Prototype?
OverviewWhy Prototype?
How to Prototype?
Prototyping for large-ish applications with custom UI librariesIndigodesigned.com
Prototyping basics for Indigo Studio
To evaluate an idea with participation from intended users
Prototyping the Experienceand not the application
Prototype only what’s needed to evaluate the experience
Think of experience as stories-of- use or user-flow, and not page design
Prioritize and start prototyping the most valuable story or riskiest assumptions first. Go Lean.
Spend couple of hours to couple of days prototyping for the story. Taking longer? Something is amiss.
Application
Stories/Flow
How to prototype?
Prototyping the Experience1. Plan for user flows, and not screens
How to prototype?
Prototyping Stories-of-Use“What does the user do… then what happens?”
AND THEN?AND
THEN?
How to prototype?
User flow for Withdraw transaction (ATM)
User Interaction (e.g., Tap)
Prototyping the Experience2. Enough content fidelity to make a decision, not Lorel Ipsum
$ x,xxx.xx
$ x,xxx.xx
How to prototype?
Prototyping the Experience3. Consistent style for user action buttons/links
white space or
negative space!
How to prototype?
OverviewWhy Prototype?
How to Prototype?
Prototyping for large-ish applications with custom UI librariesIndigodesigned.com
Prototyping basics for Indigo Studio
To evaluate an idea with participation from intended users
Goal-driven task/user flows; relevant content; consistent affordance and style for interaction
Prototyping with Indigo Studio
STORY-OF-USEPrototyping Video
Start state Tapped all other transactions
Tapped get cash Tapped checking account
User flow for Withdraw transaction (ATM)How to prototype with Indigo Studio?
Start state Tapped all other transactions
Tapped get cash Tapped checking account
User flow for Withdraw transaction \ Get Cash interactionHow to prototype with Indigo Studio?
Design UI changes
2. edit
1. move
editedit
1. Draw the UI 3. Create a new state
Ix. (Tap)
How to prototype in Indigo Studio?
And make UI changes
Get cash
2. Add InteractionTaps “get cash”Change this screen
taps1. move
editedit
2. edit
Get Cash0ms 300ms 600ms
moveresize
Deposit remove
Timeline area always keeps track of changes you are making in the new state.
Design UI changesHow to prototype in Indigo Studio?
Timeline >
OverviewWhy Prototype?
How to Prototype?
Prototyping for large-ish applications with custom UI librariesIndigodesigned.com
Prototyping basics for Indigo Studio
To evaluate an idea with participation from intended users
Goal-driven task/user flows relevant content consistent style for interactive UI elements
Draw the starting UI for user flow add interaction to create a new state make necessary UI changes
Enterprise UI libraryOur UI Elements Your Screenparts
UI Elements for Desktop/Mobile
Create & Reuse custom UI Elements
Storyboard
Screen
Screenpart
Capturing Stories
Drawing User Interfaces
Reusable/Custom UI Elements
Using screenparts
Video tutorial
Video tutorial
Video TutorialHelp topic on adding interactions
Help topic on screenparts
OverviewWhy Prototype?
How to Prototype?
Prototyping for large-ish applications with custom UI librariesIndigodesigned.com
Prototyping basics for Indigo Studio
To evaluate an idea with participation from intended users
Goal-driven task/user flows relevant content consistent style for interactive UI elements
Draw the starting UI for user flow add interaction to create a new state make necessary UI changes
Standardize UI components by styling and converting them to screenparts, and reuse
Visit indigodesigned.com
Manage your shares on any device
Organize and curate your designs using collections & Tags
A dashboard for your prototypes
Browse and download designs contributed by the indigodesigned community
OverviewWhy Prototype?
How to Prototype?
Prototyping for large-ish applications with custom UI librariesIndigodesigned.com
Prototyping basics for Indigo Studio
To evaluate an idea with participation from intended users
Goal-driven task/user flows relevant content consistent style for interactive UI elements
Draw the starting UI for user flow add interaction to create a new state make necessary UI changes
Standardize UI components by styling and converting them to screenparts, and reuse
Browse and download prototypes and re-usable UI libraries
Prototyping Stories-of-Usedrawing + adding interactions + animation
View Prototypes
Keeping it lean w/ Indigo Studio
@indigodesignedFOLLOW US
www.infragistics.com/products/indigo-studioDOWNLOAD 30-DAY TRAIL
Indigostudio.uservoice.comNEW IDEAS?