Est-il préférable de représenter des informations étiquetées simples sous forme de tableau ou simplement de texte avec des sous-titres?
Je repense un site Web qui contient des informations simples présentées sous forme de tableau comme celui-ci:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
J'ai encore lu le article sur le placement d'étiquettes dans les formulaires . L'article est un rapport sur l'étude du suivi des yeux et dit essentiellement que les formulaires sont plus rapides à lire si les étiquettes de formulaire sont placées au-dessus des champs plutôt qu'à gauche (alignés à gauche ou à droite). Je me demandais si les données de cet article s'appliquent à une présentation similaire d'informations? Une meilleure solution au tableau ci-dessus serait donc une simple liste linéaire avec des titres comme celui-ci:
J'apprécie tous les pointeurs vers des articles pertinents.
Votre article lié parle de la relation entre les étiquettes et les champs de saisie. Le cas d'utilisation est là est lire, penser, taper . Entrée, processus, sortie. Et lors de la sortie (saisie), un utilisateur peut vouloir revoir la lecture et l'étiquette sur le dessus de l'entrée facilite cela.
Le cas d'utilisation des informations que vous présentez est lu, lu . Ou peut-être simplement lire . Très différent. Votre illustration n ° 2 ne facilite pas la lecture. Une table a trop encre inutile pour une ligne de 2 éléments et ralentit également la lecture. (Mais si vous considérez les informations sous forme de tableau, il serait correct d'utiliser un tableau, mais je préférerais qu'il n'affiche pas la grille ou ne la rende pas très claire.)
Je pense que la suggestion de JohnBG du format est une bonne idée.
Pour la plupart, c'est un problème de conception. Mais en général, j'utiliserais un tableau quand il y a beaucoup d'informations présentes, et un texte simple quand il y a peu d'informations présentées.
Cependant, lorsque vous présentez du texte, vous devez faire attention à la mise en forme afin qu'il soit rapide et facile de distinguer l'étiquette des données. En général, je garderais également les étiquettes à gauche plutôt qu'au-dessus des données.
Quelques exemples grossiers:
Notez que dans certains cas, il serait encore mieux de laisser de côté les étiquettes ... Dans votre exemple, cela peut ressembler à ceci:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
L'utilisation de moins de mots dans vos conceptions rendra toujours plus clair et plus facile à numériser. Les images (dans la bonne quantité) qui représenteront des mots répétitifs rendront toujours la page plus facile à lire parce que l'œil les ignore lors de la lecture du texte.
De cette façon, vous pourrez améliorer les informations importantes telles que le nom et le prix du produit.
Vous devez également utiliser différentes tailles de police pour attirer l'œil sur différentes données.
L'article montre également que les gens se concentrent uniquement sur ce dont ils ont besoin. Nous savons qu'une zone de texte est utile à notre objectif dans la page.
À mon avis, si l'étiquette est trop éloignée des informations qui la représentent, difficile à lire; donc je pense que:
serait (...) une simple liste linéaire avec des titres
Selon Jakob Nielsen article (je recommande ce site à 100%), Attention horizontale se penche vers la gauche , donc je recommanderais également cette étiquette de thouse à gauche alignée et mise d'une manière qui ils ont l'air liés; et comme @JohnGB l'a dit, donnez aux étiquettes une différence avec le contenu.
Enfin, cela pourrait vous aider de manière plus générale (si vous avez des images dans votre contenu). Vision tunnel et attention sélective (nngroup.com/articles/tunnel-vision-and-selective-attention/) Désolé de ne pas me laisser en pot plus de 2 liens.
Meilleures salutations.
Ne mélangez pas "Question A" avec "Réponse B". L'étiquetage d'un formulaire est quelque chose de complètement différent de la structuration de la sortie des données. Si j'ai bien compris votre question, vous voulez concevoir une interface de sortie et essayer de tirer des conclusions à partir d'une interface d'entrée.
Je vais donc d'abord essayer de répondre à votre question liée à la sortie: lors de la structuration de la sortie, une orientation horizontale serait l'orientation "naturelle" car les utilisateurs sont habitués à lire les textes de cette façon. Si vous souhaitez en outre mettre l'accent sur l'une ou l'autre partie de votre sortie en la mettant en gras, rouge, souligné, etc., c'est très bien - mais fondamentalement pas nécessaire puisque vous avez déjà structuré votre sortie en plaçant l'étiquette d'un côté du ":" et les données de l'autre. Souvent, ces types de sorties ne sont même pas placés dans des tableaux. Juste un petit exemple:
Name: John Miller
Job: Designer
Eh bien - et puis il y a des formulaires et des champs de saisie - et je ne veux pas creuser dans la conception de formulaires maintenant, mais peut-être qu'une capture d'écran du scénario "étiquettes au-dessus des champs" pourrait être utile à ce stade:
Je n'ai aucun lien vers les articles, mais je pense que vous pouvez regarder Amazon, par exemple:
La capture d'écran ci-dessus montre une chose très importante:
Laissez les informations se décrire. Utilisez des couleurs, des caractères de devise, mettez en surbrillance le nom du produit avec un style de police, etc.
En fait, peu importe la façon dont vous disposerez les étiquettes si vous pouvez les éviter complètement.
Je suis confronté à un problème très similaire. Nous avons une liste d'articles qui apparaissent dans 5 canaux/catégories (image, texte, vidéo, etc., etc.). Ils ont tous des étiquettes et des titres. De plus, chaque chaîne dispose d'une liste spécifique d'informations telles que les horodatages, les dates, la durée de la vidéo, le nombre de mots, la taille de l'image, la taille en Ko, etc., etc. Le problème que j'ai rencontré était que les colonnes du tableau étaient très incohérentes d'une catégorie à l'autre. Après quelques recherches, j'ai trouvé que l'utilisateur était le plus intéressé par le titre et l'étiquette, alors je les ai empilés. Cela rend la mise en page plus propre et permet une analyse rapide.
Exemple:
LABEL
n titre assez ridiculement long va ici
Horodatage | timbre à date | taille d'image | taille kb
De plus, j'utilise la couleur et la hauteur de ligne pour souligner la hiérarchie des informations.
C'est la première fois que je vois l'étude, mais je me souviens qu'elle (ou une similaire) a été mentionnée dans une vidéo d'utilisation de Lynda. Si je me souviens bien, l'alignement vertical a diminué la numérisation du formulaire lorsque les champs ne sont pas remplis séquentiellement (essentiellement à chaque fois que l'utilisateur y va oh, attendez, je me suis trompé il y a quelque temps ils finissent par passer beaucoup plus de temps à naviguer dans le formulaire, sans doute assez pour compenser ou inverser l'augmentation de la vitesse de lecture d'origine).
Comment cela s'applique-t-il à votre question? À moins que vous n'attendiez que toutes vos informations soient très pertinentes pour l'utilisateur, une présentation tabulaire peut être préférable. Considérez ceci: colleriez-vous des étiquettes nutritionnelles dans une disposition verticale même si vous saviez qu'elles sont plus rapides à lire? Non , car ils sont impossibles à analyser et les utilisateurs vous détesteraient:
(source: fda.gov )
Je pense que vous essayez d'appliquer des règles correctes aux mauvais éléments. La première chose que nous devons faire est de garder à l'esprit les objectifs.
OBJECTIF: formulaire complet
La raison pour laquelle les "Labels" sur les "Champs de saisie" sont utilisés est parce que nous voulons que les utilisateurs remplissent le formulaire rapidement, afin qu'ils puissent atteindre leurs objectifs, acheter un produit, s'abonner ou s'inscrire. Nous souhaitons également que l'utilisateur termine ce processus au plus vite car il ne peut pas atteindre son objectif sans remplir le formulaire.
OBJECTIF: obtenir des informations sur le produit
C'est un objectif complètement différent. Ici, vous voulez que l'utilisateur passe un certain temps à analyser les informations fournies. S'ils ne sont pas intéressés, ils n'ont pas à le lire, cela ne gênera pas leur progression.
Je pense qu'il n'y a pas de bonne ou de mauvaise façon d'afficher ces informations, tant qu'il est facile de comprendre ce qu'est l'élément title et l'élément