This website is live here.
For this project, I decided to incorporate my own interests with web development and design. I wanted to make a visual argument about how the spatial mapping of content elements on websites plays a significant role in people’s processing of content. Especially given the current day’s widespread availability of the internet and devices to access it, websites are a prime platform for the distribution of multimodal content. The technologies a website can integrate provides the affordance to mobilize writing across many forms of media.
I created a webpage that incorporates many aspects of generally agreed upon standards of web design, except for the design principles that deal with the positioning of content elements. By uncannily isolating this singular aspect from an otherwise well designed webpage, I hope to scope out and illustrate the magnitude of importance that content positioning/mapping plays on human perception. I believe doing so would make a better visual argument than a webpage that breaks all design conventions.
I will also make the argument that this webpage and all webpages are maps. The Oxford dictionary defines the word map as follows:
A diagram or collection of data showing the spatial arrangement or distribution of something over an area
All webpages that display any form of content are maps since the content is a collection of data that is spatially arranged over the area of the screen the page is rendered on. Analyzing design frameworks that formalize spatial arrangements can lead to a better understanding of how these principles can be applied to the general conception of a map.
Gestalt Principles
The Gestalt Principles are a set of design principles that analyze and provide a framework for the structural arrangement of objects in space. Its ideology follows the notion that the “whole is greater than the sum of its parts” [1]. I will go over some of the specific principles and show how I intentionally broke them in my webpage.
Proximity
Proximity refers to the idea that when we perceive a collection of objects, we see objects close to each other as forming a group [1]. The navbar links on my webpage showcase this — their proximity leads users to associate the links as a group, further signifying that they are related. In fact, this principle alone is likely why navbars exist in the first place. On the other hand, the arrangement of cards breaks this principle. Although the cards belong to the same set of content items, their physical separation makes it confusing to the user whether they really are related.
Similarity
The law of similarity captures the idea that elements will be grouped perceptually if they are similar to each other [1]. The cards almost follow this, as they mostly have the same base styles. However, the second card from the top has a few differences, such as the lack of a divider under the title and the centered title instead of a left aligned one. A user would typically associate all the cards as the same type of entity given the overall similarities, but these small differences may throw viewers off with forming such a mental grouping.
Law of Prägnanz
Also referred to by the figure-ground phenomenon, the Law of Prägnanz states that in perceiving a visual field, some objects take a prominent role (the figures) while others recede into the background (the ground) [1]. The first and third cards from the top apply this concept to elevate themselves as prominent figures. This is done by their box-shadow property. However, the second card from the top does not implement this property, and it therefore remains grounded, attached to the background. The box-shadow property provides content elements the affordance to ascend as figures by introducing an element of depth in an otherwise two-dimensional space.
All the aforementioned Gestalt Principles describe the mechanics in how the structural arrangement of objects in space relate to their perception. These same principles can be directly applied to other types of maps as well.
In How to Lie with Maps, Monmonier states that “maps have three basic attributes: scale, projection, and symbolization. Each element is a source of distortion. As a group, they describe the essence of the map’s possibilities and limitations” [2]. Monmonier framing the concept as a “distortion” is likely self influenced by his intent to convey “how to lie with maps.” But if we take a step back and apply the mapping generalization framework I discussed in my previous blog post about Formalizing Mapping, we can find parallels in Monmonier’s notion of “distortion” and the framework’s notion of a map as a transformation between two sets.
We can revisit the Gestalt Principles and argue that especially for maps, the perception of grouped elements and the separation of figures from their backgrounds plays a huge role in their goals of relating one set of features to another. I described in Formalizing Mapping how analyzing the mathematical concept of mapping can be applied to visual maps and how it helps generalize what constitutes a map using Harmon’s You Are Here as an example. In many ways, we can claim that each of the Gestalt Principles acts as a mapping function from the set of all content on a webpage to the set of grouped figures that are the most prominent in a certain context.
F-Shaped Reading Pattern
By now, you have probably already wondered why the navbar of my webpage is at the bottom of the page. Since my goal of this visual argument is to showcase how breaking the commonly followed design principles of spatial arrangement of webpage content affect users’ perception, I decided to take an almost universal component of most websites (the navbar) and place it somewhere it almost never exists. There is a good reason why navbars and other important content typically exists at the top left of a webpage.
Research shows that users tend to scan webpage content in an F like shape [3]. The researchers analyzed eye tracking visualizations to determine that people tend to make a first horizontal scan across the upper part of a content area, then make a second horizontal pass slightly shorter than the first, and then proceed to make a vertical scan down the left side of the content area [3].
I intentionally placed the navbar at the bottom specifically because users expect to see it at the top. I believe doing so is unorthodox enough to elicit a subtle sense of just enough confusion to make my visual argument. In addition, another eyetracking study suggests that users spend about 80% of the time looking on the left side of the page [4]. This is what led to my decision of right aligning the navbar links and search bar.
My visual artifact is a result of the analysis of the principles of well formed and researched spatial design paradigms such as the Gestalt Principles and the F-Shaped Reading Pattern. I applied the generalization and definition of maps to identify that webpages are instances of maps, and then proceeded to analyze how breaking the such spatial design principles might affect the semiotics of my webpage.
I designed and implemented this webpage. The source code is available on my GitHub. I used third party assets for the background image, found on Subtle Patterns, and the menu icon, found on Feather Icons.
References
[1] Mads Soegaard: Gestalt principles of form perception. The Glossary of Human Computer Interaction
[2] Mark Monmonier: How to Lie with Maps
[3] Jakob Nielsen: F-Shaped Pattern For Reading Web Content. Nielsen Norman Group
[4] Therese Fessenden: Horizontal Attention Leans Left. Nielsen Norman Group
