web-dev-qa-db-fra.com

Le défilement dans une carte est-il bon ou mauvais? (Sur le bureau)

Je conçois une vue de carte qui a une conception de carte avec d'énormes données. Donc, j'utilise le défilement dans une carte. Est-ce une bonne expérience utilisateur ou existe-t-il une meilleure solution?

scroll within a card

32
jyo
  • Bureau: vous pouvez utiliser les méthodes de développement et de défilement .

Selon Material Design :

Sur le bureau, le contenu de la carte peut s'étendre et défiler en interne

enter image description here


  • Mobile: N'utilisez pas de parchemin à l'intérieur de la carte, développez-la à la place .

Les collections de cartes défilent uniquement verticalement.

Le contenu de la carte qui dépasse la hauteur maximale de la carte est tronqué et ne défile pas, mais la carte peut être étendue. Une fois dépliée, la carte peut dépasser la hauteur maximale de la vue. Dans ce cas, la carte défilera avec la collection de cartes.


Oui.

Les cartes peuvent être développées pour révéler plus de contenu, sans utiliser le défilement.


Ne pas

Sur mobile, évitez de placer de l'espace de défilement dans une carte, car cela pourrait entraîner l'affichage de deux ensembles de barres de défilement, s'il y en a déjà un.

32
Alvaro

Je peux voir que vous essayez de placer deux parchemins dans une seule vue. Ce n'est pas préférable, c'est contre Affordance. Il pourrait y avoir deux événements qui se produisent, il y a beaucoup de chances que les utilisateurs se trompent pendant le défilement (balayage). Il y aurait également une secousse soudaine en cas de changement d'événement. Essayez d'aller pour les onglets. J'espère que cela t'aides !!! À votre santé

5
Harshith

Nous parlons toujours de contexte avec la conception UX (le facteur "ça dépend"), donc il y a probablement des moments où il est approprié d'introduire le défilement dans les cartes.

Dans ce cas, vous avez mentionné qu'il s'agit d'un tableau, donc je suppose qu'il y aurait beaucoup de cartes à l'intérieur disposées dans un certain ordre, et que vous utilisez le défilement comme moyen de garder la taille des cartes cohérente. Cependant, cela semble se faire au détriment de l'utilisateur car la façon dont vous avez structuré et présenté le contenu des cartes rend écrasante pour les utilisateurs d'avoir à traiter autant d'informations (imaginez simplement regarder 5 à 10 de ces cartes sur un page).

Le moyen idéal pour créer une architecture d'informations claire et logique consiste à examiner le niveau et la profondeur des informations que vous présentez dans chaque carte ou type de carte, et à voir si vous pouvez trouver le bon niveau où vous fournissez suffisamment d'informations aux utilisateurs pour numérisez sur une carte et laissez-les explorer les informations en les dirigeant ailleurs plutôt qu'en essayant de faire défiler et de travailler dans les cartes quand il y a tellement d'espace sur un bureau.

Par exemple, vous souhaiterez peut-être simplement fournir les trois principales mesures de croissance, et si un utilisateur clique sur comme un lien Afficher plus, il peut être redirigé vers une page d'informations détaillées sur l'entreprise, ou peut-être même une page où les entreprises sont triées. et comparé par ces mesures (cela dépend simplement de ce que l'utilisateur veut vraiment faire, ou de la façon dont vous souhaitez qu'il utilise les informations). Je pense que ce sont de bons exemples de structurer les données et de les aligner sur les tâches que les utilisateurs pourraient vouloir effectuer plutôt que de simplement les écraser à la première étape.

4
Michael Lai

Faire défiler cette carte avec tout ce petit type pourrait rebuter les utilisateurs.

Avez-vous envisagé de disposer d'un bouton "Plus d'informations" pour l'utilisateur, puis de faire évoluer la carte verticalement pour contenir les informations supplémentaires? Dans Material Design, cette extension inclurait généralement l'augmentation de l'indice z et de l'ombre de la carte pour indiquer qu'elle est étendue. Taper n'importe où sur la carte la renverrait à sa vue par défaut.

Alternativement, vous pouvez augmenter la hauteur de la carte en cliquant sur un lien "Plus" qui glisserait vers le bas les données supplémentaires.

3
Eric Stoltz

Permettez-moi de vous expliquer cela avant de concevoir. Posez ces questions avant de passer à votre Photoshop ou tout ce que vous utilisez ...

  1. Conception pour ordinateur de bureau
  2. Va-t-il être réactif pour qu'il soit également visible sur mobile?
  3. Est-il nécessaire de montrer d'énormes informations à l'intérieur d'une seule carte?
  4. Êtes-vous sûr de votre architecture d'information?
  5. Êtes-vous sûr de votre choix de disposition?

Deux choses supplémentaires

  1. Prenez-vous une décision de conception UX?
  2. Ou prenez-vous quelqu'un d'autre ux pour concevoir l'interface utilisateur?

Maintenant, il est temps de répondre à votre question

Mais la première chose d'abord. Si vous ne prenez pas de décision de conception UX et ne participez qu'à l'exercice de conception UI, il vous sera difficile de convaincre d'autres personnes de votre décision de conception UI.

D'accord! permet de passer à votre conception.

Bureau uniquement - Est-ce que cela ne fonctionnera que sur le bureau, pas sur mobile? Si oui, vous pouvez procéder ainsi. Bien que ce soit toujours une mauvaise décision de conception. Je vous en parlerais plus en bas.

Responsive ui - Si non, alors c'est sûrement une mauvaise décision de conception. "Sur mobile, évitez de placer de l'espace de défilement dans une carte, car cela pourrait entraîner l'affichage de deux ensembles de barres de défilement, s'il y en a déjà un." - directives de conception des matériaux

Pourquoi avez-vous besoin de mettre autant d'informations sur cette petite carte? Si vous devez le faire, c'est le signe d'une mauvaise conception de l'architecture de l'information. Vous n'avez pas beaucoup réfléchi à la structuration de votre hiérarchie d'informations.

Pourquoi avez-vous besoin de cartes lors de la mise en page? es-tu en train de dessiner un tableau de bord ou quelque chose comme ça? Si oui, il vaut mieux penser à autre chose. Les cartes sont bonnes mais bonnes pour les mobiles. Ils sont censés avoir une action tout comme l'expansion, le licenciement ou une autre sorte de CTA. Bien qu'ils semblent bons comme l'interface utilisateur sur le bureau, mais en termes d'expérience, ils ne sont pas aussi bons que prévu, car les cartes sont utiles lorsque vous n'avez pas plusieurs colonnes. Par exemple, Facebook a une interface utilisateur de carte, mais il n'a qu'une seule colonne de cartes, ce qui est bien. Je suppose que vous auriez plusieurs colonnes de cartes, non? Si oui, alors vous devez penser à autre chose. Ne laissez pas l'effet de dribble manger. Les interfaces utilisateur sur Dribble sont agréables à regarder mais pas utilisables.

Aussi, si ce n'est pas dans votre main de prendre une décision à ce sujet, allez-y. Je proposerai quelques améliorations. Tout d'abord, ne placez la vue de défilement nulle part sur la carte, ni sur le bureau ni sur le mobile. Utilisez plutôt un CTA comme pour cliquer pour développer dans la même vue ou ouvrir une fenêtre modale pour afficher des informations complètes. Choisissez ce que vous pensez qui convient le mieux à votre application.

Je vous donnerais probablement un meilleur aperçu si vous nous avez montré une interface utilisateur en plein écran.

3
B L Λ C K