Comment rendre les objets / éléments de forme irrégulière cliquables?
Sur notre page d'accueil, nous avons ces éléments de forme irrégulière qui sont cliquables au-dessus du pli (les images réelles ne sont pas des chats, juste pour la démonstration):
http://codepen.io/aguerrero/pen/pgvJoa
Et voici comment cela est présenté sur la page d'accueil:
Le problème est que les éléments de forme irrégulière (flèches) ressemblent à des images et ne sont pas cliquables. Ce n'est pas une façon typique de naviguer dans le contenu.
Comment puis-je faire en sorte que les images semblent pouvoir interagir avec elles en cliquant dessus? Ils ont déjà des effets de survol, mais cela n'apparaît que lorsque vous survolez les images.
Vous ne devez PAS compter sur les états de vol stationnaire.
Même si vous ne développez pas de site Web réactif, maintenant que nous avons des appareils tactiles, les jours où l'on comptait sur les états de vol stationnaire pour supposer une "interactivité" sont révolus. Je pense que vous avez 3 options ici:
1. Tant que vous n'avez pas d'autres animations, mouvement subtil est tout ce dont vous avez besoin pour attirer l'attention sur l'interface utilisateur et un utilisateur supposera probablement qu'il peut interagir avec eux.
Exemple:
2. Demandez explicitement à l'utilisateur de cliquer/toucher sur les éléments.
Exemple:
3. Embrassez la réalité que votre goût esthétique ici peut ne pas être le meilleur choix de conception, et explorez des alternatives qui correspondent mieux à vos objectifs et aux attentes de l'utilisateur.
NNG a un excellent article sur Rendre les éléments cliquables reconnaissables spécifiquement pour les images:
- Assurez-vous que les images plus petites s'agrandissent lorsque vous cliquez dessus.
- Rendez tous les éléments (par exemple, image, icône, texte) associés les uns aux autres cliquables. Cela augmente la taille cible et améliore la probabilité de capturer un clic voulu.
- Évitez les appels multiples à l'action pour une image donnée à moins que les options de cette image ne soient clairement présentées, comme une liste à puces d'hyperliens ou des boutons clairement étiquetés.
Je pense que vos effets de survol sont un bon début et je pense que vous recherchez des signifiants qui aident les utilisateurs à comprendre intuitivement que ces images sont cliquables. Selon l'âge de votre public et d'autres données démographiques et objectifs du site, il peut être plus ou moins avantageux d'ajuster la conception pour ressembler davantage à des boutons ou de poursuivre votre stratégie.
Par exemple, NNG rentre dans les détails des millennials vs autres groupes dans Millennials as Digital Natives: Myths and Realities , Page Parking: Millennials 'Multi-Tab Mania , et enfin référence la capacité pour déterminer les éléments cliquables dans Exposition à long terme à la conception plate: comment la tendance diminue lentement l'efficacité de l'utilisateur
... les jeunes utilisateurs adultes (âgés de 18 à 30 ans) semblent en fait mieux que les adultes plus âgés à détecter les éléments cliquables, même lorsqu'ils ont des signifiants absents ou faibles - en particulier, les jeunes adultes identifient plus rapidement les cibles possibles.
Il y a plusieurs raisons possibles à ce phénomène, et toute combinaison de celles-ci peut être vraie.
- Les jeunes adultes peuvent être plus sensibles aux indices de placement subtils.
- Les jeunes adultes peuvent avoir été plus fréquemment exposés à des interfaces plates ou à d'autres interfaces plus exploratoires (comme les jeux).
- Les jeunes adultes peuvent mieux reconnaître les éléments qui ont tendance à être cliquables et apprendre rapidement de nouveaux modèles de conception.
Et continuez à souligner:
- Nous vous recommandons de toujours utiliser une certaine quantité de signifiant visuel sur les éléments cliquables - que vous souhaitiez utiliser des signifiants conventionnels forts tels que les liens bleus ou des signifiants plus subtils et faibles (tels que les boutons fantômes). Quelle que soit l'esthétique de conception que vous choisissez, suivez nos consignes pour signaler ce qui est cliquable. Communiquer clairement sur la cliquabilité est bon pour donner aux utilisateurs le sentiment de contrôler, mais cela peut également les encourager à prendre des mesures dont ils ne pourraient pas se rendre compte qu'ils sont disponibles.
- Pour les éléments et fonctionnalités principaux, n'utilisez pas le survol comme le seul moyen de révéler un signifiant. L'utilisation des signifiants survol peut être appropriée pour le contenu secondaire quand ils correspondent naturellement dans le flux de travail d'un utilisateur. Par exemple, sur les sites de commerce électronique, une icône de loupe subtile qui apparaît dans le coin d'une image de produit lorsque les utilisateurs la survolent renforcera leur attente qu'un clic sur l'image l'agrandisse.
- Si vous choisissez de laisser les signifiants visuels à l'écart de l'attrait esthétique, assurez-vous de fournir une rétroaction forte. Une rétroaction immédiate et perceptible est toujours nécessaire pour l'utilisabilité, mais elle devient encore plus critique lorsque les utilisateurs ne sont pas sûrs de savoir ce qui est cliquable. Lorsque les utilisateurs cliquent sur quelque chose avec incertitude, ils commencent immédiatement à chercher l'assurance qu'ils ont fait le bon choix.
- Comme toujours, vos décisions doivent être influencées par les caractéristiques de vos utilisateurs. Si vous concevez pour des utilisateurs plus jeunes, ils peuvent être mieux en mesure de comprendre les choses sans signifiants cliquables forts - soyez simplement prêt à accepter les conséquences de faire en sorte que vos utilisateurs se sentent moins "en contrôle" de l'interface. Et, comme toujours, la meilleure façon de savoir comment vos utilisateurs géreront réellement votre interface est par le biais de la recherche et de l'analyse des utilisateurs.
- Méfiez-vous des indices contextuels dans votre interface. Il ne suffit plus de ne pas souligner un titre pour communiquer qu'il n'est pas lié. Les utilisateurs sont désormais plus susceptibles de cliquer sur des éléments sans signifiants, car vous pouvez parier qu'ils se sont heurtés à une situation dans le passé où ce même élément n'avait aucun signifiant mais était cliquable de toute façon.
Donc, tout cela pour dire tout d'abord de considérer les risques de votre base d'utilisateurs et s'ils ne pourront pas reconnaître l'élément cliquable s'il est strictement sous forme de lien ou de bouton. Si vous décidez que vous souhaitez continuer votre conception, certaines idées de signifiants sont le verbiage intégré à la conception des images comme appel à l'action, ou des éléments de skeuomorphisme tels que les ombres portées (ce n'est pas ma solution préférée mais c'est une option ).
Mis à part les signifiants initiaux, les éléments tels que votre effet de survol sont très utiles. Je suggère de vous assurer que vous n'utilisez pas d'images délavées ou d'images qui répètent l'effet de flèche/grille dans votre site qui ne sont pas interactives afin que les utilisateurs ne les confondent pas. Une autre idée serait d'ajouter une transition d'animation supplémentaire mais très subtile à l'effet de survol pour le rendre vraiment apparent pour ceux qui pourraient souffrir d'une mauvaise vision des couleurs. Quelque chose d'aussi simple que d'agrandir les images comme suggéré par NNG pourrait suffire. Étant donné que vous avez créé un exemple de code, vous avez probablement une bonne idée des effets disponibles, mais j'ai utilisé ce site pour obtenir des idées Hover.css site pour des idées.
Ces images ne ressemblent tout simplement pas à la navigation (comme vous l'admettez) et ne seront pas perçues comme telles. Les utilisateurs ne s'attendent tout simplement pas à ce que les images aux formes étranges soient cliquables. Je ne pense pas qu'il existe de solution magique pour surmonter cela.
Il peut être utile de repenser votre conception afin de mieux se conformer aux attentes des utilisateurs plutôt que d'essayer de mettre un pansement sur le problème. Notez qu'il existe deux façons de procéder:
- Changer les images en rectangles conventionnels qui sont beaucoup plus susceptibles d'être perçus comme cliquables.
- Gardez le design de la flèche, mais ne le placez pas au centre de votre navigation. Laissez l'autre navigation servir de méthode principale pour accéder à ce contenu (dans ce scénario, les images peuvent toujours être cliquables, mais vous n'aurez pas à vous fier aux utilisateurs qui le découvrent).
Movement pourrait vous fournir une option. L'œil humain y est si sensible qu'il n'a besoin que d'être subtil. À la fin du chargement de la page, vous pouvez envisager une augmentation continue de la taille de l'image et de la profondeur de l'ombre sur chaque image, à travers le chevron de droite à gauche.
Cela attirerait l'attention d'un utilisateur sans avoir à "ressentir" le site. Vous appliquez ensuite le même mouvement en vol stationnaire. Avec le changement de souris en pointeur, je pense que 95% des utilisateurs auraient l'idée.
Survol
Mettre en évidence le vol stationnaire vaut la peine d'être fait, mais, comme vous l'avez découvert, ce n'est pas suffisant en soi, car l'utilisateur doit faire un effort pour "sentir" l'interface pour voir ce qu'elle peut faire, plutôt que de simplement la regarder. Les effets de survol ne font pas grand-chose pour les utilisateurs de tablettes.
"Flèches rectangulaires"
Si vous êtes sûr que le problème est la forme non rectangulaire, travaillez avec la conception visuelle pour combiner la rectangulaire et la flèche dans une seule forme acceptable. Une alternative est tout simplement:
Un autre plus proche de votre conception originale "panée" est
Bordures
Si le problème n'est pas tant la forme non rectangulaire, ou si vous ne pouvez pas proposer de solutions visuellement acceptables qui incorporent des rectangles, vous pouvez essayer d'incorporer des bordures statiques autour de vos images cliquables. Une bordure "surélevée" donnera aux images un aspect déprimable en forme de bouton qui peut encourager le clic. Ceci est en fait préféré si les "liens" initialisent réellement une action (comme "acquérir un minou") plutôt que de simplement afficher des informations. Donc, quelque chose comme:
Il existe également l'ancienne norme pour définir les images cliquables avec la même couleur que celle utilisée pour les liens. Cela pourrait encore fonctionner, surtout si la couleur de votre lien est une nuance de bleu. En voyant des liens de texte sur la page (par exemple dans le bloc "navigation typique"), les utilisateurs peuvent généraliser que l'utilisation de la même couleur signifie que les formes sont également des liens. Cela pourrait donc ressembler à:
Texte
Si aucune solution graphique n'est acceptable, vous pouvez inclure du texte avec les images (dans ou sous celles-ci) et les rendre visuellement des liens (colorés et soulignés). Le texte pourrait être une étiquette pour ce que fait le lien ou les liens vers, ce qui peut être nécessaire car souvent les images ne sont pas suffisamment explicites. Pire cas, utilisez une étiquette générique comme "Étape 1". Même une simple instruction comme "(cliquez)" aiderait, bien que ce soit plutôt klugey.
Au début, les utilisateurs cliquent simplement sur le texte, ce qui les empêche au moins de rester coincés. Une fois qu'ils ont cliqué pour la première fois, ils verront l'image entière s'allumer, ce qui leur indiquera de cliquer sur l'image (plus facile à cliquer) la prochaine fois.
Questions et réponses similaires
Comment indiquer qu'une image est aussi un lien?
Comment puis-je indiquer qu'un sous-ensemble d'icônes n'est pas cliquable?
Selon nos amis ici à UX.SE, je suggère d'utiliser une ombre portée.
Elle repose peut-être sur le fait qu'elle est entourée de liens de toute façon - mais ils indiquent qu'il y a quelque chose de "spécial" dans l'image en ajoutant une ombre portée.
Ce n'est pas très différent de celui de Michael Zuschlag réponse , mais transformer une image en bouton ne me semblait pas correct.
Une ombre portée n'aura pas trop d'impact sur votre conception actuelle.
J'ai fait un maquette SVG dans codepen basé sur le vôtre
"Comment puis-je faire en sorte que les images donnent l'impression que vous pouvez interagir avec elles en cliquant dessus?"
Réponse: Non. Cette réponse est déjà donnée par @ dan1111 mais j'aime ajouter ce qui suit:
Est-ce vraiment un problème? Alors repensez votre navigation. Si vous ne l'utilisez pas comme navigation "fonctionnelle", il n'y a pas de vrai problème ici tant que la navigation "réelle" le sauvegarde. Dans ce cas, vous pouvez laisser les flèches comme quelque chose à découvrir (comme un œuf de Pâques) .