SlideShare a Scribd company logo
1 of 45
UX Flows
Beyond Sitemaps & Wireframes




                        @tdavidson
Carl
Senior UI Designer
@ Salesforce.com
@carlnelson
carl@carlrnelson.com




                       @tdavidson
What are flows?
Paths




@tdavidson
Map Goals
                 Business & User
             Objectives to Actions




@tdavidson
Complex




Simple
Why are they
 important?
Guide People
Conversion
Signups, Sales, Sharing
What do they
   look like?
Hi-Fidelity




Lo-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 they
encompass?
Screens
Email
Social Media
Phone
Any entry point
What makes
a 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 makes
a 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




@carlnelson
carl@carlrnelson.com   @tdavidson

More Related Content

What's hot

Intro to Microinteractions: Foundation of Details that Delight
Intro to Microinteractions: Foundation of Details that DelightIntro to Microinteractions: Foundation of Details that Delight
Intro to Microinteractions: Foundation of Details that DelightPurple, Rock, Scissors
 
Using Microinteractions to get from Prototype to Product
Using Microinteractions to get from Prototype to ProductUsing Microinteractions to get from Prototype to Product
Using Microinteractions to get from Prototype to ProductDan Saffer
 
Microinteractions - Designing with Details
Microinteractions - Designing with DetailsMicrointeractions - Designing with Details
Microinteractions - Designing with DetailsDigicorp
 
The New Era of (Non-) Discoverability
The New Era of (Non-) DiscoverabilityThe New Era of (Non-) Discoverability
The New Era of (Non-) DiscoverabilityDan Saffer
 
An update about 3D Touch - What is it and what can we do with it?
An update  about 3D Touch - What is it and what can we do with it?An update  about 3D Touch - What is it and what can we do with it?
An update about 3D Touch - What is it and what can we do with it?Soda studio
 
Understanding the Touch Interface
Understanding the Touch InterfaceUnderstanding the Touch Interface
Understanding the Touch InterfaceNavin Kabra
 
Design for failure in the IoT: what could possibly go wrong?
Design for failure in the IoT: what could possibly go wrong?Design for failure in the IoT: what could possibly go wrong?
Design for failure in the IoT: what could possibly go wrong?Claire Rowland
 
Interusability: designing a coherent system UX
Interusability: designing a coherent system UXInterusability: designing a coherent system UX
Interusability: designing a coherent system UXClaire Rowland
 
ModeSwitching final presentation
ModeSwitching final presentationModeSwitching final presentation
ModeSwitching final presentationxiaokeaister
 
UX Day Mannheim: UX for systems of connected products
UX Day Mannheim: UX for systems of connected productsUX Day Mannheim: UX for systems of connected products
UX Day Mannheim: UX for systems of connected productsClaire Rowland
 
Over the Air 15: Experience design for the IoT: system UX & interusability 15...
Over the Air 15: Experience design for the IoT: system UX & interusability 15...Over the Air 15: Experience design for the IoT: system UX & interusability 15...
Over the Air 15: Experience design for the IoT: system UX & interusability 15...Claire Rowland
 
Mobile-first, a quick introduction
Mobile-first, a quick introductionMobile-first, a quick introduction
Mobile-first, a quick introductionJelle Desramaults
 
Using Web 2.0 For Outside I Nnovation Seybold Stm Dec 07
Using Web 2.0 For Outside I Nnovation Seybold Stm Dec 07Using Web 2.0 For Outside I Nnovation Seybold Stm Dec 07
Using Web 2.0 For Outside I Nnovation Seybold Stm Dec 07pseybold
 
QASMT - PAJ 2015
QASMT - PAJ 2015QASMT - PAJ 2015
QASMT - PAJ 2015LifeTec
 
The Future of UX: What designers need to know to stay ahead
The Future of UX: What designers need to know to stay aheadThe Future of UX: What designers need to know to stay ahead
The Future of UX: What designers need to know to stay aheadDoralin Kelly
 
7 Gift Ideas for Digital Natives
7 Gift Ideas for Digital Natives7 Gift Ideas for Digital Natives
7 Gift Ideas for Digital Nativespiquantbeach1615
 
8 Ways to Improve App Store User Experience
8 Ways to Improve App Store User Experience8 Ways to Improve App Store User Experience
8 Ways to Improve App Store User ExperienceBryan Rieger
 

What's hot (20)

Intro to Microinteractions: Foundation of Details that Delight
Intro to Microinteractions: Foundation of Details that DelightIntro to Microinteractions: Foundation of Details that Delight
Intro to Microinteractions: Foundation of Details that Delight
 
