web design uiMay 1, 202610 min read

Concevoir pour les utilisateurs avancés

La plupart des produits sont conçus pour l'utilisateur qui débarque et abandonnent l'expert qui revient. Les cinq couches de l'UX pour utilisateurs avancés, les règles qui tiennent la ligne, et un audit prêt à livrer.

By Boone
XLinkedIn
design for power users

L'utilisateur qui clique sur tous les boutons est déjà parti. Celui qui vit dans votre produit l'ouvre vingt fois par jour et a mémorisé une interface cachée que vous n'avez peut-être pas dessinée. Si le produit d'un autre a une meilleure interface cachée, l'expert est perdu, et l'expert est la cohorte qui paie.

L'UX grand public parle de première utilisation et d'activation. L'expert n'en voit jamais rien. Il a ouvert votre produit pour la huit centième fois, a tapé Cmd-K, et soit il a filé à travers son travail, soit il a tout claqué parce que votre palette renvoie cinq résultats sans rapport. L'UX pour utilisateurs avancés est le second produit, et la plupart des équipes n'en ont pas encore livré un.

Le produit caché derrière le produit visible

Tout grand produit contient deux produits. Le visible, pour le nouvel utilisateur, et le caché, pour celui qui sait déjà.

Le produit visible, ce sont des boutons, des menus, des infobulles et des visites guidées. Le produit caché, ce sont des raccourcis clavier, des palettes de commandes, des vues enregistrées, la multi-sélection et un état adressable par URL. Le premier rend la première session lisible. Le second rend les mille sessions suivantes rapides.

Linear livre les deux, volontairement. Le nouvel utilisateur voit une boîte de réception claire avec une action principale évidente. L'expert tape g puis i pour aller à la boîte de réception, c pour créer un ticket, shift-clic pour multi-sélectionner, et chaque vue enregistrée est une URL partageable. Même produit. Deux produits. Les deux conçus.

Les utilisateurs avancés sont la cohorte que vous ne pouvez pas vous permettre de perdre

L'utilisateur débutant est bruyant et l'expert est silencieux, donc la plupart des équipes optimisent pour le bruyant. Les utilisateurs avancés ouvrent le produit plus de jours par mois, génèrent plus de revenus par siège et recrutent plus de nouveaux utilisateurs que toutes les autres cohortes réunies. Ils partent aussi le plus bruyamment, parce qu'ils savent ce que rapide veut dire dans trois produits concurrents.

La solution n'est pas « ajouter des raccourcis ». La solution est de traiter la surface pour utilisateurs avancés comme un produit à part entière, avec son propre budget de design et sa propre feuille de route.

Les cinq couches de l'UX pour utilisateurs avancés

L'UX pour utilisateurs avancés n'est pas une fonctionnalité. Ce sont cinq couches qui se cumulent. La plupart des produits en livrent une ou deux. Les meilleurs les livrent toutes les cinq, et les couches se renforcent mutuellement.

Cadre voxel de cinq couches empilées inclinées vers la caméra : palette de commandes, couche clavier, vues enregistrées, actions groupées et surfaces avancées, reliées par de fines lignes corail comme une colonne vertébrale
Cadre voxel de cinq couches empilées inclinées vers la caméra : palette de commandes, couche clavier, vues enregistrées, actions groupées et surfaces avancées, reliées par de fines lignes corail comme une colonne vertébrale

1. La palette de commandes

La palette Cmd-K est la surface unifiée de recherche et d'action. Une seule frappe invoque chaque action, route et objet du produit, classés par récence et fréquence. La palette de Linear est la référence. Raycast a construit toute une couche d'OS autour de la même primitive. Notion, Vercel, GitHub et Slack livrent chacun la leur.

Une vraie palette cherche contenus et actions dans le même champ, affiche des indications de raccourci à côté de chaque résultat, et accepte des arguments en ligne. « Déplacer le ticket vers en cours » fonctionne comme une commande unique au lieu d'une chaîne de quatre clics. Le mode d'échec, c'est la palette de recherche seule : une boîte qui trouve des documents mais ne peut déclencher aucune action est une barre de recherche qui se prend pour autre chose. Le but de Cmd-K, c'est trouver et agir. L'analyse les états vides sont le produit explique pourquoi l'état par défaut de la palette compte.

2. Les raccourcis clavier comme système à part entière

