Marquage intuitif de la boîte comme boîte extensible
J'ai conçu un site avec plusieurs boites (qui se situaient l'une sous l'autre). Chaque boîte contient des informations sur un sujet spécifique - un titre (le nom du sujet) et un texte (l'explication de ce sujet).
Dans l'état initial, la boîte affiche uniquement le titre du sujet. Cliquer sur la case développe le texte d'explication (avec un effet de diapositive).
Comment illustrer cette boîte en tant qu'extensible qui contient également l'explication du sujet du titre de la boîte?
Je veux que ce soit intuitif et que les gens comprennent immédiatement que tout ce qu'ils doivent faire pour obtenir l'explication est de cliquer sur la case.
Avant le clic:
Après le clic:
Il existe différentes manières de concevoir cela.
- La 1ère option présente un inconvénient: l'utilisateur peut penser qu'il est dirigé vers une autre page
- 2ème option plus intuitive que les autres. L'icône pourrait également être dans le coin inférieur droit
- La troisième option a également un inconvénient: l'utilisateur peut penser que la boîte va s'étendre à tout l'écran
À mon avis, ce qui est le plus important sont les événements de curseur . Cela signifie que lorsque l'utilisateur survole l'élément cliquable, le curseur passe de "flèche" à "main" .
Pensez à afficher la première ligne de texte "contenu" à l'écran, ainsi qu'un lien pour en savoir plus.
Cela donnera à l'utilisateur un contexte supplémentaire pour décider s'il veut réellement lire plus, et rendra très évident qu'il y a plus à lire.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Solution 1:
Vous pouvez implémenter le + icône à côté de la boîte extensible. http://fontawesome.io/icon/plus-square-o/
Image:
Avantages:
Ce sera une illustration utile pour les utilisateurs comme
+connu comme son attribut expand.Un autre avantage est qu'il gardera votre site propre.
cliquable comme vous le souhaitez
Solution 2:
Utilisez Facebook See More tour.
Pensez à changer le texte en Expand lors de l'expansion et Collapse lors de la réduction.
Image:
Avantages:
Cette expérience utilisateur est déjà connue de nombreux utilisateurs sur le Web.
Cela reste simple.
cliquable comme vous le souhaitez
Mon approche préférée pour signaler ce type d'affection est une flèche orientée vers le bas.
emprunté au Web, ignorez le texte rouge XD 
C'est un bon signe que quelque chose sera affiché sous la flèche lorsque vous cliquez dessus.
Bien que l'utilisation de quelque chose comme un "+" soit un modèle de conception courant, sa signification est plus complexe. Vous êtes sûr d'attirer l'attention de l'utilisateur et d'obtenir un clic, mais le résultat peut être inattendu.
Je m'éloignerais de "Lire la suite". À moins que vous ne prévisualisiez déjà une partie du corps du texte, cela pourrait être déroutant. En savoir plus sur quoi? Est-ce un article? Il n'y a pas assez de contexte pour que cela ait un sens.
Bonne chance!!
btw - Je ne sais pas si vous le faites déjà, mais la recherche montre que le texte justifié à gauche est plus lisible dans la plupart des scénarios.