web-dev-qa-db-fra.com

Quelle est la largeur optimale d'une carte? Et réactif?

Tout d'abord, je sais que cela dépend du contenu. Et après avoir lu sur ux.se, des blogs et des sites Web d'observation; les résultats sont bien moindres.

Ce que j'ai trouvé jusqu'à présent:

  • Le texte est lisible au mieux ~ 100 caractères (comme ux.se), mais les gens préfèrent 50-75 (comme les sites Web populaires comme Facebook, Google)
  • Les cartes doivent être aussi petites que possible

Ces 2 sont déjà difficiles. Google+ affiche entre 50 et 80 caractères sur la carte, principalement en fonction de la taille de l'écran (ils ont trois tailles de carte différentes). Ils utilisent 13px Arial, ce qui est assez petit. Au moins selon cela article de smashingmagazine propose d'utiliser au moins 16px. La grande taille de police coïncide-t-elle même avec les motifs des cartes?

Heureusement dans ma position, je n'ai généralement pas de texte long. C'est un logiciel d'entreprise et nous utilisons beaucoup de champs de données, courrier, nom, etc. Et c'est le problème: la longueur du champ de données est imprévisible. Combien de temps peut durer une adresse e-mail? La taille de la carte doit-elle être conçue pour s'adapter à 99% de toutes les occurrences? Pour le 1%, utilisez la troncature?

3 examples of cards

Et qu'en est-il de la réactivité?

Si la carte:

  • garder toujours la même largeur (comme décrit dans Material Design)
  • s'adapter à la taille de l'écran (largeur min et largeur max, en fonction de l'espace disponible et de l'adaptation du reste de l'interface utilisateur)
  • en utilisant une quantité de tailles fixes comme google + (360px, 440px, 520px)

Existe-t-il des directives, des meilleures pratiques et des réflexions supplémentaires?

2
Gustav

Je suis tout à fait sûr qu'il n'y a pas de taille de carte "optimale", car comme vous le dites, cela dépend du contenu et de nombreux facteurs.

Par exemple, les cartes contenant des titres de journaux obtiendront de meilleurs résultats avec des rapports d'aspect différents que les cartes contenant des miniatures photographiques (par exemple pinterest).

Et pour les sites où l'attention de l'utilisateur est dirigée vers un récit ciblé (par exemple, des bandes dessinées ou une collection organisée), les cartes peuvent être formatées de sorte que l'œil de l'utilisateur se déplace linéairement à travers la collection. Pour d'autres sites (par exemple Amazon, ebay), l'accent est mis sur la découverte, les cartes seront donc disposées et formatées pour promouvoir une large numérisation.

Donc ma réponse ferme est: il n'y a pas de largeur de carte optimale.

Ce qui peut être constructif, c'est:

  1. Apprenez (en observant et en lisant) les relations entre les objectifs UX et le format et la disposition des cartes. par exemple l'alignement spatial et de la grille, le paradoxe du choix, l'espace respiratoire, le balayage linéaire vs brownien, etc.

  2. Créez une hiérarchie claire de vos priorités UX (voulez-vous transmettre un récit ou une collection, voulez-vous que les lecteurs voient le titre ou l'image en premier?)

  3. Concevez en associant # 1 à # 2, puis répétez rapidement.

La conception de mises en page de cartes est très difficile, car les cartes ont tendance à représenter plusieurs hiérarchies complexes d'informations sur une seule page. Il est donc très difficile d'exprimer une bonne UX avec ces contraintes. Cela devient encore plus difficile si les cartes doivent être interactives.

Il n'y a donc pas de largeur ou de méthode optimale unique pour bien concevoir la carte. Même la conception matérielle de Google décrit un ensemble d'outils et de principes plutôt qu'une prescription sur la façon de disposer les cartes, et Google lui-même n'a pas opté pour une seule largeur pour ses dispositions de carte (comparer les cartes dans Google Now, Keep, Maps, Plus, etc. .).

1
tohster