Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Managing change with prototyping

343 views

Published on

* 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

Published in: Design
  • You can hardly find a student who enjoys writing a college papers. Among all the other tasks they get assigned in college, writing essays is one of the most difficult assignments. Fortunately for students, there are many offers nowadays which help to make this process easier. The best service which can help you is ⇒ www.WritePaper.info ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Managing change with prototyping

  1. 1. Managing Change with Prototyping GEORGE ABRAHAM, Ph.D Product Design Manager for Indigo Studio Twitter @jabbersga / gabraham@infragistics.com
  2. 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. 3. Overview Why Prototype? How to Prototype? Prototyping for large-ish applications with custom UI libraries Indigodesigned.com Prototyping basics for Indigo Studio
  4. 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. 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. 6. Shared Learning not deliverables Why Prototype?
  7. 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. 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. 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. 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. 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. 12. Prototyping the Experience 1. Plan for user flows, and not screens How to prototype?
  13. 13. Prototyping Stories-of-Use “What does the user do… then what happens?” AND THEN? AND THEN? How to prototype?
  14. 14. User flow forWithdraw transaction (ATM) User Interaction (e.g.,Tap)
  15. 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. 16. Prototyping the Experience 3. Consistent style for user action buttons/links white space or negative space! How to prototype?
  17. 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. 18. Prototyping with Indigo Studio STORY-OF-USE PrototypingVideo
  19. 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. 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. 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. 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. 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. 24. Enterprise UI library Our UI Elements Your Screenparts UI Elements for Desktop/Mobile Create & Reuse custom UI Elements
  25. 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. 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. 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. 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. 29. Prototyping Stories-of-Use drawing + adding interactions + animation View Prototypes
  30. 30. Keeping it lean w/ Indigo Studio @indigodesigned FOLLOW US www.infragistics.com/products/indigo-studio DOWNLOAD 30-DAYTRAIL Indigostudio.uservoice.com NEW IDEAS?

×