Elevation Table / Kunal Patel Q&A
John Maeda: What is “elevation” in Material Design?
Kunal Patel: “Elevation” expresses in a two-dimensional interface what we like to think of the interface as existing in three dimensions. The z-space becomes a really good canvas within which to tell what’s important in an application with regards to what can move and what can stay fixed in position.
Operating the table as it first came up the day before the grand opening.
JM: Why “24 DP” and what does “DP” stand for?
KP: DP (pronounced “dip”) stands for Density Independent Pixel unit. Instead of referring to the actual pixel itself, DP is a flexible unit that scales to the resolution of the screen so that your UI stays consistently sized across devices. It’s a way for designers to work without understanding exactly what hardware their application is going to be running on. “24” is the maximum level of elevation in our design system. It is the maximum height that an item can be placed at. A DP of 24 is reserved for the most important elements — like an alert for something that requires the user’s attention before they can proceed with using the rest of the app.
Video that accompanies the Elevation Table.
JM: If there is 24 levels, why do you have zero as a level too?
KP: In our elevation system, zero represents the base level of the application. It is your ground floor. It is the background, so most often anything you are adding to your interface is going to exist on top of that background level. Very few things actually exist at DP = 0.
JM: What are examples of things that exist at DP = 0?
KP: Things that can exist at DP = 0 are titles or subheadings that are secondary elements. Sometimes you may want a card to be elevated but where should the title go in that case? Or in a case where you have “no results” for a search result. Or you lose connection. Sometimes it helps to have that content sit on the background directly, so that you are further indicating to the user the difference between the active state of the application and an inactive state.
The table displays the different components sitting at different “DP” levels in real time on the screen.
JM: If that’s the case, then you’re trying to inform the user of something at DP = 0 as meaning not important, but that sounds important. Huh?
KP: Yeah. DP is used to indicate what’s important. But often times when most of your content is at DP = 0, there is not much on the screen like in a no-results case. Or in an onboarding case you may have a large flat illustration, or some other graphic so the UI is not overloaded with elements.
JM: How many elements should be sitting at DP = 24 at any given time?
KP: DP = 24 is really reserved for dialogues — which are a blocking interface component that are used for high priority messages or alerts that a user needs to address before they continue using the application.
JM: So a FAB isn’t at DP = 24?
KP: No, it is not at DP = 24. And that’s partially an emphasis question and a aesthetic choice as well. You know, part of what our elevation system does is try to rationalize the use of shadows to indicate with precision the level of priority. But you also want all your elements to be working together. So if most of your UI is resting at DP = 4 or DP = 6 or DP = 8, then having a FAB at DP = 24 will throw it out of balance with the rest of the UI aesthetically.
Originally published at http://materialandautomatticinfrancedesign.wordpress.com on March 21, 2019.
