Page layout

Page layout is critical to the success of a UI and should be purposeful. This topic will discuss best practices for page layout, including headings, data density, tabs, cards and more. Watch the video to learn more. 

Logical page structure is critical to the success of a UI. Page layout should be purposeful. 

Carefully consider the logical relationships of information on the page and then structure the layout based on the importance of the information. 

Think about how a newspaper is structured. Newspapers are divided into logical sections, with content ordered by likely interest to the reader. On a newspaper's front page, you'll notice that core news is organized to the left of the screen, while opinion pieces are to the right. This organization of 'kinds of data' is consistent, allowing users to learn where to look on the screen for particular needs.

The flow of content enables a user to quickly scan navigation options; quick references to things like weather, stock prices, and sports scores and then down to the main news story. Under the main news story are links to related content. These are positioned contextually. Secondary news, opinion pieces, and hand-picked stories are last.

We should approach the organization of business application data as the editors of a newspaper approach their subject matter, putting a great deal of thought around ideal organization.

A critical goal for enterprise UX is to enable users to comprehend data so they can complete tasks accurately and quickly. The challenge around data density is to provide relevant data in a manner that allows this without slowing the user down. Displaying all possible data and leaving a contact center agent to 'figure it out' will not achieve our business goals, and, even with monitors larger than ever, there are constraints on available space. We need to make sure that we're leading users to good data that they can use.

This example shows how we might simplify data, and with some minor layout changes make the remaining data even easier to see and understand.

This example assumes that we've researched what data a user, perhaps a contact center agent, needs to understand a high-level overview of a credit card account. Deciding on the minimal data is the hard part. The rest of this exercise is simple.

Now that we've done the hard work let's add some edit options to the data the agent can edit for a customer.

We typically solve the conundrum of data density by providing high-level information or summaries, focusing on data we know will be important, such as this display of critical account data, and then also provide the ability to drill into the details if needed, such as this link to payment history.

However, like all other design decisions, data density decisions need to be very contextual. Users who see the same screens, hour after hour, day after day, build a mental map of where to find data on the screens and thus can learn to absorb more data. 

Pega's incredible capability for dynamic UI is a huge advantage here. Pega can deliver the right data at the right time, without having to show all data. That's a fantastic feature for your users, but taking advantage of dynamic UI requires researching users and their workflows, empathizing with their needs, and investing in the design solution.

Headings provide necessary signposts within our UIs and help users scan a page and understand what's needed. Headings should be concise and should be distributed logically throughout a screen, like the outline view in a Word document. In fact, this is exactly what headings provide, an outline-like structure. There should be one and only one H1 heading on each page, the title of the page, or of a modal. Main sections below the H1 should be grouped in H2 headings, then H3 headings, and so forth. 

Use of indiscriminate levels of headings is very bad practice.

Headings in Pega can double as triggers for collapsible and expandable blocks. Use a collapsible block when the data within is seldom needed. Collapsible sections, however, should never be nested.

Tabs are another method for breaking up logically grouped content on a screen. Tabs represent parallel levels of content.

Tabs should logically divide content in such a way that users can easily predict what they'll find when they select a given tab. Tabs should be ordered, left-to-right, by most important or frequently read, with the first tab being the default.

The maximum number of tabs you should use is five, although five may be too many for smaller screens.

Just make sure there is enough content to warrant a new tab. A small amount of content under a tab is awkward, and you may need to re-think how information is grouped.

Cards, sometimes called tiles, are layout boxes with borders, spacing, or other visual distinction which help the user distinguish between logically grouped data. For most content on a screen, or within a tab, the headings should provide a sufficient break between blocks of content. Therefore, cards should be used judiciously. Overuse of cards is visually distracting and takes up more vertical space than headings alone.

Even if your organization's IT group closely regulates computer equipment, your UIs will undoubtedly be seen on multiple sizes of monitors. Researching the likely range of sizes your users will be using is necessary, as is checking all of your implemented UIs to see how they respond to different screen widths and heights.

It's also a good idea to test your screens on Webex, or other collaboration and meeting tools, as your UIs may be used by your sales team or seen by stakeholders in an online meeting, and collaboration tools can sometimes force unexpected resolutions.

Check your knowledge with the following interaction.