Managing change with prototyping
-
Upload
george-abraham -
Category
Design
-
view
255 -
download
4
Transcript of Managing change with prototyping
![Page 1: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/1.jpg)
Managing Change with Prototyping
GEORGE ABRAHAM, Ph.DProduct Design Manager for Indigo Studio
Twitter @jabbersga / [email protected]
![Page 2: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/2.jpg)
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.
![Page 3: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/3.jpg)
OverviewWhy Prototype?
How to Prototype?
Prototyping for large-ish applications with custom UI librariesIndigodesigned.com
Prototyping basics for Indigo Studio
![Page 4: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/4.jpg)
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?
![Page 5: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/5.jpg)
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?
![Page 6: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/6.jpg)
Shared Learningnot deliverables
Why Prototype?
![Page 7: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/7.jpg)
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?
![Page 8: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/8.jpg)
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?
![Page 9: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/9.jpg)
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?
![Page 10: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/10.jpg)
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
![Page 11: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/11.jpg)
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?
![Page 12: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/12.jpg)
Prototyping the Experience1. Plan for user flows, and not screens
How to prototype?
![Page 13: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/13.jpg)
Prototyping Stories-of-Use“What does the user do… then what happens?”
AND THEN?AND
THEN?
How to prototype?
![Page 14: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/14.jpg)
User flow for Withdraw transaction (ATM)
User Interaction (e.g., Tap)
![Page 15: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/15.jpg)
Prototyping the Experience2. Enough content fidelity to make a decision, not Lorel Ipsum
$ x,xxx.xx
$ x,xxx.xx
How to prototype?
![Page 16: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/16.jpg)
Prototyping the Experience3. Consistent style for user action buttons/links
white space or
negative space!
How to prototype?
![Page 17: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/17.jpg)
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
![Page 18: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/18.jpg)
Prototyping with Indigo Studio
STORY-OF-USEPrototyping Video
![Page 19: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/19.jpg)
Start state Tapped all other transactions
Tapped get cash Tapped checking account
User flow for Withdraw transaction (ATM)How to prototype with Indigo Studio?
![Page 20: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/20.jpg)
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?
![Page 21: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/21.jpg)
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
![Page 22: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/22.jpg)
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 >
![Page 23: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/23.jpg)
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
![Page 24: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/24.jpg)
Enterprise UI libraryOur UI Elements Your Screenparts
UI Elements for Desktop/Mobile
Create & Reuse custom UI Elements
![Page 25: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/25.jpg)
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
![Page 26: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/26.jpg)
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
![Page 27: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/27.jpg)
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
![Page 28: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/28.jpg)
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
![Page 29: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/29.jpg)
Prototyping Stories-of-Usedrawing + adding interactions + animation
View Prototypes
![Page 30: Managing change with prototyping](https://reader034.fdocuments.in/reader034/viewer/2022042722/589c3a601a28abec478b5a35/html5/thumbnails/30.jpg)
Keeping it lean w/ Indigo Studio
@indigodesignedFOLLOW US
www.infragistics.com/products/indigo-studioDOWNLOAD 30-DAY TRAIL
Indigostudio.uservoice.comNEW IDEAS?