User flow

Whether you’re mapping out a brand new website or looking to optimize an existing user experience, flow design will keep you out of the trap of designing individual pages and interactions and instead focus you on fulfilling users’ needs. By prioritizing your user flows and focusing on the ones that drive the most value to the most users and to the business, you can make the greatest impact with your initial flow design.

When considering user flows, think past the first conversion, and design for the ultimate conversion, which might lie a few steps behind. This is particularly important with any type of commerce-driven business, for which the first conversion is often just a prelude to the primary revenue event. By stacking these complementary funnels, you create a more cohesive user experience that drives better results for both the user and your business.

So, the next time you’re asked to create a new design, step back and ask yourself and your team what user flows you are trying to create through the website, and let that insight drive the design process.

Stop Designing Pages And Start Designing User Flows: https://www.smashingmagazine.com/2012/01/stop-designing-pages-start-designing-flows/

A shorthand for designing UI flows

Flows are made out of individual interactions. A screen offers some possibilities and the user chooses one. Then something happens, and the screen changes. It’s an ongoing conversation. Each moment in a flow is like a coin with two sides. The screen is showing something on one side, and the user is reacting on the other side. My flow diagrams illustrate this two-sided nature with a bar. Above the bar is what the user sees. Below the bar is what they do. An arrow connects the user’s action to a new screen with yet another action.

Here’s a simple and concrete example. To add a to-do item in Basecamp, first you go to a list. Then you click to “Add an item.” The form appears. You fill in the item content and submit the form, and if your submission is valid, the item appears and flashes yellow. Here’s a shorthand version of this flow:

Continue reading: https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows

Share this on: