web-dev-qa-db-fra.com

Comment indiquer qu'une carte est extensible?

Actuellement, je travaille sur une application qui utilise une "liste" verticale de cartes, un peu comme Google Now. Ces cartes peuvent contenir du texte statique, de (petites) images et certains éléments de contrôle (boutons, etc.), ou une combinaison de ces éléments.

Maintenant, certaines cartes peuvent contenir des informations ou des boutons supplémentaires, que nous voulons afficher lorsqu'un utilisateur développe la carte en tirant vers le bas le bas de la carte. Similaire à l'expansion des notifications Android. Cependant, comment pouvons-nous indiquer correctement que certaines cartes sont extensibles, tandis que d'autres ne le sont pas?

Une maquette rapide de la mise en page: enter image description here

13
Jelle

lien "afficher plus" (près du bas)

La façon la plus simple et la plus claire de le faire est d'utiliser un lien clairement identifié ...

show more

Si le lien est là, je sais qu'il y a des choses qui ne sont pas affichées.

Lien "développer la carte/réduire la carte" (dans le coin supérieur droit)

Si vous pensez que vos utilisateurs voudront à la fois afficher et masquer le contenu supplémentaire, assurez-vous que le lien pour ce faire est fixé en haut. Le texte du lien doit changer mais ne pas bouger lorsque vous cliquez dessus afin que l'utilisateur n'ait pas à chercher un moyen de rétrécir la carte comme elle l'a été après l'avoir développée.

C'est bien de ne pas avoir ce lien sur chaque carte si la plupart d'entre elles tiennent dans un espace raisonnable.

16
DaveAlger

J'ai vu des chevrons devenir populaires pour des choses comme ça. Grandes zones grasses faciles à presser, le long des pieds de page latéraux avec une ellipse. Symboles assez familiers qui impliquent un contenu extensible sans avoir à lire.

enter image description here

26
Andrew Hoffman

J'ai voté pour le poste de DaveAlger parce que je pense que c'est le plus simple et le plus clair.

Je pensais que je mentionnerais une idée que j'avais en considérant cela. Il ressort des proportions de votre maquette qu'il s'agit d'une application téléphone/tactile. J'avais imaginé un Zip horizontalement sur chaque carte qui permettait de faire glisser l'attache pour ouvrir le Zip et révéler le contenu de la carte. Cela ne fonctionne pas vraiment une fois le Zip ouvert et le contenu supplémentaire affiché car les deux parties du Zip ne sont plus attachées. Mais j'ai pensé que ce serait amusant à faire, étant donné le contenu approprié (magasin de vêtements/couture).

3
Bernhard Hofmann

Ce qui suit fonctionnerait (le signe plus pourrait être déplacé vers la droite ou la gauche vers le contenu). De plus, vous avez mentionné la liste comme des "cartes", donc si vous voulez déclencher l'expansion/l'effondrement au toucher de la carte entière, ce sera suffisamment visible.

enter image description here

Stylo à code ci-dessous

http://codepen.io/pdjarratt/full/miswr/

3
Balaji Natarajan

Une troisième façon serait d'avoir une partie d'une image ou la moitié supérieure d'un texte au bas de la carte, de sorte que l'utilisateur voit qu'il y a plus d'informations sur la carte.

1
Voxwoman
  1. Épelez-le avec "afficher plus" ou un autre texte comme indiqué par une autre réponse. Pour une page avec de nombreux articles, je trouve que cela commence à être encombré pour dire que sur chaque article et n'est pas très élégant. Il fait cependant le travail.

  2. Ajoutez un indicateur pour plus comme un "+", une flèche vers le bas ou "..." à la fin de la dernière ligne.

  3. Affichez les premières lignes du contenu supplémentaire et masquez le reste à travers un dégradé ou en le coupant clairement.

  4. Rendez l'élément cliquable. Les possibilités interactives ont beaucoup à voir avec leur apparence, il vaut donc vraiment la peine de consulter un concepteur visuel.

  5. Ajoutez des effets de survol (utiles pour le bureau uniquement), surtout si vous avez une page couverte avec ces éléments, cela rendra leur déclenchement très probable.

J'essaie généralement d'aller avec une combinaison de 2, 3 et 5

1
skwokz