© 2013 - 2020, Geopay.me Inc

Fundamentals of Hierarchy in Interface Design

• fundamentals, Hierarchy
fundamentals-of-hierarchy-in-interface-design

Concept, resources and its importance in design

Visual hierarchy is the order in which the user process information by importance. In interface design, like in any other form of design, this concept is necessary to be functional at sight. With the correct use of hierarchy, the mind can group and prioritize elements to give them a specific order, which facilitates the understanding of what you want to communicate and the sense of achievement by the user.

A regular problem in interface design is the excessive use of elements or components scattered on the screen, which if not placed through a correct hierarchy, generate disorder and greater effort in navigation. The exercise of prioritizing these elements is important to avoid this problem.

In this example, size, shape, and color resources are used to orient the view to a specific element.

The average user tends to “scan” the entire content of a screen. Therefore, the highlights should give a clear idea of what the website or application is about.

This prioritization should not only be treated as an aesthetic problem, but also as an important part of the user experience. Many of the elements included, especially in mobile devices, will be relevant to site navigation. While the hierarchy in graphic design has existed for years, the constant interaction factor is added to the UI design. The fact that users interact with the elements makes it more relevant to design an intuitive interface.

There are seven resources that must be taken into account to create a correct hierarchy:

The larger the element, the more it will attract attention. It is a fact that people first see larger objects, and this includes text and images. The idea behind the use of size hierarchy is to give a focal point to start the visual journey.

In this snapshot of the Google Arts & Culture application, the title “Pawtraits: Our Changing Relationship …” is much larger in size than the subtitle “How do we really feel …”. By separating these scores considerably, the reading order avoids any confusion.

If the jump from one text to another is smaller, say from 32pt to 24pt, it can make the reading order more difficult when sending two messages at the same time. This may not be a big problem, but you should keep in mind that this could create a less efficient hierarchy.

It is equally unnecessary that the important elements were too large. Creating an unnecessary imbalance can end up overshadowing the rest of the design and cause other information to get lost in the reading. Like everything else in design, balance is the key.

Bright colors stand out more than muted tones. Color is a powerful visual resource, its proper use can effectively separate the elements in a screen to prioritize or depriorize them. In interface design, often the strongest color is for interaction, because of the user’s need to take action or receive feedback from the system.

In this Cabify app screenshot, the use of purple color acts as the primary color. Both, the route of the trip and the “Continue” button are first hierarchy, followed by the map and the car in second hierarchy. The harmonic use of hue and saturation separates these elements from a more unsaturated and less important background.

There are three ways to create hierarchy using color:

Hue: Some colors stand out over others. The color tone can create several types of conflict for human eyesight, red versus green, blue versus yellow or turquoise versus brown.

Saturation: Saturated colors stand out more than gray colors. Grays and their scales always tend to be relegated by colors of great saturation, which even give the user more sense of closeness. The use of red on a gray background is an example.

Brightness: Bright colors stand out over dark ones and vice versa. Playing with bright elements on dark backgrounds creates an immediate hierarchy, this also applies when we have a white background and some dark elements.

It is important to know that the abuse of color can end up confusing the user, since it creates the illusion that everything is important in the composition. The idea of ​​hierarchy, on the other hand, starts from the idea of ​​orienting oneself on what is most relevant as opposed to what is not.

Elements close to each other attract more attention than distant elements. Making groups using distance is a very viable resource when creating a reading order. Human sight tends to categorize elements, therefore, making this aggrupations basically facilitates the mental work of the user.

On the Netflix homepage, the first group contains the title and synopsis of the film; and the second group contain a list of six films at the bottom. The distance between these groups makes it easier for the view to pass from one group to another without visual noise. Likewise, each element in their respective group has its own paddings and margins.

Proximity is therefore the grouping of objects in a design to create connections and associations. When things are closer, it usually means they must be related. If things are further away, it should mean that they may not be related. In short, proximity creates these relationships and brings organization and hierarchy to information.

Any element that separates from the alignment of the others will attract attention. This is because alignment creates order between the elements, any change in this rule will be interesting to human sight and will therefore stand out considerably.