Using Microinteractions to get from Prototype to Product
Using Microinteractions to get from Prototype to ProductUsing Microinteractions to get from Prototype to Product
Using Microinteractions to get from Prototype to Product
 
Microinteractions - Designing with Details
Microinteractions - Designing with DetailsMicrointeractions - Designing with Details
Microinteractions - Designing with Details
 
The New Era of (Non-) Discoverability
The New Era of (Non-) DiscoverabilityThe New Era of (Non-) Discoverability
The New Era of (Non-) Discoverability
 
An update about 3D Touch - What is it and what can we do with it?
An update  about 3D Touch - What is it and what can we do with it?An update  about 3D Touch - What is it and what can we do with it?
An update about 3D Touch - What is it and what can we do with it?
 
Understanding the Touch Interface
Understanding the Touch InterfaceUnderstanding the Touch Interface
Understanding the Touch Interface
 
Design for failure in the IoT: what could possibly go wrong?
Design for failure in the IoT: what could possibly go wrong?Design for failure in the IoT: what could possibly go wrong?
Design for failure in the IoT: what could possibly go wrong?
 
Interusability: designing a coherent system UX
Interusability: designing a coherent system UXInterusability: designing a coherent system UX
Interusability: designing a coherent system UX
 
ModeSwitching final presentation
ModeSwitching final presentationModeSwitching final presentation
ModeSwitching final presentation
 
UX Day Mannheim: UX for systems of connected products
UX Day Mannheim: UX for systems of connected productsUX Day Mannheim: UX for systems of connected products
UX Day Mannheim: UX for systems of connected products
 
Over the Air 15: Experience design for the IoT: system UX & interusability 15...
Over the Air 15: Experience design for the IoT: system UX & interusability 15...Over the Air 15: Experience design for the IoT: system UX & interusability 15...
Over the Air 15: Experience design for the IoT: system UX & interusability 15...
 
iPod Touch Workshop
iPod Touch WorkshopiPod Touch Workshop
iPod Touch Workshop
 
Mobile-first, a quick introduction
Mobile-first, a quick introductionMobile-first, a quick introduction
Mobile-first, a quick introduction
 
EPQ Study(1)
EPQ Study(1)EPQ Study(1)
EPQ Study(1)
 
Using Web 2.0 For Outside I Nnovation Seybold Stm Dec 07
Using Web 2.0 For Outside I Nnovation Seybold Stm Dec 07Using Web 2.0 For Outside I Nnovation Seybold Stm Dec 07
Using Web 2.0 For Outside I Nnovation Seybold Stm Dec 07
 
QASMT - PAJ 2015
QASMT - PAJ 2015QASMT - PAJ 2015
QASMT - PAJ 2015
 
The Future of UX: What designers need to know to stay ahead
The Future of UX: What designers need to know to stay aheadThe Future of UX: What designers need to know to stay ahead
The Future of UX: What designers need to know to stay ahead
 
7 Gift Ideas for Digital Natives
7 Gift Ideas for Digital Natives7 Gift Ideas for Digital Natives
7 Gift Ideas for Digital Natives
 
8 Ways to Improve App Store User Experience
8 Ways to Improve App Store User Experience8 Ways to Improve App Store User Experience
8 Ways to Improve App Store User Experience
 
#TFT12: Amber Case
#TFT12: Amber Case#TFT12: Amber Case
#TFT12: Amber Case
 

Viewers also liked

Competitive Analysis: Strategic UX Spy Games - Lyle Kantrovich
Competitive Analysis: Strategic UX Spy Games - Lyle KantrovichCompetitive Analysis: Strategic UX Spy Games - Lyle Kantrovich
Competitive Analysis: Strategic UX Spy Games - Lyle KantrovichUXPA International
 
Design Synthesis
Design SynthesisDesign Synthesis
Design Synthesisfrog
 
Information Architecture: Making Information Accessible and Useful
Information Architecture: Making Information Accessible and UsefulInformation Architecture: Making Information Accessible and Useful
Information Architecture: Making Information Accessible and Usefulfrog
 
Design Thinking is Killing Creativity
Design Thinking is Killing CreativityDesign Thinking is Killing Creativity
Design Thinking is Killing Creativitydesignsojourn
 
Introduction to UX Research: Designing Surveys That Don't Suck!
Introduction to UX Research: Designing Surveys That Don't Suck!Introduction to UX Research: Designing Surveys That Don't Suck!
Introduction to UX Research: Designing Surveys That Don't Suck!William Evans
 
Design Strategy: Aligning Business Goals and User Needs
Design Strategy: Aligning Business Goals and User NeedsDesign Strategy: Aligning Business Goals and User Needs
Design Strategy: Aligning Business Goals and User NeedsChris Avore
 
