Introduction to Patterns in UI Design, Why Using Existing Ideas Makes Sense
In this article the designer Wojtek Dziedzic explores patterns in UI design and stresses their significance in our daily lives. As Dziedzic points out in the article, most aspects of our daily lives are mediated by digital interfaces. Their design has become so seamless and recognisable that they’ve slipped easily into our routines, with almost no friction.
However this frictionless is something that we as users and designers need to interrogate more. It’s because of terms like the attention economy and surveillance capitalism that we need to scrutinise not only our designs, but the contexts they are placed in. The red that expresses an error is wildly different from the red of a Facebook notification.
First things first, what is a User Interface?
Whether it be checking out what our friends have been up to on Facebook, buying a ticket from the ticket machine in public transportation, or flipping through TV channels — nearly all of us interact with visual interfaces in some form daily. People who create those interfaces, User Interface Designers or UI Designers for short, are very well aware that nearly every potential user has had prior experience with other digital products. And they use that knowledge to their advantage.’
In case you’re not familiar, a user interface is a space in which the interaction between humans and machines occurs, so for example, an app or a website, like Medium!
To see how UI designers use established concepts and patterns in interfaces let’s start with the most common interactive UI element out there — a button. You’re presumably familiar with them and likely clicked on one today, after all, you had to get to this article somehow, right? Let’s walk back a bit though and break down the button to its most basic elements and see how its constructed, its main purpose, and its core elements.
How all buttons are the same at their core
As you might’ve guessed, buttons originate from actual physical machines, where their main function is to inform users about the action that can be performed by using it. Button’s purpose is identical in user interfaces, however, with one major limitation — designers making them don’t have the advantage of creating something tangible and three-dimensional. Because of that, the ways of informing the users of the button’s purpose are greatly limited. Knowing this, UI designers tend to use the same core design for all the buttons, and thus creating a design pattern — a reusable answer to a repeatedly appearing problem that potential users might face, in theory, the intended purpose of a design pattern should be clear regardless of context.
Now that we’ve defined what a design pattern is, let’s go over the core design of a button. It’s comprised of only two elements — a box, and a label. The box separates the button from the background and outlines the clickable field, the text label informs users about the action that the button performs.
Sometimes though the text label either is too long or just isn’t enough to adequately communicate its purpose. That’s where another design pattern comes in — buttons with icons.
As you possibly have noticed, in some of the button samples above the icons are essentially identical. This is because some actions are so prevalent on the web or in apps certain combinations of icon buttons became design patterns in themselves, and in fact, some forgo the text label altogether. Go back buttons take advantage of it by completely changing the text label to something more contextual, for example, a page that will be reached after clicking it.
Interactions themselves can become design patterns. In the example above all the buttons have a different default state which changes identically in response to human-computer interaction with a mouse.
Other examples of common design patterns
Now that we know how went over how buttons are constructed let’s go over some other popular design patterns about interactions:
One interesting design pattern are lists, the ones with oval checkmarks are used by designers only when asking a single choice question, while square checkmarks are used when asking multiple-choice questions. Due to the popularity of this design pattern, most interface users are subconsciously aware of this distinction.
Text fields nearly always use the same design patterns to inform users about the correctness of the information. Notice how red expresses an error, green is associated with correctness, and blue is informative. This tendency to associate red with inaccuracies is used to disincentivize users from taking certain actions, for example logging out or deleting something.
Displaying information — hierarchy is everything
Design patterns aren’t formed only when the direct human-computer interaction takes place, some design patterns develop due to designers wanting to show vast amounts of data in a clear and understandable manner. The fundamental principle when designing layouts full of information is that simplicity and hierarchy are everything. Staying true to this self-imposed rule, layouts which made it easier for users to comprehend something developed.
From newspapers to websites — the F-Layout
Perhaps the most popular layout used in user interfaces is the F-Layout. The F-Layout is a self-descriptive concept, its a way of displaying data in a pattern that resembles the letter F. In theory, this type of layout reflects how our eyes read and analyze on-screen information, as shown on the image above.
This reading behavior is so prevalent mostly due to users wanting to be efficient and not being willing enough to go through every element displayed on the layout, in short — most people want a quick solution, not an in-depth analysis. As a result of this, a lot of sites will use the top-left portion of the screen to display the most relevant information depending on the use case scenario. Above you can see some examples of how that space is occupied on a variety of websites.
Naturally, the F-layout isn’t the only widespread method of displaying data.
One after another — the Layer Cake
Similarly to the F-Layout, the Layer Cake is also a self-descriptive concept. The tasty cake metaphor references structuring sections and elements in layers on after another, just like a cake might be structured. This pattern is particularly popular in products that rely on repetitive, quickly digestible, and scrollable content. The key aspect of this layout method being the key elements of each layer that are easily identifiable and readable.
Don’t reinvent the wheel — why you should use design patterns yourself.
I hope this article shed some light not only on how and why certain elements in graphical interfaces are constructed the way they are but also was served as an interesting insight into the thinking process behind designing a user interface. Using pre-existent wildly popular concepts like certain color combinations or laying out information in a way that’s easily digestible by potential users will only work to your advantage when working on your own projects. The most important takeaway here is to remember that a lot of potential features you may be thinking about may have already been visualized, tried and tested, so there’s no reason to reinvent the proverbial wheel by adding unneeded visual quirks that only take away from the experience and might make any recipients of your product uncomfortable or confused. Need some proof of that? Just look at the fun example of my quick redesign of the Google homepage above.
This article was written by Wojciech Dziedzic, a second-year New Media Arts student at the Polish-Japanese Academy of Arts and a professional UI/Interaction Designer working at Brainly. He specializes in User Interface, Interaction, and User Experience Design. His interests include art, culture, history, and sociology. You can find his design work on Dribbble, Instagram and Medium under the handle @wojtekdesigns
Sign up for our newsletter here
