Don’t Stack Vertical, Bro

Companies typically show pricing plans to desktop users as a table. This helps with Cognitive Ease.

Wait, what’s Cognitive Ease? It’s the measure of how easy it is for our brains to process information.

Anyway, back to the post. This is how sites typically show pricing plans to desktop users:

Getresponse.com_Pricing_Plan.png

The challenge is, how do we show that pricing plan on the mobile page? Here is how it looks:

Getresponse.com_Mobile_Pricing_Plan.PNG

On my phone, I can only see the first 2 plans. I need to scroll down to see the 3rd plan, which means it’s impossible to compare the Max plan with the Beginner plan.

Todoist.com seems to have solved this.

This is their desktop pricing plan:

Todoist_Desktop_Plan.png

This is their mobile plan. You will see plans are stacked side by site, thus minimizing cognitive load:

Todoist_Mobile_Plan.PNG

They display plan attributes in rows so it’s easier for the mobile users to compare their 3 plans side by side.

Here is another approach from Amazon’s mobile site:

Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *