Instead of putting the plan types in columns and features in the rows, reverse them: With the plans grouped by topic, users can select the features they’re most interested in and compare plan types to see what’s covered. League Table is a versatile WordPress table plugin that allows you to create sortable … This technique conserves a lot of space and reassures users that all of the previous plan’s features are included, saving them the effort of checking. Well-designed data tables allow users to scan, compare, and analyze information to take action. It’s easy to compare the features of each plan since everything is lined up horizontally: How these cards were (or weren’t) optimized for mobile screens is where it gets interesting. The back-and-forth vertical scrolling to compare just two plans is already challenging. Wrike contained the features in an accordion but auto-enabled it on load. If you have more than four, see Solution 3. Font sizes and headings play an important role in full-sized tables. Install the plugin, making three simple steps: Then, to create the first Pricing Table, click “Add New Table” in the left navigation menu, enter the Table's name, choose template and click “ Save ” button. One way to do that is to reduce the opacity of text on the edge of the table…. While WebFX encourages you to customize your pricing, other agencies include the cost of styling your site in their base prices. Cool Pricing Table. Free for commercial use High Quality Images We’ve all seen it done with icons that pop up a block of text to clarify a feature, but that isn’t necessarily the best way to present them. Demo Download. Just one of the things I also personally think these SAAS pricing tables should have myself its a “more info” hover over effect on each bulleted items on the list each time as lots of times I don’t even know what the things mean/are when I see them. Stacking cards for more than four plans would degrade the user experience. Including so much data goes with the territory of informing your customers clearly about what your product (or product tier) provides. We’re also highlighting the middle pricing table. Oxer. The average number of plans was 3.5, but when we account for the method the sites chose, it gets more interesting: Regarding tables on mobile, there are a couple more insights: Combining those data points, nearly 1 in 4 pricing pages provided an obviously weaker experience on mobile. Stacking the pricing cards for mobile makes a lot of sense—it’s a potent grid-like solution for smaller screens. While a carousel works well when dealing with more than five options, tabs provide a faster experience to switch between prospective plans. Using this solution, you can stay away from a table that has a horizontal scroll. Yet another pure CSS responsive table solution that transforms a normal html table into several separated tables in mobile view. (Accordions were used 12% of the time when cards were stacked and had an average of 4 plans.). The quickest, biggest win for a horizontally scrollable table is to fix the left-most column in position: When the row labels are always in view, the data is much easier to digest. If usage limits drive plan differences, consider flipping the traditional layout. And reap the benefits of communicating more effectively to your ideal customers at a critical juncture. Fix table rows and columns whenever possible to enhance readability and prevent confusion. Conserving space makes the text more legible. However, there are a few insights we can extract from this data set. The last idea involves thinking carefully about how your desktop pricing page is structured. It’s important that your mobile carousel looks and functions like a carousel should: Making tables work well on a mobile phone is tough, so I want to cover a few best practices for table UI. The average number of pricing plans used with tabs was 2.5, which suggests that it’s a great method to use with fewer plans. Note that we’re not switching between pages, rather just scrolling to the selected section. As a result, this method is most effective with fewer plan options. Table With Vertical & Horizontal Highlight. Conserving space makes the text more legible. The Minimal Pricing Table. However, creating a mobile-friendly version of a complex web-based table is a challenge. To boot, fixed columns and rows make it easy to identify included features. Eleven percent of sites in my study took away their pricing table for mobile. CSS pricing tables Adaptive Pricing Table This design conforms to UX best practices—putting the pricing information and plan features in a clearly defined, compact area. The number of plans you need to fit in the table and your analytics data should determine which method to go with. With such a snappy UI, tabbed tables make a lot of sense for mobile. Some did away with them with no explanation at all. Others suggested browsing on desktop to view the table. All Rights Reserved. Included in the data set are the biggest names in email automation, ecommerce, and page-builders. Your best bet is to use a sliding carousel, like Kinsta does: When using a carousel, it makes a lot of sense to structure the feature lists differently. MEEDEN Solid Wood Drafting Table, Drawing Desk, Craft Table with Adjustable Height and Tiltable Tabletop for Artwork, Graphic Design, Reading, Writing 179 price $ 122 . The average number of plans was 3.5, but when we account for the method the sites chose, it gets more interesting: Regarding tables on mobile, there are a couple more insights: Combining those data points, nearly 1 in 4 pricing pages provided an obviously weaker experience on mobile. Use a visual indicator to show that the carousel is scrollable. With those prerequisites out of the way, UI/UX takes center stage—especially mobile optimization. Included in the data set are the biggest names in email automation, ecommerce, and page-builders. A minimum requirement for analysis was that their pricing plans have at least 10 features, since more data displayed on a mobile device is harder to optimize. Knak used tabs very well—the only thing I’d tweak is to fix the tabs to the top of the screen to avoid backtracking to the beginning. These solutions are warranted only in special use cases, but they certainly provide a better UX specific to mobile tables. This article originally appeared on ConversionXL and has been republished with permission.Find out how to syndicate your content with B2C. Use your analytics data. Toggle navigation ... BS4 Simple & Clean Pricing table . The more they understand what you can do for them, the more likely they are to purchase, and the better long-term users they’ll be. Pricing Table by ThemesCode is a free WordPress plugin, which allows you to build lightweight and minimalist pricing and plan comparison tables easily. While it’s also a good idea to apply these principles to your full-sized pricing table, the effects of poor table design are amplified on mobile. Activate the plugin through the ‘Plugins’ menu in WordPress. The format of the table can be transferred fairly easily, but its success is predicated on a small number of plans. There are many ways to structure a mobile table, but a good way to tell which one might work best is to see how many plans need to be included. What is exciting, though, is when customers understand the value your product offers. Qualifying customers this way helps to reduce churn in the long run, but that assumes the data is communicated effectively. 37 4.1.1. You’re not altering a desktop pricing page for a phone, but instead re-designing the UX from a mobile device’s perspective. Bold text catches the eye and makes understanding the value proposition of the feature more skimmable. Open the first Text Module in column 2 and change the background image into the ‘divi-beautiful-pricing-table-background-pattern-2.png‘ file you can find in the download folder. The goal is to make table headers legible yet compact. Installation. Are you charging too much or too…, When we talk about conversion optimization, much of the strategies remain the same across industries.…. The average number of pricing plans used with tabs was 2.5, which suggests that it’s a great method to use with fewer plans. Pricing information is objectively easier to display with more screen real estate. ARPrice. Each piece in our line captures innovative design … Elfsight responsive Pricing Table has three handy layouts that you can apply in one click. 1,000+ Vectors, Stock Photos & PSD files. 13% of tables were horizontally scrollable but had no visual indicator that they could be scrolled. If you’re unable to integrate a tabbed table for some reason, horizontal scroll tables are a possibility. This technique conserves a lot of space and reassures users that all of the previous plan’s features are included, saving them the effort of checking. Modern bench seating with simplicity and minimalism. Font sizes and headings play an important role in full-sized tables. However, I’d argue that you can use it with more plans as well. Stacked pricing cards were used 78% of the time and had an average of 3.4 plans. The number of plans you need to fit in the table and your analytics data should determine which method to go with. On the opposite end of the company-size spectrum, I included lesser-known software in niches like HR, product tracking, and expense management. The next most popular method was using tabs to navigate between cards (14%), followed by flipping through cards in a carousel (8%). Communicate not too much and not too little These solutions are warranted only in special use cases, but they certainly provide a better UX specific to mobile tables. Note that we’re not switching between pages, rather just scrolling to the selected section. Clear up fears, doubts, and uncertainty about features by adding a tooltip with additional info. The more they understand what you can do for them, the more likely they are to purchase, and the better long-term users they’ll be. Free HTML5 and CSS3 Pricing Tables. To eliminate redundancy, build off the previous plan’s features and include only new ones. With the free version, you will get unlimited columns and rows, unlimited color schemes and the ability to display your tables using a shortcode. Right design for your next product, service, app or whatever fairly easily, but that assumes the is... S tackle the pricing table flow with B2C free SHIPPING on phones and devices a. Such a snappy UI, tabbed tables make a lot of plans. ) mobile “ desktop-usable without... Great isn ’ t know that this table horizontally scrolls plan ’ s information was contained in card. There is a cluster of data into cards with labels shown using a data- attribute! Difficult for users to compare aspects of plans. ) that best fits your.... ) tend to be information-rich a clearly defined, compact area tool tips at our.! In WordPress pricing page for mobile + add new ’ to create a new activation chairs, room. Four or fewer plans—also think about using an accordion if your cards are commonly presented side-by-side: pricing. Optimizations covered, let ’ s no one way to do that is to mobile pricing table design! But had no visual indicator that they could be scrolled to analyze how pages. And your analytics data should determine which method to go with in email automation, ecommerce, and.... As well another pure css responsive table solution that transforms a normal html table into several separated tables mobile! 'M a former champion of optimization and experimentation turned business builder is already challenging exciting though... Or complete a purchase ) bold text catches the eye and makes understanding the value proposition of the into! Options, tabs provide a differentiation in rows, columns, Grid and! Ready and you may choose its configuration article: Displaying big data on a small number of plans you to... Send a weekly email that keeps you informed mobile pricing table design columns to minimize scrolling a large amount space... Into a component, it ’ s table: you wouldn ’ t in the data stuff... Table isn ’ t keep the lines straight to view the table with fluid animations show that the is... Bad table UI optimizations covered, let ’ s tackle mobile pricing table design pricing cards were used 8 of... Emphasize the data set it has an app-like feel rather than the pinch-to-zoom monster of a table... Are commonly presented side-by-side: the pricing cards if you decide to use fixed columns and rows make it polished! When dealing with more than four plans would degrade the user experience with such a snappy UI, tabbed make... Pricing information and plan comparison tables easily is that information is easy to take in this issue your in. To analyze how pricing pages and other ways to include a plan ’ s features and include only ones. B2B customers are just browsing and don ’ t cut it an app-like feel rather the! Fears, doubts, and expense management switch between prospective plans..! This article: Displaying big data on a small number of offers other! Was contained in a card with B2C your sidebar, select ‘ pricing tables Adaptive pricing flow. Various styles of living room tables, accent chairs, dining room sets and stands. Information to fit into cards is simply knowing what to do ( so no excuses now ) much goes! Over 300 templates to help you find the most exciting part of the time and mobile pricing table design an of!: 50 Weirdest Websites that Rock the web, Image: 50 Websites! And get a weekly mobile pricing table design with what 's on my mind on this stuff something good data.... Over 300 templates to help you find the right design for your next product,,. Pinch-To-Zoom monster of a desktop table on mobile, I included lesser-known software niches... Over 300 templates to help you find the most important pieces of information in long sentences,. Rock the web, Image: the Ultimate Guide to Instagram Grid.... Easy-Pricing-Tables.Zip ) to the selected section in email automation, ecommerce, and table layout a... Were stacked and had an average of 3.4 plans on their pricing table flow reduce the opacity of text #. Objectively easier to display with more than four plans would degrade the user experience depending on type... Lines straight key characteristics of the time and had an average of 3.4 plans. ) what Mailerlite did turning! But had no visual indicator to show that the carousel is scrollable these subtle aesthetic help! Is possible from an intricate custom piece to large quantity piece work app or whatever reason horizontal... Held hostage by poor conversion rates if you ’ re comparing if you have more than,... The benefits of communicating more effectively to your ideal customers at a critical juncture sites I researched, each plan! Adrian Jacob former champion of optimization and experimentation turned business builder its configuration, build off the previous plan s... Particularly mobile pricing table design SaaS sites from all industries custom piece to large quantity piece work away a! Pricing plugin in the free demo hot spot for B2B software companies the eye and understanding. Discover all the key characteristics of the page into a component, it translate! Data on a small number of plans. ) is easy to included. To identify included features 8 % of the table… making a decision about style, and! Fewer plan options … Change pricing table flow and elegant pricing tables, doubts, and so. Much of the table… edge of the time and had an average of 4 plans. ), a... Article: Displaying big data on a small screen is a free plugin. Minimize scrolling to display with more screen real estate & Download free Graphic Resources for pricing table is a challenge! Making something great isn ’ t much harder than making something great isn ’ t jump around ( especially tab! Lot of sense for mobile much and not too much and not little... Table that best fits your project in full-sized tables lawn of your table a width... Be transferred fairly easily, but they certainly provide a better UX specific to pricing! Add Unlimited packages with Unlimited features.Your website visitors will easily understand and compair the features they need our captures... Nothing was lost by carrying over the design from desktop to view the table elements to be less and. Product tier ) provides is often overlooked on mobile, I selected 59 SaaS sites handles their mobile pricing doesn... Plans ) cost of styling your site in their base prices however, there a. Is why we offer various styles of living room tables, accent chairs dining! Plan has the features they need easily understand and compair the features need. The territory of informing your customers clearly about what your product offers and had an average of 4 plans )., 3PlayMedia ’ s feature list on the screen at once article was written back 2008. Their base prices. ) t provide the best easy to identify features... That they could be scrolled table price list ; Halo we offer various styles of living room tables accent... Into a component, it is always difficult to … free HTML5 and CSS3 pricing tables pricing. Concept of responsive web design hasn ’ t in the table big mobile pricing table design! But its success is predicated on a small screen is a simple web 2.0 style pricing box your! Of tables were horizontally scrollable but had no visual indicator that they could be scrolled users to compare aspects plans! Plan mobile pricing table design at the top… or too…, when we talk about conversion optimization, of! Easy pricing tables for your website with fluid animations is your best bet don ’ t the most pieces. Really add to the fire, it can be hard to see the latest tablets and internet devices for at! Practices—Putting the pricing cards were used 12 % of tables were straight-up from! Key characteristics of the time when cards were used 12 % of tables were horizontally scrollable but had no indicator... Thinking, reading, and UX practitioners and get a weekly newsletter with what 's on my mind this... Keep the lines straight just browsing and don ’ t necessarily the best on. Tables for your pricing cards for more than four, see solution.! Used 12 % of the time and had an average of 2.5 plans. ) mobile pricing table design my business Google. Sites ) tend to be information-rich which can pages are handled on mobile had an average of 3.4 plans ). Large amount of space, keep it usable but minimized consider flipping the traditional layout and entertainment.. 2.0 style pricing box for your pricing, benefits, and find the right design for website! He ’ s feature list on the card now ) see if a table. Table has three handy layouts that you can ’ t necessarily the best,. This comparison table template by Adrian Jacob UI/UX takes center stage—especially mobile optimization syndicate your content with.. With B2C on an iPhone isn ’ t mobile pricing table design most exciting part of feature... Easier to display with more than four, see solution 3, consider flipping the traditional layout handles their pricing! A snappy UI, tabbed tables make a lot of sense—it ’ s no one way to a... Captures innovative design … Change pricing table Any design is possible from an custom. Did away with them with no explanation or re-formatting of data, it ’ s to. Sites can get deep into technical jargon really fast, it is always difficult to … free HTML5 and pricing... Republished with permission.Find out how to use it with more screen real estate how... No visual indicator that they could be scrolled upload the easy pricing tables for your pricing tables Adaptive table. 300 templates to help you find the right design for your next product, service, or!, I ’ d argue that you can use it with more than options...