Moyen le plus lisible d'afficher les paires de valeurs clés
Je conçois une application qui contient beaucoup de données sur un écran donné, j'ai recherché Google et l'échange de piles UX et je n'arrive pas à trouver quoi que ce soit (peut-être que je formule mal mon terme de recherche).
Existe-t-il des recherches sur les meilleures pratiques pour afficher une liste de paires de valeurs clés?
Approche A - touches d'alignement à droite, valeur d'alignement à gauche
Key: Value
Longer Key: Value
Short Key: Value that could be long
Approche B - Touches d'alignement à gauche, valeur d'alignement à droite
Key: Value
Longer Key: Value
Short Key: Value that could be long
Approche C - Alignez les deux à gauche
Key: Value
Longer Key: Value
Short Key: Value that could be long
Approche D - autre chose?
Je serais intéressé de savoir quelle est la meilleure pratique anecdotique ici, et des points bonus pour la recherche/le test réel de la meilleure approche.
L'option A (touches alignées à droite et valeurs alignées à gauche) est la plus logique dans la plupart des situations (comme toujours, il peut y avoir certains cas, par exemple les langues RTL où vous devez ajuster)
Selon les données, vous connaissez probablement toujours la partie clé, et elle est relativement courte ... par rapport à la partie valeur qui peut être assez longue ou s'il s'agit d'une structure de données, son propre arbre de valeurs. Vous pouvez facilement envelopper de longues valeurs au besoin (par exemple, des paragraphes de texte). Je voudrais cependant m'assurer que la clé et la valeur sont alignées en haut de leurs lignes respectives afin que l'association soit toujours claire si vous vous retrouvez avec des valeurs très longues.
Exemple:
Remarques:
- J'ai trouvé que les clés/étiquettes alignées à droite fonctionnent mieux que alignées à gauche. En alignant les éléments (clé: valeur) les uns à côté des autres, il est très clair de savoir quelle clé correspond à quelle valeur. Si les clés deviennent longues, l'espace entre la clé et la valeur augmente, forçant l'utilisateur à devoir analyser davantage pour créer l'association.
- Bien que cela ne soit pas obligatoire, la fourniture d'une frontière subtile entre les "cellules" permet de définir clairement quelle valeur correspond à quelle clé et où les lignes commencent/s'arrêtent.
- Bien que cela ne soit pas obligatoire, il est clair de fournir une différence de style subtile entre les clés et les valeurs.
- Je suis un grand fan de Steve Krug et de son (s) livre (s) " Don't Make Me Think ", en tant que tel, j'ai tendance à essayer de m'assurer de chaque subtil indice UI/UX que je peux fournir pour faire des choses évidentes et découvrables sont fournies
Je vais toujours avec des étiquettes alignées à gauche au-dessus ou en dessous de la valeur. Voir la capture d'écran d'un de mes projets ci-dessous.
Il est basé sur la recherche de l'eye tracking lors de la lecture des formulaires par Matteo Penzo. Cette recherche s'applique également à votre situation.
Le principal inconvénient d'un alignement horizontal de votre clé et de sa valeur est qu'elle peut varier en largeur. Pour cette raison, les utilisateurs doivent lire la clé et la valeur séparément.
Placer une étiquette au-dessus d'un champ de saisie fonctionne mieux dans la plupart des cas, car les utilisateurs ne sont pas obligés de regarder séparément l'étiquette et le champ de saisie. Attention pour séparer visuellement l'étiquette du champ de saisie suivant du champ de saisie précédent.
Lors de la lecture de haut en bas, les utilisateurs peuvent lire les deux éléments en un instant.
Le fait de placer une étiquette juste au-dessus de son champ de saisie a permis aux utilisateurs de capturer les deux éléments avec un seul mouvement des yeux. De plus, si une étiquette indiquait des données très familières à les utilisateurs - par exemple, leur prénom ou leur nom de famille - les utilisateurs ne fixaient pas l'étiquette séparément pour la lire. Ils ont pu visualiser à la fois l'étiquette et le champ de saisie dans la même zone fovéale; éliminant ainsi le besoin de fixations et de saccades supplémentaires.
Source: Placement des étiquettes dans les formulaires - Questions UX
