Cartes inversées, bonne ou mauvaise idée?
Je souhaite implémenter des cartes d'inversion sur mon site Web, car elles sont superbes et permettent à l'utilisateur de voir plus d'informations sur le survol.
Cependant, j'ai commencé à penser que c'était une mauvaise idée car au lieu que l'utilisateur puisse aller sur le lien et cliquer dessus, il faudrait attendre que la carte soit retournée, puis trouver un lien comme> plus et ensuite seulement cliquer dessus.
Voici une idée:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Désolé de répondre à ma propre question, mais j'ai trouvé cette solution qui résout le problème empêchant l'utilisateur de cliquer directement sur le lien:
avant et arrière:
maintenant seulement les flips supérieurs, laissant le nom de l'artiste/lieu constant et toujours disponible pour cliquer, et je peux également éviter de placer un bouton> plus à la fin de la liste.
J'envisagerai de placer une icône de retournement bien que j'imagine que l'utilisateur peut apprendre assez rapidement qu'elle est là et sinon il ne perdra aucune information importante.
De mon point de vue, il n'y a pas beaucoup de différence entre retourner la carte ou la fenêtre contextuelle affichant plus de détails. Donc, oui, c'est une bonne idée tant que c'est juste un effet de transition et n'affecte pas négativement la convivialité.
Avantages que vous obtenez:
Vous pouvez emballer plus de cartes dans une seule vue (bien sûr: éviter les excès), et canaliser les actions des utilisateurs de la sélection de l'artiste à l'accès aux informations sur le spectacle.
L'interface devient plus clair, car vous évitez d'avoir toutes les données de spectacles affichées pour tous les artistes.
Les inconvénients qui l'accompagnent sont que, selon le comportement des utilisateurs, il peut être important pour eux de cliquer rapidement sur les spectacles de plusieurs artistes - dans ce cas, masquer ces liens de l'autre côté d'une carte sera entraîner une mauvaise UX.
La vraie question ici est donc de savoir si l'utilisateur s'attend à voir les données de spectacles pour plusieurs artistes ou juste pour un ou deux, et si - sur la base de ces connaissances - vous devez (ou non) masquer les détails au début, faisant cliquer l'utilisateur pour accéder aux détails. Mais la réponse à cette question réside dans la connaissance des attentes et du comportement des utilisateurs.
Concernant l'implémentation elle-même, n'oubliez pas de:
- indiquer clairement que la carte est retournable
- fournir un moyen de revenir à la vue de toutes les cartes visibles depuis le côté "supérieur"
- changer les liens en fonction de la carte sélectionnée (vous pouvez le faire en utilisant javascript; cela permettra aux utilisateurs de partager un lien direct vers les cartes retournées).
Vous voudrez peut-être envisager d'implémenter une icône de retournement (qui ressemble à un coin plié) dans le coin inférieur droit des cartes, ce qui provoque le retournement des cartes à chaque clic et pendant le survol, retournez temporairement pendant la durée du survol.
Usage:
Si vous survolez la carte, vous pouvez voir l'autre côté, puis voir le côté précédent lorsque vous enlevez la souris.
Si vous ne pouvez pas survoler la carte, par exemple parce que vous utilisez un écran tactile, vous pouvez cliquer sur l'icône de pliage d'angle pour voir l'autre côté, puis cliquer à nouveau dessus pour revenir en arrière.
Cela garantit que les utilisateurs de la souris et de l'écran tactile peuvent profiter d'une expérience similaire et le symbole de pli dans le coin aide les utilisateurs à survoler ce qui va se passer/s'est passé afin qu'ils ne soient pas surpris par le survol de la carte.
Le site doit pré-charger les côtés inversés (par exemple, les inclure dans HTML comme masqués), à la fois pour éviter les retards de clic/survol et pour ne pas casser le référencement.
Tenez compte du fait que si la carte a été retournée par un clic sur le coin, le survol de la carte doit la retourner pendant la durée du survol.
Vous pouvez également envisager d'ajouter tout afficher en tant qu'images, tout afficher en tant qu'informations, tout afficher en tant que les deux (les deux côtés, côte à côte). Les deux premiers permettent aux utilisateurs de réinitialiser tous au même état (images ou informations) et le second de voir les deux côtés à la fois (affichant ainsi la moitié du nombre de cartes par ligne - double les lignes).