Les raccourcis ne sont pas une liste de combinaisons cachée dans une modale d'aide. Ce sont un système avec découvrabilité, cohérence et profondeur progressive. Superhuman est l'étalon-or. Chaque action a sa touche, l'aide-mémoire est livré dans le produit, et l'onboarding enseigne le clavier avant la souris.

Linear utilise un système de paires de lettres qui passe à l'échelle. La première lettre nomme la surface (g pour go), la seconde nomme la destination (i pour inbox, p pour project, m pour my issues). L'utilisateur apprend une règle et débloque cinquante raccourcis. Notion livre slash pour les commandes et Cmd-K pour la palette. Figma livre des outils à une seule lettre (V pour déplacer, R pour rectangle, F pour frame, T pour texte). Les raccourcis clavier de Gmail restent la référence pour l'e-mail, vingt ans après.

Clavier voxel posé à plat avec des touches sélectionnées surélevées sur des socles corail : G+I pour la boîte de réception, V R F T pour les outils Figma, slash et Cmd-K au centre, J K pour la navigation, le reste des touches en gris atténué
Clavier voxel posé à plat avec des touches sélectionnées surélevées sur des socles corail : G+I pour la boîte de réception, V R F T pour les outils Figma, slash et Cmd-K au centre, J K pour la navigation, le reste des touches en gris atténué

Le système est le produit. Un tas de raccourcis isolés n'est pas un système, c'est un backlog que l'équipe a oublié de supprimer.

3. Vues enregistrées, filtres, favoris

L'expert construit le produit autour de son flux de travail. Les vues enregistrées de Linear apparaissent dans la barre latérale, survivent à la déconnexion, se partagent par URL et se mettent à jour en direct. Les vues filtrées de base de données de Notion font la même chose pour le contenu. Les recherches enregistrées de Stripe conservent le filtre exact qui détecte les anomalies. Vercel épingle l'équipe et le projet par favori, pour que le bon tableau de bord soit à une frappe.

Le non négociable : l'état enregistré doit être adressable. Chaque vue enregistrée doit avoir une URL qui survit à une déconnexion, à un changement d'appareil et à un partage avec un collègue. Un état qui ne vit que dans localStorage disparaît dès que l'utilisateur ouvre le produit sur un autre ordinateur.

4. Opérations groupées

L'expert touche une centaine d'objets par jour. Le produit soit le supporte, soit le punit. La multi-sélection de Linear avec shift-clic, puis la mise à jour groupée avec B, est canonique. La multi-sélection de Notion sur les bases de données permet de changer statut, responsable et tags sur trente lignes d'un seul geste. Les raccourcis de Gmail plus shift-J sont la raison pour laquelle la boîte de réception reste supportable à grande échelle.

Les opérations groupées exigent trois propriétés. La sélection doit être évidente. L'action doit être accessible au clavier. L'annulation doit être réelle. Une action groupée derrière un menu clic droit est une action groupée que vous n'utiliserez pas, et une action groupée sans annulation en une frappe détruit la confiance dès la première erreur.

5. Surfaces réservées aux experts

Certaines surfaces n'existent que pour l'expert. La console API de Figma, la bibliothèque d'extensions de Raycast, la vue d'administration des bases de données de Notion, la CLI de Vercel, Cron et la couche de blocs de temps 100 % clavier de Notion Calendar. Ce sont les couches de profondeur dans lesquelles vit l'expert.

Raycast en est la version la plus pure. Le produit de base est une palette de commandes. L'expert installe des extensions et des scripts personnalisés qui transforment la palette en couche d'OS personnelle. Les bases de données de Notion ont la même forme : un débutant voit une liste, un expert voit un modèle de données relationnel avec rollups et formules.

Le motif est la profondeur progressive. Le principe de divulgation progressive est l'idée porteuse : la profondeur vit à une frappe de distance, pas sur l'écran d'accueil.

Au cœur de la palette de commandes

La palette Cmd-K est la surface la plus importante pour les utilisateurs avancés, et la plupart des équipes en livrent une faible. Cinq éléments séparent les palettes solides des barres de recherche déguisées.

Anatomie voxel d'une palette de commandes éclatée en parties étiquetées : un champ de recherche corail en haut, trois lignes de résultats au milieu, un pied de page cyan d'indications de raccourcis, une touche ESC flottant sur la droite
Anatomie voxel d'une palette de commandes éclatée en parties étiquetées : un champ de recherche corail en haut, trois lignes de résultats au milieu, un pied de page cyan d'indications de raccourcis, une touche ESC flottant sur la droite

