UX Patterns for UI Design

What are rules of thumb for buttons? How do I communicate a status directly in the user interface? We explain common UX patterns...

All the videos here

Today a hands on UX topic that you can implement immediately. We want to introduce you to two UX patterns that will give your user experiences a real quick win!

But first...

What are UX patterns and why are they so practical for UI design?

As the name implies, UX patterns are certain patterns that can be used as a general basis for every user interface. So UX Patterns are certain rules that you can always follow, for example, if you are unsure how to design a button. The nice thing is, UX Patterns are based on user research, which you don't have to do anymore. There are a few of those and two of them we want to share with you in this podcast episode.

Pick up users and keep them informed: the stateful button.

The stateful button is a button with an integrated status indicator. When users interact with an application, machine, website, etc., it is often unclear what the current status is. Did the request work? Is something still loading? Did something perhaps not work?

The stateful button is an intuitive and elegant way to improve the user experience so that users know what the current state is. Without annoying pop-ups and the state change is guaranteed to be noticed because the focus stays on one UI element, namely the button!

So, feel free to try communicating status indicators through the button, which changes its nature depending on the status. If you are unsure how to implement it, feel free to contact us!

Stateful Button Example


Buttons can really often be confusing. As Moritz tells in the beginning of the podcast episode: due to misleading buttons without explanation and text he did not dare to send an SMS from the user interface of his car. Who knows where the SMS will end up if you click on some stubborn button? But this should really not happen. This fear of doing something wrong is triggered by not sufficiently communicated consequences of a click.

UI and UX designers and product developers should keep in mind that users may be put off and confused by buttons that are not 100% understandable. There are a few icons that are 90% likely to be understood by users because they are so familiar and ingrained. But: these are really a few exceptions.

The UX pattern at this point: Use Icon+Text and if in doubt, rather use text only. User research has shown that purely textual buttons are also quite well accepted and understood by users. Therefore: here for you, how to do it right, if you want to design good buttons! Have fun and let us know what you think of the UX Patterns episodes and what topics you want to hear more about!

Written by: