Gestalt Psychology for UX Design

 

Introduction

Understanding some basic psychological principles that impact visual perception is essential to user experience (UX) professionals interested in designing systems and products that better serve the needs of users. This post provides a brief overview of Gestalt psychology and demonstrates how many of its principles can help UX and interaction designers create interfaces that intentionally direct the user’s attention to the functions and features that are most useful.

 

Origins of Gestalt

“The whole is other than the sum of its parts.”

– Kurt Koffka [1]

Gestalt psychology is a theory of perception which attempts to examine psychological phenomena as structured wholes, rather than breaking them down into components [2]. Although the notion of Gestalt, a German word for “shape” or “form,” had already been introduced into psychology as early as 1890 by Austrian philosopher Christian von Ehrenfels, it was the Berlin School of Experimental Psychology, represented by Max Wertheimer, Kurt Koffka, and Wolfgang Köhler, that defined many of the classical principles [3]. At its simplest, gestaltism describes how the human mind processes visual information.

 

Principles of Grouping and Prägnanz

While there are many laws of Gestalt psychology that can be applied to user experience design (UXD), its principles of grouping have been shown to benefit visual working memory [4] and by extension, can minimize the cognitive load imposed by a user interface to maximize usability [5]. Each of the following illustrated principles demonstrates how grouping amongst a set of elements in a simple image is affected by varying properties of those elements relative to one another [6].

Proximity – elements that are placed closer together are perceived as a group.

For UXD, proximity can help organize the layout of the interface to make it quickly scannable (e.g. white space being used to separate blocks of content to present unified information).

 

Similarity – elements that share a similar attribute or property are perceived as belonging together.

For UXD, similarity can be presented in color, shape, size, and orientation to create strong visual hierarchy (e.g. color prompts for different tasks).

 

Continuity – elements that appear to be a continuation of a preceding sequence or a line of similar items are perceived as belonging together.

 

Connectedness or “common fate” – elements that move together in the same direction at the same rate simultaneously are perceived as a group.

 

Closure – elements with shared boundaries are perceived as belonging together, even if the outline they form is not complete.

For UXD, closure can make for memorable icons, like the bitten Apple logo or NBC’s modern peacock.

 

In addition to perceptual grouping, prägnanz (“pithiness”), also called the law of simplicity or good form, can be easily applied to UXD. Prägnanz suggests that our sense of reality is organized to the simplest form possible by eliminating what does not seem to be useful. This same rule can be translated to interface designs by removing feature creep and information overload, thus allowing users to make decisions more easily [7].

All five of these principles, along with the law of prägnanz, are demonstrated in the featured image at the top of this post. See how many you can find! Hint: some principles are illustrated more than once or are combined with another principle.

 

Final Thoughts

Gestalt psychology does not result in good UXD by itself. Instead, we must leverage its laws and principles, like proximity, similarity, continuity, connectedness, closure, and simplicity, to create mental shortcuts for visual problem solving when designing human-centered interfaces.

 

References

  1. Gestalt psychology. (n.d.). In Wikipedia. Retrieved from https://en.wikipedia.org/wiki/Gestalt_psychology
  2. Max Wertheimer (n.d.). In Encyclopaedia Britannica online. Retrieved from https://www.britannica.com/biography/Max-Wertheimer
  3. 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. https://doi.org/10.1037/a0029333
  4. Peterson, D. J, & Berryhill, M. E. (2014). The Gestalt principle of similarity benefits visual working memory. Psychonomic Bulletin & Review, 20(6), 1282-1289. https://doi.org/10.3758%2Fs13423-013-0460-x
  5. Whitenton, K. (2013, December 22). Minimize cognitive load to maximize usability. Retrieved from https://www.nngroup.com/articles/minimize-cognitive-load/
  6. Brooks. J. L. (2015). Traditional and new principles of perceptual grouping. In J. Wagemans (Ed.), Oxford handbook of perceptual organization (pp. 541-559). Oxford, U.K.: Oxford University Press. https://doi.org/10.1093/oxfordhb/9780199686858.013.060
  7. Loranger, H. (2015, November 22). Simplicity wins over abundance of choice. Retrieved from https://www.nngroup.com/articles/simplicity-vs-choice/

Design Critique: Net Art Anthology (Microsite)

 Figure (a). General screenshot

Introduction

