- #Figma paid plans how to
- #Figma paid plans verification
- #Figma paid plans series
- #Figma paid plans free
If you need to locate the free plan or the enterprise plan, where would you expect it to be on the pricing page? Indeed, the free plan is likely to be on the left, and the enterprise plan either in a separate tab or on the right. This is especially frustrating on mobile, where both the attributes and plans are often out of view, making any comparison within a table very challenging and tiring. However, if headers aren’t visible, users tend to scroll up and down the page repeatedly, often losing focus while comparing. Once users are in the middle of a pricing plan, they often refer back to the heading of the column to verify that they are exploring the right plan and review the plan’s price.
#Figma paid plans verification
Frequent Verification of Table HeadersĪ typical problem that appears especially in complex pricing pages is the loss of orientation.
While doing so, however, there are often jumps back to the headers of the table to verify that they are still exploring the right plan. Source: NN Group.Įvery now and again, however, they randomly jump into one of the attributes and study it in detail, stubbornly and passionately. The lawn mower pattern in action: that’s how users scan data within comparison tables. That means that they begin in the top-left cell, move to the right until the end of the row, then drop down to the last cell of the next row and move back to the left until the end of the row. Usability studies show that users often rely on the lawn mower pattern when exploring feature comparison tables. Comparing pricing plans by exploring every single feature one by one can be quite an adventure, time-consuming and cumbersome, and often not particularly exciting. Either way, we need to provide them with a neatly packaged bundle of features and a competitive pricing tag for those features.įor a given product, however, there might be literally hundreds and hundreds and hundreds of features. They might be just exploring what we have to offer, or they might be comparing our product with the offers of our competitors. When a customer lands on a pricing page, we can presume that they are looking for the pricing of a product that would fit their needs best. It’s also a part of the upcoming 4-weeks live UX training 🍣 and is in our recently released video course already.
#Figma paid plans series
This article is part of our ongoing series on design patterns. So if we wanted to design a better pricing table, what would we do? Well, let’s start with the very basic question: how do people actually compare attributes on a pricing page in the first place? One of the many: Ableton Live, with plenty of features to compare, collapsible accordions, large lists of all features repeated between plans, and tooltips. There is just a lot of information to display, and we need to show it well, driving users towards an option that works best for them, both on desktop and on mobile. Surely not every pricing plan is as complex as a comparison of sophisticated 4K TVs or digital cameras, yet often pricing plans have plenty of fine intricacies and caveats of their own - hidden somewhere between tooltips, tabs, scrollable panes, and sizeable accordions.
In fact, many design patterns discussed there are very much applicable to pricing plans as well, so please take a look there first and come back afterward. Now, this doesn’t sound like a particularly challenging task at first, does it? After all, we’ve seen something quite similar already with our good ol’ feature comparison tables. We should also allow users to highlight differences between the plans and probably provide a fully-fledged feature comparison matrix. For such a table, we should probably consider addressing specific groups with appropriate plan’s names and descriptions. All plans are designed for different audiences, vary in features, include some customization options, and are available in various currencies. The page is intended for a product that has four different pricing plans. Imagine that you need to design a pricing page.
#Figma paid plans how to
Let’s explore some design patterns, guidelines, real-life examples and best practices on how to design a better pricing page. Pricing pages can be complex and confusing.
0 kommentar(er)
