How do I manage too many columns in a tabular data showcase for mobile UX

by PirateApp   Last Updated November 14, 2017 17:16 PM

I am building a crypto portfolio manager and I have the following goals with respect to my UX

  1. Messenger Themed colors as it will run as a webview inside Messenger
  2. I want to display gains or loses, the coin, its price, the amount of coins the user has (holdings) and the value of the user's holdings. I am not sure what would be the best way to display this UX on a messenger webview and made 7 screens. The dark blue area on all the screens is for actually adding the visual chart. Screens 1 & 3 are my efforts to highlight gains and losses with different colors.
  3. Which color from screens 1-3 represent the right UX for the user to perceive gains and losses and are compatible with the Messenger blue scheme at the same time.
  4. Screens 4-7 are my efforts to showcase coins, price, quantity (holdings) and value in addition to gains. Should I go for maximum number of columns here or should I go for dual rows?
  5. Any opinion on which screen has the right UX here is highly appreciated.

Screen 1

I tried adding green and red colors here to indicate gains and losses but it doesn't match with the messenger blue theme in my opinion. enter image description here

Screen 2

As an alternative, I added light gray and dark gray colors to represent gains and losses but it doesn't give a consistent UX. I assume bright colors are linked with user psychology to evaluate gains and losses enter image description here Screen 3

I switched green with the Messenger blue theme and I am not sure if this is against conventional behavior where user associates green with gains enter image description here Screen 4

I kept Price as a separate column to show price of each coin but I dont display holdings or price x quantity enter image description here Screen 5

I tried displaying all pieces of information in 5 columns but this is where it gets a little tricky. Are there too many columns in this table with respect to mobile UX? enter image description here Screen 6

In an attempt to reduce the number of columns, I came up with the idea of dual rows and show cased only holdings or price x quantity held by the user currently enter image description here Screen 7

Based on a suggestion, I tried showcasing price and holdings in dual rows enter image description here

Thank you for your time reading this question

Answers 1

The attempt to match the gain/loss to an overall "blue" color scheme is going to be confusing and harder for the user to quickly glance to see which holdings are going well vs. losing money. 99.999% of web sites, etc. use green and red for this, and even with a "+" or "-" if the text is not green or red, the users will be frustrated. So trying to match a color scheme by forcing a negative amount to be some shade of blue is just not a good idea.

You should also right-align numeric columns with fixed formatting (same number of decimal places) so it is easier to visually see relative amounts -- for example, Screen 5, the Holdings it is not obvious the user has a lot of XRP, even though it appears to be sorted by that column.

Mark Stewart
Mark Stewart
November 14, 2017 17:13 PM

Related Questions

How do I optimize this flow for a news chatbot?

Updated October 30, 2017 09:16 AM

Replacing contact form with chatbot

Updated February 16, 2017 14:16 PM

Should Your Chatbot Be Named?

Updated October 27, 2017 21:16 PM