Page structure

  • 1 Research
  • 2 In Progress
  • 3 Feedback
  • 4 Done

This page contains recommendations on the layout and structure of pages within apps.

Deliver value on the homepage

First impressions count! When talking about Time to Value, the homepage is essential in delivering value to users.

Here are some suggestions on making great homepages:

  • Show the key results of the app at-a-glance (for example, a map, chart, or KPI). This information can be high-level with links to more details on other pages.
  • Show actions required from the user. For example, on the S&OP app users are asked to fill in their forecast data before a certain date. On the homepage of this app users see the current status of the process and if and when action is required from them.
  • Tailor different homepages to different user groups. When an app has multiple users or user groups, it can be valuable to create different versions of the homepage tailored to their needs. For example, a Sales Director sees a homepage focused on sales data and a CFO sees a homepage with an emphasis on financial information.

A picture is worth a thousand words: visual impact is important

Visual impact helps in creating a positive user experience. Maps are a great example: whenever location is core to an app, maps can be a powerful visual means to improve user experience. Infographics or charts related to the app can also serve this purpose.

Page flow

User flows often follow a similar pattern: data goes in, is processed, and produces results.

Layout can reflect this pattern: widgets about input on top, processing in the middle, output at the bottom.

Visual hierarchy

Users, whose language uses the Latin alphabet, read from left to right and top to bottom. This pattern goes for scanning layouts as well. In general, users scan a page from top left to bottom right.

Let’s say you have a table with numbers, a button and a chart visualizing the table. The most logical layout would be chart top left, table top right, button underneath the table.

Source: Abyssale