Flux de grille dynamique
Il y a une tendance récente dans la conception de sites 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.
L'un des problèmes que je rencontre couramment avec les grilles de maçonnerie est qu'il est difficile de déterminer l'ordre dans lequel les éléments de contenu sont triés. Dans une mise en page régulière, le contenu le plus récent serait probablement répertorié en haut, puis il circulerait chronologiquement de gauche à droite et de haut en bas.
En raison de la nature de la grille de maçonnerie, un écoulement de gauche à droite ne fonctionne pas. L'espace dans les colonnes adjacentes n'est probablement pas disponible en raison d'un contenu de hauteur différente. Si nous coulons de haut en bas, il semblerait que nous ne serions autorisés qu'à une seule colonne (pensez à Twitter), car chaque colonne est apparemment de longueur infinie.
Donc, sachant cela, quelle est la meilleure façon de commander du contenu dans une grille de maçonnerie? Le cas d'utilisation particulier pour moi est une agrégation de données de réseaux sociaux, mais je pense que cela s'applique à de nombreux endroits différents. Dans la situation la plus idéale, le contenu irait du plus récent au plus ancien - mais dans quelle direction?
Pour être un peu simpliste, plus la disposition semble ordonnée, plus l'ordre a du sens pour les utilisateurs.
Les dispositions de briques de style maçonnerie, à des degrés divers, renversent l'ordre orthographique traditionnel.
Je dirais que cette Subversion est intentionnelle, et cette Subversion explique le charme de ces interfaces. Les dispositions sont imprévisibles, et je suppose que les modèles de balayage visuel que les gens suivent sont également imprévisibles (les appeler "grilles" est trompeur en ce qu'il n'y a pas deux axes continus).
Ce départ d'un système de commande rigide encourage la sérendipité, le jeu et la découverte.
Il n'y a pas de chemin visuel défini à suivre, pas de plan prédéterminé sur la façon dont vous devez consommer les informations. Vous vous promenez et utilisez d'autres indices visuels comme la couleur, la forme, la taille et la texture pour décider sur quoi vous concentrer ensuite. La position n'est pas nécessairement significative, ou au moins elle a une importance secondaire.
Dans le cas de Pinterest, il n'y a pas d'axe horizontal à proprement parler, mais les axes verticaux sont toujours maintenus:
Dans chaque colonne, les premiers éléments seraient vus en premier, donc semblent plus importants, peut-être en raison d'un intérêt ou d'une récence plus importants. À travers les colonnes, (les lecteurs occidentaux de toute façon) suivront probablement de gauche à droite. Cependant, le système de commande tombe rapidement en panne - lorsque votre œil essaie de trouver une deuxième rangée, il ne le peut pas, et votre œil commence à errer.
Je soupçonne que Pinterest a essayé des mises en page encore plus désordonnées, mais a trouvé une mise en page complètement non axiale aussi chaotique. Comparez la mise en page Pinterest avec cet exemple du exemples de maçonnerie jQuery où la largeur des éléments impliqués varie, et donc l'alignement vertical est rompu:
En guise de remarque (comme si cette réponse n'était pas déjà trop longue), vous pourriez dire que les dispositions de maçonnerie sont des cousines des diagrammes de "remplissage de forme" comme graphiques à bulles ou treemaps :
Je soulève cela uniquement pour souligner que dans ce treemap, l'ordre est arbitraire - les informations importantes sont la taille, la forme, la couleur et le regroupement local.