Writing surveysthatwork
Writing surveysthatworkWriting surveysthatwork
Writing surveysthatworkrebeccaweiss
 
(Design) Principles To Build By
(Design) Principles To Build By(Design) Principles To Build By
(Design) Principles To Build ByStephen Anderson
 
10 tips for a better UX survey
10 tips for a better UX survey10 tips for a better UX survey
10 tips for a better UX surveyCaroline Jarrett
 
Better Ideas Faster: How to Brainstorm More Effectively
Better Ideas Faster: How to Brainstorm More EffectivelyBetter Ideas Faster: How to Brainstorm More Effectively
Better Ideas Faster: How to Brainstorm More EffectivelyDavid Sherwin
 
Designing Structure Part II: Information Archtecture
Designing Structure Part II: Information ArchtectureDesigning Structure Part II: Information Archtecture
Designing Structure Part II: Information ArchtectureChristina Wodtke
 
10 Usability Heuristics explained
10 Usability Heuristics explained10 Usability Heuristics explained
10 Usability Heuristics explainedCraft Design
 
Content Strategy for Everything
Content Strategy for EverythingContent Strategy for Everything
Content Strategy for EverythingKristina Halvorson
 

Viewers also liked (14)

Competitive Analysis: Strategic UX Spy Games - Lyle Kantrovich
Competitive Analysis: Strategic UX Spy Games - Lyle KantrovichCompetitive Analysis: Strategic UX Spy Games - Lyle Kantrovich
Competitive Analysis: Strategic UX Spy Games - Lyle Kantrovich
 
Design Synthesis
Design SynthesisDesign Synthesis
Design Synthesis
 
Information Architecture: Making Information Accessible and Useful
Information Architecture: Making Information Accessible and UsefulInformation Architecture: Making Information Accessible and Useful
Information Architecture: Making Information Accessible and Useful
 
Design Thinking is Killing Creativity
Design Thinking is Killing CreativityDesign Thinking is Killing Creativity
Design Thinking is Killing Creativity
 
Introduction to UX Research: Designing Surveys That Don't Suck!
Introduction to UX Research: Designing Surveys That Don't Suck!Introduction to UX Research: Designing Surveys That Don't Suck!
Introduction to UX Research: Designing Surveys That Don't Suck!
 
Design Strategy: Aligning Business Goals and User Needs
Design Strategy: Aligning Business Goals and User NeedsDesign Strategy: Aligning Business Goals and User Needs
Design Strategy: Aligning Business Goals and User Needs
 
Writing surveysthatwork
Writing surveysthatworkWriting surveysthatwork
Writing surveysthatwork
 
Task Analysis
Task AnalysisTask Analysis
Task Analysis
 
(Design) Principles To Build By
(Design) Principles To Build By(Design) Principles To Build By
(Design) Principles To Build By
 
10 tips for a better UX survey
10 tips for a better UX survey10 tips for a better UX survey
10 tips for a better UX survey
 
Better Ideas Faster: How to Brainstorm More Effectively
Better Ideas Faster: How to Brainstorm More EffectivelyBetter Ideas Faster: How to Brainstorm More Effectively
Better Ideas Faster: How to Brainstorm More Effectively
 
Designing Structure Part II: Information Archtecture
Designing Structure Part II: Information ArchtectureDesigning Structure Part II: Information Archtecture
Designing Structure Part II: Information Archtecture
 
10 Usability Heuristics explained
10 Usability Heuristics explained10 Usability Heuristics explained
10 Usability Heuristics explained
 
Content Strategy for Everything
Content Strategy for EverythingContent Strategy for Everything
Content Strategy for Everything
 

Similar to UX Flows - Skillshare

Lesson 6 - Collaborate And Approve Content
Lesson 6 - Collaborate And Approve ContentLesson 6 - Collaborate And Approve Content
Lesson 6 - Collaborate And Approve ContentInformatica
 
Facebook Brand Page Updates Feb. 2012
Facebook Brand Page Updates Feb. 2012Facebook Brand Page Updates Feb. 2012
Facebook Brand Page Updates Feb. 2012Caitlin Daley
 
Checklistux interaction flowandusability
Checklistux interaction flowandusabilityChecklistux interaction flowandusability
Checklistux interaction flowandusabilityRick Boardman
 
Manual of functions step by step microsoft word 2007
Manual of functions step by step microsoft word 2007Manual of functions step by step microsoft word 2007
Manual of functions step by step microsoft word 2007menteabiertaz4
 
