Articles

SaaS UX: 5 Ways to Improve the Scannability of the Plan Matrix

Key Takeaways

  • 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

“It was at the top but my eyes started to glaze over at all the different features”, explained a user (a senior product manager for an online media company) after using the browser’s “Search on Page” function to search for any instance of the term “record” on Zoom’s plan matrix page in order to locate cloud recording features. Targeting a specific feature or group of features requires more effort in a long, unorganized list.

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”.

“‘Full content visibility & management’ I don’t know what this is. I don’t know if I need it.” A user (a cloud infrastructure manager for an e-commerce company) struggled to understand the context of some of the plan features at Box, which were simply listed in order of plan availability (and which also didn’t include tooltips).

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:

  1. Group related features under clearly labeled subheadings
  2. Order groups of features by importance
  3. Persist plan headings and feature subheadings during scrolling
  4. Scale the matrix for optimal display
  5. Use horizontal styling to define rows

“I don’t know what this is”, remarked a user (a senior VP for an information technology and services company) while hovering the mouse cursor over the “Slack Enterprise Key Management” feature in the plan matrix at Slack. However, she was able to glean from the subheading that it was a security feature. She continued, “I’m not going to click into it though because that’s one of those security things so it wouldn’t be me deciding it”.

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

“I kind of wish that the top section floated so that as you went down, you could still see what the price difference was. Instead of going like ‘Oh, that’s not included, but it is here, how much more is that, let me go back up’, and then get back to where you were. It’s slightly annoying”, a user (a president of a web consulting firm) complained as he scrolled the plan matrix page at Sync.

“They do that here — the pricing is fixed at the top, and you can scroll down and see what’s included and what’s not”, the same user later remarked as he scrolled the Microsoft OneDrive plan matrix page. Persisting the plan headings — chiefly the plan names and prices — as the plan matrix page is scrolled reduces the cognitive burden to users, as well as their scrolling efforts.

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.

At GoToMeeting, the plan names persisted at the top of the viewport as the user (a chief operating officer for a marketing & advertising company) scrolled the plan matrix page, supporting efficient and effective plan comparison. Meanwhile, each feature section’s subheading (e.g., the “Video Meeting Features” section) was anchored briefly at the top, providing context for the individual features in each group.

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.

In addition to using lines to visually separate feature rows, GoToMeeting’s plan matrix provides on-hover row highlighting to further support desktop users in visually connecting feature labels on the left to checkmarks for each of the 3 plans on the right.

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

GoToMeeting has a highly scannable plan matrix that groups related features under clearly labeled subheadings, orders the groups of features by importance, persists the plan headings and feature subheadings during scrolling, scales the plan matrix for optimal display, and uses horizontal styling to define rows.

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

  1. grouping related features under clearly labeled subheadings,
  2. ordering groups of features by importance,
  3. persisting plan headings and feature subheadings during scrolling,
  4. scaling the matrix for optimal display, and
  5. 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.

Getting access: all 196 digital subscription UX guidelines are available today via Baymard Premium access. (If you already have an account open the Digital Subscription Services study).

Authored by Sally Collins on November 16, 2021

Share:
If you have any comments on this article you can leave them on LinkedIn

User Experience Research, Delivered Twice a Month

Join 30,000+ UX professionals and get a new UX article every second week.

A screenshot of the UX article newsletter