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.

UX Flows - Skillshare

9,155 views

Published on

My UX Flows presentation deck from the May 24th Skillshare class.

Published in: Technology

UX Flows - Skillshare

  1. 1. UX FlowsBeyond Sitemaps & Wireframes @tdavidson
  2. 2. CarlSenior UI Designer@ Salesforce.com@carlnelsoncarl@carlrnelson.com @tdavidson
  3. 3. What are flows?
  4. 4. Paths@tdavidson
  5. 5. Map Goals Business & User Objectives to Actions@tdavidson
  6. 6. ComplexSimple
  7. 7. Why are they important?
  8. 8. Guide People
  9. 9. ConversionSignups, Sales, Sharing
  10. 10. What do they look like?
  11. 11. Hi-FidelityLo-Fidelity
  12. 12. Flowcharts@tdavidson
  13. 13. IA Diagrams
  14. 14. State Diagrams
  15. 15. Narratives@jlinowski
  16. 16. Wireflow@anho@tdavidson
  17. 17. Speech Bubbles@tdavidson barnabasnagy.net
  18. 18. Breaking It Down Elements that can make up a flow
  19. 19. Screen Decision File Input/Output Connector
  20. 20. What do theyencompass?
  21. 21. Screens
  22. 22. Email
  23. 23. Social Media
  24. 24. Phone
  25. 25. Any entry point
  26. 26. What makesa good flow?
  27. 27. In Flow • Starts with goals • Tells the users story • Shows user intention • Shows screen changes • Shows between the states In UI • Clear call to action • Shows progress • Provides feedback • Consistent • Maintains context • Good signage@tdavidson
  28. 28. A Good UI Flow
  29. 29. Landing Page 1. Sign Up field and button are primary call to action on screen. 2. Company logos and “Used by...” are positive social reinforcement. 3. Testimonial provides additional positive social reinforcement. 4. Image shows that service is multi-platform.
  30. 30. Thank You Page 1. Good message hierarchy. 2. Secondary message and activity clear.
  31. 31. Activate Email 1. Clear signup button call to action. 2. Secondary messaging available for non-HTML email.
  32. 32. Create Profile Page 1. Progress bar indicates clear signage indicator of where the user is and how many steps are ahead. 2. Progress is limited to moving forward or opting out by closing the window.
  33. 33. Create Profile Page - 1. Field completion check marks show on screen progress. 2. Password strength indicator dynamically shows strength of password and acceptableness of password. 3. Change: Add autocomplete search style functionality to Department Name and Job Title.
  34. 34. Follow Colleagues Page 1. Colleague form fields encourage the invitation of non-Yammer members and connecting with already established members Change: Add existing member profile icons Change: One email field that adds another as you type into it. 2. Problem: Don’t understand what this relevance score pertains to or why it is given on screen prominence.
  35. 35. Join Groups Page 1. Notification button for Joined signifies onscreen activity and changes. 2. Groups are both verbally described and iconically represented. 3. Call to action for adding yourself to group is simple and clear. Problem: Grouping of word, icon and call to action looks misaligned and weighted to the bottom right corner. Change: Create single icon with descriptor that acts as a call to action.
  36. 36. Add Your Photo Page 1. Skip option allows the user to move forward without having to finish this step. 2. Problem: Default language should be changed to reflect choosing a photo of yourself not the technical aspect of selecting an image from your computer. Problem: Alignment of default image and upload button are off. Change: Create single default image with description of action as call Add your profile photo to action. 3. Change: Automatically upload and preview image once selected. Allow for cropping.
  37. 37. Add Your Photo Page - 1. Problem: Alignment of default image and upload button are off. Change: Automatically upload and preview image once selected. Allow for cropping. 2. Problem: Save & Continue is inconsistent with prior use of (Next) button in prior screens. Change: Change button to be a “Finish Profile” or “Start Yammering” button.
  38. 38. Logged In + Desktop App 1. Layover encourages interacting with front layer. 2. Call to action download button prominent and easily understandable. Problem: Visual style of the button feels inconsistent from other buttons due to the larger scale of the button. Change: Re-envision the button with it’s own visual style that makes it more distinct from other buttons.
  39. 39. What makesa bad flow?
  40. 40. In Flow • No clear goals • No user context • Not detailed enough • Focuses on features In UI • No clear call to action • No feedback • Lack of signage • Inconsistent • Breaks context • Forces user to remember@tdavidson
  41. 41. A Bad Flow
  42. 42. Tools
  43. 43. Q/A@carlnelsoncarl@carlrnelson.com @tdavidson

×