I need to create a UI element for my website that illustrates how the main process works, using some steps. The element will have the header "How It Works" followed by three steps. However, I'm not sure how best to implement these steps and I can't find the name of any such pattern on sites like UI-patterns and Mobbins.

There are one or two on UI-patterns.com under the "Steps left" pattern, but not only are these ancient examples from the web 2.0 era, "Steps left" isn't quite what I'm going for here. If a pattern does exist it would probably be more like "Steps involved".

This is the only example of the "Steps involved" pattern I've been able to find across UI-Patterns and Mobbin so far:

enter image description here


1 Answer 1


What you have here isn't actually UX in the sense that a user is using a thing, rather it's part of marketing, visual guides or visual communication.

If you were to have your user follow a process and indicate where they are in that process, you'd use steppers. But since you want to just show the process, flowcharts and workflow visualization in general gets you closer, and for a high level overview like shown in the Google Analytics example, it's just an "as easy as 1-2-3" marketing point.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.