An alternative for toggle on mobile devices

Question

I'm working on a mobile website. In the page which I'm working on the user can choose one package from a range of 3. Each of them has a total price and a description, along with some products included in this package. In desktop we used a toggle like this

^{download bmml source – Wireframes created with Balsamiq Mockups}

In this way the user can choose a package and see the content changed below. I need to do something like this even on mobile. I tried to use the same toggle but there isn't enough space to put all informations on toggle like name of package, price and an important features that allow users to distinguish one package from another (2 packages have the same name - I know that this is strange but is a business requirement).

I've thought using an accordion instead of toggle, but I think that users can have some problems in understanding the offer because the packages are stacked one below the other and the first one needs to be open when users land on page (another business requirements).

I need a responsive solution, to not to write two different code base.

Do you have some suggestions? Thank you so much

Answer 1

An option could be to keep using this toggle and use it like iOS apps use Segmented controls. These feature just one word, so your solution would be to leave off the price and instead just use the name. A quick mockup could look like this:

Answer 2

I would remove the segmented tabs and put a list or table (a loose term here) of the sub-items that are in a package. Then each of the three (or more) large containers you have currently can be selected from.

If the user selects one (a package), then change the background color slightly or the border, or give some other feedback that indicates their selection was made.

This could cause problems if the list of items in a package is very long, or if each product needs an image to be displayed. You could solve the image issue with a tooltip or something.

That's my favorite idea I thought of.

Answer 3

What you could do, is roughly keep the same design (the same as your desktop design), and show the product you want to "push" from a marketing point of view.

You can then click through the different variations, you can see a demo of this design here.

You have to make sure, as they've done, that you visually see the other items on the screen. Also make sure you can easily tell that you can see them, either by swiping or pressing some sort of navigation (in this case, the arrows on the top).

Hope it helps, if you have further questions, let me know.

Answer 4

Users will want to see all the products, to compare them. There are only three packages (right?), so I'd put them all on the page, one after another. No tabs, no accordions. Users will scroll between them if the info isn't too long for each.

Within each package you might want to show only the info that's most important for users to make a decision (price, features) and hide the details within sub-accordions.

Answer 5

Add a "feature comparison" chart. I've seen these before with businesses that sell different tiers of the same product, or when comparing theirs to competitors'. This works best when the features overlap (a detail I'm unsure of for your use case), but could also work with non-overlapping features.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Obviously you could tailor this to fit your application (labels could be expanded to small paragraphs, package labels could be tappable to view a summary of all of that package's features, feature labels could expand to show detailed description, et cetera).