More of the same
If you've never heard of a UI pattern, here's a quick explanation: as with most things, especially during software developing, a large set of elements can often be grouped together, as they form a recognizable pattern. An example for software would be the definition of architectural patterns or patterns related to a specific programming language.
Yet there are also common patterns when designing UI. Just taking a quick look at some apps on the device you’re reading this article on, certain things repeat eventually:
- modal views with a save, cancel and/or delete action
- sections of elements containing text, for example lists with a swipe-action for each list item
So thinking one step further, are there any resources you can tap into when designing a UI yourself? Maybe a collection of patterns other designers have already recognized and formalized? Well, I wouldn’t ask this question if I wouldn’t have the answer already! Time for chapter two!
Chapter two (the announced one)
Looking for a formal definition, IBM’s Carbon Design team has a great one: Patterns are best practice solutions for how a user achieves a goal. They show reusable combinations of components and templates that address common user objectives with sequences and flows.
Let’s take a look at some examples. The following entries are taken from IBM’s Carbon Design site as well as Google’s Material UI pattern page. I couldn’t find a site for Microsoft’s Fluent Design, but linked their start page nevertheless in the addendum.
Search
Searching content is of the essentials building blocks for most apps, therefore it’s a perfect choice for defining a UI pattern for it. Independent from it’s final usage (either a global search or specific search on a content page), search UI has to offer
- a text input
- a textual placeholder if no input is yet available
- an icon clearly indicating the purpose of the text input, for example by using a magnifying glass, as well as acting as a trigger for a new search
In certain cases, a hint label can help distinguish between different content types or provide help on invalid input. The more conditions a search has to handle, the better a search can adapt to this requirement by adding explicit filter menus.
Dialog
One of the very prominent UI patterns. Dialogs allow an app to show a piece of information without losing the overall context of a site. This is accomplished by not covering the whole window but only a smaller part. Dialogs interrupt the user’s current workflow and should therefore be considered only necessary when a stop in the workflow is actually valid. They should only handle small tasks and have a clear focus on what to accomplish. For example, revert unsaved changes or commit an important action.
Empty states
Even though it might sound strange at first, empty states are very common in apps. It’s important to communicate to the user that no data is available, and ideally explain why this is the case. Depending on context, a hint on how to resolve the empty state can help a lot to create a good UX. For example, a user searched for something but couldn’t find anything. This might be a use case where suggesting a different search query might help the user accomplish the task. In every case, every view that represents an empty state has to be contextual. A negative example would be something like “This didn’t work. Try again later”.
Don’t treat empty states as an afterthought in your UI design process. If implemented correctly, they allow users to proceed with the workflow smoothly. Empty states that grind the whole workflow to a halt are actually a worst-case scenario, apart from app crashes.
Just a start
This was a quick glance over some UI patterns I’ve picked from IBM’s Carbon Design as well as Material UI’s pattern page. Applying UI patterns to your app as well can greatly help reduce friction between a user’s workflow and the user interface to accomplish the task. Designing UI can be quite challenging, so standing on the shoulders of giants by learning from existing UX studies helps a lot in improving your users’ perception of your app’s behavior.
