10 must-know tools for creating user flows with great UX
Improving your UI’s user flow: use these 10 top user flow tools to make your user’s journey a walk in the park
It’s your brand’s job to help users get to where they need to be on your site or app. That’s where user flow steps in.
Identifying your user flow encourages you to align your UI design and navigation with user goals. Optimizing your user flow and conversion funnel will improve your site’s success rate because it will enable users to accomplish their tasks – i.e. convert – as efficiently as possible.
Justinmind’s prototyping tool and your user flows:
a recipe for a smooth design process.
Whether this is your first time designing user flow or you just need a recap, this is the place to be. Check out these 10 fantastic user flow tools, plus some helpful tips on getting started.
What is user flow?
A user flow is a path that the user travels – from entry point to end goal – in order to complete a task in a user interface. The entry point might be your site’s homepage and the end goal purchasing your product. The user flow defines all the navigation steps in the user journey in order to reach their goal.
Remember that each user flow relates to one user group, so if you have multiple target users, you’ll need to define a user flow for each of those groups.
According to Smashing Magazine, some common user flows include:
- Paid advertising – a user coming from a banner or Google AdWords ad.
- Social media – a user coming from a friend’s post on a social network.
- Email – a user coming from an email newsletter or referral invitation.
- Organic search – a user coming from a deep link that was surfaced by a search.
- Press or news item – a user coming from a mention in the news or a blog post.
How do you define user flow?
When you start to design a new website or mobile application, designers are often given a set of client requirements or high-level project objectives. As important as these attributes are to the project, it’s no substitute for designing with user needs in mind.
The first step to designing a user flow is to perform a round of usability testing. This will help you identify user goals and frustrations with current solutions so that you can try to amend in your design. It will also help you to determine who your target users are, using scenarios and personas. Read more on this here.
How to present user flow
Then, you should start to sketch out each user flow for each target user group. You can do this on paper, or if you’d prefer to go digital, why not try out Justinmind’s sketching UI kit [this link will download the UI kit file]. It’s got all the elements you need to sketch out your user flow, with the added bonus of making your future designs quicker to build up.
For each user flow you define, ask yourself the following questions to ensure that your flow is on the right track.
- What does the user need to accomplish?
- Are the steps in your user flow going to help them or discourage them from progressing?
- Does the user have enough information to accomplish the task?
Once you’ve got a good idea of your user flows, you can start to map them to conversion funnels. Conversion funnels help to align user needs with business objectives, for value all-round.
Optimizing the conversion funnel is the key to making sure users convert and return to your brand. Visualizing the conversion flow in context will help you understand how best to guide your users.
So, the next step is building wireframes and prototypes and testing your conversion funnel out with real users. Try doing some A/B tests with different user flows to see what works best for different types of users and validate your conversion funnel.
Why you need to design user flow
In order for us to know what content to include in each screen of our web and mobile interfaces, we need to design the user flow. The user flow is the basis for designing and testing out experiences that meet user needs and help users achieve their goals.
How easily users are able to navigate your site largely affects your site’s success rate. By mapping your user flows, you can create a positive user experience by identifying how easy it is for users to reach their end goal and removing any roadblocks in their way.
10 must-know tools for creating your user flow
Timblee: create beautiful user flow diagrams
Create visual, interactive workflows and sitemaps with Timblee mapping tool. Its intuitive drag and drop canvas makes it quick and easy to create flow diagrams and is great for designers just getting started with user flow. Users can get deep into each page’s interaction by creating subpages.
Timblee also supports collaborative design with a comments and feedback system and versioning history.
Cons: the only thing we don’t love is the visibility issue with high-resolution screens, as some of the elements in the UI become unreadable.
Price point: Try it free for 14 days. Pricing starts at $9/month.
Justinmind: design and test your user flow with our prototyping tool
Justinmind is a wireframing and prototyping tool for web and mobile that enables users to design their user flow and visualize their conversion flow in context.
Users can drag and drop elements to the canvas and view their progress in any browser or on any device throughout the design process. Users can even make their screenflow interactive with Justinmind’s Events system.
There are also teamwork, versioning review and comment features so working with your team is easy. And the best part? Justinmind is a desktop-based user flow tool so no need to worry about internet connection or security, we’ve got you covered.
Cons: hmm…it’s too intuitive?
Price point: Free. Paid version $19 per month.
Flowmapp: plan customer journey paths and user flow
If you’re looking for a way to create attractive, professional user flow and customer journey diagrams, FlowMapp is definitely worth a try. The user flow diagrams you can create with FlowMapp can range from simple schematics to nearly-hi-fi wireframes.
Originally designed for creating sitemaps, FlowMapp’s online user flow tool lets you use lines, shapes and icons to quickly design user flows to plan your customers’ journeys and improve their user experience. You can add images into the user flow, customize elements you’ve added and add in all the connections you need.
Cons: with only 80 icons included, there are other tools which offer a lot more UI elements to work with.
Online tool. Free limited version.
Price point: Free. Paid version $8-179 per month.
Overflow: create striking, playable and interactive user flows
For a unique and modern take on how user flows can be visually appealing and fully interactive, check out Overflow. This Mac-only user flow tool lets you create playable user stories – a real update to the entire concept of user flow. The Windows version is on its way, too.
A great way for a designer to illustrate user flow is by using playable interactions, illustrating just how the user jumps from stage to stage in their journey. Overflow lets you choose where to add focus when presenting a user flow diagram to colleagues or clients.
Price point: Free (Beta). Mac, Windows soon.
Wireflow: free, online user flow tool
Wireflow is a free, open source, online user flow tool that lets you create user flow prototypes in no time at all. Created in order to simplify the process of user flow planning at an early stage in the product development life cycle, Wireflow aims to cut out dependency on costly and expensive software like Adobe Photoshop and Illustrator.
While it’s pretty basic, Wireflow does include many of the functions you’d need to create user flow diagrams, including: over 100 flow elements in 10 different categories; real-time collaboration with colleagues, and live chat.
Cons: seeing as it’s completely free, this is something of a proof of concept and can be a little buggy and difficult to use at times. For example, we haven’t been able to get the keyboard shortcuts card to appear.
Price point: Free. Online tool.
Mockflow: Visualize user flow in minutes
Billed as “the quickest way to brainstorm user interface ideas”, Mockflow helps you convert user journey concepts into true user flow prototypes.
Mockflow lets you visualize user flows, and share and collaborate in real time. You can use this user flow tool to create style guides which you’ll need if you want to create a design system. It includes integration with some 3rd party tools – but only at the $29/month price bracket.
Price point: Free limited version. Paid version $14-160 per month. Online tool with offline mode for Windows & Mac.
Omnigraffle: the power users’ diagramming option
Long-time Mac users’ favorite, Omnigraffle is a powerful tool for creating “precise, beautiful graphics”. Omnigraffle can be used in a variety of ways, including to create user flow diagrams and low-to-high-fi wireframes. Thanks to its stencils, reusable elements, auto layouts, and numerous element libraries, Omnigraffle is a complete diagramming solution.
One great feature is its Stenciltown section which allows users to share and download UI kits, templates and more.
Cons: while it’s a great piece of software, it might be a little over the top for most UX designers who only want to create user flow diagrams. It’s also only available on Mac.
Price point: $99. Mac only.
Draw.io: build and store your user flow in the cloud
The draw.io interface is well-designed and makes it easy for users to draft up diagrams. It supports real-time collaboration when connected with Google. Diagrams are cloud-stored and users can choose from a number of cloud computing services, including Google Drive, OneDrive, GitHub, Dropbox and Trello. Draw.io is also optimized for widescreen monitor use, so working in high-resolution isn’t a problem.
Cons: the only snag is that you can’t customize its tools – but hey, it’s free!
Price-point: No registration or payment needed, you will need a Google Drive account.
Cacoo: create and share your user flow
Cacoo is a diagram and user flow generating tool, integrated with Google Drive. The tool has a variety of readymade templates and shape libraries for creating flowcharts, mind maps, user flow and charts.
Cacoo has a built-in chat feature and supports Visio and Adobe Creative embedding and exporting. It’s ideal for designing flow diagram templates. It’s a cloud-based tool and users can share their work by copying the link provided.
Cons: the interface isn’t very intuitive and things aren’t where you’d expect them to be. But if you like the tool, give it a go!
Price-point: Try it free for 14 days. Pricing starts at $4.95/month.
Lucidchart: sketch out your user flow diagrams
Lucidchart is an online tool for sketching and sharing user flow diagrams. With different templates to choose from, it’s a tool for a variety of tasks, from brainstorming and defining user flow to project management and working with your team and stakeholders.
Lucidchart has a group chat and comments feature so working and getting everyone up to speed is easy. The tool is responsive, built on HTML5 and web standards, and works with all major browsers and devices.
Cons: more variety of templates would make this tool even more powerful.
Price-point: Try it free for 7 days. Pricing starts at $8.95/month.
Designing user flow: the takeaway
User flow is an important part of the user experience in any web or mobile UI. Neglect it and you’re on your way to frustrated users bouncing from your site and never returning. Pick a tool that helps you define your user flow from the very beginning of your design process and you can’t go wrong.
Justinmind is a great tool for designing user flow. It’s interactive and allows you to get on with the rest of the design process without having to switch tools!
- Flat website design: great examples and important principlesFlat website design is all about providing great website UX and page loading speed. In this post, we’ll explore flat design’s origins, along with its successor – flat design 2.0. we’ll also look at some important principles and great examples of this style.