The eye wants an order
Gordon (2021) defines visual hierarchy as communicating importance through colour, contrast, scale and grouping. Under feature-integration theory (Treisman & Gelade, 1980) an element differing in a single feature pops out before focused attention, and Wolfe (1994) shows such features guide search. Five highlights equal none; hierarchy starts by choosing the one thing users must see first.
Structure from spacing and grouping
Proximity, one of the Gestalt principles reviewed by Wagemans et al. (2012), groups nearby items. Making gaps between sections larger than between heading and body reveals structure without rules. Reinecke et al. (2013) found higher visual complexity worsens first impressions, and Buscher et al. (2009) show users concentrate on some regions. For text-heavy pages, consider the F-shaped pattern and put essentials top-left.
Mobile: one hero per screen
Narrow screens make hierarchy even more important. Give each screen one filled primary button, show secondary actions as outlined or text buttons, make headings clearly larger (1.5–2×) and mute secondary text while still meeting colour contrast standards. Well-ordered screens also benefit from the aesthetic-usability effect (Lidwell et al., 2010).
FAQ
- How can I quickly check hierarchy?
- Blur or step back from the screen and see whether the first thing noticed is the intended focus.
- How many accent colours are appropriate?
- Usually one accent for primary actions plus status colours for error and success.
Sources reviewed: 2026-10-27
References
- Gordon, K. (2021, January 17). Visual hierarchy in UX: Definition. Nielsen Norman Group. Defines building hierarchy through colour, contrast, scale and grouping.
- Treisman, A. M., & Gelade, G. (1980). A feature-integration theory of attention. Cognitive Psychology, 12(1), 97–136. Single features like colour pop out preattentively.
- Wolfe, J. M. (1994). Guided Search 2.0: A revised model of visual search. Psychonomic Bulletin & Review, 1(2), 202–238. Visual search is guided by features.
- Wagemans, J., Elder, J. H., Kubovy, M., Palmer, S. E., Peterson, M. A., Singh, M., & von der Heydt, R. (2012). A century of Gestalt psychology in visual perception: I. Perceptual grouping and figure–ground organization. Psychological Bulletin, 138(6), 1172–1217. Reviews Gestalt grouping such as proximity and similarity.
- Reinecke, K., Yeh, T., Miratrix, L., Mardiko, R., Zhao, Y., Liu, J., & Gajos, K. Z. (2013). Predicting users' first impressions of website aesthetics with a quantification of perceived visual complexity and colorfulness. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 2049–2058). ACM. Large study showing visual complexity hurts first impressions.
- Buscher, G., Cutrell, E., & Morris, M. R. (2009). What do you see when you're surfing? Using eye tracking to predict salient regions of web pages. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 21–30). ACM. Predicts salient page regions from eye tracking.
- Lidwell, W., Holden, K., & Butler, J. (2010). Universal principles of design (Rev. ed.). Rockport. Concise entries on hierarchy, alignment and proximity.