Book Summaries | Refactoring UI - Hierarchy is Everything

December 28th, 2023

Refactoring UI - Hierarchy is Everything (Chapter 2)

This summary will serve to further cement my learnings taken when reading the second chapter of Refactoring UI, titled Hierarchy is Everything, and I hope will provide some learnings to you as well.

Visual Hierarchy: Making Elements Stand Out

When focusing on visual design, it’s crucial to understand that not all elements carry equal importance. Visual hierarchy, determining the significance of elements in relation to one another, is a key tool in crafting well-designed interfaces. By de-emphasizing secondary information and highlighting essential elements, you can create a more pleasing and organized user experience.

Size Isn’t Everything

While font size is a common tool for controlling hierarchy, relying solely on it can lead to imbalances. Instead, leverage font weight and color to convey importance effectively. Strive for a limited color palette and font weights, ensuring readability and clarity in your design.

Two font weights are usually enough for UI work:

• A normal font weight (400 or 500 depending on the font) for most text
• A heavier font weight (600 or 700) for the text you want to emphasize

Avoid Grey Text on Colored Backgrounds

De-emphasizing text on white backgrounds using light grey works well, but on colored backgrounds, it diminishes contrast. Opt for hand-picking a color with a similar hue and adjusting saturation and lightness for a more harmonious look. Avoid using low-opacity white text on colored backgrounds, as it can result in a dull and washed-out appearance.

Try and stick to two or three colors:

• A dark color for primary content (like the headline of an article)
• A grey for secondary content (like the date an article was published)
• A lighter grey for tertiary content (maybe the copyright notice in a footer)

Emphasize by De-emphasizing

In situations where a crucial interface element lacks prominence, consider de-emphasizing competing elements instead of further emphasizing the focal point. This strategy can be applied to both individual elements and larger sections of the interface.

Labels Are a Last Resort

Presenting data without labels enhances user experience and design aesthetics. Leverage format and context to convey information where possible. If labels are necessary, keep them secondary, ensuring that the data remains the focal point.

Separate Visual Hierarchy from Document Hierarchy

In web development, using semantic markup is crucial, but don’t let default font sizes associated with heading elements dictate your visual hierarchy. Tailor styles based on the visual needs of your interface, emphasizing content over titles.

Balance Weight and Contrast

Understanding the relationship between surface area, weight, and contrast is vital. Adjusting contrast can compensate for the weight of elements, offering a balanced visual experience. Use this knowledge when working with icons or other UI components.

Semantics Are Secondary

In UI design, every action on a page holds a specific place in the hierarchy. Primary, secondary, and tertiary actions should be communicated clearly through styling. A hierarchy-first approach results in a cleaner, more intuitive interface.

Destructive Actions

Not all destructive actions need bold, red buttons. Consider the context and prominence of the action within the hierarchy. For secondary or tertiary destructive actions, opt for less prominent styling until confirmation is needed.