UX Flows - Skillshare
•Descargar como KEY, PDF•
27 recomendaciones•9,807 vistas
My UX Flows presentation deck from the May 24th Skillshare class.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (14)
Similar a UX Flows - Skillshare
Similar a UX Flows - Skillshare (20)
Último
Último (20)
UX Flows - Skillshare
- 1. UX Flows Beyond Sitemaps & Wireframes @tdavidson
- 2. Carl Senior UI Designer @ Salesforce.com @carlnelson carl@carlrnelson.com @tdavidson
- 6. Map Goals Business & User Objectives to Actions @tdavidson
- 8. Why are they important?
- 9. Guide People
- 11. What do they look like?
- 14. IA Diagrams
- 15. State Diagrams
- 19. Breaking It Down Elements that can make up a flow
- 20. Screen Decision File Input/Output Connector
- 22. Screens
- 23. Email
- 24. Social Media
- 25. Phone
- 26. Any entry point
- 27. What makes a good flow?
- 28. 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
- 29. A Good UI Flow
- 30. 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.
- 31. Thank You Page 1. Good message hierarchy. 2. Secondary message and activity clear.
- 32. Activate Email 1. Clear signup button call to action. 2. Secondary messaging available for non-HTML email.
- 33. 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.
- 34. 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.
- 35. 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.
- 36. 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.
- 37. 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.
- 38. 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.
- 39. 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.
- 40. What makes a bad flow?
- 41. 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
- 42. A Bad Flow
- 43. Tools
- 45. Q/A @carlnelson carl@carlrnelson.com @tdavidson
Notas del editor
- \n
- That’s me.\n
- Safe harbor slide.\n\nWarning: first time, not representative of SFDC, etc.\n\n<ask> Who knows what a sitemap is?\n<ask> Who knows what a wireframe is?\n\n
- This is why you&#x2019;re here right?\nWhat are flows?\n<Ask for some answers>\n\n
- They&#x2019;re paths in the simplest description.\n
- If you don&#x2019;t have goals or objectives for your business and your users, go back and figure those out.\n\nThey take the user from A to B to accomplish their goal.\n
- They can be simple and linear... and they can be complex and circular (Escher nod)\n
- <ask for answers>\n\n\n
- They help your users meet their objectives.\n\nThey smooth site interactions, create seamless experiences.\n
- They help your business meet its objectives.\n\nGood flows increase conversion rates for signups, sales, sharing.\n
- <ask for answers>\n\nWhat do they look like? Fidelity?\n
- Lo-fidelity - early concept flows, new feature, etc.\nHi-fidelity - refining existing flows, deep dives\n
- At their most basic they&#x2019;re flow charts that link screens with directional arrows and actions.\n
- Information architecture diagrams add symbols to flowcharts like: on screen changes, input, output, actions, decision points.\n\nJesse James Garret (Adaptive Path)\n
- State diagrams are flow charts that show both the users action and the screen changes/updates.\n
- Narratives tell more of a story, tend to be more descriptive with words and less focused on visuals.\n\nJakub Linowski\n
- Wireflows combine IA Diagrams / Flowcharts with Wireframes to show visual progress and screen changes/paths.\n\nAndreas Holmer\n
- Linked with persona and includes the personas thoughts/actions reflected on a sitemap.\n\nBarnabas Nagy\n
- Pieces of a flow chart\n
- Basic flow charts are boxes and arrows. IA diagrams have more symbols to show kinds of data, system changes, etc.\n\nMore robust ones will have additional data/text/explanation\n
- <ask for answers>\n\nJust screens? Mobile devices? Email?\n
- Screens. On page elements.\n\nTablets. TVs. Phones.\n
- Email.\n
- Social media.\n
- Tech support. Customer service. Etc.\n
- Ads. Emails. Social Media. Phones. Etc.\n\nAll the touchpoints a customer might have with your service/product can be a part of a flow\n
- <ask for answers>\n
- Good flow diagrams vs Good signs of a thought-out flow in the UI.\n
- Yammer signup flow\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- <ask for answers>\n
- Bad flow diagrams vs Bad signs of a thought-out flow in the UI.\n
- Facebook&#x2019;s old privacy burying\n
- Some tools to use to make them\n
- Keynote, Omnigraffle, Pen & Paper, Whiteboard\n\nAlso: Illustrator, InDesign\n
- Questions?\n\n<Maybe make an example flow on a whiteboard?>\n