AIPMM Webcast: From Idea to Reality with Glen Lipka, VP UX, Marketo
AIPMM Webcast: From Idea to Reality with Glen Lipka, VP UX, MarketoAIPMM Webcast: From Idea to Reality with Glen Lipka, VP UX, Marketo
AIPMM Webcast: From Idea to Reality with Glen Lipka, VP UX, MarketoAIPMM Administration
 
AIPMM Webcast: From Idea to Reality with Glen Lipka, Vice President of UX and...
AIPMM Webcast: From Idea to Reality with Glen Lipka, Vice President of UX and...AIPMM Webcast: From Idea to Reality with Glen Lipka, Vice President of UX and...
AIPMM Webcast: From Idea to Reality with Glen Lipka, Vice President of UX and...Startup Product Academy, LLC
 
Sina weibo enterprise edition
Sina weibo enterprise editionSina weibo enterprise edition
Sina weibo enterprise editionEdelman
 
UX Eye - From Idea to Reality
UX Eye - From Idea to RealityUX Eye - From Idea to Reality
UX Eye - From Idea to RealityGlen Lipka
 
Facebook app tool
Facebook app toolFacebook app tool
Facebook app toolcschwensen
 
Manual of functions step by step microsoft word 2007
Manual of functions step by step microsoft word 2007Manual of functions step by step microsoft word 2007
Manual of functions step by step microsoft word 2007menteabiertaz4
 
Whats new in active directory window 2008 R2 server
Whats new in active directory window 2008 R2 serverWhats new in active directory window 2008 R2 server
Whats new in active directory window 2008 R2 serverHuruy Tsegay
 
Yammer Product Homework
Yammer Product HomeworkYammer Product Homework
Yammer Product Homeworksalemstanley
 
Facebook Timeline - Implications & Strategy
Facebook Timeline - Implications & StrategyFacebook Timeline - Implications & Strategy
Facebook Timeline - Implications & StrategyJoey Barker
 
HCI Group Project Report
HCI Group Project ReportHCI Group Project Report
HCI Group Project Reportweilong1113
 
Organizingand Finding Resourceswith Office Share Point Server2007
Organizingand Finding Resourceswith Office Share Point Server2007Organizingand Finding Resourceswith Office Share Point Server2007
Organizingand Finding Resourceswith Office Share Point Server2007LiquidHub
 
Organizingand Finding Resourceswith Office Share Point Server2007 Refresh
Organizingand Finding Resourceswith Office Share Point Server2007 RefreshOrganizingand Finding Resourceswith Office Share Point Server2007 Refresh
Organizingand Finding Resourceswith Office Share Point Server2007 RefreshLiquidHub
 

Similar to UX Flows - Skillshare (20)

Lesson 6 - Collaborate And Approve Content
Lesson 6 - Collaborate And Approve ContentLesson 6 - Collaborate And Approve Content
Lesson 6 - Collaborate And Approve Content
 
Facebook Brand Page Updates Feb. 2012
Facebook Brand Page Updates Feb. 2012Facebook Brand Page Updates Feb. 2012
Facebook Brand Page Updates Feb. 2012
 
Checklistux interaction flowandusability
Checklistux interaction flowandusabilityChecklistux interaction flowandusability
Checklistux interaction flowandusability
 
Manual of functions step by step microsoft word 2007
Manual of functions step by step microsoft word 2007Manual of functions step by step microsoft word 2007
Manual of functions step by step microsoft word 2007
 
AIPMM Webcast: From Idea to Reality with Glen Lipka, VP UX, Marketo
AIPMM Webcast: From Idea to Reality with Glen Lipka, VP UX, MarketoAIPMM Webcast: From Idea to Reality with Glen Lipka, VP UX, Marketo
AIPMM Webcast: From Idea to Reality with Glen Lipka, VP UX, Marketo
 
AIPMM Webcast: From Idea to Reality with Glen Lipka, Vice President of UX and...
AIPMM Webcast: From Idea to Reality with Glen Lipka, Vice President of UX and...AIPMM Webcast: From Idea to Reality with Glen Lipka, Vice President of UX and...
AIPMM Webcast: From Idea to Reality with Glen Lipka, Vice President of UX and...
 
Rocanta facebook
Rocanta facebookRocanta facebook
Rocanta facebook
 
Sina weibo enterprise edition
Sina weibo enterprise editionSina weibo enterprise edition
Sina weibo enterprise edition
 
UX Eye - From Idea to Reality
UX Eye - From Idea to RealityUX Eye - From Idea to Reality
UX Eye - From Idea to Reality
 
Facebook app tool
Facebook app toolFacebook app tool
Facebook app tool
 
