Hierarchy Guidelines
Hierarchy is everything! Make sure you've got it right by following the guidelines on this page.
#1: Establish a visual hierarchy according to user goals
One of the biggest factors in making something intuitive to use is visual hierarchy. Visual hierarchy refers to how important the UI elements appear in relation to one another. When designing a UI, ask yourself:
Are the UI elements that are important for the user to complete their goal more noticeable than less important elements?
To answer this question, you first need to think about the user's goal. These can vary greatly. For example, when a flow developer is creating a user step in a workflow, the goal is to create and configure the user step in accordance with their preferences. On the other hand, for an end user that is executing a workflow, the goal is the perform the necessary tasks and finish the workflow as fast as possible.
If the answer to the question is no, try to fix this by emphasizing UI elements that are needed for the user to complete their goal. It's not feasible for us to provide you with every possible way to do so, instead, we encourage you to experiment with the following attributes:
Size. The more space something occupies, the easier it is to notice.
Color. Important UI elements are often colored differently.
Contrast. Sharp contrasts (e.g. dark colors on light backgrounds) draw users' attention effectively.
Opacity. You can emphasize important UI elements by increasing their opacity.
Font. Bold letters are usually easier to notice than thin letters.
Placement. By changing an item's position, you can make it easier for the user to see it.
Icon. Introducing icons is an effective way to attract the user's eyes.
Shadow. Adding shadows to a UI element makes it appear "closer" to the user, which makes it more noticeable.
This guideline is somewhat of a "catch-all rule", and it doesn't provide enough information to help you all the way. It's not meant to! We encourage you to experiment and try out what works and what doesn't. If something feels off, it probably is.
Avoid visual hierarchies that conflict with the user's goal. Consider the user's goal in the screenshot above. What's important for a Flow developer when configuring a user step? They probably want to configure the user step and get it over with as fast as possible. Having this in mind, one important UI element (that doesn't get enough attention) is the "OK" button. If the user doesn't notice that button and assumes their changes are saved automatically, then closes the window using the "X"-button, they lose all their changes! Can we prevent this from happening by altering the visual hierarchy?
#2: Emphasize by de-emphasizing
While trying to highlight an important UI element, it's easy to forget that making changes to everything around the elements can be just as effective as changing the element itself. Specifically, emphasize an important element by de-emphasizing everything else. For example, let say we have a button group where one of the button is vital for the user to complete their goal. To make that important button stand out, consider changing (or "weaken") the appearance of the other buttons. As explained in guideline #1 on this page, we encourage you to play around with different visual attributes to achieve the right effect. Smaller elements is harder to notice than big one, neutral colors are harder spot than those that are seldom used, and so on. And remember, there's no right or wrong! Consult with the UX team if you're stuck or need inspiration.
Avoid chaotic UIs by de-emphasizing unimportant elements. The image above shows language configuration inside an application which the user can reach by clicking on a side menu. In our opinion, both "Language" and "Name" is far too easy to notice compared to what actually matters: the list of languages and the "Add"-button.
#3: Using labels is last resort
When showing data to the user (especially from a database), it's easy to fall into the trap of displaying it using a label. We call this "value format", since the information is written out as it exists in the database, with perhaps some minor alterations. The downside with this format is that it makes it hard to present the information with a good visual hierarchy. Every piece of data is usually given equal emphasis. Of course, the "value format" is sometimes necessary, but often, it's applied out of old habit. In some cases, you can tell what a piece of data is just by looking at it. For example, anton.hallin@novacura.se is an email address, (+46)723-966625 is a phone number and $39.99 is a... what?
You can often avoid labels by adding clarifying text to the value. For example, if you need to display information about when a workflow was published and by whom, instead of writing the information out like "Published by : Anton Hallin" and "Published date : 14 feb 2020", consider something like "Published by Anton Hallin on February 14, 2020." This is more "conversational format" compared to using labels.โ Keep these different formats in mind when creating UIs that display information.
In the case of Novacura's products, labels are often necessary (unfortunately). They're useful when you're displaying multiple pieces of similar data items that need to be scannable, like on a dashboard. If you do need to use labels, make sure to treat the labels as supporting content. The data itself is what matters; the label is just there for clarity. De-emphasize the label by lowering their contrast and/or making them smaller (or apply other changes as described in guideline #1 on this page). If you're designing an interface where you know the user will be looking for the labels instead of the actual data, then it might (just m) make sense to emphasize the labels instead.
Don't let labels draw attention from what matters: the content and the possible actions. Look at the image above, consider the labels (Language, Search, Jump to, Name), are they all necessary? Is it enough to de-emphasize them, as shown in guideline #2 on this page? Or should they be removed completely?
#4: Separate visual hierarchy from document hierarchy
In web development, we often use heading tags like h1, h2, or h3 when defining a title or header. By default, web browsers assign gradually smaller font sizes to heading elements, so an h1 is pretty large, and an h6 is pretty small. This type of hierarchy, which is not unique to web, can be helpful for document-style content like articles or documentation (like this page), but it can encourage some bad designs. Since weโre trained to believe that headers should be big, itโs easy to fall into the trap of making them bigger than they really need to be. A lot of the time, section titles act more like supportive content, which means they shouldnโt be stealing all the attention. Usually, the content should be the focus, not the title. That means that a lot of the time, titles should actually be pretty small.
Don't let the elements you're using influence how you choose to style them. It's easy to fall back to a "traditional" document hierarchy simply because you're adding a "header" to the UI. If you're designing for a lot of content, with a lot of text and user configurations, and where the user needs to scan the page to find what they're looking for, then perhaps a document hierarchy is preferable! If you're designing a "regular page" in you UI, make sure to question whether a document hierarchy is the best choice. In the image above, "Branding" is bigger than "Logo" and "Theme". Is there really a good reason for this? The user just clicked "Branding" to the left, isn't it more important to emphasize the sub-sections of the branding page, or the content?
#5: Balance weight and contrast
Why does bold text feel more emphasized than regular text? The reason is that bold letters, compared to regular ones, covers a larger area in the same amount of space. This relationship holds for other UI elements as well. Icons, compared to text, cover more area in a smaller space and thus feel more emphasized. An effective way to prevent icons from drawing too much attention is by lowering its contrast. Keep this trick, of balancing weight and contrast, in mind when designing your UI. To better show how to apply it, consider the thin lines we sometimes use to divide content (see image below). These lines are sometimes too subtle when using a color with low contrast, but darkening the color makes the design feel harsh and noisy. Instead of going back and forth between two lesser evils, try to make the lines a bit heavier by increasing their thickness. This will make it much easier for you to find an optimal contrast.
Don't emphasize supporting UI elements. In the image above, the horizontal dividers help the user follow a single row with their eyes. However, the lines are unnecessarily emphasized, which throws off the visual hierarchy.
Last updated