Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

On my desktop website I have 3 packages listing all the features included for each package and their prices with an option to add to basket.

All packages are on the same page next to each other so its easy to view and compare against one another.

We are developing a separate mobile website, not responsive.

How would I go about laying this out on a mobile platform. Taking the above into consideration?

share|improve this question

This question has an open bounty worth +50 reputation from Chris Aplin ending tomorrow.

Looking for an answer drawing from credible and/or official sources.

I think the question needs to be asked again and an answer sorted out. Membership/Product Comparison on Mobile.

3  
Hi Paul, welcome to UX.se! You can make you question better and get better feedback if you add some mockups/screen shots of your design and talk about any restrictions you might have on the mobile design. Platform restriction, format restriction, etc. –  rk. Apr 29 '13 at 21:10

4 Answers 4

up vote 5 down vote accepted

You could put them next to each other just like on the desktop version, but keep only one in view. Flipping to the left and right would allow switching between the packages and comparing the features. Be sure to clearly delineate each feature.

Additionally, it might be useful to be able to look at a comparison of a single feature across the three packages.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Good use of horizontal scroll :) Maybe also make them tiles swappable for side-by-side comparison. –  rk. Apr 29 '13 at 20:55
3  
-1 for relying on working memory for a comparison –  uxzapper Apr 30 '13 at 2:10
    
@uxzapper, I think I covered that by offering a per-feature comparison pop-up window. Also, instead of offering critique, why don't you try to come up with a better idea? –  Koen Lageveen Apr 30 '13 at 5:59
    
He's right though. Just so the OP knows that this could be a stressor more so than a helper. –  Majo0od Aug 26 at 15:26

How are the packages set up? If you have some leverage in the product design of the packages, knowing that they'd be bought on a smartphone, then you could think about streamlining.

A good example of could be:

Package 1 | $30

  • 4 Apples
  • 1 Bunch bananas
  • 1 Bunch grapes

Package 2 | $40

  • Package 1 Plus:
  • 4 pears
  • Fruit wash

Package 3 | $45

  • Package 2 Plus:
  • Promotional fruit basket

We've been preaching mobile-first, content-first design, but now is it time to start thinking about mobile-first product and program design? I went through this working with a client with a very complex rewards program they wanted users to understand and use from a mobile device. We were eventually able to streamline the benefits and make it much more simple and clear to participate!

share|improve this answer

You could use a compare by feature/item view, where:

  1. Each screen contains one package
  2. You can navigate between packages by dragging screen left/right
  3. You can see how each package measures in comparison to the others per feature/item, via an icon
  4. You can hide/reveal features/items that are/aren't important to you
  5. You can reorder features/items according to your preference by dragging up/down
  6. you can see a summary per item of the costs and the score (of non-hidden features/items)
  7. Similar items in different packages should be considered as different values of the same feature, to enable comparison

E.g.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

How about showing one feature across all 3 packages at a time, let the user hit like button on one of these and keep going. Finally summarize the likes - package more likes win!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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