Manual of functions step by step microsoft word 2007
Manual of functions step by step microsoft word 2007Manual of functions step by step microsoft word 2007
Manual of functions step by step microsoft word 2007
 
Whats new in active directory window 2008 R2 server
Whats new in active directory window 2008 R2 serverWhats new in active directory window 2008 R2 server
Whats new in active directory window 2008 R2 server
 
Yammer Product Homework
Yammer Product HomeworkYammer Product Homework
Yammer Product Homework
 
Usability for all budgets
Usability for all budgetsUsability for all budgets
Usability for all budgets
 
Facebook Timeline - Implications & Strategy
Facebook Timeline - Implications & StrategyFacebook Timeline - Implications & Strategy
Facebook Timeline - Implications & Strategy
 
HCI Group Project Report
HCI Group Project ReportHCI Group Project Report
HCI Group Project Report
 
Organizingand Finding Resourceswith Office Share Point Server2007
Organizingand Finding Resourceswith Office Share Point Server2007Organizingand Finding Resourceswith Office Share Point Server2007
Organizingand Finding Resourceswith Office Share Point Server2007
 
Organizingand Finding Resourceswith Office Share Point Server2007 Refresh
Organizingand Finding Resourceswith Office Share Point Server2007 RefreshOrganizingand Finding Resourceswith Office Share Point Server2007 Refresh
Organizingand Finding Resourceswith Office Share Point Server2007 Refresh
 
Web content that works
Web content that worksWeb content that works
Web content that works
 
BrandYourself
BrandYourselfBrandYourself
BrandYourself
 

Recently uploaded

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 

Recently uploaded (20)

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 

UX Flows - Skillshare

  • 1. UX Flows Beyond Sitemaps & Wireframes @tdavidson
  • 2. Carl Senior UI Designer @ Salesforce.com @carlnelson carl@carlrnelson.com @tdavidson
  • 3.
  • 6. Map Goals Business & User Objectives to Actions @tdavidson
  • 8. Why are they important?
  • 11. What do they look like?
  • 19. Breaking It Down Elements that can make up a flow
  • 20. Screen Decision File Input/Output Connector
  • 23. Email
  • 25. Phone
  • 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.
  • 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
  • 43. Tools
  • 44.

Editor's Notes

  1. \n
  2. That’s me.\n
  3. 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
  4. This is why you’re here right?\nWhat are flows?\n<Ask for some answers>\n\n
  5. They’re paths in the simplest description.\n
  6. 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
  7. They can be simple and linear... and they can be complex and circular (Escher nod)\n
  8. <ask for answers>\n\n\n
  9. They help your users meet their objectives.\n\nThey smooth site interactions, create seamless experiences.\n
  10. They help your business meet its objectives.\n\nGood flows increase conversion rates for signups, sales, sharing.\n
  11. <ask for answers>\n\nWhat do they look like? Fidelity?\n
  12. Lo-fidelity - early concept flows, new feature, etc.\nHi-fidelity - refining existing flows, deep dives\n
  13. At their most basic they’re flow charts that link screens with directional arrows and actions.\n
  14. Information architecture diagrams add symbols to flowcharts like: on screen changes, input, output, actions, decision points.\n\nJesse James Garret (Adaptive Path)\n
  15. State diagrams are flow charts that show both the users action and the screen changes/updates.\n
  16. Narratives tell more of a story, tend to be more descriptive with words and less focused on visuals.\n\nJakub Linowski\n
  17. Wireflows combine IA Diagrams / Flowcharts with Wireframes to show visual progress and screen changes/paths.\n\nAndreas Holmer\n
  18. Linked with persona and includes the personas thoughts/actions reflected on a sitemap.\n\nBarnabas Nagy\n
  19. Pieces of a flow chart\n
  20. 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
  21. <ask for answers>\n\nJust screens? Mobile devices? Email?\n
  22. Screens. On page elements.\n\nTablets. TVs. Phones.\n
  23. Email.\n
  24. Social media.\n
  25. Tech support. Customer service. Etc.\n
  26. 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
  27. <ask for answers>\n
  28. Good flow diagrams vs Good signs of a thought-out flow in the UI.\n
  29. Yammer signup flow\n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. <ask for answers>\n
  41. Bad flow diagrams vs Bad signs of a thought-out flow in the UI.\n
  42. Facebook’s old privacy burying\n
  43. Some tools to use to make them\n
  44. Keynote, Omnigraffle, Pen & Paper, Whiteboard\n\nAlso: Illustrator, InDesign\n
  45. Questions?\n\n<Maybe make an example flow on a whiteboard?>\n