Managing change with prototyping
•Download as PPTX, PDF•
1 like•447 views
* Why Prototype To evaluate an idea quickly with participation from intended users * How to Prototype Goal-driven task/user flows; relevant content; consistent style for interactive UI elements * Prototyping with Indigo Studio (basics) Draw the starting UI for user flow; add interaction to create a new state; make necessary UI changes * Prototyping for large apps with Custom UI libraries Standardize UI components by styling and converting them to screenparts, and reuse * Indigodesigned.com and community Learn from others; browse and download prototypes and re-usable UI libraries
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (18)
Similar to Managing change with prototyping
Similar to Managing change with prototyping (20)
Recently uploaded
Recently uploaded (20)
Managing change with prototyping
- 1. Managing Change with Prototyping GEORGE ABRAHAM, Ph.D Product Design Manager for Indigo Studio Twitter @jabbersga / gabraham@infragistics.com
- 2. Changeisunavoidable! 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.
- 3. Overview Why Prototype? How to Prototype? Prototyping for large-ish applications with custom UI libraries Indigodesigned.com Prototyping basics for Indigo Studio
- 4. Changeisunavoidable! 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?
- 5. It’sUXseason! Do you “speak” user experience? What users can give actionable feedback on is a small piece ( by evaluating prototypes) Your UX process Your AnnotatedWireframes Your design rationale Your Personas Your Scenarios and so on… Users Don’t Care About … Why Prototype?
- 6. Shared Learning not deliverables Why Prototype?
- 7. Shared Learning with Users Not 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?
- 8. Evaluate Experience for Adoption WITH USERS, IN USE, IN CONTEXT 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?
- 9. Trying it Out - Finding Out with users, in use, in context Evaluate in Use, with Users, in the right context. New Insights/Learni NEED MORE INFORMATION? Trying it out On your own Idea/Question Why Prototype?
- 10. Overview Why Prototype? How to Prototype? Prototyping for large-ish applications with custom UI libraries Indigodesigned.com Prototyping basics for Indigo Studio To evaluate an idea with participation from intended users
- 11. Prototyping the Experience and 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?
- 12. Prototyping the Experience 1. Plan for user flows, and not screens How to prototype?
- 13. Prototyping Stories-of-Use “What does the user do… then what happens?” AND THEN? AND THEN? How to prototype?
- 14. User flow forWithdraw transaction (ATM) User Interaction (e.g.,Tap)
- 15. Prototyping the Experience 2. Enough content fidelity to make a decision, not Lorel Ipsum $ x,xxx.xx $ x,xxx.xx How to prototype?
- 16. Prototyping the Experience 3. Consistent style for user action buttons/links white space or negative space! How to prototype?
- 17. Overview Why Prototype? How to Prototype? Prototyping for large-ish applications with custom UI libraries Indigodesigned.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
- 18. Prototyping with Indigo Studio STORY-OF-USE PrototypingVideo
- 19. Start state Tapped all other transactions Tapped get cash Tapped checking account User flow forWithdraw transaction (ATM) How to prototype with Indigo Studio?
- 20. Start state Tapped all other transactions Tapped get cash Tapped checking account User flow forWithdraw transaction Get Cash interaction How to prototype with Indigo Studio?
- 21. 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 Interaction Taps “get cash” Change this screen
- 22. taps 1. move editedit 2. edit Get Cash 0ms 300ms 600ms move resize Deposit remove Timeline area always keeps track of changes you are making in the new state. Design UI changes How to prototype in Indigo Studio? Timeline >
- 23. Overview Why Prototype? How to Prototype? Prototyping for large-ish applications with custom UI libraries Indigodesigned.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
- 24. Enterprise UI library Our UI Elements Your Screenparts UI Elements for Desktop/Mobile Create & Reuse custom UI Elements
- 25. Storyboard Screen Screenpart Capturing Stories Drawing User Interfaces Reusable/Custom UI Elements Using screenparts Video tutorial Video tutorial VideoTutorial Help topic on adding interactions Help topic on screenparts
- 26. Overview Why Prototype? How to Prototype? Prototyping for large-ish applications with custom UI libraries Indigodesigned.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
- 27. 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
- 28. Overview Why Prototype? How to Prototype? Prototyping for large-ish applications with custom UI libraries Indigodesigned.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
- 29. Prototyping Stories-of-Use drawing + adding interactions + animation View Prototypes
- 30. Keeping it lean w/ Indigo Studio @indigodesigned FOLLOW US www.infragistics.com/products/indigo-studio DOWNLOAD 30-DAYTRAIL Indigostudio.uservoice.com NEW IDEAS?
Editor's Notes
- We have heard a lot about wireframing in the past, but more recently there seems to be a shift towards prototyping. Is there a meaningful difference between the two, and how does that affect the interaction design process?
- We have heard a lot about wireframing in the past, but more recently there seems to be a shift towards prototyping. Is there a meaningful difference between the two, and how does that affect the interaction design process?
- We have heard a lot about wireframing in the past, but more recently there seems to be a shift towards prototyping. Is there a meaningful difference between the two, and how does that affect the interaction design process?
- We have heard a lot about wireframing in the past, but more recently there seems to be a shift towards prototyping. Is there a meaningful difference between the two, and how does that affect the interaction design process?
- We have all done whiteboarding for user flows at some point or another. It’s a rich depiction of the application states needed to support the story of use. Here we are showing an example of an autosales dashboard. The arrows represents a flow through the application to achieve a user goal. In this case, the goal is to view a dashboard for a particular dealer.
- We have heard a lot about wireframing in the past, but more recently there seems to be a shift towards prototyping. Is there a meaningful difference between the two, and how does that affect the interaction design process?
- The purpose of prototyping is quite literally trying things out on your own, being able to evaluate it with the user, gain insights for the next iteration.
- We have heard a lot about wireframing in the past, but more recently there seems to be a shift towards prototyping. Is there a meaningful difference between the two, and how does that affect the interaction design process?
- Designing prototypes does not have to be different from telling a story. But via pixels and interactions.
- Designing prototypes does not have to be different from telling a story. But via pixels and interactions. More on this later when we discuss prototyping with Indigo Studio.
- Since our focus is on prototyping the experience, we are designing one flow at a time. And we need to include enough content to keep the flow moving along. This means you need to have appropriate content for the user to process and take action. In the case of withdraw flow, using lorel ipsum is as good as redacted text. With lorel ipsum you only get an idea of the structure and style of the UI, and not it’s purpose. This does NOT work for usability testing with users.
- Having a basic style guide in place for your interactive elements goes a long way in prototyping quickly
- Indigo Studio achieves this goal of prototyping end-to-end user flows using three basic constructs: Drawing UI’s using a toolbox of UI elements, adding interactions (tap, swipe etc.), and animating the transitions to aid with feedback. And doing this in a fluid way by retaining the focus on the user flow. See video for a quick overview of prototyping with Indigo Studio.
- Designing prototypes does not have to be different from telling a story. But via pixels and interactions.
- Let’s focus on the two views highlighted here
- Designing prototypes does not have to be different from telling a story. But via pixels and interactions.
- Designing prototypes does not have to be different from telling a story. But via pixels and interactions.
- We have heard a lot about wireframing in the past, but more recently there seems to be a shift towards prototyping. Is there a meaningful difference between the two, and how does that affect the interaction design process?
- On top of this, Indigo offers three design artifacts. Each constructed to serve a specific purpose.
- We have heard a lot about wireframing in the past, but more recently there seems to be a shift towards prototyping. Is there a meaningful difference between the two, and how does that affect the interaction design process?
- We have heard a lot about wireframing in the past, but more recently there seems to be a shift towards prototyping. Is there a meaningful difference between the two, and how does that affect the interaction design process?
- So what does a prototype created in Indigo Studio feel like? The car maintenance app shows how someone would use the app to get a flat tire fixed. It attempts to reimagine the car-dealership experience too, where the digital solution is driven by the physical context (dealership service flow).