Designing a user interface (UI) can be daunting. With endless options for layout, spacing, typography, and color, making decisions can be overwhelming. The challenge intensifies when considering usability, accessibility, and psychological factors.
Fortunately, UI design doesn’t have to be overly complex. I’ve found that most of my design decisions are guided by logical rules rather than artistic flair or intuition.
Logical rules provide a framework for making informed design choices. Without them, design decisions often rely on gut feelings, leading to less consistent results.
While I love rules and logic, design isn’t always black and white. Think of the following advice as helpful guidelines rather than strict rules, applicable in most situations.
The best way to learn is by doing, so let’s dive into an example.
Improving UI Design with Logical Rules
Consider these two designs for the property details page of a short-term rental app. The first is the original design, and the second shows improvements made by applying logical guidelines.
Before and After UI Design
Even without extensive design experience, you might notice that the original design feels cluttered and hard to use. This is due to several problematic design details that hinder usability. Let’s fix these issues step by step using logical rules.
Use Space to Group Related Elements
Organizing information into smaller groups helps structure an interface, making it easier to understand. You can group elements by:
- Placing related elements in the same container.
- Spacing related elements close together.
- Making related elements visually similar.
- Aligning related elements in a continuous line. In our example, the lack of space between content makes it look cluttered. Increasing spacing clearly groups content, enhancing organization and comprehension.
- Be Consistent
Consistency means similar elements look and function similarly, both within your product and compared to other well-established products. This predictability improves usability. In our example, inconsistent icon styles can confuse users. Standardizing icon styles improves consistency. - Ensure Similar Looking Elements Function Similarly
If elements look alike, users expect them to work similarly. In our example, icon containers resemble the “book now” button, misleading users. Removing the button styling from icons prevents confusion. - Create a Clear Visual Hierarchy
Present information in order of importance by making crucial elements more prominent. In our example, the primary action doesn’t stand out. Giving it a high-contrast background and bold font weight enhances its prominence. - Remove Unnecessary Styles
Eliminate unnecessary lines, colors, backgrounds, and animations to reduce cognitive load and create a focused interface. In our example, removing unnecessary borders and white space around images simplifies the design. - Use Color Purposefully
Use color sparingly to convey meaning rather than for decoration. In our example, the blue heading appears interactive. Removing the color from non-interactive elements clarifies usability. - Ensure Interface Elements Have a 3:1 Contrast Ratio
Contrast between interface elements should meet at least a 3:1 ratio for accessibility. In our example, increasing the contrast of the arrow icon and primary button enhances visibility. - Ensure Text Has a 4.5:1 Contrast Ratio
Text should meet contrast requirements for readability, with small text needing at least a 4.5:1 ratio. Increasing the contrast of small text elements in our example improves readability. - Don’t Rely on Color Alone as an Indicator
Use additional visual cues besides color to differentiate elements. Underlining link text, for example, helps color-blind users identify links. - Use a Single Sans Serif Typeface
Sans serif typefaces are generally more legible and neutral. Simplifying the typeface in our example improves readability and aesthetics. - Use a Typeface with Taller Lower Case Letters
Typefaces with taller lowercase letters and greater letter spacing are more legible at small sizes. Changing the typeface in our example enhances readability. - Limit the Use of Uppercase
Uppercase text is harder to read. In our example, changing uppercase text to sentence case improves readability. - Use Regular and Bold Font Weights Only
Limit font weights to regular and bold to avoid visual clutter. Simplifying font weights in our example enhances readability. - Avoid Pure Black Text
Pure black text against white can cause eye strain. Using dark grey instead improves readability in our example. - Left Align Text
Left-aligned text is easier to read, especially for long body text. Changing center-aligned text to left-aligned in our example improves readability. - Use at Least 1.5 Line Height for Body Text
Adequate line height prevents rereading the same line and enhances readability. Increasing line height in our example improves text legibility.
By applying these simple yet powerful UI design guidelines, we transformed our example design into a more intuitive and accessible interface. Guidelines aren’t meant to limit creativity but provide a solid foundation for designing beautiful and functional interfaces.
