Différence entre les tuiles et les cartes?
Nous développons une plateforme et nous devons montrer de manière visuelle les informations les plus pertinentes provenant de différentes sources aux utilisateurs. L'utilisateur doit interagir avec ces "informations" et ce contenu aura une structure dynamique et doit être mis à jour fréquemment. Je pense à utiliser quelque chose comme des tuiles ou des cartes, mais cela soulève la question:
Quelles sont les différences entre l'interface utilisateur des tuiles et des cartes?
La différence est sémantique, mais par rapport à l'utilisation standard de l'industrie chaque fois que j'entends la vignette Word, cela implique qu'un autre écran est associé à la vignette. Par exemple, dans "l'interface utilisateur moderne" de Microsoft, une vignette est bien plus qu'une simple icône, elle peut fournir des informations rapides et les vignettes sur l'écran de démarrage de Windows Phone ou de Windows 8 agissent à la fois comme des radiateurs d'information "en un coup d'œil" ainsi que comme moyen de démarrage de l'application associée. La caractéristique importante de la tuile est que l'utilisateur décide de son emplacement en fonction de l'importance ou même de l'esthétique.
Les cartes impliquent en revanche que toutes les informations pertinentes y sont contenues. Vous pourrez peut-être "zoomer" ou "retourner" une carte pour en voir plus. Mais ils doivent transmettre tout ce dont ils ont besoin dans ces interactions. De plus, le placement est important avec une carte. Soit un placement relationnel comme dans une carte mentale ou un diagramme de classe montrant des concepts similaires, soit un placement absolu comme un tableau Kanban montrant l'état d'une tâche.
Une tuile utilisée dans un endroit où les cartes sont normalement utilisées serait source de confusion, l'utilisateur pourrait même ne pas être conscient que la tuile fait autre chose que d'afficher des informations. De même, une carte dans un groupe de tuiles peut causer de la frustration, l'utilisateur s'attendrait à ce qu'il se passe plus lorsqu'il interagit avec elle.
Ce qui est le mieux pour votre application dépend de son contenu, sans savoir quoi que ce soit, voici quelques éléments à examiner sur les deux modèles de conception:
Les carreaux ressemblent plus à ceux de la galerie, plats et à petites marges. Voici la page wikipedia expliquant le modèle de l'interface utilisateur Metro qui dépend des tuiles.
Les cartes sont des informations affichées de la taille d'une bouchée; espacés les uns des autres, au-dessus d'un élément graphique autre que l'arrière-plan.
Les cartes sont utiles pour lire des informations rapides car la conception vous oriente clairement vers le contenu.
Voici un article expliquant l'interface utilisateur des cartes (c'est un peu biaisé)
Je pense que les tuiles sont plus simples que les cartes, et comme leur nom l'indique, elles sont de taille fixe (ou limitée à un petit sous-ensemble de tailles géométriquement liées) et régulièrement espacées le long d'une grille. Les carreaux sont presque toujours des fournisseurs d'informations incomplets: si vous voulez en savoir quelque chose, vous devez interagir avec eux. Leurs affichages sont moins statiques que les icônes et les tuiles peuvent effectuer des opérations graphiques pour attirer votre attention en cas de besoin. Ils restent également dans des relations fixes avec leur toile: si je place une tuile dans le coin supérieur gauche de la toile, elle doit toujours être dans le coin supérieur gauche, sauf si je la déplace ou la force à se déplacer.
Les cartes sont plus dynamiques, elles contiennent plus d'informations et peuvent être situées à des endroits irréguliers sur la toile. Les cartes ne sont pas toujours de taille fixe, ni limitées à un ensemble fixe de tailles. Les cartes peuvent également être complètes: vous pouvez ou non avoir besoin d'interagir avec une carte afin d'apprendre toutes les informations qu'elle a à offrir. Les cartes peuvent souvent se chevaucher. Le déplacement d'une carte par rapport au canevas devrait être plus facile qu'avec des tuiles ou des icônes. Les cartes peuvent même se réorganiser si nécessaire.
Les vignettes sont davantage un outil de navigation, tandis que les cartes sont davantage un outil de contenu.
Tuiles, cartes, widgets, gadgets, grilles - le nom n'a pas d'importance. Ce qui compte, c'est la fonctionnalité et le principe.
Soyez très prudent de créer une méthode d'interface qui force tous les contenus et fonctionnalités dans une manière de travailler trop cohérente. La cohérence peut rendre les choses jolies et est vitale, jusqu'à un certain point.
L'astuce consiste à savoir quand ce que vous faites a besoin d'une nouvelle façon de le faire.
Par exemple, j'ai vu de nombreux sites Web et intranets qui utilisent inutilement l'approche "widget" pour permettre à l'utilisateur de créer des pages lui-même. Il a échoué pour la BBC et Google et je ne l'ai pas encore vu fonctionner efficacement pour n'importe quelle entreprise - peu importe le nombre de fois où des entreprises et des utilisateurs UX moins expérimentés l'utilisent.
L'utilisation de "tuiles" pour présenter des "articles similaires" est, en revanche, une pratique courante. Souvent, il s'agit simplement d'une vue de grille (bien qu'il soit préférable de ne pas l'exposer aux utilisateurs). La plupart des sites de commerce électronique l'utilisent. Une vue en mosaïque sur des sites comme pinterest n'est qu'une vue en grille avec des hauteurs verticales variables. Le principe sous-jacent reste le même mais la présentation est peaufinée dans le bon sens.
J'espère que ça aide.
Les carreaux conviennent mieux aux types d'éléments homogènes (comme la galerie d'images) sans aucun espace entre eux, par exemple des images. Les utilisateurs peuvent facilement comparer des articles en raison de la continuité visuelle. Cependant, les cartes sont meilleures pour les éléments hétérogènes, dont l'espace entre les éléments donne aux utilisateurs l'impression de traiter avec des éléments différents/uniques lorsqu'ils défilent de haut en bas.