Should I display Pricing Plan Features in a separate section?

Hi there,

I am creating a Pricing Plan page which has 3 plans and over 70 items/features. I have split these features into 8 categories with an accordion displaying whether they are included in a plan or not.

Currently I have a table with the feature on the left and a tick/cross icon going across the row,

What I am having trouble with is how to show more details of each feature. I can add a small sentence underneath each feature in the table which makes the table longer. This option is ok, but I would like to give more details for each feature (due to my demographic).

Can anyone suggest or give me some feedback on which option would be best, or any other option that would work? I currently have thought of these options:

  • Have the description a little longer under each feature
  • Have a tooltip appear by clicking/hovering/tapping on an “information” icon (have heard this isn’t great for UX?)
  • Have a section below the page with more details of the features - possibly displayed in tabs. This option will allow me to expand the description further, but mean creating a new large section on the page which would have either horizontal or vertical tabs for each feature category.
  • Create a new page with all the features on (making the Pricing Plan page shorter and less complicated)

Any feedback or suggestions on how to do this would be great! Thanks!

I have 70+ features that I would like to display a short title and short description for. These are organised across 8 categories.

I am trying to work out the best way to display the content in each category. I thought of having tabs; horizontal or vertical. Horizontal is too wide and vertical works, but not too keen on the vertical o nes

From what perspective?

I think here what you have to consider is what the average user is going to want from your list, which is something noone here can answer for you.

Is your average user going to want more details about all 70 items on your list?
Are they going to only want details about a couple of them?
Is the average user going to care at all?

The UX should fit the profile of the average user of the site (while still allowing for accessibility users to receive the same information - not everyone’s swinging a mouse around the screen).

2 Likes

Thanks for the reply.

I’ve heard the tooltips isn’t great for mobile which I guess I can disable for mobile if I went or that approach, but I would then still need to display the extra info some how.

I don’t think they would read all 70, but they are spread across 8 categories and would probably read which ones they are interested in/need more info about. The target user group is business owners and local residents (all ages, but has a higher older age range than other towns) so I am targeting business-savvy users and also the general public, but then the public probably won’t be looking at these pages as it would be the businesses that would be looking at them.

I’ve come up with this solution:

The top part will probably change design-wise as the buttons/tabs don’t look quite right, but the info boxes are now under the plan details. I will have a “view more info about features” link or similar which will jump to this section.

I could either keep this section on the page or create a new page just for the features, but feel it will be better keeping it on the same page so users don’t bounce off to another page.

I have come up with the following variations for this section. I was wondering if people could give me their feedback on which one they prefer. Obviously these are just rough at the moment and will be tidied up etc.

Version 1:

Version 2:

Any feedback/suggestions would be appreciated. Many thanks!

Have also thought of this solution which may actually work better and eliminates the need for a whole section about features.

It will basically allow users to toggle the description of each feature. This would also work on mobile better as users won’t have to scroll up and down to see features and details etc.


(The mockup is very rough - it’s just a Figma mockup at present)

1 Like

Right now, I’m inclined to choose the third version (from post 5). Everything is much easier to read without the purple background. And as you yourself said, this last version would work better on a mobile device.

1 Like