Rhizome, the New Museum-affiliated born-digital art organization behind Net Art Anthology, describes this dedicated microsite as a “two-year online exhibition presenting 100 works of restored and re-performed net art” [1]. Since its launch in October 2016, Net Art Anthology aims to restage and contextualize one project each week by uploading original or emulation-based artwork, essays, and primary source documents to the site.

 

Net Art 101

Net art, a portmanteau for internet art, is used to describe artwork made in the 1990s through the early 2000s that uses browsers, scripts, search engines, and various online tools as primary media. Not only does the Anthology offer a potential canon for net art, it also is an impressive display of digital preservation best practices through a powerful combination of browser-based emulations and web-archiving tools. Despite the use innovative archival technology, the site design creates a raw user experience that eschews many of Don Norman’s fundamental principles of interaction [2]. Rather than bridging the gulf of execution to engage with net art in-situ, users may be left treading the opaque waters of seemingly endless scrolling. This critique focuses primarily on design attributes of the long-form landing page, since it is the first thing most visitors will see when they arrive to the exhibition site.

 

Global Navigation

In its present state, the only global navigation elements on the landing page are a link with a transparent background to reload the page and the browser’s vertical scrollbar. The former has to continuously fight for the spotlight with other content, often either overlapping text (Figure b) or hiding behind artwork containers (Figure c).

Figure (b). Link to reload “Net Art Anthology” overlapping text.

Figure (c). Link to reload “Net Art Anthology” hiding behind artwork.

Discoverability could be easily improved by adding affordances and signifiers for navigation, such as a permanently visible header with a solid background and prominently labeled buttons linking to the distinct chapters in the exhibition chronology or including obvious breadcrumbs at the top of every artwork page. Even including the hotly-contested hamburger menu-icon [3] would provide users with hints of a basic navigation structure.

Recommendation: Add a permanently visible header and prominent links for aiding global navigation.

 

Continuous Layout

Net Art Anthology uses a long-form structure for its landing page. If it weren’t for the browser’s vertical scrollbar, it would be impossible for users to anticipate the effort required to reach the bottom of the page. Replacing the continuous layout with pagination or chapters or filtering, would alleviate the psychological consequences of endless scrolling, like exhaustion or frustration, for task-driven users looking for specific information quickly. Just as eliminating consumer choices can greatly reduce anxiety for shoppers [4], content on smaller pages may be less overwhelming for users to evaluate because there are fewer options [5]. Coupled with naturally mapping artworks and chapters chronologically (Figure d), users would have a clearer understanding of the what the information possibilities for search.

Figure (d). Screenshots illustrating the current order of chapters. Natural mapping by chapter number (i.e. 1, 2, 3, 4, 5) would be one solution to improve the layout.

Recommendation: Add filtering or pagination and order content chronologically to combat information overload.

 

Color Palette

While not the most traditionally user-friendly, the constantly changing background color is quite delightful at the visceral level. Based solely on observation, it appears that each artwork container link triggers a unique color transition when users hover over the element. At the behavioral level, this ever-changing color attribute creates may give rise to feelings of annoyance or confusion in visitors. By leveraging a consistent a color palette throughout the experience that is informative rather than merely cacophonous (e.g. assigning the same background color to artworks featured in the same chapter), users would be provided with positive reassurance, thus encouraging a positive affective response.

Recommendation: Make feedback clear, consistent, and informative for positive reassurance.

 

Final Thoughts

Perhaps the unforgiving style of Net Art Anthology is an intentional nod to Web 1.0 hand-coded HTML. It may also reflect the rising popularity of “web brutalism,” a design trend that derives its philosophy from its mid 20th century architectural movement namesake, eschewing artificiality and lightness in favor of modular, raw, and unpolished aesthetics [6]. However, the author is confident that many, if not all, of the aforementioned recommendations could be implemented while still maintaining a brutalist or web-nostalgic style.

 

References

  1. Connor, M. (2016, October 27). Net art anthology launches today. Rhizome. Retrieved from https://rhizome.org/editorial/2016/oct/27/net-art-anthology-microsite-launches/
  2. Norman, D. (2013). The design of everyday things: Revised and expanded edition. New York, NY: Basic Books.
  3. Bawcombe, L. (2014, August 27). The hamburger menu-icon debate. The Atlantic. Retrieved from https://www.theatlantic.com/product/archive/2014/08/the-hamburger-menu-debate/379145/
  4. Schwartz, B. (2004). The paradox of choice: Why more is less. New York, NY: Harper Perennial.
  5. Loranger, H. (2014, February 2). Infinite scrolling is not for every website. Nielsen Norman Group. Retrieved from https://www.nngroup.com/articles/infinite-scrolling/
  6. Meyer, K. (2017, November 5). Brutalism and anti-design. Nielsen Norman Group. Retrieved from https://www.nngroup.com/articles/brutalism-antidesign/

 

