Est-il autorisé d'utiliser des flèches pour indiquer les mouvements d'argent vers et depuis un compte?
J'ai vu de nombreux exemples d'applications bancaires qui utilisent des flèches pour indiquer l'argent entrant et sortant d'un compte. Cependant, la direction de la flèche est un peu problématique, en particulier dans quelle direction doit-elle pointer pour indiquer l'entrée ou la sortie?
Alors, y a-t-il des preuves ou des recherches pour soutenir l'utilisation de o ne pas utiliser de flèches pour indiquer le mouvement d'argent?
Jusqu'à présent, j'ai exploré un certain nombre d'options et je n'ai pas encore décidé quelle option choisir et je vous souhaite la bienvenue!
Je comprends qu'une partie du succès de la flèche pour représenter la direction est due au fait qu'elle pourrait être tournée dans n'importe quelle direction et continuer à remplir sa fonction principale et c'est probablement son point le plus faible. Cela étant dit, les icônes fléchées pourraient-elles encore être utilisées comme référence visuelle rapide pour indiquer le mouvement de fonds sans réellement induire les utilisateurs en erreur?
Mise à jour: Merci pour toutes vos réponses. C'était vraiment utile! Nous avons décidé d'opter pour la solution ci-dessous car elle résout le problème principal lors de l'utilisation des flèches dans ce contexte particulier. La solution a été encore améliorée en utilisant la couleur comme suggéré par certaines des réponses et commentaires.
BTW ce qui précède est un élément dans une liste filtrable et triable et l'utilisation de la flèche dans ce cas particulier est simplement une amélioration visuelle car je ne compte pas entièrement sur elle pour transmettre les mouvements d'argent vers et depuis le compte.
Merci encore à tous!
C'est peut-être dangereusement proche d'une discussion d'icônes hors sujet, mais je pense que vous pouvez modifier les icônes de flèche pour rendre la direction sortante par rapport à la direction entrante plus claire. Essentiellement, vous devez donner un contexte à la flèche:
Je continuerais à utiliser la couleur comme indice supplémentaire.
J'ai constaté que les flèches sans mots ont tendance à créer de la confusion parmi les utilisateurs, en particulier ceux qui ont un daltonisme. Si vous utilisez plusieurs indicateurs tels que la flèche, la couleur, les mots et/ou +/-, vous rencontrez l'accessibilité des utilisateurs du mieux que vous pouvez. Vous pouvez faire quelque chose comme ça:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
ou en d'autres termes:
ou comme certains l'ont suggéré:
les icônes fléchées pourraient-elles encore être utilisées comme référence visuelle rapide pour indiquer le mouvement de fonds sans vraiment induire les utilisateurs en erreur?
Je pense que la façon dont vous les avez présentés peut prêter à confusion, mais les utiliser d'une manière différente pourrait être plus familier avec ce à quoi les gens sont habitués. Exemple:
De plus, pour les mouvements liés à l'argent, les deux paires de symboles comptables les plus connus sont:
- + croissantNombre/-décroissantNombre. Par exemple: +200, -500
- croissantNombre/(décroissantNombre). Par exemple: 200, (500)
Celles-ci ont également l'avantage d'avoir besoin d'une seule colonne pour représenter les mouvements (l'ajout de couleur verte/rouge serait un bon ajout, ce qui simplifiera l'interface utilisateur). et numérisable):
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Pour plus de clarté, vous pouvez utiliser deux colonnes:
Conclusion:
Je ne pense pas que les flèches soient le meilleur choix pour représenter ce dont vous avez besoin , car il existe d'autres options disponibles (comme celles que j'ai mentionnées) qui la plupart des gens connaissent et ont moins de chances d'être mal interprétés.
D'après mon expérience et concernant l'argent, les flèches sont utilisées pour représenter les changements par rapport à une valeur précédente .
Si vous avez besoin ou souhaitez utiliser les flèches, l'approche de @Matt Obee serait certainement assez bonne.
Vous pouvez utiliser le
+et le-icônes si les flèches ne sont pas nécessaires.J'utiliserais probablement
↑et↓si :- J'ai dû utiliser des flèches
- Je ne peux pas écrire d'autres informations sur les mouvements de compte.
Si vous voulez vraiment utiliser
→et←, vous devez afficher l'autre compte d'où/où va l'argent.
Défis de conception ici:
- La conception de concepts abstraits tels que les comptes et les flux est difficile. Il est généralement préférable d'utiliser des mots plutôt que des graphiques. Mais parfois, vous devez (ou on vous dit de :-) utiliser des graphiques.
- Les quantités financières peuvent être difficiles à représenter graphiquement car les différentes devises ont des symboles différents.
- Les flèches sont très couramment utilisées et surchargées dans UX: elles sont utilisées dans les informations, les avertissements, les composants interactifs et le texte brut. Sans repères visuels pour ancrer la flèche (comme d'autres l'ont souligné), il est difficile de dire si la flèche représente une direction, une destination ou une source.
- En plus de tout cela, les montants financiers apparaissent généralement dans des tableaux, il est donc souvent important de rendre la solution visuellement scannable.
- J'éviterais d'utiliser la palette vert/bleu ... il est plus conventionnel d'utiliser le rouge/vert pour les flux d'argent, il peut donc être déroutant de demander aux utilisateurs de traiter la couleur bleue supplémentaire.
Esquisser une solution ...
En supposant que vous souhaitez utiliser des flèches, voici quelques croquis qui utilisent différentes formes d'ancrage avec des flèches pour communiquer le concept de flux monétaire:
L'icône "banque" a été utilisée par Bank of America dans son interface de paiement de factures en ligne.
"Ce n'est pas parce que vous le pouvez que vous devriez ......"
Lorsque j'examine des quantités importantes de données à des fins d'analyse criminelle, les données à colonne unique sont une cause importante de confusion et de retard et, finalement, d'erreurs. Peu importe l'icône graphique utilisée ou les couleurs appliquées.
La méthode la plus précise pour éviter la confusion reste une approche à deux colonnes (une entrée, une sortie).
Il est immédiatement visuel et ne nécessite aucune interprétation supplémentaire. Tout ce qui pousse le lecteur à se demander "qu'est-ce que cela signifie" le distrait nuit à sa performance du processus qu'il essaie réellement d'accomplir.
Ceci est un exemple clair de "si ce n'est pas cassé, ne le répare pas et surtout ne le fous pas".
Ne laissez pas la forme à la mode saper la fonction.
Je suis employé en tant que concepteur d'interface utilisateur pour divers services financiers depuis 10 ans. J'ai (également) opté pour l'utilisation de + et - (respectivement vert et rouge). Lorsque l'espace le permet, séparé en 2 colonnes.
Convenez avec les points ci-dessus que la direction des flèches peut être mal interprétée, par exemple Gauche et droite: gauche = arrière = dehors? ou à gauche = home = in? par exemple. Montée et descente: contradictoire lorsque le solde total est négatif (ou "négatif représenté positivement" dans le cas d'une carte de crédit)
NB les symboles dans ces couleurs doivent être en gras pour l'accessibilité
Je suis d'accord avec l'idée que les icônes "+" et "-" précèdent les chiffres comme quelque chose à considérer.
Avec l'exemple 2, vous êtes en quelque sorte sur la bonne voie. La méthode courante en comptabilité consiste à placer les fonds entrants et sortants dans des colonnes distinctes. Cependant, vous n'avez pas besoin d'une flèche pour indiquer les choses et à moins que vous n'en ayez une assez extravagante comme celle de Matt Obee (ce qui est une bonne idée visuellement mais peut être évité). Au lieu de cela, je me concentrerais uniquement sur la couleur, les symboles "+" et "-", les colonnes et les en-têtes.
Donc, un en-tête de colonne comme "revenu" et un comme "dépenses" avec tous les éléments ci-dessous dans la colonne appropriée. Ensuite, si vous souhaitez ajouter plus d'indices visuels, collez un '+' devant les éléments de revenu et un '-' devant les éléments de sortie et si vous voulez encore un peu plus, utilisez du texte vert et rouge respectivement.
J'ai examiné cela à plusieurs reprises dans le passé alors que je travaillais dans une société de comptabilité cloud et cela semble être l'option la plus conviviale et la plus familière pour les gens.
Ma banque n'utilise en fait aucune sorte d'icônes. Il ajoute simplement un + ou un - et colore le nombre green ou red respectivement.
Ils sont tous dans une colonne, qui est (par défaut) triée par date (la plus récente en premier).
Comme d'autres l'ont suggéré, je n'utiliserais pas simplement une flèche, car son origine n'est pas claire.
Montrer que l'argent entre et sort d'un compte est une décision pleine de confusion potentielle. Vous voudrez peut-être faire des recherches sur les différentes méthodes comptables et leur histoire, pour le contexte. J'ai trouvé ce document d'aide informatif.
Je dirais que l'application GNUcash est un exemple de terrible expérience utilisateur pour la grande majorité des utilisateurs, mais cela vaut la peine de réfléchir à la différence de perspective. Du point de vue de l'utilisateur novice "je mets mon argent dans une boîte et parfois il entre dans la boîte et parfois il en sort" la boîte (compte). Du point de vue de la banque, ils doivent au client un certain solde d'argent qu'ils utilisent actuellement à des fins d'investissement.
Ce que je dis, c'est qu'abstraire des choses comme le flux de devises est quelque chose que vous ne devriez pas entreprendre à la légère. Les flèches me semblent une simplification excessive.