A Study on Perceptual Design of Hierarchical Graphic Information in Interfaces Based on Gestalt Principles
Source abstract
Abstract
The representation of visual hierarchy remains a central concern in contemporary design research and practice. Current design guidelines advocate establishing hierarchical relationships through dimensions such as size or distance, yet concrete and effective integration strategies remain elusive. This study, grounded in Gestalt principles, investigates the impact of design layouts on hierarchical perception under the interaction of proximity and similarity. This experiment systematically controls the size (1:1, 1:3/4 and 1:1/2, respectively) and distance (namely 1/4 R, 1/2 R, 3/4 R, 1 R, 5/4 R and 3/2 R) of two circular objects, employing a 3 × 6 two-way ANOVA. The results indicate that the interaction between size and distance can exert a significant influence on the perception of hierarchy. Among these factors, structural type emerges as the dominant element shaping hierarchical perception, with overlapping structures showing pronounced hierarchical suggestive characteristics that significantly outperform tangential and separated structures. Size can partially regulate this effect. When dimensions are equal, tangential and separated structures show no significant difference in perceived hierarchy. However, with the aid of size disparity, the hierarchical sense of separated structures can be markedly enhanced, yielding an effect stronger than that produced by shared edges.
Source: crossref · Quality: baseline
Research context
OpenAlex topics: Color perception and design · Digital Media and Visual Art
SciVX discovery tags are terminology-based. OpenAlex topics are source-provided classifications.
Affiliations
College of Art & Design, Nanjing Forestry University, Nanjing 210037, China
References (65)
Show source-provided references
1. Tullis, T.S. (1984). Predicting the Usability of Alphanumeric Displays, Rice University.
2. Bertin, J. (1987). Semiology of Graphics: Diagrams, Networks, Maps, University of Wisconsin Press.
3. Ware, C. (2012). Information Visualization: Perception for Design, Morgan Kaufmann Publishers Inc.. [3rd ed.].
4. Palmer, S.E. (1999). Vision Science: Photons to Phenomenology, The MIT Press.
5. A Century of Gestalt Psychology in Visual Perception: I. Perceptual Grouping and Figure—Ground Organization10.1037/a0029333 ↗
6. The Gestalt Principle of Similarity Benefits Visual Working Memory10.3758/s13423-013-0460-x ↗
7. Serial Processing of Proximity Groups and Similarity Groups10.3758/s13414-024-02861-2 ↗
8. Treevis.net: A Tree Visualization Reference10.1109/MCG.2011.103 ↗
9. Tee, T.S., and Ma, K.L. (2002). RINGS: A Technique for Visualizing Large Hierarchies. International Symposium on Graph Drawing, Springer.10.1007/3-540-36151-0_25 ↗
10. The Design Space of Implicit Hierarchy Visualization: A Survey10.1109/TVCG.2010.79 ↗
11. Bubble Treemaps for Uncertainty Visualization
12. Koshman, S. (1993). Categorization and Classification Revisited: A Review of Concept in Library Science and Cognitive Psychology. Curr. Stud. Librariansh., 26–41.
13. Hinson, R., Kinsella, A., and Propper, R. (2022, January 24–28). So Much Information, So Little Screen Space: Assessing the Usability of Hierarchical Data Visualizations in Tableau. Usability and User Experience. Proceedings of the AHFE (2022) International Conference, New York, NY, USA.
14. The Application of Classification Structures in Knowledge Organization and Representation
15. An Empirical Study on User-Oriented Association Analysis of Library Classification Schemes
16. Doi, T. (2021). Effects of Asymmetry between Design Models and User Models on Subjective Comprehension of User Interface. Symmetry, 13.10.3390/sym13050795 ↗
17. How the Design and Complexity of Concept Maps Influence Cognitive Learning Processes10.1007/s11423-022-10083-2 ↗
18. Wittgenstein, L. (2010). Philosophical Investigations, Wiley-Blackwell Publishing. [4th ed.].
19. Rosch, E. (1973). Prototype theory. Cognitive Development and the Acquisition of Language, De Gruyter.
20. Brumby, D.P., and Zhuang, S. (2015, January 18–23). Visual Grouping in Menu Interfaces. Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems, Seoul, Republic of Korea.10.1145/2702123.2702177 ↗
21. On Concept and Object10.1093/mind/LX.238.168 ↗
22. Norman, D. (2013). The Design of Everyday Things, Revised and Expanded Edition, Basic Books.
23. Collins, W., Hass, A., Jeffery, K., Martin, A., Medeiros, R., and Tomljanovic, S. (2015). Graphic Design and Print Production Fundamentals, BCcampus.
24. Hagen, R., and Golombisky, K. (2017). White Space Is Not Your Enemy: A Beginner’s Guide to Communicating Visually Through Graphic, Web, & Multimedia Design, Taylor & Francis Group. [3rd ed.].10.1201/b22218 ↗
25. Lupton, E., and Phillips, J.C. (2015). Graphic Design: The New Basics, Princeton Architectural Press. [2nd ed.].
26. Levi-Strauss, C. (1963). Structural Anthropology, Basic Books.
27. Working Memory10.1126/science.1736359 ↗
28. Expertise and Hierarchical Knowledge Representation in Chess10.1007/BF01359221 ↗
29. Urano, Y., Kurosu, A., Henselman-Petrusek, G., and Todorov, A. (2021, January 14). Visual Hierarchy Relates to Impressions of Good Design. Proceedings of the EMICS ’21: ACM CHI ’21 Workshop on Eye Movements as an Interface to Cognitive State, Yokohama, Japan.10.31234/osf.io/hksf9 ↗
30. From Visualization to Visually Enabled Reasoning
31. A Study of Learning Performance of E-Learning Materials Design with Knowledge Maps10.1016/j.compedu.2009.08.007 ↗
32. Concept Maps as Hypermedia Components10.1006/ijhc.1995.1049 ↗
33. Graph Visualization and Navigation in Information Visualization: A Survey10.1109/2945.841119 ↗
34. Moore, J.P. (2013). Promoting Conceptual Understanding via Adaptive Concept Maps. [Ph.D. Dissertation, Virginia Polytechnic Institute and State University].
35. The Different Roles of Product Appearance in Consumer Choice10.1111/j.0737-6782.2005.00103.x ↗
36. Tseng, K.T., and Tseng, Y.C. (2014, January 22–27). The Correlation between Visual Complexity and User Trust in Online Shopping: Implications for Design. Proceedings of the 16th International Conference on Human-Computer Interaction, Heraklion, Crete, Greece.10.1007/978-3-319-07227-2_10 ↗
37. The Role of Classification in Knowledge Representation and Discovery
38. Boardman, R. (2000, January 1–6). Bubble Trees: The Visualization of Hierarchical Information Structures. Proceedings of the CHI’00 Extended Abstracts on Human Factors in Computing Systems, Hague, The Netherlands.10.1145/633482.633484 ↗
39. Turo, D., and Johnson, B. (1992, January 19–23). Improving the Visualization of Hierarchies with Treemaps: Design Issues and Experimentation. Proceedings of the 3rd Conference on Visualization ‘92 (VIS ‘92), Boston, MA, USA.
40. Split Streams: A Visual Metaphor for Evolving Hierarchies10.1109/TVCG.2020.2973564 ↗
41. Hlawatsch, M., Burch, M., and Weiskopf, D. (2014, January 8–10). Bubble Hierarchies. Proceedings of the Workshop on Computational Aesthetics, Vancouver, BC, Canada.10.1145/2630099.2630107 ↗
42. Wu, T., Zhang, L., and Yang, J. (2016, January 13–15). Automatic Generation of Aesthetic Patterns with Cloud Model. Proceedings of the 12th International Conference on Natural Computation, Fuzzy Systems and Knowledge Discovery, Changsha, China.10.1109/FSKD.2016.7603328 ↗
43. Victor, B., Roos, J., and Rasmussen, R. (2007). Method and Materials for Encouraging Creative Thinking, Planning or Decision Making. (No. US20070031795A1), U.S. Patent.
44. Bubble Sets: Revealing Set Relations with Isocontours over Existing Visualizations10.1109/TVCG.2009.122 ↗
45. How Do Interactive Tabletop Systems Influence Collaboration?10.1016/j.chb.2011.08.010 ↗
46. Visualization and Recommendation of Large Image Collections toward Effective Sensemaking10.1177/1473871616630778 ↗
47. Lamqaddam, H., De Prekel, I., Brosens, K., and Verbert, K. (2022). Perceptual Effects of Hierarchy in Art Historical Social Networks. arXiv.
48. The Nature of Intuitive Use of Products: An Experimental Approach10.1016/S0142-694X(03)00038-3 ↗
49. The Introduction and Evaluation of Community Care Orders10.1080/09638230020023778 ↗
50. Williams, R. (2015). The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice, Pearson Education.
51. To Communicate without Signs through Expressive Qualities10.2478/gth-2019-0004 ↗
52. Henle, M. (1976). Blue Night by Paul Klee, Springer.
53. Arnheim, Gestalt Theory and Pictures
54. Art, Design and Gestalt Theory10.2307/1576669 ↗
55. Lemon, E.B., Allen, E.B., Carver, J.C., and Bradshaw, G.L. (2007, January 20–21). An Empirical Study of the Effects of Gestalt Principles on Diagram Understandability. Proceedings of the First International Symposium on Empirical Software Engineering and Measurement (ESEM 2007), Madrid, Spain.10.1109/ESEM.2007.37 ↗
56. Izakson, L., Zeevi, Y., and Levy, D.J. (2020). Attraction to Similar Options: The Gestalt Law of Proximity Is Related to the Attraction Effect. PLoS ONE, 15.10.31234/osf.io/jvcg5 ↗
57. Influence of Complexity and Gestalt Principles on Aesthetic Preferences for Building Façades: An Eye Tracking Study10.16910/jemr.17.2.4 ↗
58. Towards a Framework for Attention Cueing in Instructional Animations: Guidelines for Research and Design10.1007/s10648-009-9098-7 ↗
59. Tufte, E.R. (1983). The Visual Display of Quantitative Information, Graphics Press.
60. Kanizsa, G., Legrenzi, P., and Bozzi, P. (1979). Organization in Vision: Essays on Gestalt Perception, Praeger Punlisher Inc.
61. A feature-integration theory of attention10.1016/0010-0285(80)90005-5 ↗
62. Research on the Generality of Icon Sizes Based on Visual Attention10.1002/eng2.12577 ↗
63. Jiang, Y., Leiva, L.A., Rezazadegan Tavakoli, H., RBHoussel, P., Kylmälä, J., and Oulasvirta, A. (2023, January 23–28). UEyes: Understanding Visual Saliency across User Interface Types. Proceedings of the 2023 CHI Conference on Human Factors in Computing Systems (CHI ‘23), Association for Computing Machinery, New York, NY, USA.10.1145/3544548.3581096 ↗
64. The Quantitative Research on Length and Area Perception: A Guidance on Shape Encoding in Visual Interface10.1016/j.displa.2022.102325 ↗
65. Booc.io: An Education System with Hierarchical Concept Maps and Dynamic Non-Linear Learning Plans10.1109/TVCG.2016.2598518 ↗