3

Background

We are currently using a standard mobile pattern to showcase 3 cards where users can compare different plans.

Problem

The cards are very text heavy and contain alot of content below the fold, all of which must be there for legal and compliance reasons.

The main issue I have is that in reducing the width to reveal the next card and entice the user to swipe, it’s causing issues in content layout within the card, so we want to maximise width of the card on mobile devices.

We don’t want to stack the cards as it means the user needs to scroll up and down to compare features across plans, adding to cognitive load.

Possible Solutions

As pictured, I am playing around with a few solutions, but nothing feels quite right. My question is, are there any other existing patterns that don't rely on revealing the next/previous card in the carousel? We are trying to avoid having to re-design the content within the card if possible...

mobile card carousel navigation solutions

2
  • "My question is, are there any other existing patterns that don't rely on revealing the next/previous card in the carousel?" Tabs. You answered it yourself in your Question! – straya Mar 2 '20 at 2:22
  • yeah i guess we wanted to see if there was any other solutions out there before we start to converge on a preferred option and A/B test – dmcleod Mar 10 '20 at 7:44
1

Working with next constraints.

  1. We don't want the user to do a lot of vertical scrolling
  2. We don't want to do heavy redesign of the cards
  3. We're going to have lots of required text in cards

Ditching the usual vertical scrolling will force you to deal with a tough situation where it wont be natural for the user to scroll horizontally as he won't be aware of the content thats behind it.

For that reason I would make it clear for the user what his options are before he even starts reading the details.

Tell the user what his options are with tabs or a list.

Current design + tabs

enter image description here


Arrows + tabs

enter image description here


Accept vertical scrolling , create a list that links to a specific detail plan

enter image description here

1
  • yeah we're not keen on the stacked cards option as it makes it even harder for a user to compare information across cards. don't mind the tabs/arrows options though, worth exploring. – dmcleod Mar 10 '20 at 7:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.