web-dev-qa-db-fra.com

interface mobile pour la distribution des actifs

Bonjour et merci d'avance pour votre aide.

Contexte: Je suis en train de concevoir une application mobile financière qui permettra aux utilisateurs d'investir dans le private equity.

Selon la loi (en l'occurrence en français) pour investir, il est obligatoire d'indiquer la répartition de vos actifs (immobilier/espèces/actions etc etc), entre autres.

Pour une référence, voir une capture d'écran de l'application web (état vide). L'écriture du pourcentage sur le champ correspondant remplira le graphique en anneau - il y a une certaine automatisation pour calculer le pourcentage final.

Ceci n'est qu'une partie d'une longue intégration "secondaire".

Comment pourrais-je résoudre ce problème pour une interface mobile, à part l'adaptation du graphique pour un écran mobile?

enter image description here

1
Luc D

Il existe de nombreux articles expliquant pourquoi les graphiques circulaires sont mauvais pour la visualisation des données.

  • Comparer deux catégories différentes, parce que les tranches sont rarement alignées et parce que les humains sont pauvres pour comparer les angles.
  • Affichage du pourcentage numérique exact. Les humains sont pauvres pour estimer les angles. Les camemberts invitent les téléspectateurs à essayer de toute façon, ce qui augmente la charge cognitive.

de https://www.quora.com/How-and-why-are-pie-charts-considered-evil-by-data-visualization-experts

Un article intéressant peut être trouvé ici: https://medium.com/the-mission/to-pie-charts-3b1f57bcb34a

En ce qui concerne votre cas, je commencerais par un graphique à barres vide, avec une légende similaire à la vôtre. Lorsque l'utilisateur saisit pour la première fois ses pourcentages, il voit la barre grossir avec la couleur spécifique, etc.

One horizontal bar

ou conservez l'une des barres telle qu'elle apparaît dans l'image suivante.

Horizontal bar

Les données doivent être 0 au début car le pourcentage est de 0%. Si vous présentez quelque chose, cela embrouillerait votre utilisateur.

1
Dimitra Miha

Vous n'avez pas besoin d'adapter le graphique pour l'écran mobile. Exemple: vous pouvez introduire des curseurs avec par exemple Pas de 5%. Les curseurs eux-mêmes donneront à l'utilisateur une idée visualisée des proportions:

enter image description here

0
JakubTutaj

Les graphiques circulaires ne sont pas si mauvais si vous affichez correctement les informations pertinentes. J'ai un exemple que j'ai mis en œuvre pour un calculateur de capacité d'emprunt de prêt bancaire et que les utilisateurs ont assez bien compris lors des tests d'utilisabilité. Dans votre cas, vous pouvez utiliser ceci: au lieu d'utiliser $ signe, vous pouvez utiliser% et mettre% et l'étiquette appropriée sur les barres du graphique à secteurs.

Vous pouvez également utiliser le type de graphique à barres empilées ou à colonnes empilées pour montrer comment des pièces individuelles composent l'ensemble de quelque chose, comme le type d'appareil utilisé pour les visiteurs mobiles de votre site Web ou les ventes totales ventilées par représentant commercial.

enter image description here

0
VB2001