Flows First
Today it seems that there’s more talk than ever about process, best practice and methodologies around usability. Unfortunately, a lot of the basic fundamentals often fall by the wayside or are poorly understood while people focus on these more glamorous terms. Many of us can benefit from a refresher, or a first look, at some of these underappreciated basics — Flowcharts, user flows, task flows and UI flows create the foundations for consistent streamlined usability.
Flowcharts
Flowcharts are diagrams representing screens and actions in a system. These diagrams represent different actions or steps using various shapes. Lines and arrows show a sequence of steps and various processes. Good flows create alignment by highlighting the important steps and eliminating the unnecessary ones, therefore, providing the answers and insights which informs how we design.
As designers, we often get sucked into the detail, so in order to not get caught up with gradients, button styles and typography, it is best to take a step back, get a higher level view and get everyone on the same page. This is where the various flowcharts really shine. Their simplicity also means that keeping them in sync with project changes (especially in an agile workflow) is far less time consuming than with their friends above.
Common UX UI Flowchart Symbols
- Rectangle — Screen
- Oval or Pill — Start / End
- Diamond — Decision / Action
- Parallelogram — Input / Output
User Flows
A user flow shows the different paths available to a user through an application. The user flow starts at the entry point and works through a process of steps towards a successful outcome or a final action (the “happy path”) while showing other paths that can be taken depending on user actions or other information.
The ultimate goal of a user flow should be to identify what the user is trying to accomplish in a specific situation,and what information is needed and how to make this as frictionless as possible.
When it comes to mobile app and software development there is always a tradeoff between functionality and usability. With this in mind, user flows give a simple high-level view of your vision and assumption of how your user is going to navigate and use functionality within your app, and so allow early, intelligent decisions around this tradeoff making clear the exact steps and how they get your users toward their goals, while also showing what issues may arise on different paths. Because they also create an early visual representation everyone can digest, they provide an opportunity to collaborate across multiple disciplines, bringing others like developers and clients into the process earlier.
Consistency is key when it comes to usability and a good experience. Users generally make use of a variety of apps on a day to day basis that have common steps and best practice processes to access functionality and complete tasks they have become accustomed to. Making sure your user flows align to these commonalities as far as possible, especially within apps of the same nature, reduces friction by making onboarding and learning new tasks easier.
Sometimes, it helps to zoom in more on a specific task within a larger flow, for this, we have:
Task Flows
Task flows are focussed on specific, small tasks within the larger context of a user flow. Task flows are very handy when you have common actions within an application. For instance, in a banking app all users will deposit, receive and pay funds in one of the same ways. The task flow is isolated to a single flow for a specific action and doesn’t branch out. This gives us a nice level of granularity to really drill into the perfect representation of that task. They can also allow us to reconsider the entire point of part of a flow — “what are we really trying to do with this task at this point in the flow? Is there a different way altogether?”
Sometimes, you need something with both more and less detail. For these parts of the design process, you may want to consider:
Wire Flows
Wire flows, pioneered by the Nelson Norman Group as an important UX deliverable, are a great way of putting your flows into practice. They are a combination of wireframe and flowchart methodologies. You show tasks and flows using low fidelity wireframes as opposed to abstract shapes and explainer text.
The major difference with regard to other flows is that wire flows are primarily used to map out just a few core pages that have dynamic content or features based on user tasks and interactions.
A very powerful aspect of wireflows, is that coupled with interactive prototyping tools like Invision and Figma, they allow rapid testing of ideas and assumptions around dynamic content in a collaborative manner. This allows you to expand the stakeholders in your process even further at an earlier point, bringing in potential users to get their feedback.
However, as awesome as all these tools are, it’s important to keep in mind that drawings, wireframes or designs all rapidly become instantly outdated as screens or flows change. As a result, before getting into too much detail with the tools mentioned above, I prefer to start right at the beginning with flow diagrams to get everyone aligned on the way forward before we dive into design and waste precious creativity and time.
Conclusion
We’ve looked at quite a few basics that are often overlooked.Each has their place, whether it’s simplicity, encouraging collaboration, drilling into details, etc.
What are your favorite overlooked design basics?
Share them in the comments below…
Tools & UI Kits
Lucidcharts is a great tool for this. It’s not very pretty but its fast and dynamic, and Devs, PMs and clients will all be able to pick it up very quickly and collaborate effectively.
Lucid Chart
If you are familiar with sketch and have already refined your flows and want to do something a bit more aesthetically pleasing the kits below are a great option:
Use Flow Kit
Flowchart and diagram sketch app resource
