Design Principles

Hierarchy & Highlighting

The Power of Highlighting and Visual Hierarchy

They guide users through data structures, ensuring they can identify critical insights with confidence. Highlighting and hierarchy are invaluable.  As a designer in financial applications, I encounter the challenge of presenting vast data in user-friendly ways. Picture complex Excel files with layers of granularity. Distilling this data into sleek interfaces empowers users to find what they need.

Hierarchy

  • Tree Structures: Represent hierarchical relationships with child elements below or to the right of parent elements. Effective for moderate complexity but may become challenging for large hierarchies.

  • Nest Structures: Show hierarchical relationships by containing child elements within parent elements, like Venn diagrams. Best for simple hierarchies but may become less effective with dense or complex relationships.

  • Stair Structures: Display hierarchical relationships by stacking child elements below and to the right of parent elements, similar to outlines. Suitable for complex hierarchies but may imply false sequential relationships

Highlighting

  • Use highlighting techniques judiciously to draw attention without overwhelming the user.
  • Employ desaturated colors and selective emphasis to highlight critical elements.
  • Consider user comfort and legibility when utilizing effects like inversing and blinking.
  • Choose tree structures for moderate hierarchy views and nest structures for natural systems.
The layout clearly organizes emails into categories like Primary, Promotions, and Social. Additionally, folder structures on the left help users quickly access important sections, establishing a clear hierarchy for navigation
The highlighted action (hover effect on the menu) directs attention to the selected feature, making it easy to spot the current tool or option. This use of highlighting improves user focus and interaction efficiency.
Takeaways
  • Tree Structures: Best for moderate complexity, can become cluttered in large hierarchies.
  • Nest Structures: Effective for simple hierarchies, but struggles with dense relationships.
  • Stair Structures: Suitable for complex systems, but may imply incorrect sequence.
  • Highlighting: Use sparingly with desaturated colors to focus attention without overwhelming the user.

Alignment

area alignment vs. center edge alignment

Similarity

Aesthetic-Usability Effect

Aesthetic Usability Effect

Proximity