How do I manage too many columns in a tabular data showcase for mobile UX
I am building a crypto portfolio manager and I have the following goals with respect to my UX
- Messenger Themed colors as it will run as a webview inside Messenger
- 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.
- 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.
- 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?
- 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.
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 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 Screen 4
I kept Price as a separate column to show price of each coin but I dont display holdings or price x quantity 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? 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 Screen 7
Based on a suggestion, I tried showcasing price and holdings in dual rows
Thank you for your time reading this question