On the page of an Airbnb accommodation, the title, location and name host belong to one alignment, while the description of the apartment, accompanied by iconography, belong to another. This rupture of an invisible straight line creates hierarchy on two levels.

Alignment of elements is very important to create visual coherence in the design of an interface, as it allows to assign relevance to the elements on the screen and also establish the beginning and end of specific elements, either interactive or informative.

The human brain loves patterns, that’s why many of the best websites are symmetrical. This gives us the opportunity to break this rule to strategically call the user’s attention to a specific point. A user will be able to associate these elements according to their alignment or misalignment.

Repeated styles give the impression that the elements are related. This type of hierarchy consists of reusing the same or similar elements in an interface. Repetition also gives some preponderance based on visual patterns. If something is repeated, it is because is important.

In the white menu of the Uber website, an icon and a label are placed 8 times for their categories. This, balanced with a smaller size, places the menu second in the hierarchy, after the main title “Get in the driver’s seat …”. It is important to know that repetitions are very good for creating second or third level relevancies.

In interface design, repetition creates a sense of unity and consistency throughout the experience. For example, in this Medium article, the subtitles (h2) are marked with a repeated style, the use of bold and a larger font size give the user a sense of orientation and hierarchy based on repetition. We must know that human nature finds comfort in familiarity.

The more space around the element, the more attention it generates. The negative space is the area where the empty canvas is shown, this can be found not only around, but between and inside the same element. It is not proper to a single color, but adopts the color of the background to give the illusion of space.

In this example of the web Design Better, both the number “01” and the title “Motion’s purpose” are remarkably surrounded by negative space. Although the illustration has a greater hierarchical weight due to its variety of textures, the well applied negative space can make a balance that prevents the other elements from being relegated.

While some designers may think more is better, the visual perception is very different. Designs with a large load of closed elements cause the interface to be saturated and without a hierarchy indicating which element is more important, causing confusion and a sense of overwhelm on the part of the user.

The idea is that the more important the element, the more negative space there is around it. Isolating one element from the others is not only an elegant resource to create hierarchy, but also serves to give the design a support structure. That is to say, it creates the necessary spaces so that the view can pass from one element to another in a fluid way and without visual noise.

Varied and complex textures attract more attention than flat ones. The flat surface of a wall will stand out less than the surface of a pavement. This is because complexity will always attract more user attention than minimalism. The use of textures also incorporates other important design elements such as style and atmosphere.

Photographs in UI design could be the best example of hierarchy by texture that exists. Their shapes, colors and gradient will always convey more sensations than flat elements. In the case of the Masterclass application, the photographs of the instructors are, without a doubt, first hierarchy, followed by their names in white, and the red color in the menu that indicates the location of the user.

This resource should be used in a dosed manner, as the abuse of textures will end up distracting rather than informing or perhaps leading to unnecessary squeumorphism. Textures tend to overlap other hierarchical resources, including size, so you must take into account the entire composition and everything the user will see on the screen of their device before incorporating texturized elements. Again, balance is the key.

JavaScript Fundamentals: Variables

• fundamentals, Javascript
javascript-fundamentals:-variables

Posted on December 27, 2018

Storing values that you can later reference is one of programmings most basic and fundamental concepts.

In JavaScript these named containers are called variables. Variables can be declared by using three different reserved keywords: var, letor const.

Each way differs in how you can interact with the variable later on but all are refereed to as “untyped”. This means they do not have any type attached, allowing for any type to be assigned.

The example below shows you how to declare a variable and then define the variable by giving it a value.

Note: A variable must always be declared before you can use it. 

var exampleVariable; //declaration
exampleVariable = 'test value'; //definition
var exampleVariable = 'test value'; //shortened variation

Multiple variables can be declared in one statement:

//Creates three variables in one statement
var variableOne = 'First',
 variableTwo = 'Second',
 variableThree = 'Third';

Variables can also be re-declared many times over by overriding them:

var example = 'test value';
// example holds the value - 'test value'
example = 'new value';
//example now holds the value - 'new value'

let (es2015)

let variableName = 'variable value';

Introduced in ES2015, let encourages the philosophy that variables should only exist where they are needed.

