No matter under what political system the country you live in falls under, one of the common denominators will be money. Everything has a price - from the bed we go to sleep in at night, to the Uber we take on the way to work, all the way to the device you are reading this article from. Even though pricing would not be the first UI design element that comes to mind when we think about UI UX design, it holds a pretty big significance.
Let’s say you wanted to make an appointment to have your hair dyed at a salon. The first step would be to go on the salon’s app or website and browse through their services section. You have successfully selected that you want to have a dye job, but now you are asked if you would also be interested in having a treatment applied to your hair during the washing process. Well, one of the most decisive factors in your choice would probably be the price of these extra services. It is now time for you to take a look at the prices - which you will find in the pricing section of the web page (that, of course, if they included one!).
The Pricing section is a collection of UI design elements that indicate how much a product, service, or subscription costs. It includes the plan name with the list of features, the price, the labels “recommended” or “popular” (optional), and call-to-action buttons.
Pricing sections are present in many types of websites. However, the most common use is definitely for the UI UX design of e-commerce websites and apps. A good example of a website with an integrated pricing section is Zendesk.
1. Cards
Pricing cards structure the pricing and the necessary information in the form of a list. The features are indicated through relevant icons, for example, bullet points or the “checked” icons. Pricing cards are effective when there is a clear distinction between the available packages. It’s recommended to use it only in cases where the number of features presented is small, and the cards do not fit the screen.
2. Tables
Pricing tables are good if you need to have a stricter structure. They include columns at the top with the pricing options and rows for listing features. This is good for comparing clearly the plans between each other as it shows which plans include a specific feature. Pricing tables can display a long list of features. They are used for technical products or subscriptions with a lot of characteristics.
3. Sliders
Pricing sliders are useful when there are a lot of options available. This way, users can customize their package options according to their needs or preferences. Pricing sliders are used in subscriptions where there are no predefined packages or when the package is influenced by the number of users, capacity, or audience reach. They are found in user interfaces for server storage sales, social media promotion services, loans, or rental services.
There are a couple of UI UX design principles that should be taken into consideration during the design process of pricing sections for websites and apps:
As UI UX designers, we should display the pricing information at the front of the pricing cards or tables. When determining the price, use the psychological pricing technique – the pricing ending in “9”.
During the design process, it is important to make sure that it is one of the first elements users see when evaluating their options. Use larger fonts, bold text, or distinct colors or highlights to make the price stand out. For subscription-based models, a good strategy to implement is to show the annual plan option first. But leave the option for the monthly billing cycle visible as well.
When deciding the pricing for a UI UX design, consider offering discounts. The most common discounts are for annual plans – 10% or 20% off of the normal monthly-based plan. Using labels like “Save X%” or “Limited Time Offer” can increase sales for the product, making this a great marketing strategy.. Or the original price could be struck through and the discounted price next to it.
Pricing sections oftentimes include various plans that a user could choose. The user interface should clearly present a comparison between the features of the different pricing plans. Use icons to illustrate what each plan includes and what does not include (optional). Make sure to highlight the features that differentiate the higher-priced plans from the lower ones.
- Highlight the Most Popular Plan
As we already mentioned, pricing sections offer great opportunities of advertising different aspects of a business, from offers to plans. Highlighting the most wanted option plan can influence other users to make the same decision. After all, it has been psychologically proven that people tend to go for the more popular options because it provides them with credibility. Adding a badge with “Recommended” or “Most Popular Plan”, or using a different color scheme can increase the chances of users choosing that option.
Pro Tip: Choose the plan that you want users to buy the most.
We at uinkits understand the importance of great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.
“You press the button, we do the rest.” – Kodak.
Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.
Our design system includes UI components, icons, variables, cards, buttons and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!
