Chapter 3

Hierarchy of Information

3.01-01 Principle

Done well this makes the content easy to read. It creates a path for the viewer’s eye to follow through the page/screen

3.01-02 Tell a story

Use a landing page to provide key summary information. This is useful as it orients new users around the model's contents, provides a summary as well as navigation to more detailed pages

3.01-03 Summaries first

Place summary information first within a category, with detailed data pages afterwards. Add instructions that guide and explain what users are to do

3.01-04 Order of importance

Consider what’s most important, and place that at the top of the page, e.g. KPIs

Smart Grouping

3.02-01 Gestalt Principle

The mind tends to group items together to simplify input. Grouping your pages together visually helps the user to make sense of what they’re seeing, and find what they’re looking for quicker

 

Best Practice article
Top 5 Design Best Practices for UX—Desktop and Mobile

3.02-02 Contents page

Split content up using categories in a way that makes sense to your users e.g. functional areas. Consider the story, and group and order you pages accordingly

3.02-03 Group like content

Group related and/or connected data together

Reduce Visual Load

3.03-01 Hick’s Principle

Fewer items on a page enable faster decision making

 

Best Practice article
Top 5 Design Best Practices for UX—Desktop and Mobile

3.03-02 Summarize data

When working on your landing pages, try to minimize or summarize the data on these pages and provide links through to more detailed pages via the contents

 

Related to Rule:
3.01-03 Summaries first

 

3.03-03 Keep it clean

Limit the use of color in charts and graphs, and keep the page as clean as possible

3.03-04 Split it up

Consider using multiple pages instead of putting all elements on one

Progressive Disclosure

3.04-01 Principle

Present data in digestible chunks. start simple and expose complexity when needed and not before

 

Best Practice article:
Top 5 Design Best Practices for UX—Desktop and Mobile

3.04-02 Summary

Rather than put everything on a page, provide key information and link to another page to provide users with more detail

 

Related to Rule:
3.03-02 Summarize data

 

3.04-03 Detailed Analysis

On detailed pages users can do more granular tasks, such as perform detailed analysis, and manipulate and edit the data. Ideally, the driving grid of the page should represent a more detailed view of the previous page

3.04-04 Use Contents

Use the contents panel to place links that are useful to navigate to and from the current page but aren’t necessary to see on the same page

Use Consistency and Standards

3.05-01 Consistency is key

Users should not have to wonder whether different words, situations, or actions mean the same thing. Use consistent forms (e.g. images, naming, words) and colors to communicate

3.05-02 Naming convention

Name the same elements across different pages with the same name, keep links to pages and target page names consistent, so that users aren't confused when moving between pages

3.05-03 Placement

Use consistent placement of those elements, by placing the same information in the same spot across pages

3.05-04 Colors

Use consistent colors for the same metrics shown in different places

Provide Help and Guidance

3.06-01 Guidance

Provide users with easy access to help on how to use the model

3.06-02 Instructions

Use text and instructions where possible, although keep it simple and don't overwhelm the user with verbose language

3.06-03 Tool Tips

Use customizable tooltips to help describe the visualizations and give a user better information about what they’re seeing

Use The Correct Data Type

3.07-01 Grids of data

Grids are best for presenting data when it's useful to see large sets of specific values and understand their meaning e.g. sales figures against products and time. Grids shouldn't be used for visualising high-level trends or comparisons between sets of data

3.07-02 Line Charts

Line charts are best for seeing trends over a continuous timeframe e.g. revenue by month. They're especially useful for comparing multiple categories of data e.g. revenue of different products by month. Use contrasting colours so that users can easily differentiate series. Display a legend to make it clear what each series means

 

Best Practices article:
Line Charts

3.07-03 Column Charts

Column charts are great for comparing values across different line or list items e.g. FY actuals vs forecast. Column charts are also useful for comparing items over time e.g. revenue by month

 

Best Practices article:
Column Charts

3.07-04 Bar Charts

Bar charts are great for comparing values across different line or list items e.g. FY actuals vs forecast. They shouldn't be used for comparing values over time.  Bar charts are sometimes preferable over column charts if data labels are too long to fit on the X-axis

 

Best Practices article:
Bar Charts

3.07-05 Stacked Column/Bar Charts

Stacked Column Charts are best used to display part-to-whole relationships with multiple series e.g. revenue split into margin and expenses by time.  Use contrasting colors so that users can easily differentiate stacked data

 

Related to Rule:
3.07-03 Column Charts

 

Best Practices article:
Column Charts

3.07-06 Pie Charts

Pie charts are best to use when you are trying to compare parts of a whole. They do not show changes over time

 

Best Practices article:
Pie Charts

3.07-07 Funnel Charts

Funnel charts are often used to represent stages in a sales process and show the amount of potential revenue for each stage. This type of chart can also be useful in identifying potential problem areas in an organization's sales processes. A funnel chart is similar to a stacked percent bar chart

 

Best Practice article:
Funnel Charts

3.07-08 Timeline charts

A timeline chart is an effective way to visualize a process using chronological order. Since details are displayed graphically, important points in time can be easily seen and understood.  They are often used for managing a project’s schedule, timeline charts function as a sort of calendar of events within a specific period of time

 

Best Practice article:
Timeline Charts

3.07-09 Waterfall Charts

A waterfall chart can be used for analytical purposes, especially for understanding or explaining the gradual transition in the value of an entity which is subjected to an increase or decrease in value. Often, a waterfall chart is used to show changes in revenue or profit between two time periods

 

Best Practice article:
Waterfall Charts

3.07-10 Combination Charts

Combination charts are useful where you want to validate the relationship between two variables that have different magnitudes and scales of measurement but are related in a meaningful way

 

Best Practices article:
Combination Charts

Give Users Visibility Into Status

3.08-01 Provide Feedback

Ideally, the pages should always keep users informed about what is going on, through appropriate feedback within reasonable time. Being informed about the current status helps users decide what to do next in order to accomplish their goals, and figure out if their actions were effective or if they made a mistake

Match With Real World Scenarios

3.09-01 Use familiar language

Speak the users' language, with words, phrases and concepts familiar to the user

3.09-02 Consider the Business Process

It may be helpful to map out the process. Then in Anaplan, follow the real-world conventions and follow the real-world process when deciding which information to place where, so that it appears in a natural and logical order

Check In With End Uses Frequently

3.10-04 User Feedback

Interview users for the initial check in, talk them through your ideas and pages during your building process. Afterwards, you can interview them, or have them use the system and watch them as they do. See where they get stuck or are having troubles and make adjustments to suit their needs

3.10-01 During the design

Put users at the heart of the design.  Check in with them during the design to learn what their needs are and help define what and how you build your instance

3.10-02 During the build

Check in with them during your building process to ensure you are on the right track

3.10-03 After Go-live

Check in after Go-Live to make sure everything is working well for them