Just like var, let variables can be reassigned at any point in the program but three main differences exist:

  1. At the top level, let , unlike var , does not create a property on the global object.
  2. let variables are not initialised until their definition is evaluated. Therefore, unlike var, let variables aren’t “hoisted” to the top of the block. Trying to access them will result in a RefrenceError.
  3. Variables declared using the var keyword are scoped to the immediate function body, while let variables are scoped to the immediate enclosing block denoted by { }.

const (ES6)

const variableName = 'variable value';

Introduced in ES6, const also allows you to define a new variable.

Just like let, const has block scope but one fundamental difference exists.

Once a const variable is initialised, its value can not be changed unless it’s part of an object that provides methods that mutate its content. For example, an array:

const arr = ['Bob','John','William'];
// console logging arr[1] returns 'Bob'
// The method below reassigns 'Bob' to 'Mike'
arr[1] = 'Mike';
// Console logging arr[1] returns 'Mike'

Intercom?s fundamentals of good interaction design

• fundamentals, Intercom
intercom?s-fundamentals-of-good-interaction-design

The design community is no longer talking about having to prove the value of design to get a seat at the table. Designers have demonstrated that design can be a central pillar of business success. But they’ve also lost something along the way.

Designers have stepped off their island where slick, yet ineffective and impractical design is made. They’ve embraced cross-functional relationships and work closely with partners all across the organization. More than ever, they understand who their customers are and what they care about. They design systems, not destinations. And instead of primarily thinking about interfaces, they think about the product strategy. They design for business outcomes.

But when you’re deep in all of these additional layers of building products, it’s easy to forget about the importance of also nailing the thing designers are experts at – interaction design.

When we recognized this issue in our own design team, we established the fundamentals of good interaction design. They are a reminder about the things that are deeply important to us, yet sometimes forgotten.

It’s by no means an exhaustive list and since they incorporate our product design principles, they are not universal to every company. They are fundamentals that we at Intercom care about. But hopefully they can serve as a reminder for you as well and maybe even get you thinking about what are the fundamentals of interaction design that are important for you.

1. Present the same object in a familiar way everywhere

Intercom, with it’s vast breadth and depth, can feel overwhelming. We can make it easier for our customers by making the core objects in the system (e.g. conversations, users, messages, etc.) easily recognizable and make them behave the same way everywhere. Recognising is easier than recalling.




✅ Do


Default to showing an object the same way everywhere. When you do have a strong rationale to deviate, make it feel familiar and consider if the object needs to be displayed differently elsewhere in the product.

❌ Don’t


Don’t make local optimizations that are not reflected or are inconsistent with other contexts. Don’t create multiple similar yet different variations of the same object.

Ask

  • How is this object shown elsewhere in the product?
  • Can we reuse the same component here?
  • If not, how can we make it feel familiar?
  • Do we need to update its elsewhere in the product?

2. Establish hierarchy in your interface

By establishing a clear visual hierarchy we can help our customers understand how the product works, what are the relationships between different parts of it, what’s important and what isn’t.




✅ Do


Use space, typography, grouping, and indentation to clearly communicate the hierarchy and relationships between different parts of the interface.

❌ Don’t


Don’t blur the lines between different hierarchy levels by not having distinguishable groups. Don’t create too many boxes within boxes.

Ask

  • Is content laid out in clear, distinguishable groups?
  • Is there enough space between these groups?
  • Is related information grouped together?
  • Are the correct text styles used to establish information hierarchy?

3. Create visual rhythm and balance

Make your interface easily scannable in order to help our customers understand it quickly. By making it aesthetically pleasing, you can increase their perception of how usable it is.




✅ Do


Anchor the most important part of your interface, use varying styles and layouts to balance your design and make it easier to scan. Use a grid system and pay close attention to alignment.

❌ Don’t


Don’t just lay everything out in a flat list. Don’t use long line-lengths.

Ask

  • Is it easy to scan the design and know what the most important part of it is?
  • Does it feel visually balanced?
  • Is the interface aligned to a grid system?

4. Use commonly accepted patterns and interactions

We can help our customers learn and use Intercom more efficiently by limiting the amount of interaction patterns that they need to learn.




