Identifier différents types de formes cliquables?
Nous créons une application qui ressemble à un organigramme interactif. Lorsque les utilisateurs consultent l'organigramme, ils peuvent interagir avec certaines formes:
- Lien vers un autre organigramme.
- Lien vers un fichier externe
- Une fenêtre contextuelle qui affiche plus de détails lorsque vous cliquez dessus.
Le problème que j'ai rencontré est de savoir comment identifier correctement que les formes sont cliquables et aussi quelle action se produit lorsque vous cliquez dessus.
Ce sont nos idées actuelles:
Lien vers l'organigramme:
Lien de fichier externe:
Pop Up:
Nous ajoutons également le curseur du pointeur lorsque vous survolez la forme. Cependant, j'ai vraiment du mal à les accepter comme très intuitifs et clairs. FWIW - chaque forme peut également avoir une géométrie (rectangle, diamant et ellipse) et une couleur différentes.
J'apprécierais également des suggestions pour de meilleures icônes.
Ces petits marqueurs dans les coins sont très subtils - il m'a fallu un certain temps pour comprendre qu'il y avait des différences entre eux.
Je vous suggère fortement de modifier la façon dont vous marquez les liens en procédant comme suit:
- Les icônes elles-mêmes sont de bons choix, mais elles sont très petites et ne sont pas visibles. Je suggère en augmentant leur taille, et peut-être même en les laissant avoir des couleurs différentes.
- tilisez la couleur pour indiquer une différence. Peut-être en donnant aux arrière-plans des couleurs différentes. Si vous allez utiliser des images, envisagez d'avoir une bordure différente pour chacune.
- Enfin, s'il s'agit d'une application uniquement pour PC (c'est-à-dire pas de mobile), ajoutez un plus grand masque sur les images lorsque quelqu'un survole qui indique cela. Mais utilisez-le en plus des icônes, sinon quelqu'un devra survoler avant de savoir de quoi il s'agit.
Premièrement, je ne suis pas intéressé par les icônes actuelles. L'image du lien hypertexte est reconnaissable, mais les autres sont assez difficiles à identifier. L'icône de l'organigramme peut facilement apparaître comme une icône contextuelle et vice versa; Je pense que ceux-ci ont encore besoin de travail.
Deuxièmement, vous pouvez essayer d'ajouter de la générosité aux formes en ombrant l'arrière-plan, en les soulevant avec une légère ombre à paupières, en leur donnant une courbure avec un dégradé subtil et en utilisant un effet de survol plus visible (généralement en appuyant partiellement sur le bouton ou en l'ombrageant un peu). Vous pouvez également donner des effets de profondeur à la bordure, généralement en ajoutant une ombre portée blanche pour créer un effet de retrait (ne fonctionne que sur les arrière-plans non blancs). Enfin, sur mobile, vous pouvez également essayer d'utiliser une ombre intérieure sur la forme pour aider à indiquer la `` pressabilité '' (c'est ainsi que les boutons CTA fonctionnent dans l'App Store iOS).
Vous voudrez peut-être envisager que les icônes apparaissent en dehors de la forme de l'organigramme et deviennent plus importantes (remplies ou colorées peut-être) au survol de la souris. Vous pouvez également ajouter des info-bulles qui apparaissent au survol de la souris pour aider à expliquer ce que c'est ou ce qu'il fait si l'icône exacte n'est pas évidente.
Dans l'exemple d'image ci-dessous, la bordure droite de votre carré d'organigramme a une marge supplémentaire en dehors de la forme qui abrite l'icône/interaction en gris clair. Lorsque la zone active (peut-être toute la marge) est survolée, l'icône est mise en surbrillance/colorée pour renforcer sa nature interactive, et l'info-bulle 'popout' 'lien' etc. peut également être incluse.
* Dans l'intérêt de la vitesse, j'ai capturé cette illustration à partir des designs brillants de 'Pulse' ( http://www.Pulse.me/ ) dans le but de cette illustration aka pas tous mes propres travaux ...