Une excellente palette classe les résultats par récence et fréquence, affiche une indication de raccourci à côté de chaque résultat, accepte des arguments en ligne, s'adapte au contexte et se ferme d'un seul Échap. Celle de Linear fait les cinq. Raycast fait les cinq et transforme la palette en produit entier. La plupart des palettes en font deux, et l'utilisateur apprend à les ignorer.

Cinq règles pour concevoir l'UX des utilisateurs avancés

Cinq règles séparent une vraie surface pour experts d'une liste de raccourcis jetée dans un pied de page d'aide. Respectez-en quatre et la surface fonctionne en général. Deux, et l'expert s'en va.

  1. Chaque action a une touche. Si l'utilisateur peut le faire à la souris, il doit pouvoir le faire au clavier.
  2. Montrez les touches sans les imposer. Des indications de raccourci dans la palette, dans les infobulles, dans les lignes de menu. Le raccourci doit être visible au moment où l'utilisateur tend la main vers la souris, pas enterré dans une page de réglages.
  3. La multi-sélection doit être évidente. Des cases à cocher visibles ou un motif shift-clic clair. Une action groupée dont l'utilisateur ignore l'existence est une action groupée qui n'existe pas.
  4. L'état enregistré doit être adressable. Basé sur l'URL, persistant, partageable. Un état qui ne vit que dans le navigateur est un état qui s'évapore.
  5. La surface avancée vit à une frappe. Cmd-K, slash ou une simple lettre. Si l'expert doit naviguer pour y arriver, c'est une page de fonctionnalité, pas une surface avancée.

Un produit qui en réussit quatre sur cinq paraît vivant sous les mains de l'expert. Un produit qui en réussit deux ressemble à un site web avec quelques astuces clavier boulonnées dessus.

Les anti-patterns qui trahissent l'oubli de l'expert

Cinq motifs tuent plus de surfaces pour experts que tout le reste.

Des raccourcis qui entrent en conflit avec le navigateur. Ctrl-W ou Ctrl-T réassignés dans une webapp ferment l'onglet et l'utilisateur perd son travail non enregistré. Utilisez plutôt un espace de noms dans Cmd-K.

Des raccourcis documentés uniquement dans une modale d'aide à trois clics de profondeur. Un aide-mémoire derrière Réglages, Aide, Raccourcis clavier est un aide-mémoire que l'utilisateur ne verra jamais. Montrez les touches au moment de l'action. Superhuman livre l'aide-mémoire comme un écran à part entière. La plupart des produits le livrent comme un lien de pied de page en espérant que personne ne clique.

Une multi-sélection qui exige un clic droit. Une action groupée dans un menu contextuel existe pour le changelog, pas pour l'utilisateur.

Des paywalls « Pro » sur les raccourcis de base. Certains produits verrouillent les raccourcis clavier, les palettes ou les vues enregistrées derrière une offre « Pro ». Le raccourci n'est pas la fonctionnalité, c'est la façon dont la fonctionnalité s'utilise. Le verrouiller, c'est verrouiller le produit lui-même.

Des vues enregistrées qui ne survivent pas à la déconnexion. Un filtre qui ne vit que dans localStorage s'efface quand l'utilisateur ouvre le produit sur un autre appareil. Persistez côté serveur, rattachez à l'utilisateur, laissez l'URL le porter.

L'audit pour utilisateurs avancés

Passez n'importe quel produit au crible de ces sept questions. Ratez-en deux ou plus et l'expert sera sur le produit d'un autre avant la fin du trimestre.

Arbre de décision voxel de sept blocs de questions descendant dans le cadre : une touche pour chaque action, touches découvrables, multi-sélection évidente, état enregistré adressable, à une frappe, pas de conflit avec le navigateur, pas de paywall
Arbre de décision voxel de sept blocs de questions descendant dans le cadre : une touche pour chaque action, touches découvrables, multi-sélection évidente, état enregistré adressable, à une frappe, pas de conflit avec le navigateur, pas de paywall
  1. Chaque action principale a-t-elle un raccourci clavier ? Listez les vingt actions principales et vérifiez. Si plus de trois exigent la souris, la couche clavier est incomplète.
  2. Y a-t-il une palette Cmd-K qui cherche et agit ? Pas une barre de recherche. Une palette qui exécute des commandes, accepte des arguments et affiche des indications de raccourci.
  3. Les raccourcis sont-ils découvrables en contexte ? Infobulles, indications de palette, libellés de menu. L'utilisateur doit apprendre le raccourci en faisant l'action, pas en lisant la doc.
  4. La multi-sélection fonctionne-t-elle au clavier, avec une annulation claire ? Shift-clic, puis une action à une touche, puis une annulation à une touche. Un maillon manquant casse la chaîne.
  5. Les vues enregistrées sont-elles adressables par URL et persistantes ? Copiez l'URL, collez-la dans un autre navigateur, connectez-vous. Si la vue ne se charge pas, l'état enregistré est du théâtre.
  6. Les surfaces avancées sont-elles à une frappe, d'où qu'on soit ? La console, la surface API, la bibliothèque d'extensions. Si l'expert doit naviguer pour les atteindre, ce sont des pages de fonctionnalités, pas des surfaces avancées.
  7. Le produit traite-t-il le clavier en citoyen de première classe ? Pas de raccourcis en conflit avec le navigateur. Pas de raccourcis derrière un paywall. Pas d'actions groupées réservées à la souris.

