Chapter 3: How to create simple information hierarchy

Organising your content is the backbone of your end-user experience.

Creating a Board is nothing more than laying out information on a page, and for all experiences, keeping it as simple as reading a word document is always the safe way to go. Follow this set of best practices to ensure that your content is always as easy to read as possible.

1. Keep a natural reading axis

In western society, we’re all used reading documents from left to right and then top to bottom. Designing an interface isn’t any different. Intuitively, people are expecting to read any type of content just like they read a book.

Don’t: Create unusual reading order

Creating an unexpected information organization will instantly confuse readers and provoke frustration.

Do: Simply go left to right & top to bottom

Create sections, add titles, and organize content in a simple way. If less content is shown on the screen, it’s fine, readers will scroll.

2. Organize your content with clear sections

To organize content on a Board, start by writing it on a Word document with clear headings. Next, transfer it on a Board and group objects in defined sections.

Use text widgets to write titles and subtitles. This will create a hierarchy and help your users easily identify the information they’re looking for as well as better navigate your content.

If a specific section requires an action, or could lead to another Board, align your button on the right side of the title area in order to re-create familiar user interface patterns.

Don’t: When not grouped, people don’t know what to look at.

If there are too many ways to visualize your group, or too many groups, users will get confused.

When the sections are easy to identify, the whole page will feel much easier to use.

3. Don’t overwhelm reader with content

Even though people will want to see lots of information at once, there’s only so much someone can focus on.

Reduce the amount of elements within a section to contain the most important ones. Next, break them down into smaller, digestible sections that follow the principle mentioned above to simplify your end-user experience.

Don’t: Put all content on the same section

Do: Break down content in smaller sections to not overwhelm readers

4. Keep everything aligned

The human brain is very sensitive to objects being well aligned. As soon as something doesn’t look symmetrical, it creates “visual noise” which is a new information the brain has to understand. This creates a feeling of complexity. The easiest way to design is to stick to a grid and simply align widgets that are one next to the other.

Don’t: Leave random white spaces or misalign widgets

Do: Align everything symmetrically

This will help the user to scan the page and to navigate it to find the relevant information.

5. Be mindful of screen resolution

While you may use multiple displays and large screens, when designing your boards, you don’t have control over your end users setup. Pigment will always automatically resize your Boards so all of the content can fit on the viewer screen. Therefore, text widgets, charts, grids may fit on your Boards but not in your users’ Boards.

It is important to be mindful of how your end user will visit Pigment and to regularly test your Boards on small screen sizes.

Next up

Learn how to use colors