- During our large-scale SaaS UX testing, plan matrices contained on average 40 distinct features
- Identifying specific features and comparing plans is needlessly difficult in a lengthy, disorganized plan matrix
- Matrices can be made easier to scan with 5 key implementations
During large-scale testing of SaaS sites, the plan matrix was a primary destination for users considering a digital services subscription or SaaS.
Indeed, many users spent most of their time on the site considering the plan matrix — and ultimately decided on whether or not to subscribe to a service from the details provided in the matrix.
Yet the layout and design of the plan matrix on a SaaS site greatly impacts users’ ability to identify the most suitable plan for their specific business needs and, therefore, their purchase decision.
Plan matrices can be text-heavy and information-dense tables that, during our SaaS usability research study, contained on average 40 distinct features.
As such, locating specific features within a lengthy and unorganized plan matrix can be an overwhelming task, forcing users to expend undue time and energy carefully scanning through the plan matrix to pinpoint the exact information they need.
What’s more, users are at risk of mistakenly overlooking important features, which can lead to unanswered questions — and eventual plan or site abandonment.
In this article we’ll discuss the test findings from our large-scale SaaS usability research study including:
- Plan matrices on SaaS sites can be needlessly difficult to navigate
- 5 ways to maximize the scannability of the plan matrix
Plan Matrices on SaaS Sites Can Be Needlessly Difficult to Navigate
When users are presented with a long, unorganized list of features in the plan matrix, getting an overview of each plan’s offerings becomes very difficult, as does locating specific features within the matrix.
During testing, plan matrices presented as one long, unorganized list sorted by plan availability were observed to be overwhelming, and far more difficult for users to scan.
In practice, this disorganized presentation of plan information causes users to spend an undue amount of time locating their desired features — rather than interpreting those features and using them to further their plan comparison.
For example, on test sites that only ordered features by plan availability, users were observed to scroll up and down the plan matrix page to locate the precise features they were interested in, and a few users even resorted to using the browser’s “Search on Page” function to locate specific features.
As one user (a senior email coordinator for a large corporation) remarked while reviewing the long, unorganized list of features on a plan matrix page, “I think this list is sort of all over the place, in terms of how it’s organized”.
Furthermore, when plan matrix features are presented in one long, unorganized list ordered by plan availability, it increases users’ efforts to infer the meaning of individual features that are unfamiliar to them, because they cannot draw on related features and a general subheading for additional context.
For example, during testing multiple users struggled to understand an unfamiliar feature in a plan matrix due to lack of context. Consequently, they had to leave the plan matrix to search for information to reach a basic understanding of the feature to continue comparing plans.
Given the risk of users overlooking features critical to their core business needs, which can lead to unanswered questions — and plan or site abandonment — it’s essential to maximize the scannability of the plan matrix.
5 Ways to Maximize the Scannability of the Plan Matrix
Testing revealed 5 ways to ensure plan matrices are easy to scan:
- Group related features under clearly labeled subheadings
- Order groups of features by importance
- Persist plan headings and feature subheadings during scrolling
- Scale the matrix for optimal display
- Use horizontal styling to define rows
1) Group Related Features under Clearly Labeled Subheadings
To aid scannability, and to help users infer the meaning of individual features, plan matrices should group related features into subsections (either collapsed or expanded by default), each with its own subheading. Features within each subsection can then be sorted by plan availability.
The groupings and subheadings allow for much faster scanning but also have the added benefits of making the overall plan matrix less intimidating by breaking up the long list of features and ensuring related features are always presented together.
2) Order Groups of Features by Importance
Ordering the groups of related features by importance will be highly valuable to users as they begin to review the complete list of plan matrix features.
During testing, the vast majority of sites ordered sections by importance — presenting the most sought-after or “core” features in the first section — and were observed to outperform the handful of sites that didn’t lead with “core” features first in the plan matrix.
Therefore, the first group of features should be those that the majority of users are most likely to be seeking.
3) Persist Plan Headings and Feature Subheadings during Scrolling
Any long-scrolling plan matrix page will make maintaining visibility to plan headings — mainly the plan names and prices — impossible if the headings aren’t always visible.
Losing visibility to the plan names and prices places an unnecessary cognitive burden on users to remember these details as they review the list of features and attempt to compare plans.
At the same time, this lack of visibility of plan names and prices increases the overall scrolling efforts for users who don’t remember these plan details, as they are required to return to the top of the plan matrix each time they identify a significant difference among the plans.
Testing showed that “sticky plan headings” that attach the plan names and prices to the top of the grid as the plan matrix page is scrolled resolves this issue entirely. Having sticky plan headings provides much-needed access to plan details that are essential to the comparison process.
Likewise, on sites that group the full list of plan matrix features into sections, it’s logical to, for sections that contain many features, temporarily anchor the current section’s subheading to the top — in addition to the plan names and prices — as users scroll.
This ensures visibility to the current section’s subheading if the list of features contained within any of the sections is longer than a single viewport. Otherwise, users can easily become disoriented and lose the context necessary to understand all of the individual features.
4) Scale the Matrix for Optimal Display
Plan matrices that don’t scale appropriately for larger screens make it difficult for a subgroup of users to visually trace the feature label to its associated plan values.
In practice, the increased distance between these related elements and reduced text size can result in errors when users are unable to easily track horizontally across the row.
During testing, a few of the test sites did not scale appropriately to accommodate users with larger screens. Consequently, targeting desired features and comparing plans was observed to be more difficult.
Serving the best possible experience at any screen size is imperative not only for improving the scannability of the plan matrix but also for reassuring users about the experience of using the digital service’s interface.
Therefore, it’s important to be mindful about upscaling plan matrix page content so that it fits the space proportionately on larger screens.
5) Use Horizontal Styling to Define Rows
Plan matrices without any default horizontal styling can make it needlessly difficult for users to scan and interpret the plan matrix data correctly.
For example, without horizontal lines or alternate colors to visually separate the rows in the matrix, users are more likely to lose their place as they scroll and try to trace feature labels on the left to associated values in plan columns on the right.
Consequently, users are required to scan the matrix more slowly or employ the cursor to assist with tracing horizontally across the matrix.
These subtle styling details not only enhance users’ ability to scan the plan matrix but also help by visually breaking up an otherwise text-heavy list.
On desktop, horizontal styling can be taken a step further by providing on-hover row highlighting.
Regardless of whether groups of related features are displayed directly on the page or contained within vertically collapsed sections, providing on-hover highlighting in addition to visually defining the rows can reduce users’ scanning efforts, thereby allowing users to focus on interpreting the data instead.
Maximize the Scannability of the Plan Matrix
Our SaaS usability research study confirms users often arrive on the plan matrix page with specific plan feature requirements. For example, some users need a plan that will accommodate a minimum number of users or support particular app integrations.
However, users who cannot quickly and easily locate specific features that are critical to their business needs will be more likely to conclude those features are not offered with any of the plans and drop the site’s service from consideration altogether.
On the other hand, users who are able to quickly target the specific features they’re interested in can efficiently glean or confirm key details and confidently move forward with their plan comparison.
Therefore, it’s important to avoid long, unorganized plan matrices by
- grouping related features under clearly labeled subheadings,
- ordering groups of features by importance,
- persisting plan headings and feature subheadings during scrolling,
- scaling the matrix for optimal display, and
- using horizontal styling to define rows.
Having a highly scannable plan matrix allows users to focus on what’s most important — evaluating and comparing plans — instead of spending time searching for the specific features critical to their business needs.