An example of redesigning a user interface by following logical rules or guidelines.
Designing how things look on a computer or phone is not easy. There are many choices for how to arrange things, how much space to leave, what fonts to use, and what colors to pick. Making these choices can be really hard. And it becomes even more challenging when you think about making the design easy to use, accessible to everyone, and considering how people's minds work.
But don't worry, designing the look of things doesn't have to be so difficult. I've been working as a product designer for almost 5 years, and I've found that most of my decisions about how things should look and work follow a set of simple rules. It's not about being super artistic or having some magical sense – it's just about following logical rules.
Having a set of logical rules helps you make smart decisions about design without just guessing and moving things around until they look nice.
I really like rules and logic, but design choices are not always clear-cut. Instead of strict rules you have to follow, think of the advice below as helpful tips that usually work well.
The best way to learn is by doing, so let's start designing!
Let's correct this example using clear and logical rules
These two pictures show how information about a place you want to rent for a short time looks on an app. The first one is how it was at the beginning. The second one is what it looks like after using some rules or guidelines to make it better.
Even if you don't have much experience with design, you might feel that the original design looks messy, complicated, and hard to use. This is because it has a lot of design details that can make it difficult to use. Can you see some of these problems?
Let's make the original design better step by step using these simple rules:
- Put similar things together ✅
- Keep things the same way throughout ✅
- Make things that look similar work the same way ✅
- Make it clear what's important ✅
- Don't use extra styles that aren't needed ✅
- Use colors with a purpose ✅
- Make sure you can see things clearly with the right contrasts ✅
- Make sure text is easy to read with the right contrasts ✅
- Don't use only color to show something important ✅
- Use one simple type of font without fancy decorations ✅
- Use a font with tall small letters ✅
- Don't use too many capital letters ✅
- Use regular and bold fonts only ✅
- Avoid using pure black for text ✅
- Align text to the left ✅
- Make sure there is some space between lines of text ✅
1. Put similar things together
Breaking up information into smaller groups of related things helps to organize and structure an interface. This makes it quicker and easier for people to understand and remember.
You can group related things by:
- Putting them in the same box or container.
- Keeping them close together.
- Making them look similar.
- Aligning them in a line.
Using containers is a strong way to show that things belong together, but sometimes it can make things look too crowded. Try other ways of grouping; they're often more subtle and can simplify designs.
Using space, especially, is a very effective and simple way to group related things. You can also use a mix of methods to make groupings clearer.
In our example, when there's not enough space between things, the design looks messy and hard to understand. Adding more space helps to clearly group things, making it more organized and easy to understand.
2. Keep things the same way throughout
Consistency in UI design means making sure that similar things look and work the same way. This should be true both inside your product and when compared with other well-known products. When things work in a way that people expect, it makes it easier to use and reduces mistakes because people don't have to keep figuring out how things work.
In our example, the icons look different, some are filled, and others are not. This might confuse people because usually, filled icons mean that something is selected. Making all icons outlined with a 2pt line and rounded corners makes them all look the same, which is easier for people to understand.
Icons have labels to help people know what they mean. This is important for those who can't see the screen and use special software to understand it through speech or braille.
3. Make things that look similar work the same way
Make sure elements that look alike also work alike. When something looks similar, people expect it to behave in a similar way. So, make sure that elements with the same job look the same. And, make sure elements with different jobs look different.
For example, the icons and the "book now" button look similar. This might make people think the icons can be clicked, even though they can't. To prevent confusion, we changed the icons' color and style. This helps people know they can't click them.
4. Make it clear what's important
Not all elements within an interface carry equal weight. Strive to arrange information according to its significance, ensuring that more crucial components stand out prominently.
Establishing a discernible hierarchy of importance, known as visual hierarchy, facilitates rapid information processing and directs attention towards pertinent areas. Furthermore, it enhances aesthetics by instilling a sense of organization. By employing variations in size, color, contrast, spacing, placement, and depth, you can establish a cohesive visual hierarchy.
To illustrate, consider an interface's hero banner lacking a clear visual hierarchy, juxtaposed with another banner where elements are distinctly arranged based on their importance.
A convenient method to assess the clarity of your visual hierarchy is to employ The Squint Test. Simply narrow your eyes and observe your design. Alternatively, you can step back from the screen or blur your design. Despite these adjustments, you should still be able to discern the most significant elements and grasp the purpose of the interface.
Let's put the Squint Test into action with our example. We can observe that numerous elements possess similar levels of prominence, creating a competition for attention. Meanwhile, the primary action in the bottom left fails to stand out at all.
Emphasize the main action by making it visually prominent on the interface. Enhance its visibility with a bold font and a high-contrast background color. Additionally, this approach addresses an accessibility concern associated with the low-contrast button, which we'll address in detail later.
Using the Squint Test on the redesigned layout, the most noticeable element is clearly the main action.
The current visual hierarchy is improved, yet there's still an opportunity for enhancement. Notably, the body text block remains too dominant in comparison to its significance. We'll soon explore concise typography principles to refine the visual hierarchy further.
5. Don't use extra styles that aren't needed
Extraneous information and decorative elements have the potential to divert attention and add to cognitive strain (the mental effort needed to navigate an interface). Strive to eliminate superfluous lines, colors, backgrounds, and animations to achieve a streamlined and concentrated interface design.
In the given illustration, the white space and borders surrounding the image contribute unnecessary visual intricacy. They serve no purpose in conveying information or organizing elements, hence we can confidently eliminate them to streamline the design.
6. Use colors with a purpose
Employ color judiciously and deliberately. Refrain from using color solely for ornamental purposes, as it can lead to confusion and distraction. Begin with a black and white palette and introduce color where it serves a purpose.
A straightforward and efficient strategy involves applying the brand's color to interactive components such as text links and buttons. This helps users discern what is interactive and what is not. Strive to avoid using the brand's color on non-interactive elements.
Not every interactive element requires color, as some already possess visual cues indicating their interactivity. For instance, the cards in the subsequent example maintain their interactive feel regardless of the presence of a blue-colored link.
In the initial example, while the blue heading may appear visually appealing, it inadvertently suggests interactivity within the text. To mitigate potential confusion, we opt to eliminate the blue color from the heading since it lacks interactive functionality.
Furthermore, we remove the blue hue from other non-interactive elements such as the star rating. This adjustment significantly enhances clarity, making it easier for users to discern interactive elements from non-interactive ones.
7. Make sure you can see things clearly with the right contrasts
The concept of contrast refers to the perceived difference in brightness between two colors. It is quantified as a ratio ranging from 1:1 to 21:1. For instance, the lowest contrast ratio of 1:1 is evident when black text is displayed on a black background, while the highest contrast ratio of 21:1 occurs when black text is presented on a white background. Various online tools are available to assist in calculating contrast ratios between different color combinations.
To ensure that individuals with vision impairments can easily discern interface elements, it is advisable to adhere to the Web Content Accessibility Guidelines (WCAG) 2.1 level AA color contrast standards. This necessitates that user interface components, such as form fields and buttons, maintain a minimum contrast ratio of 3:1.
In the given example, the arrow icon exhibits insufficient contrast. By introducing a shadow effect to the icon and applying a gradient overlay to the top third of the image, the icon achieves the required 3:1 contrast ratio, irrespective of the background image it is placed upon.
The contrast of the primary button in the initial example was similarly inadequate. Although we previously addressed this issue while enhancing the visual hierarchy, it is noteworthy to mention it again in this context.
The concern with the button featuring low contrast is that individuals with limited vision may struggle to recognize it as a button, particularly if they cannot discern its shape. Elevating the button's contrast ratio beyond 3:1 not only enhances its accessibility but also rectifies the visual hierarchy.
Raising the contrast ratio of both the arrow and the button above 3:1 yields the following design. While progress is being made gradually, there are still additional issues that require attention.
8. Make sure text is easy to read with the right contrasts
To facilitate readability for individuals with vision impairments, text must adhere to the following WCAG 2.1 level AA contrast guidelines:
- Small text (18px and below) requires a minimum contrast ratio of 4.5:1.
- Large text (above 18px in bold weight or above 24px in regular weight) necessitates a minimum contrast ratio of 3:1.
In the provided example, the small text within the photo count element lacks adequate contrast. By augmenting the contrast ratio beyond 4.5:1 through heightened opacity of the grey container and the inclusion of a text shadow, readability is enhanced.
Additionally, the contrast of the location text is insufficient, compounded by its thin font weight which further impedes readability. Employing a darker shade of grey will enhance the accessibility of the text. We will implement further modifications to the text shortly to enhance its legibility.
9. Don't use only color to show something important
There exists a variety of color vision deficiencies, predominantly affecting men. Individuals with color blindness often struggle with distinguishing between red and green hues, while some may experience a complete absence of color perception.
To ensure interface accessibility for those with color blindness, reliance solely on color to convey meaning or distinguish visual elements is inadequate. Additional visual cues must be employed to differentiate interface components.
In the provided example, the color blue signifies a link within the "reviews" text. However, without color, the link text appears indistinguishable from other text, posing challenges for individuals with color blindness. By underlining the link text, a clear distinction is established from other text even in the absence of color.
10. Use one simple type of font without fancy decorations
A typeface encompasses a collection of related fonts sharing a similar style or aesthetic. For instance, Helvetica represents a typeface. Fonts, on the other hand, denote variations within a typeface, such as different weights or sizes. For example, Helvetica bold and Helvetica regular are distinct fonts within the Helvetica typeface.
Opting for a single sans serif typeface is the most prudent choice for interface design, as they typically offer optimal legibility, neutrality, and simplicity.
In the provided example, the heading employs a detailed serif typeface, which may pose readability challenges and could prove distracting to certain users. Furthermore, its distinct personality may not align well with some of the photos featured in this property rental app. Simplifying it with a sans serif typeface can enhance both usability and aesthetics.
11. Use a font with tall small letters
Consider selecting fonts that feature taller lowercase letters and increased letter spacing, as they tend to offer better readability when used in smaller sizes. The vertical dimension of lowercase letters within a font is referred to as the x-height.
In our demonstration, we utilize the Arial font, which possesses a comparatively smaller x-height. Switching the font to something like Montserrat, which boasts a taller x-height, enhances the overall readability of the text.
Below is the appearance of our sample text following the transition from Arial to Montserrat as the chosen typeface.
12. Don't use too many capital letters
Unless you're trying to convey a sense of shouting or urgency, there are few justified reasons for using uppercase letters. THEY'RE OVERLY EMPHATIC AND CHALLENGING TO READ.
During reading, our brains often recognize words by their overall shape rather than individual letters. Uppercase words, however, all share a uniform rectangular shape, which necessitates reading each letter individually, slowing down the reading process.
In the illustration provided, the location text is written in uppercase. Converting it to sentence case, where only the initial word and proper nouns (names of specific people, places, or things) are capitalized, contributes to enhancing readability.
13. Use regular and bold fonts only
Having access to various font weights within a typeface doesn't imply a necessity to incorporate all of them into your designs. Integrating numerous font weights can introduce unnecessary complexity and clutter to your interface, making it challenging to maintain consistency across your design. Simplify your design system by utilizing regular and bold font weights exclusively.
Some handy tips for usage:
- Employ bold font weight for headings to highlight them effectively.
- Utilize regular font weight for smaller text sections.
- When opting for extremely thin or thick font weights, reserve them for headings and larger text portions, as they may pose readability challenges at smaller sizes.
In our demonstration, the location text employs a light font weight. Despite achieving a contrast ratio above the necessary 4.5:1 ratio, the slender characters could still pose readability issues for some individuals. Enhancing the font weight to regular enhances readability and streamlines the design.
14. Avoid using pure black for text
For UI design, it's generally recommended to steer clear of pure black, as it creates a stark contrast against white backgrounds. This high contrast can lead to eye strain and fatigue, particularly during extended periods of reading.
Pure black registers at 0% color brightness, while white stands at 100% color brightness. Such a stark contrast places added strain on our eyes. To mitigate this issue, it's advisable to avoid using pure black against white backgrounds and instead opt for a darker shade of grey.
In our example, pure black is employed across multiple elements. Transitioning to a dark grey shade contributes to enhanced readability. Previously, during our examination of visual hierarchy, we observed that the property description text appeared overly prominent. To ensure that interface elements are presented in order of importance, we've opted for a lighter grey for the property description text, reducing its prominence accordingly.
15. Align text to the left
English text is typically read from left to right, following a downward trajectory in an F-shaped pattern. Therefore, maintaining left alignment for text is ideal for ensuring optimal readability. When dealing with lengthy body text, it's advisable to steer clear of center alignment or justified text, as they can prove more challenging to read, particularly for individuals with cognitive disabilities.
Center alignment may be suitable for headings and brief text segments, as it facilitates quick reading. However, for longer body text, center alignment poses readability challenges because the starting point of each line constantly shifts. This necessitates increased effort from the reader's eyes to locate the beginning of each line.
In our illustration, the property description text is centered aligned. Transitioning to left alignment enhances readability and maintains consistency with the left-aligned text positioned above.
16. Make sure there is some space between lines of text
Line height refers to the vertical space between two lines of text. This spacing serves to prevent readers from accidentally rereading the same line and contributes to a more comfortable reading experience overall.
To enhance accessibility and readability, particularly for lengthy body text, it's essential to maintain a line height of at least 1.5 (150%). Keeping the line height within the range of 1.5 to 2 is generally optimal for ensuring a pleasant reading experience.
In the illustration provided, the line height is set at 1 (100%). Elevating it to 1.4 (140%) contributes to enhancing readability.
We've addressed it!
By adhering to a few straightforward yet impactful UI design principles, we efficiently identified and resolved numerous issues within our example design. While guidelines might appear confining, they're not intended to stifle your creativity. Rather, consider them as a sturdy framework upon which to construct, delve into, and innovate.
I trust you're beginning to grasp that UI design doesn't need to feel daunting. While it may seem like a mystical craft, much of it comprises logical principles or guidelines, such as the ones we've just explored. Employing objective logic, rather than relying solely on subjective opinions, streamlines the process and makes it quicker and simpler to create intuitive, accessible, and aesthetically pleasing interfaces.
Top comments (0)