0

I have a price chart like below. The 'buy price' is a listing on its own.. and 'sell price' is a listing on its own too. It just happens that they are placed side by side. E.g. The buy price is not related to the sell price in the same row.

My problem is how do I make it distinct that they are separate columns that are not directly related? But at the same time, they need to be both seen at one glance by the user for comparison/reference.

I was thinking of putting each of them in their own tabs but as per client requirement, that isn't an option.

Do note that this is going to be on a mobile device so I don't have much horizontal space to play around with.

enter image description here

Improve this question

2 Answers 2

Reset to default
1

Don't put them side-to-side if you don't want them too seem related. enter image description here

edit: When targeting mobile, I would should them on top of each other, since the information is not connected. Otherwise your text will be too small to read comfortably: enter image description here

Improve this answer
2
  • That would work in desktop but in mobile there's not much space.
    – catandmouse
    Dec 8, 2017 at 10:23
  • 1
    In mobile you should break it and show them on top of each other. Wasn't your goal to no have them be related? You didn't explain why they have to be side-by-side.
    – ecc
    Dec 8, 2017 at 10:37
0

Try to fine tune spaces between to make it more distinguished. More space between not related content and less space between related content. Also if scrolling is not an issue content might goes off the screen but just keep small clue that is something is outside enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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