Fermer

mai 21, 2024

Caché ou désactivé dans l’UX —

Caché ou désactivé dans l’UX —


Les deux masquer et désactiver des fonctionnalités peut être complètement déroutant aux utilisateurs. Et pour les deux, nous avons besoin de très, très bonnes raisons. Examinons de plus près ce que nous devons prendre en compte en matière de masquage et de désactivation, ainsi que les alternatives possibles qui contribuent à améliorer l’UX.

Cet article est une partie de notre série en cours sur modèles de conception. C’est aussi une partie à venir de la vidéothèque de 10h sur Modèles de conception d’interface intelligente 🍣 et le prochaine formation UX en direct aussi. Utiliser du code OISEAU pour économiser 15 % de réduction.

Montrez ce qui est nécessaire, désencombrez le reste

Vous y êtes probablement déjà allé : devez-vous masquer ou désactiver une fonctionnalité ? Quand on cache une fonctionnalité, on risque nuire à la découvrabilité. Lorsque nous le désactivons sans aucune explication, nous risquons de frustrer les utilisateurs. Alors, quelle est la meilleure façon de concevoir pour les cas où certaines options peuvent ne pas être pertinentes ou indisponibles pour les utilisateurs ?

Fonctionnalités cachées ou désactivées dans UX
Se cacher ou ne pas se cacher ? Il existe de très bonnes raisons de masquer ou de désactiver des fonctionnalités et des options pour un utilisateur. Mais nous devons être prudents en procédant ainsi pour ne pas nuire à l’UX. (Grand aperçu)

En règle générale, désactivez-la si vous souhaitez que l’utilisateur sache qu’une fonctionnalité existe mais qu’elle n’est pas disponible. Masquer si la valeur affichée n’est actuellement pas pertinente et ne peut pas être utilisée. Mais ne cachez jamais les boutons ou les filtres clés par défaut car les utilisateurs s’attendent à ce qu’ils persistent.

Contrairement aux fonctionnalités cachées, les fonctionnalités désactivées peuvent aider les utilisateurs à apprendre l’interface utilisateur, par exemple à comprendre les avantages d’une mise à niveau. Ainsi, au lieu de supprimer les options ou les boutons indisponibles, envisagez de les désactiver et de permettre à l’utilisateur de « Masquer toutes les options indisponibles ». Assurez-vous d’expliquer pourquoi une fonctionnalité est désactivée et également comment la réactiver.

Autre chose à surveiller : lorsque nous autorisons les utilisateurs à basculer entre l’affichage et le masquage d’une fonctionnalité, nous devons également nous assurer que le changement ne provoque aucun problème. changements de disposition.

Fonctionnalités cachées ou désactivées dans UX
État désactivé dans Carbon Design System, avec des variantes pour prêt uniquement, désactivé par défaut et masqué. (Grand aperçu)

Pour masquer et désactiver, nous avons besoin d’une considération très approfondie des alternatives disponibles, par exemple les boutons activés, l’état en lecture seule, de meilleurs états vides, les accordéons masquer/révéler, les messages d’erreur et la personnalisation. Nous devons montrez ce qui est nécessaire et désencombrez le reste.

Dans la mesure du possible, j’essaie de conserver les boutons et les fonctionnalités dans leur état par défaut : activé, accessible et lisible. Lorsqu’un utilisateur interagit avec cette fonctionnalité, nous pouvons expliquer pourquoi il ne peut pas l’utiliser, comment l’activer et comment la maintenir activée. Les exceptions possibles sont les codes de confirmation et les états de chargement/traitement.

Masquer ou désactiver la feuille de route

Comme Sam Salomon suggèresi vous ne savez pas si le masquage ou la désactivation est la meilleure option pour votre cas d’utilisation, posez-vous la question suivante : « Un utilisateur donné pourra-t-il un jour interagir avec cet élément ?» En fonction de votre réponse, suivez les étapes ci-dessous.

✅ Oui

Désactivez-le (en tant que boutons désactivés ou état en lecture seule).
↳ Pour les restrictions temporaires ou l’incompatibilité des filtres.
↳ Lorsqu’une valeur ou un statut est pertinent mais non modifiable.
↳ Lorsqu’une action n’est pas encore disponible (par exemple, « Exportation en cours… »).

🚫 Non

Cache le (supprimer d’une barre d’outils, réduire en accordéon).
↳ Par exemple, en raison des autorisations, des contrôles d’accès, de la sûreté et de la sécurité.
↳ Pour les fonctionnalités inaccessibles : par exemple, les boutons d’administration, les remplacements.
↳ Masquer ces contrôles par défaut et les révéler une fois qu’une condition est remplie.

Points clés à retenir

  • Masquage des fonctionnalités importantes nuit à leur découverte.
  • Désactivation des fonctionnalités est frustrant sans explication.
  • Mais certaines options pourraient être non pertinent/indisponible pour les utilisateurs.
  • Les utilisateurs peuvent s’attendre à ce qu’une fonctionnalité existe mais ne la trouveront pas.
  • Nous devons montrer ce qui est nécessaire et désencombrer le reste.
  • Éviter changements de disposition perturbateurs lorsque vous affichez et masquez des fonctionnalités.
  • Ne supprimez pas les options indisponibles ou automatiquement.
  • Au lieu de cela, désactivez-les et autorisez-le à « Masquer toutes les options indisponibles ».
  • Autorisez les utilisateurs à masquer les sections avec de nombreuses fonctionnalités désactivées.
  • Expliquer pourquoi une fonctionnalité est désactivée et comment le réactiver.

Caché ou désactivé dans les systèmes de conception

Les systèmes de conception ci-dessous fournissent des informations utiles exemples concrets de la façon dont les produits conçoivent leurs états cachés et désactivés.

Ressources utiles

Rencontrez les modèles de conception d’interface intelligente

Si vous êtes intéressé par des informations similaires sur l’UX, jetez un œil à Modèles de conception d’interface intelligentenotre Cours vidéo de 10h avec des centaines d’exemples pratiques tirés de projets réels — avec une formation UX en direct plus tard cette année. Tout, des méga-listes déroulantes aux tableaux d’entreprise complexes, avec 5 nouveaux segments ajoutés chaque année. Accédez à un aperçu gratuit.

Modèles de conception d’interface intelligente
Rencontrer Modèles de conception d’interface intelligentenotre cours vidéo sur la conception d’interfaces et l’UX.

100 modèles de conception et exemples réels.
Cours vidéo de 10h + formation UX en direct. Aperçu gratuit.

Éditorial fracassant
(ouais)




Source link