Un produit qui passe les sept retient l'expert par défaut. Celui qui en rate trois ou plus le perd au profit de Linear, Raycast ou du concurrent qui a livré le second produit volontairement. L'anti-dashboard couvre le versant mise en page de la même discipline, l'article sur la hiérarchie visuelle explique comment l'expert lit la densité.

Où cela s'inscrit dans le produit

L'UX pour utilisateurs avancés est le pendant de l'UX de première utilisation. L'analyse onboarding sans onboarding traite l'utilisateur qui n'a jamais vu le produit. Cet article traite celui qui l'a vu neuf cents fois. L'idée de concevoir la friction volontairement s'applique ici à l'envers : pour le nouvel utilisateur, une friction au bon moment enseigne le produit. Pour l'expert, chaque friction inutile est une taxe. Les analyses principes de design de landing page et principes de design web couvrent les versions page marketing et produit entier de la même discipline.

Construisez le produit caché volontairement

Le produit visible obtient l'article de lancement et la vidéo de démo. Le produit caché obtient le renouvellement et le bouche-à-oreille. Linear, Raycast, Superhuman, Notion, Cron, Figma, Gmail, Vercel, Slack, GitHub, Stripe et Cursor partagent tous un trait. Ils ont livré un vrai second produit pour l'utilisateur qui sait déjà.

La plupart des équipes livrent le premier produit et laissent le second arriver par accident. C'est ce choix qui coûte l'expert. Choisissez la couche clavier. Choisissez la palette. Choisissez le système de vues enregistrées. Choisissez l'action groupée. Choisissez la surface avancée. L'effet cumulé fait la différence entre un produit que l'expert tolère et un produit que l'expert évangélise.

FAQ

Qu'est-ce que l'UX pour utilisateurs avancés ?

L'UX pour utilisateurs avancés est la couche de design destinée à l'utilisateur qui connaît déjà le produit. Elle inclut la palette de commandes, la couche clavier, les vues et filtres enregistrés, les opérations groupées et les surfaces réservées aux experts. Le nouvel utilisateur n'en a pas besoin. L'expert vit dedans.

Tout produit devrait-il avoir une palette de commandes Cmd-K ?

Presque tous les produits de productivité le devraient. Une palette devient la surface unifiée de recherche et d'action et donne à l'expert une frappe qui ouvre toutes les actions. Linear, Raycast, Notion, Vercel, GitHub et Slack en livrent une. Les produits grand public avec une seule action principale peuvent s'en passer. La plupart des outils B2B et prosumer ne le peuvent pas.

Comment enseigner les raccourcis clavier sans visite guidée ?

Affichez le raccourci à côté de l'action, à chaque fois. Indications dans les infobulles, dans la palette, libellés de menu. Superhuman livre l'aide-mémoire comme un écran à part entière que l'utilisateur peut invoquer. Linear affiche chaque raccourci dans la palette et les menus. L'utilisateur apprend le clavier en faisant son travail.

Livrez le second produit

Si vous voulez une équipe qui conçoit la couche clavier, la palette de commandes et le système d'état enregistré comme partie intégrante du produit plutôt que comme un nettoyage de fin de parcours, engagez Brainy. Nous construisons le produit caché volontairement, pour que l'expert ouvre votre outil demain et se sente plus rapide qu'hier.

Want a product where the expert user gets a real surface instead of a help-menu footer? Brainy designs the keyboard layer, the command palette, and the saved-state system as part of the product, not as cleanup.

Get Started

More from Brainy Papers

Keep reading