Comment conserver la lisibilité lors de l'utilisation d'une disposition de grille dynamique?
Il y a une tendance récente dans la conception Web à utiliser des grilles de maçonnerie dynamiques, comme Pinterest, pour à peu près tout de nos jours. Si vous n'avez jamais vu une telle disposition auparavant, elle présente un contenu de hauteur variable organisé en un certain nombre de colonnes de largeur fixe de sorte qu'elle ressemble à un mur de briques tourné latéralement.
Bien que cela se soit avéré être un design merveilleusement beau et unique pour un site basé sur l'image comme Pinterest, de nombreux concepteurs commencent à suivre la tendance des sites basés sur du texte.
Un bon exemple de ce à quoi ressemblerait une grille de maçonnerie textuelle peut être vu ici: http://masonry.desandro.com/demos/basic-multi-column.html
Cet exemple est particulièrement mauvais, mais il montre parfaitement mon point. Comme je suis sûr que vous, les gourous de l'UX le savez, la tendance naturelle est pour l'œil humain à lire de gauche à droite et de haut en bas. Avec une disposition de grille dynamique, de gauche à droite ne fonctionne pas nécessairement parce que le contenu à droite de l'endroit où vous lisez peut ne pas être exactement là où votre œil s'attend à ce qu'il soit.
Donc, la tendance naturelle pour moi est de continuer à lire dans la colonne - cela se révèle assez mauvais car alors je lirai infiniment une colonne, et ne passerai jamais à la colonne suivante sans une réalisation consciente de ce que je fais.
Ma question est: existe-t-il un moyen efficace d'utiliser une disposition de grille de maçonnerie tout en conservant la lisibilité et une bonne UX?
Je ne suppose pas qu'il y a une tendance naturelle pour l'œil humain à lire les choses de gauche à droite, de haut en bas. C'est un aspect culturel de la plupart des langues occidentales. De nombreuses langues (hébreu, arabe, japonais) ne suivent pas ce flux.
Voici un bon article pour mettre cela en perspective: http://www.smashingmagazine.com/2012/03/05/japanese-a-beautifully-complex-writing-system/
Pour répondre à votre question, je dirais que oui, il existe des moyens de créer des dispositions de grille efficaces pour la lisibilité. Certaines choses que je considérerais pour cette "grille de maçonnerie":
- Taille de police. Les petits textes auront tendance à se fondre les uns dans les autres.
- Rembourrage. Donnez au texte un espace pour respirer.
- Contraste. Si certains blocs de texte ont une priorité plus élevée d'une manière ou d'une autre, vous devriez penser à des moyens de le distinguer.
- Couler. Si vous avez une hiérarchie de contenu, vous devriez penser à des façons d'ordonner la grille pour lui donner un flux approprié. Autrement dit, l'œil du lecteur doit suivre un chemin conçu pour qu'il ne saute pas partout sur l'écran. Cela pourrait être le défi le plus difficile.
Cependant, cela dépendrait de votre contexte ou de vos plans d'utilisation, mais une bonne question à poser est: "Concevez-vous pour la lisibilité ou la capacité de numérisation?" Cette "grille de maçonnerie" semble bien adaptée à la numérisation de contenu qui renvoie vers des pages de produits distinctes ou des articles complets.
Post plus ancien mais .. je suis d'accord avec Mitch
Je pense que les mises en page comme la maçonnerie fonctionnent assez bien lorsqu'elles sont utilisées avec des informations non linéaires/non hiérarchiques, par exemple des images pures ou une sélection de titres, ou un regroupement de sujets Tweet par rapport à un flux spécifique, etc.
Ce type de disposition applique une sorte de chaos contrôlé. L'utilisateur ralentit et explore un peu plus qu'il ne le ferait avec des dispositions linéaires ou régulièrement espacées que les gens ont tendance à parcourir rapidement.
Par conséquent, je ne pense pas qu'il soit approprié d'utiliser avec tout ce qui bénéficie d'un flux ordonné, comme un flux Twitter spécifique, une table des matières, une session de discussion, etc., car comme vous l'avez souligné, il finit par être décousu, irritant et exactement le contraire. ordonné et utile.
Une grande expérience utilisateur est ce qui profite le plus à l'utilisateur tout en atteignant les objectifs du concepteur, quelle que soit la "hotness" de quelque chose.
Si votre objectif est de permettre à l'utilisateur d'échantillonner tout en lui communiquant des informations utiles, des choses comme la maçonnerie fonctionnent bien, si vous voulez que l'utilisateur suive un flux, alors pas tant que ça.
Vous pouvez penser à la maçonnerie comme une page de garde, ou un vidage cérébral sans ordre particulier qui a sélectionné le contenu présenté de manière à permettre à l'utilisateur de numériser, tout en prenant éventuellement des files d'attente sur l'endroit où ils pourraient vouloir aller ou ce qu'ils pourraient vouloir faire attention à.
Par exemple, commander/se concentrer sur la taille pour des choses comme les plus anciennes aux plus récentes, ou les plus populaires aux moins populaires, mais IMO, il serait préférable pour l'utilisateur de passer à une conception plus linéaire une fois que vous avez sélectionné quelque chose qui doit être commandé.
Dans votre exemple de tweet, je pense que quelque chose comme la maçonnerie serait utile pour l'actualité de Twitter, de gros blocs pour un sujet brûlant, plus petit pour pas si chaud, etc. Juste un exemple.
Quoi qu'il en soit, c'est mes deux cents.
Mise à jour: Pas posé ou une partie de la question mais un coup d'oeil à http://stackexchange.com/sites pour voir la maçonnerie qui fonctionne presque avec certains. Ils utilisent la taille pour implémenter une carte thermique, et lorsque vous cliquez sur un site, il se développe à la fois en taille et en informations, ce qu'il fait assez souvent, c'est de déplacer l'élément hors de votre souris, ce qui vous fait perdre la trace de l'élément.
Ils ont presque tout compris, c'est pour cela que les grilles dynamiques ont été créées.