SAS Visual Investigator Page Building Best Practices Part I: Columns, Group Boxes, and Tabs

[#1]

This post is written in collaboration with SAS R&D, drawing from the SAS R&D article VI Page Layout Guidelines by Peter Eastwood, Distinguished User Experience Designer.

One of the most powerful features of SAS Visual Investigator is Page Builder—a no-code graphical interface that allows administrators to build stylish and functional User Interface pages through drag-and-drop. The administrators can decide on the data elements, as well as how that data is structurally presented to the end users. To best leverage the vast capabilities of Page Builder, we are creating a multi-part series on page building best practices.

This post is Part I of this series and it centers around layout elements—columns, group boxes, and tabs—and how best to use these elements to build a page that is intuitive, consistent, and user friendly.

Overview

Page Builder is a graphical interface that’s integrated into SAS Visual Investigator, allowing administrators of SAS Visual Investigator to create page templates using the application’s default elements. A typical page template includes elements like controls, charts, and layouts.

From the Manage Investigate and Search interface, also known as the SAS Visual Investigator Administrator UI, Page Builder can be accessed through either the Data Objects tab or the Pages tab. Within a new page template, a list of out-of-the-box controls can be found under the Controls tab. The administrator can build a new page template by dragging and dropping the desired controls onto the canvas. These controls are typically linked to a data source. Once created, the page templates are rendered as user-facing pages, where the content of the pages are determined by the template’s elements and populated from the data source.

This post focuses on best practices with using layouts, which is a set of controls used to organize the layout of a page.

Select any image to see a larger version.
Mobile users: To view the images, select the "Full" version at the bottom of the page.

Group Boxes

A group box is a way to group controls and data elements together based on some commonality. They can be given a title to provide more context and reasoning behind the grouping. For example, data elements such as Claim ID, Claim Type, and Claim Status can be organized into one group box titled “Claim Information”.

Recommendation 1: Instead of populating a page with loose controls, use group boxes to organize them. This organization helps to create a clear, logical structure, making the UI more intuitive to navigate.

Recommendation 2: Deconstruct long group boxes into several smaller ones. This reduces empty space on the page. This also makes the content more digestible by allowing users to focus on smaller sections rather than being overwhelmed by one lengthy block of information.

Recommendation 3: Avoid placing multiple columns within a single group box. Not only does this contribute to a cluttered layout, but it can also result in overlapping elements and misalignment when the UI is viewed on different screen sizes.

Recommendation 4: Avoid wide group boxes with narrow lists of attributes. Instead, make group boxes as narrow as possible to fit the content of the box. This makes the page more compact and efficient.

If there are only two or three columns, blank columns can be included to ensure that the existing columns are not too wide. To do this, click on New column in the Columns pane located on the right of the canvas. The arrow buttons can be used to move the new blank columns to the right.

Recommendation 5: Align the bottom borders of group boxes for a cleaner layout.

By default, the height of a group box is automatically determined by its content unless a height has been specified under the Height section of the Columns pane. To ensure that the bottom borders of the group boxes are aligned, check the Fill available space radio button or specify a value under Fix height to.

Tabs

Tabs are another way to organize page elements. In SAS Visual Investigator, there are two types of tabs: top-level tabs and tab controls. Tab controls can be found under Controls > Layout > Tabs, whereas top-level tabs are configured under Page properties.

Recommendation 6: Use top-level tabs for high-level categorization of the page instead of tab controls. Reserve tab controls for low-level categorization within individual sections.

Recommendation 7: In general, avoid nested tabs. If nested tabs are unavoidable, use Lightweight tab style for the inner tabs.

To set the inner tabs to light weight, check the Lightweight tab style checkbox within the Tabs pane.

Next

I hope this post has been helpful to you in your journey of building an efficient, intuitive, and user-friendly page. Stay tuned for the next post in this series where I will dive deeper into SAS Visual Investigator page building best practices.

Learn More

Streamlining Reporting with Print Templates in SAS Visual Investigator

Find more articles from SAS Global Enablement and Learning here.