web-dev-qa-db-fra.com

Comment gérer trop de colonnes dans une vitrine de données tabulaires pour UX mobile

Je construis un gestionnaire de portefeuille cryptographique et j'ai les objectifs suivants en ce qui concerne mon UX

  1. Couleurs sur le thème de Messenger, car elles fonctionneront comme une vue Web dans Messenger
  2. Je veux afficher les gains ou les pertes, la pièce, son prix, la quantité de pièces que l'utilisateur possède (avoirs) et la valeur des avoirs de l'utilisateur. Je ne sais pas quelle serait la meilleure façon d'afficher cette UX sur une vue Web de messagerie et de faire 7 écrans. La zone bleu foncé sur tous les écrans sert à ajouter le graphique visuel. Les écrans 1 et 3 sont mes efforts pour mettre en évidence les gains et les pertes avec différentes couleurs.
  3. Quelle couleur des écrans 1 à 3 représente le bon UX pour que l'utilisateur perçoive les gains et les pertes et est compatible avec le schéma bleu Messenger en même temps.
  4. Les écrans 4 à 7 sont mes efforts pour présenter les pièces, le prix, la quantité (avoirs) et la valeur en plus des gains. Dois-je opter pour le nombre maximum de colonnes ici ou dois-je opter pour des lignes doubles?
  5. Toute opinion sur quel écran a le bon UX ici est très appréciée.

Écran 1

J'ai essayé d'ajouter des couleurs vertes et rouges ici pour indiquer les gains et les pertes, mais cela ne correspond pas au thème du bleu messager à mon avis. enter image description here

Écran 2

Comme alternative, j'ai ajouté des couleurs gris clair et gris foncé pour représenter les gains et les pertes, mais cela ne donne pas une UX cohérente. Je suppose que les couleurs vives sont liées à la psychologie de l'utilisateur pour évaluer les gains et les pertes enter image description here Écran 3

Je suis passé au vert avec le thème bleu Messenger et je ne sais pas si cela est contraire au comportement conventionnel où l'utilisateur associe le vert aux gains enter image description here Écran 4

J'ai conservé le prix dans une colonne distincte pour afficher le prix de chaque pièce, mais je n'affiche pas les avoirs ou le prix x la quantité enter image description here Écran 5

J'ai essayé d'afficher toutes les informations dans 5 colonnes mais c'est là que ça devient un peu délicat. Y a-t-il trop de colonnes dans ce tableau par rapport à l'expérience utilisateur mobile? enter image description here Écran 6

Dans le but de réduire le nombre de colonnes, j'ai eu l'idée de deux lignes et de montrer uniquement les avoirs en caisses ou le prix x la quantité détenue par l'utilisateur actuellement enter image description here Écran 7

Sur la base d'une suggestion, j'ai essayé de présenter le prix et les avoirs sur deux rangées enter image description here

Merci pour votre temps à lire cette question

mobileweb-appuser-expectationchatbots
1
PirateApp

La tentative de faire correspondre le gain/la perte à un schéma de couleurs "bleu" global va être déroutante et plus difficile pour l'utilisateur de jeter un rapide coup d'œil pour voir quels fonds vont bien par rapport à perdre de l'argent. 99,999% des sites Web, etc. utilisent le vert et le rouge pour cela, et même avec un "+" ou "-" si le texte n'est pas vert ou rouge, les utilisateurs seront frustrés. Donc, essayer de faire correspondre un schéma de couleurs en forçant une quantité négative à être une nuance de bleu n'est tout simplement pas une bonne idée.

Vous devez également aligner à droite les colonnes numériques avec une mise en forme fixe (même nombre de décimales) afin qu'il soit plus facile de voir visuellement les montants relatifs - par exemple, l'écran 5, les fonds, il n'est pas évident que l'utilisateur a beaucoup de XRP, même bien qu'il semble être trié par cette colonne.

1
Mark Stewart