3

We are looking for a way to improve existing UX optimized for larger screens and not mobile.

Use case:

There are three offers. Each offer has a hefty copy outlining what's included and what is excluded from each offer. Inclusions are listed separate from exclusions.

Question:

What is the most optimal way to display these tree offers for a multi-device experience while preserving the copy.

Please let me know your opinion on the new layout. thanks

New Layout enter image description here

Old Layout

Comparing large information on mobile display

2

This is half content challenge, half UX challenge.

The slider/swipe approach as per your mobile mockup is not desirable because you are simply replicating the desktop layout on mobile, except you're only able to display one offer at a time.

For optimal UX:

  1. The mobile view needs to at least indicate that there are 3 offers in one screen without scrolling. Consider Accordion UI.

  2. If there are a lot of overlaps between the offers, rather than repeating them, highlight the difference between the 3 offers.

  3. If above is not possible, you can graphically highlight the difference.

  4. If data type allows, use a table for easier comparison.

  5. Rather than side swipe, I would stick with vertically scrolling page because this is a product comparison page, and you should expect users to go back and forth between products. Vertical scroll is easier than side swipe in that case.

| improve this answer | |
  • Hi Jung, I actually uploaded a new layout. Is there anything can be improved? Now the users will see there are 3 offers and have a full screen for each offer information. if they want to see offer 2, simply click the offer 2 button. The 3 offer buttons are on top. – Suriafur Nov 2 '15 at 15:41
  • The revised layout is much better because users will know the existence of 3 offers. Putting tabs at the top would make them more visible, but they are harder to reach than ones at the bottom. So that's a design decision you have to make. I think this is the best approach. Next challenge is to work on the content formatting / design to highlight any differences between the 3 offers. – Jung Lee Nov 2 '15 at 20:27
1

Unfortunately you can't have your cake and eat it too. You will have to make trade-offs because smaller screens introduce new constraints to your previous design solution.

Something will have to adjust: whether it's your content layout or your UI. Here are the pros and cons of each:

Content Layout

Pros: You can maintain your current content by collapsing extra details until the user wants to read it.

Cons:

  • Users lose the ability to compare across multiple columns (though I'm not sure how they're currently doing that either in your current example.)
  • If you hide content, you're taking content that's visible and making it invisible. How will users discover this content?

UI Layout

Pros: Allows you to maintain a solution designed for a different set of constraints.

Cons: Assuming this is browser-based…

  • You'll most likely introduce some sort of side-to-side scrolling UI that would allow users to pan across the columns. Unfortunately this isn't a natural method of scrolling within a browser, which means you have to create signifiers to inform the user of this new functionality.
  • Given your small screen real estate and the fact you want to create a easy reading environment, this also means that any signifiers you put in place may create a subpar experience.

There's no quick answer here. You'll have to explore different design solutions and test them with users to make sure they are able to access and read the information they need to make an informed decision.

Your best option most likely means re-imagining the content layout, utilizing clear and succinct section labels to inform the user of the content available to them. Wikipedia's mobile view provides an interesting use case here:

Wikipedia Mobile View

| improve this answer | |
  • Hi Hynes, I uploaded a new layout. Could you please check out my original post and let me know what you think? – Suriafur Nov 2 '15 at 15:40
0

Why not use a "table like" layout with 4 columns:

| Description | offer 1 | Offer 2 | Offer 3|
--------------------------------------------
| Feature 1   |   x     |    -    |   -    |
| Feature 2   |   -     |    x    |   -    |
| Feature 3   |   -     |    x    |   x    |

You can even color then and add [?] buttons (or [i]) that opens modal that shows what the feature is.. This should work well on phones too.

| improve this answer | |
  • Hi Olav, actually it is not a product feature comparison otherwise it will be much easier. The information that we need to compare require more user to read longer sentences. I actually uploaded a new layout. Could you please let me know? – Suriafur Nov 2 '15 at 15:13

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.