# Creating UI Flows leads to a better product

Source: https://www.applification.net/writing/ui-flows-for-better-products
Markdown: https://www.applification.net/markdown/writing/ui-flows-for-better-products

Published: 2015-01-06

Updated: 2022-02-13

The flow of your app UI is just as important as the interface itself. Yet flows are hard to communicate during the design process, whilst drawing out every state of a flow is far too time consuming.

Enter UI flows — a shorthand for designing the flow of a user interface, imagined by [Ryan Singer](https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows).

The basic composition of a UI flow is as follows:

![UI flow template: what the user sees above a line and what they do below, leading to what they see and do next](/images/writing/ui-flows-for-better-products-01-14a15e2e8f.png)

Flow Template

You can hand draw UI Flows and often I start that way but generally I prefer to create a digital version which can be collaborated on and shared easily. The tool I use to do this is [Lucid Chart](http://lucidchart.com/), one of my go-to tools for a range of tasks!

I find UI Flows an amazingly quick and simple way to start defining and visualising app requirements. As a method of extracting information from clients the low barrier to understanding and contributing leads to great collaborative sessions that provide increased shared understanding of the solution being developed.

![UI flow for a QR code book app, from splash screen to menu options and the QR code scanner](/images/writing/ui-flows-for-better-products-02-84fe10bfcf.png)

UI Flow from a QR Code scanning app

As the UI Flow is created everybody involved builds up a visual understanding of how the app will look. This makes UI Flows an excellent pre-cursor to wireframe creation. Not only does it make the wireframe requirements a lot clearer, every stakeholder has a shared understanding of the app requirements and is therefore has engagement with the wireframes and able to input into the end solution.

Whilst a UI flow establishes the bare bones functionality of your app, a wireframe starts to integrate associated content and specific user interface elements.

## Explore Applification

- [Home](https://www.applification.net/markdown)
- [About Dave](https://www.applification.net/markdown/about)
- [Client work](https://www.applification.net/markdown/client-work)
- [Products](https://www.applification.net/markdown/products)
- [Writing](https://www.applification.net/markdown/writing)
- [Agents & API docs](https://www.applification.net/markdown/agents)
- [Contact routes](https://www.applification.net/about)
- [LinkedIn](https://www.linkedin.com/in/hudsond/)