✅ Do


Use existing patterns from our design system. Favor common interaction design patterns over clever bespoke optimizations. Follow industry standard interaction design principles.

❌ Don’t


Don’t introduce similar, yet different variations of our existing design system patterns. Don’t create custom patterns when there’s an established industry standard. Don’t misuse an existing pattern.

Ask

  • Can an existing design system pattern be used here?
  • If not, how does the industry standard pattern for this look like?
  • If you think you need a new pattern, have you talked to the design systems team and other designers? Can this pattern be fed back into the design system for other designers to use?
  • Are there clear affordances that the pattern can be interacted with?
  • Is there clear feedback when users interact with it?

5. Use progressive disclosure

By using progressive disclosure we can make Intercom simple for the majority of our customers while also enabling more flexibility for our more advanced customers.




✅ Do


Start with simple defaults and gradually reveal flexibility. Optimize for the most common use-case.

❌ Don’t


Don’t overwhelm by showing full flexibility right away. Don’t compromise the most common use-case for edge cases.

Ask

  • What is the most common use-case?
  • What should the defaults be so most people don’t have to change them?
  • How can we reveal information progressively?
  • Are we compromising the most common use-case for an edge case?

6. Be clear and concise

Language is the key to helping our customers understand how Intercom works. However, too much content can have the opposite effect where they just scan the page without reading it and therefore are not successful at what they aim to do.

✅ Do


Be clear and concise and when necessary progressively reveal additional information by using tooltips and links to help docs for learning more. Use illustrations to explain ideas. Edit ruthlessly.

❌ Don’t


Avoid using long, detailed content to explain how something works, instead consider what’s making it complicated and fix the underlying problem. Avoid falling in the trap of being technically correct, but difficult to understand.

Ask

  • Is it easy to scan and understand what it is without having to read all of the content from beginning to end?
  • What if you had to cut half of the content? Can you do it without losing meaning?
  • Is the value proposition clear?
  • Is it clear what the user needs to do?
  • Will this be clear to someone who has no previous knowledge?
  • What can we illustrate visually instead of explaining with content?

7. Consider responsiveness and speed

Performance is a feature that needs to be carefully considered. When ignored or mismanaged it creates a janky user experience and uncertainty.

✅ Do


Give users instant feedback when they interact with the product and set expectations on wait times.

❌ Don’t


Don’t forget about the loading states.

Ask

  • What happens right after interacting with the interface?
  • Is it clear that the action was received and is currently processing?
  • Is it clear when the processing will be complete?

8. Guide users to what they should do next

We usually start by designing for the happy path, but that’s not how most customers will first experience it. Without clear guidance they might not reach the happy path at all.




✅ Do


Make it clear what users should do next and make it easy to do. Specifically, consider empty states, error messages, and end-states.

❌ Don’t


Don’t create dead-ends where users have to figure out what to do next themselves.

Ask

  • What happens if you have no data to show?
  • What happens when there’s an error?
  • Is it clear what the user should do next?

9. Be mindful of accessibility

Although we haven’t yet established standards for accessibility there are things you can do to make your design more accessible.




✅ Do


Use existing design system components since they are made to be accessible. Use text styles and sizes that are easily legible. Add enough color contrast. Don’t use color alone to convey meaning.

❌ Don’t


Don’t introduce new colors or text styles without talking to the design systems team. Avoid introducing custom components because they might not be accessible.

Ask

  • Is there an existing design system component, color, or text style that you can use?
  • Is text legible enough?
  • Is there enough contrast?
  • Is there more than just color used to convey meaning?

Focus on our core craft

While the product design discipline has matured a lot over the years, it’s important that we don’t forget or de-prioritize our core craft. Increased focus on customer and business needs shouldn’t be an excuse for bad interaction design. Design fundamentals like these help set a baseline for interaction design quality, help avoid egregious errors, and ultimately act as a foundation on which to build excellent customer-focused software.

This was originally written as an internal document for our design team. If you’re interested in more content like this, check out intercom.design for more content and our open roles.


Careers at Intercom – 2019 updated images


Intercom on Sales book ad