Biophilic UX Design
What is biophilia?
Biophilia is a term often used within the design and construction industry to convey the use of vegetation or natural geometry (perhaps generated algorithmically or buy following a template such as the golden mean).
Examples of biophilic architecture can be seen as far back as the Pantheon, whereby the ceiling replicates a natural-like pattern that might be depictive of a flower. We see this again in Islamic architecture, which contains some of what has been regarded as the most beautiful man-made patterns.
Today, we see biophilia expressed not only two-dimensionally but three-dimensionally as well, especially given the rise of 3D printing technology. There is currently a push for more expression of biophilia as often times it adds vegetation to an otherwise barren urban-scape. Additionally, there is recent research that has shown views of natural elements serve as a catalyst for the improvement of the human condition. That is to say simply, views of nature promote health.
A question I have pondered for a brief time is simply this; is it possible to translate this sort of biophilic design into the user experience in any fashion?
Overt biophilic design
Perhaps the most obvious place to express this is in the UI design, after all this is the part that users visually see. One of the more interesting trends that might serve as a good starting point is that of glassmorphism. Take for example this image here from dribble:
This simple calculator app does a few things right that relate directly to what I would perceive to be 2D biophilic design.
- Geometry present in nature is found within the interface, in this case, the background.
- The secondary color selected for the calculator functions matches that of the fern stems.
- The image is dark and contains many near-black pixels. As new types of displays emerge that are able to conserve electricity by turning off pixels if they would be displayed as black, I believe that darker images and the use of black-based interfaces will become more important to the user experience if these displays become more popular. The fewer pixels that are on, the less battery used, thus the longer the device will last between charges.
Discrete biophilic design
Information architecture while not directly visible, is directly experienced. For large commerce websites that contain a wide array of items of categories, for example, this information is often organized hierarchically. Another way to describe this organizational structure might be to say it is fractal in nature, with each layer containing less, but more defined information. These fractal or hierarchical patterns are of course found everywhere in nature, and we interact with these hierarchies on a daily basis. In this sense, it is my bias that these patterns should be adhered to wherever possible within the design of information architecture.
The divisions within natural elements are often obvious and distinct. An argument could be made that tree-like navigation should be similarly distinct. Music services such as Spotify or YouTube Music contain some of the best examples of this type of navigation.
The diagram to the left depicts YouTube Music’s home page. In this particular case, each child of the trunk is not its own separate page, but rather simply a clearly marked category that contains horizontal-scrolling based access to the songs, or the children of the categories.
It is worth noting that all categories are not immediately visible on a given page. Although there are only three depicted here, there are many more present on the home page of YouTube Music’s UI.
Although this structure may be obvious, there are many ways to implement it, and there are nuances as to how this can be accomplished. The simplest (and perhaps worst) implementation that should work for any given website or application is to have one page represent one leaf or child node. However, this would create a scarcity of information as even though items may be simple to find, it would take time to find them.
A more appropriate implementation, which is what we see at Amazon.com, and in the YouTube Music example, is a consolidation of various and usually related child or leaf nodes into one display.
Thank you for reading,