web-dev-qa-db-fra.com

Quelle est l'interface utilisateur correcte pour afficher les actions liées à un lien sans l'obstruer?

Je voudrais permettre à l'utilisateur d'afficher des statistiques ou d'ajouter des balises aux liens sur un site Web, mais c'est un cas d'utilisation très rare car la plupart des utilisateurs n'interagiraient jamais avec les liens au-delà d'un simple clic sur eux pour se rendre à leur destination. Quelle est une manière discrète de présenter les actions sans distraire le cas d'utilisation principal?

Exemple:

Disons que j'ai un lien vers l'échange de pile UX sur une page, la plupart des utilisateurs cliqueraient sur le lien pour aller à http://ux.stackexchange.com , mais je veux également autoriser les utilisateurs à aller à http://mydomain.com/link/1/ pour afficher les statistiques et les balises associées au lien, ou cliquez sur http://mydomain.com/link/1/edit pour ajouter des balises au lien. 1 représente l'identifiant unique de ce lien dans la base de données. Je gère actuellement cela en affichant deux petites icônes sous le lien en survol, mais je me demandais s'il y avait une façon plus élégante de le faire.

3
shinzui

J'ai fini par implémenter un raccourci clavier contextuel qui permet aux utilisateurs expérimentés d'appuyer dessus lorsqu'ils survolent le lien pour afficher le menu. J'aime la solution car elle n'encombre pas les pages lourdes des liens tout en permettant aux utilisateurs expérimentés d'interagir facilement avec les liens.

1
shinzui

Je vous suggère d'incorporer l'interaction et un style modifié d'un bouton partagé. Supprimez les aspects des boutons de la conception visuelle pour que le lien apparaisse normal. Le lien (côté gauche de la division) va au href. Le menu déroulant (côté droit de la division) apparaît lors du survol du lien, il s'assombrit lorsqu'il est survolé et révèle un petit menu d'options lorsque vous cliquez dessus. Passez la souris sur l'un de ces éléments et ils disparaissent.

enter image description here

Les options peuvent être des liens ou peut-être des icônes ou des icônes et des liens. J'étais trop paresseux pour faire des icônes dans cet exemple.

4
Itumac

Que diriez-vous d'afficher une petite icône (crayon?) À côté du lien? Lorsque vous cliquez dessus, il affiche une fenêtre contextuelle avec vos 2 actions (afficher les statistiques et les balises, ajouter des balises). Cela le rendrait également plus convivial pour l'écran tactile.

De plus, si ces actions ne s'appliquent qu'aux éditeurs et responsables du site, je cacherais l'icône aux autres types d'utilisateurs.

1
Calvin Chong

si vous pensez que les deux petites icônes sous le lien gênent l'utilisation principale, je pense que cela pourrait être utile, dites: si l'utilisateur accroche le curseur sur le lien pendant plus d'un intervalle (disons 5 secondes), nous affichons simplement cela petite icône indiquant une autre utilisation.

0
zinking

Je pense que vous faites la bonne chose avec votre interface utilisateur actuelle. Si vous avez de l'espace pour contempler des icônes supplémentaires ou des informations apparaissant dans la mise en page, c'est la façon la moins gênante de le faire. Le survol est en train de devenir une pratique très courante, mais pour créer une familiarité, il est préférable de le renforcer en l'utilisant dans différentes parties de la page. De cette façon, le vol stationnaire devient l'équivalent de "afficher plus d'actions/d'informations" et devient naturel pour l'utilisateur. Toujours afficher une icône (pour modifier, par exemple) n'est pas une mauvaise pratique, mais c'est moins subtil. Et puisque ce comportement est plus d'une utilisation spécifique, je ne vois pas la nécessité de l'avoir toujours présent.

0
Yisela

Avez-vous pensé à une infobulle avec laquelle l'utilisateur peut interagir pour insérer les liens? La seule mise en garde serait que vous deviez le rendre aussi facile que possible à utiliser - ne faites pas un défi à l'utilisateur de déplacer son curseur du lien vers l'info-bulle sans que l'info-bulle soit dé-déclenchée et disparaisse!

Exemple ci-dessous: l'état supérieur est le lien entre l'état inférieur et l'infobulle

Example tooltip

0
TJH