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
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.
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
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