6

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

mockup

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

  • It seems like there are very strict design requirements, but when this is the case you should try to revert to the lowest common denominator and aim for something simpler. In this case I would suggest not having the selection interaction and instead show all three options and details at the same time either horizontally stacked or divided vertically, and allowing the user to select one of the three by clicking or tapping. – Michael Lai May 15 '16 at 23:16
  • how much info is there per package? – Toni Leigh May 16 '16 at 6:08
  • Could you add more about why you want this design? Is it so the user can compare packages easily? – user31143 May 16 '16 at 6:46
  • Are there a lot of overlapping features between the packages (do the packages have a tiered relationship)? For example, does Package 1 have features A, B, C while Package 2 has features A, B, C, and D? – maxathousand May 19 '16 at 21:15
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:

mockup of segmented control

  • Thanks for your answer @Haroen. I've thought about this solution but the problem is that in this way users are forced to continuously switch among packages to see their prices and they have to remember them to compare each other (along with content). I think that, from an UX perspective, is better to let users to compare immediately prices (from our UR, price is the first thing that users watch and consider to make a choice). I'd like to let prices and package's name visible, but at the same time I don't want to have a clutter interface with very small fonts that could be difficult to read. – Matteo Vacca May 15 '16 at 14:41
  • 1
    Maybe use a type of segmented control with two lines of text? – Haroen Viaene May 15 '16 at 14:42
  • Yep. It's what I'm using on desktop, but on mobile the segmented control is a bit tall (90px) because we need to put inside the package name (16 char), feature desc (29 char) and the price (5 char). To fit the width of each segmented control I'm forced to reduce the font size to 12 px for package name and to 10 px for feature. – Matteo Vacca May 15 '16 at 14:51
1

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.

0

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.

0

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.

0

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.

mockup

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).

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.