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.

⚠️ Warning

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?

✅Do?

Establish visual hierarchies guide people toward content or actions of importance. This is difficult (we know), but we encourage you to experiment! To fix the issue shown in the previous screenshot, we suggest the following changes: (1) change of button color, (2) switch button placement, (3) and change the text to "Save" in bold. Do you agree with that the button is now easier to spot at a quick glance? Again, there is not right or wrong, but hopefully the increased contrast helps people see the button (before it's too late).

#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.

⚠️ Warning

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.

✅ Do?

To achieve a visual hierarchy that helps the user achieve their goal, de-emphazing content is just as effective as emphasizing. In this case, focus was moved to the list of languages, as well as to the the button group to the right, by decreasing the opacity of the main header, "Languages", and the column header, "Name".

#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, [e-mail] is an email address, ([phone] 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

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?

✅ Do

Prioritize the main content of the UI, not the labels. In this case, the column header, "Name" was removed, along with "Search" and "Jump to". The page header, "Language", remained largely in focus (although with lowered opacity), to assure the user they've reached the page they clicked on. You're probably thinking "but the Studio's other pages uses the same type of tables to present information, this is the way we have to do it!". And you're probably right, but to improve our current UI, we need to challenge the way we've done things in the past. Tables do not always provide enough creative freedom for visual hierarchy centered around the user's goal.

#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.

⚠️ Warning

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?

✅ Do

Design the UI according to its use case. If there is no good reason to show the header in BIG LETTER COVERING THE WHOLE SCREEN, then don't! There is no reason to follow a document hierarchy if it doesn't help the user achieve their goals.

#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

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.

✅ Do

Balance the visual hierarchy by using a mix of weight and color. The lines are now slightly thicker but with lower contrast. This allows the lines to fulfil their purpose of supporting the main content without disrupting the hierarchy.