• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
UX Flows - Skillshare
 

UX Flows - Skillshare

on

  • 5,106 views

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

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

Statistics

Views

Total Views
5,106
Views on SlideShare
4,636
Embed Views
470

Actions

Likes
18
Downloads
56
Comments
1

7 Embeds 470

http://www.lancegarcia.com 331
http://flavors.me 94
http://rlance.tumblr.com 27
http://lancegarcia.com 9
http://rlance.flavors.me 4
http://www.pinterest.com 3
https://twitter.com 2
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Excellent explanation of UX Flows...thanks for sharing!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • That’s me.\n
  • Safe harbor slide.\n\nWarning: first time, not representative of SFDC, etc.\n\n Who knows what a sitemap is?\n Who knows what a wireframe is?\n\n
  • This is why you’re here right?\nWhat are flows?\n\n\n
  • They’re paths in the simplest description.\n
  • If you don’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
  • \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
  • \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’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
  • \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
  • \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
  • \n
  • Bad flow diagrams vs Bad signs of a thought-out flow in the UI.\n
  • Facebook’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\n

UX Flows - Skillshare UX Flows - Skillshare Presentation Transcript

  • UX FlowsBeyond Sitemaps & Wireframes @tdavidson
  • CarlSenior UI Designer@ Salesforce.com@carlnelsoncarl@carlrnelson.com @tdavidson
  • What are flows?
  • Paths@tdavidson
  • Map Goals Business & User Objectives to Actions@tdavidson
  • ComplexSimple
  • Why are they important?
  • Guide People
  • ConversionSignups, Sales, Sharing
  • What do they look like?
  • Hi-FidelityLo-Fidelity
  • Flowcharts@tdavidson
  • IA Diagrams
  • State Diagrams
  • Narratives@jlinowski
  • Wireflow@anho@tdavidson
  • Speech Bubbles@tdavidson barnabasnagy.net
  • Breaking It Down Elements that can make up a flow
  • Screen Decision File Input/Output Connector
  • What do theyencompass?
  • Screens
  • Email
  • Social Media
  • Phone
  • Any entry point
  • What makesa good flow?
  • 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
  • A Good UI Flow
  • 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.
  • Thank You Page 1. Good message hierarchy. 2. Secondary message and activity clear.
  • Activate Email 1. Clear signup button call to action. 2. Secondary messaging available for non-HTML email.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • What makesa bad flow?
  • 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
  • A Bad Flow
  • Tools
  • Q/A@carlnelsoncarl@carlrnelson.com @tdavidson