Arbres de décision pour les composants de l’interface utilisateur —

Comment savoir quel composant d’interface utilisateur choisir ? Arbres de décision offrir une approche systématique aux équipes de conception pour documenter leurs décisions de conception. Une fois que nous avons décidé quels composants de l’interface utilisateur nous utiliserons et à quel moment, nous pouvons éviter des discussions interminables, de la confusion et des malentendus.

Explorons quelques exemples de arbres de décision pour les composants de l’interface utilisateur et comment nous pouvons en tirer le meilleur parti.

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.

Composants de navigation et d’aide B2B : Doctolib

Système de conception Doctolib est un système de conception très impressionnant avec des arbres de décision, des chemins de navigation B2B, des photographies, la saisie de codes PIN, l’écriture UX et des notifications SMS – ainsi que des guides complets sur comment choisir les composants de l’interface utilisateur.

J’aime à quel point ces arbres de décision sont pratiques. Chacun montre un exemple de ce à quoi ressemble un composant, mais j’ajouterais également des références à des exemples et des flux réels d’interface utilisateur de savoir où et comment ces composants sont utilisés. Un point de départ fantastique qui documente les décisions de conception mieux que n’importe quel guide.

Arbres de décision pour les composants de l’interface utilisateur : Workday

L’équipe derrière Système de conception Canvas de Workday créé un ensemble fantastique d’arbres de décision de conception pour les notifications, les erreurs et les alertes, les modèles de chargement, les appels à l’action, la troncature et le débordement – avec directives, exemples et cas d’utilisationqui ne peut désormais être récupéré qu’à partir de l’archive :

Pour chaque arbre de décision, l’équipe Workday a rassemblé quelques questions liées au contexte à considérer en premier lors de la prise de décision avant même de sauter dans l’arbre de décision. De plus, il existe des exemples détaillés pour chaque option disponible, ainsi qu’un texte alternatif très détaillé pour chaque image.

Arbre de décision des composants de formulaire : Lyft

Un choix d’un composant de formulaire peut souvent être intimidant. Quand devez-vous utiliser des boutons radio, des cases à cocher ou des listes déroulantes ? Runi Goswami de Lyft a partagé un arbre de décision détaillé des composants de formulaire qui aide leur équipe à choisir entre les contrôles de formulaire.

Nous commençons par explorer si un utilisateur peut sélectionner plusieurs options dans notre interface utilisateur. S’il s’agit effectivement d’une sélection multiple, nous utilisons des bascules pour les options courtes et des cases à cocher pour les options plus longues.

Si une seule option peut être sélectionnée, alors nous utilisons des onglets pour le filtrage, radios pour des options plus courtes, un commutateur pour les options immédiatement applicables et une case à cocher si une seule option peut être sélectionnée. Les listes déroulantes sont utilisées en dernier recours.

Choisir les composants d’intégration : NewsKit

L’intégration se présente sous diverses formes. Selon comment subtil ou proéminent nous voulons mettre en évidence une fonctionnalité particulière, nous pouvons utiliser des popovers, des badges, des astuces, des drapeaux, des toasts, des cartes de fonctionnalités ou concevoir un meilleur état vide. L’équipe Newskit a élaboré un Prototype de sélection d’intégration dans Figma.

Le choix dépend si nous voulons interrompre aux utilisateurs d’afficher les détails (ce n’est généralement pas très efficace), montrer une fonctionnalité subtilement au cours de l’expérience (plus efficace), ou activer la découverte en mettant en évidence une fonctionnalité dans le contexte d’une tâche qu’un utilisateur tente d’accomplir.

La boîte à outils pose au concepteur quelques questions sur le intention d’intégrationpuis suggère les options susceptibles de fonctionner le mieux – une petite aide fantastique pour des décisions d’intégration rationalisées.

Organigrammes du processus de conception du système : Nucleus

Comment décidez-vous d’ajouter un nouveau composant à un système de conception ou plutôt d’étendre un système existant ? Quel est le processus de contribution, de maintenance et du processus de conception global ? Certaines équipes de conception codifier leurs décisions de conception sous forme d’organigrammes de processus de conception du système, comme indiqué ci-dessous.

Et voici des arbres de décision utiles pour ajout de nouveaux composants à un système de conception :

Rendre les arbres de décision visibles

Ce que j’aime absolument dans l’approche de l’arbre de décision, c’est non seulement qu’elle visualise magnifiquement les décisions de conception, mais qu’elle sert également de support. Documentation. Il établit des normes partagées entre les équipes et comprend des exemples à suivre, avec une valeur incroyable pour les nouvelles recrues.

Bien entendu, des exceptions existent. Mais une fois que vous avez codifié les méthodes de travail des équipes de conception sous forme d’arbre de décision et que vous les avez placées au centre de votre travail de conception, il résout les discussions interminables sur les décisions en matière d’assurance-chômage pour de bon.

Ainsi, chaque fois qu’un débat survient, documentez vos décisions dans un arbre de décision. Transformez-les en affiches. Placez-les dans les zones de cuisine et dans les espaces de travail des développeurs et de l’assurance qualité. Mettez-les dans des salles de critique de conception. Rendez-les visibles où se déroule le travail de conception et où le code est écrit.

Il convient de mentionner que chaque projet aura besoin de ses propres arbres personnalisés. Veuillez donc consulter les exemples ci-dessus à titre d’exemple. idée sur laquelle s’appuyer et personnalisez-le selon vos besoins.

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.

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