Layering
The idea of layering is organizing and grouping the related information together in order to manage complexity and strengthen relationships in information. There are two main types of layering: two-dimensional and three-dimensional layering.
Two-dimensional layering divides information into layers in such a way that only one layer can be seen at a time. There are two types of two-dimensional layers: linear and nonlinear layers. Linear layers are used for information that has a clear start, middle and end sequence. Nonlinear layers are used when one is reinforcing the relationships between layers. These are 3 types of nonlinear layers: hierarchical, parallel and web. An organizational chart is a good example of a hierarchical layer, which is useful when the information has a relationship between subordinates and superiors. Parallel layer is used when the information is based on the organization of other information, such as a thesaurus. Hypertext is a good reference for web layers that is useful when the information includes diverse relationships. The layers are revealed through linking to other layers.
Three-dimensional layering separates information into layers in such a way that multiple layers can be viewed at a time without switching context. The 3-dimensional layers can be revealed through opaque and transparent layers. Opaque layers are useful for presenting elaborate information or additional information to a particular item. A software pop-up window is a good reference for opaque layers. Transparent layers are used to combine overlaying information to illustrate concepts and highlight relationships in information.
Example 1 (Cited by Original Source)
This is example of two-dimensional layering. Linear layers are used when information has beginning, middle and end sequentially, while nonlinear layers are used for reinforcing the relationships between each layer. There are three different nonlinear layers: hierarchical, parallel, and web.
Example 2 (Found Online)
The map and navigation UI provide the aspect of three-dimensional layering. The layers of information, such as search box, direction information and location pin, overlay on top another and highlight information.
Example 3 (Found in Real Life)
In these days, many Augmented Reality (AR) apps and products have been created. AR is a technology that layers virtual images and information onto the real world. With using both opaque and transparent layers, AR enhances the connections between digital information and real life and allows the user to have positive experiences.
References:
Lidwell, William, et al. Universal Principles of Design 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design. Rockport, 2010.
ThinkMobiles. What is Augmented Reality (AR) and How does it work, 2018, Retrieved from https://thinkmobiles.com/blog/what-is-augmented-reality/ .
Hey there, Young Sun! I found your examples of Layering particularly effective because they are things that I encounter every day at work. I often find myself drawn back to flat design because of it’s simplistic shading and use of dimension as both an stylistic and functional choice. Games like Monument Valley took this even further by embedding flat design into actual, movable 3D space, and I find the style extremely engaging. But functionally, items like pop-ups, tooltips, and modals all give an illusion of layering, even when they don’t contain visual clues like shadows or outlines. This is particularly effective at forcing the user to focus on a specific task, which is why they’ve become so popular. I find layering to be effective for this reason. Much of my work revolves around data visualization, which tends to be somewhat overwhelming for the user. If I were to just place everything in lists, engagement would probably be horrible. But by adding some sort of dynamic layering, even if just for visual effect, I’ve found it much easier to capture the user’s attention or make things stand out.
I LOVED your example of AR as well, because it speaks to a strong trend right now. AR is more than just visual layering – the magic lies in our psychology of thinking the object is truly layered in the real world. With more and more technology engaging with us in an augmented space, I’m excited to see how layering will begin to pop up in new ways. The same can be said for VR, as we now need to mimic things that were once entirely 2-dimensional in a whole new way. How does all of this technology change layering, even from a purely visual standpoint? Can’t wait to see!
Hi Graham, thanks for your reply and idea. Yes, I’ve heard that Monument Valley’s AR implementations enhance their existing app experience. So exciting! The data visualization is a great example of using the power of layering. It helps people focus on the important things out of the bunch of overwhelming data. Especially in the field of games, layering is a must-have principle to contain and link entire information not just visually but also functionally. Personally, the concept of AR is more interesting than VR because AR is more related and overlapped with the real world. As you are, I am looking forward to seeing how technology and the future visual development can add another effective layer in our everyday lives!
Youngsun and Kathy, I am interested in layering and wanted to know if Google’s concept of elevation is the same as visual layering in mobile design.
“Elevation in Material Design is measured as the distance between Material surfaces. The distance from the front of one Material surface to the front of another is measured along the z-axis in density-independent pixels (dps) and depicted (by default) using shadows.” It further goes on to describe different fills and opacity as other ways to depict elevation.
I particularly like the graphic on this page which depicts the layering of the screens, and then on to explain the notion of elevation and how its carried out. I think? I would love a designer’s perspective on it. Thanks!
https://material.io/design/environment/elevation.html#elevation-in-material-design
Hi Tara, thanks for your insightful reply and question! Yes, I think that Google’s material design is a great example for layering. From my personal point of view, Google’s elevation concept can be an example of visual layering as well because it emphasizes the layers and UI elements in unique visual clues (light & shadow), manages and links related information, and provides a good and balanced look and feel of the product.
But, the concept of Google’s material design and elevation is more than just a pleasant visual layering; it is also a visual language of systematic guidelines, tools and design.
Great post, Young Son. You described the principle very clearly and I was able to understand it, but I had a little bit of trouble distinguishing it from something like a site map, but I think that maybe it’s a very broad principle that can apply to content organization as well as visual design. Your mobile example is a good example of layering in visual design. The layering helped bring the most important information to the foreground so users would focus on it. Additionally, I think it’s a very nice design visually.
In our readings this week, Tufte mentions that beauty is something that can be enhanced with layering and holds that this principle can help us escape the “flatland” of the two-dimensional world of either paper or a computer screen. He barely mentions it in the portion of the book that we have. I’m thinking about ordering the book so I can read the rest of it because he indicates that he expands on layering and other principles later in the book.
Reference
Tufte, E. R., Goeler, N. H., & Benson, R. (1990). Envisioning information (Vol. 126). Cheshire, CT: Graphics press.
Hi Kathy. Thanks for your reply and sharing your idea about the book by Tufte. I agree that the depth of layering is a great way to avoid flatness. Because many products and designs want to include a lot of information in a limited space, layering is a good way to group the information together on top of layering each other.
Yes, I agree that the concept of layering is very broad. As you mentioned, a site map or information architecture is also a good example of a two-dimensional hierarchical layer because information is connected and navigated through layers.