Queens Historical Society: A Case Study

For over fifty years, the Queens Historical Society (QHS) has been actively celebrating and preserving the heritage and history of Queens, New York through educational programs, exhibitions, and its public repository of archival collections and sources.  The QHS website is a key vehicle for communicating their mission to the widest audience possible, yet their message gets lost in the clutter of content, images, navigation bars, and more.

 

THE CHALLENGE

How can we gain hands-on experience of information architecture and interaction design, meet the goals and objectives of this particular course, and collaborate and communicate with a team of strangers to create a cohesive re-design proposal for a nonprofit’s website in need of a facelift?  With a four month timeline, our solution was to employ a user-centered design (UCD) process that emphasized aesthetic simplicity and navigational speed.

 

MY ROLE

I was a member of team MAJR Queens comprised of four graduate students attending Pratt Institute School of Information under the guidance of Dr. Craig MacDonald.  All team members conducted user research, drafted briefs, and participated in brainstorming and sketching.  I was responsible for the technical design of many group deliverables, including the final sitemap, the low-fidelity mobile prototype, and the high-fidelity digital wireframe prototypes for both desktop and mobile display.

 

THE PROCESS

Understanding Users: Personas and Goals

To gain a deeper understanding of the QHS website’s users, each team member focused on a specific user group through a series of interviews, observations, and questionnaires.  For instance, by deep diving into the attitudes, behaviors, and goals of “historically-curious New York residents” or “non-expert locals,” I discovered that users in this group possess technological fluency and possess a discerning eye for interface design.  They also tend to be attached to their neighborhoods and prefer to search for activities nearby.  In order to ensure that all future design decisions were based on user needs and guide the ideation process, we each created an engaging persona for inspiration and reference.

User persona (Software: Adobe InDesign)

 

Structuring Content: Mental Models and Site Map

After discovering our users’ goals through observation and condensing this research into user archetypes, the next step was to structure content for the QHS website re-design in a way that would help users figure out where they could find what they needed.  How did our users expect this information to be organized?  What terminology did they find confusing?  What better terms could be used?  To answer these questions and uncover our users’ mental models, we conducted an open card sort.  One of the more valuable insights was that all 11 participants grouped content into fewer categories than there were on the QHS website at that time.  One participant even asked: “Why are there so many options? I feel like you could eliminate half of these with a few good titles.”  Keeping this “less is more” mentality in mind along with other insights derived from the card sort data, we proposed a new information architecture (IA) for the QHS site and then evaluated it through a tree testing study.  When reviewing the tree testing results, we noticed that participants would vacillate between some of our top-level navigation labels, along with other insights.  Revisions to our IA were made accordingly, as seen in the red annotations added to original sitemap sketch.

 

Prototyping With Purpose: Wireframes and Transitioning from Lo-Fi to Hi-Fi

In order to clarify our design direction going forward and to explore other approaches to solving similar problems, we conducted a review of comparable non-profit websites.  This competitive analysis directly influenced many of the re-design features for the QHS website, such as the calendar (e.g. seven-day scroll view) and site footer (e.g. column formatting).  Next, we chose an adaptive, mobile-first approach, sketching the layout for mobile display around task flows crafted to address areas of our design that we felt might still be confusing to users and inspired by our personas’ motivations.  These sketches became the template for our low-fidelity paper prototypes and were evaluated by each team member through user testing.  Analysis of these findings resulted in further changes to content formatting and labeling in our digital prototype, like adding secondary navigational breadcrumbs to minimize the user’s memory load.

Early sketch of the QHS website for mobile

 

Lo-fi paper prototype of QHS website for mobile (Software: Google Slides)

 

Early version of hi-fi digital prototype of QHS website for mobile (Software: Figma)

 

THE PROTOTYPE

Mobile

Hi-fi digital prototype of QHS website for mobile (Software: Figma, InVision)

https://projects.invisionapp.com/share/G2BK7KYVM

 

Desktop

Hi-fi digital prototype of QHS website for desktop (Software: Figma, InVision)

https://projects.invisionapp.com/share/NFBKTPPBZ