web design uiMay 1, 202610 min read

Design für Power-User

Die meisten Produkte designen für den Erstnutzer und lassen den wiederkehrenden Experten im Stich. Die fünf Ebenen von Power-User-UX, die Regeln, die die Linie halten, und ein Audit, mit dem du loslegen kannst.

By Boone
XLinkedIn
design for power users

Der Nutzer, der jeden Button anklickt, ist längst weg. Der, der in deinem Produkt lebt, öffnet es zwanzigmal am Tag und hat sich ein verborgenes Interface eingeprägt, das du vielleicht nie designt hast. Wenn das Produkt von jemand anderem das bessere verborgene Interface hat, ist der Experte weg, und der Experte ist die Kohorte, die zahlt.

Mainstream-UX redet über First-Run und Aktivierung. Der Experte sieht davon nichts. Er hat dein Produkt zum achthundertsten Mal geöffnet, Cmd-K gedrückt und ist entweder durch die Arbeit geflogen oder hat vor Wut hingeschmissen, weil deine Palette fünf irrelevante Ergebnisse liefert. Power-User-UX ist das zweite Produkt, und die meisten Teams haben noch keines ausgeliefert.

Das verborgene Produkt hinter dem sichtbaren

Jedes großartige Produkt enthält zwei Produkte. Das sichtbare für den neuen Nutzer und das verborgene für den Nutzer, der schon Bescheid weiß.

Das sichtbare Produkt besteht aus Buttons, Menüs, Tooltips und Touren. Das verborgene Produkt besteht aus Tastenkürzeln, Command Palettes, Saved Views, Mehrfachauswahl und per Route adressierbarem Zustand. Das erste macht die erste Session verständlich. Das zweite macht die nächsten tausend Sessions schnell.

Linear liefert beides, mit Absicht. Der neue Nutzer sieht einen aufgeräumten Posteingang mit einer klaren Primäraktion. Der Experte drückt g dann i, um zum Posteingang zu springen, c, um ein Issue zu erstellen, Shift-Klick zur Mehrfachauswahl, und jede Saved View ist eine teilbare URL. Dasselbe Produkt. Zwei Produkte. Beide designt.

Power-User sind die Kohorte, die du dir nicht leisten kannst zu verlieren

Der Erstnutzer ist laut und der Experte still, deshalb optimieren die meisten Teams für den Lauten. Power-User öffnen das Produkt an mehr Tagen im Monat, bringen mehr Umsatz pro Seat und werben mehr neue Nutzer als alle anderen Kohorten zusammen. Sie gehen auch am lautesten, weil sie in drei konkurrierenden Produkten wissen, wie sich schnell anfühlt.

Die Lösung ist nicht „Shortcuts hinzufügen“. Die Lösung ist, die Power-User-Oberfläche als erstklassiges Produkt mit eigenem Design-Budget und eigener Roadmap zu behandeln.

Die fünf Ebenen von Power-User-UX

Power-User-UX ist kein einzelnes Feature. Es sind fünf Ebenen, die sich aufaddieren. Die meisten Produkte liefern eine oder zwei. Die besten liefern alle fünf, und die Ebenen verstärken sich gegenseitig.

Voxel-Framework aus fünf gestapelten, zur Kamera geneigten Ebenen: Command Palette, Tastaturebene, Saved Views, Bulk-Aktionen und Power-Oberflächen, verbunden durch dünne korallenfarbene Linien wie ein Rückgrat
Voxel-Framework aus fünf gestapelten, zur Kamera geneigten Ebenen: Command Palette, Tastaturebene, Saved Views, Bulk-Aktionen und Power-Oberflächen, verbunden durch dünne korallenfarbene Linien wie ein Rückgrat

1. Die Command Palette

Die Cmd-K-Palette ist die vereinte Oberfläche zum Suchen und Handeln. Ein Tastendruck ruft jede Aktion, jede Route und jedes Objekt im Produkt auf, sortiert nach Aktualität und Häufigkeit. Die Palette von Linear setzt den Maßstab. Raycast hat eine ganze OS-Ebene um dasselbe Primitiv gebaut. Notion, Vercel, GitHub und Slack liefern alle ihre eigene.

Eine echte Palette durchsucht Inhalte und Aktionen im selben Eingabefeld, zeigt neben jedem Ergebnis Tastenhinweise und nimmt Argumente inline entgegen. „Move issue to in progress“ funktioniert als einzelner Befehl statt als Vier-Klick-Kette. Der Fehlermodus ist die reine Suchpalette: Eine Box, die Dokumente findet, aber keine Aktionen auslösen kann, ist eine Suchleiste mit Wahnvorstellungen. Der Sinn von Cmd-K ist Finden und Handeln. Der Beitrag Empty States sind das Produkt erklärt, warum der Standardzustand der Palette zählt.

2. Tastenkürzel als erstklassiges System

Shortcuts sind keine Liste von Belegungen, die in einem Hilfe-Modal versteckt ist. Sie sind ein System mit Auffindbarkeit, Konsistenz und progressiver Tiefe. Superhuman ist der Goldstandard. Jede Aktion hat eine Taste, das Cheatsheet ist im Produkt, und das Onboarding bringt die Tastatur vor der Maus bei.

Linear fährt ein Buchstabenpaar-System, das skaliert. Der erste Buchstabe benennt die Oberfläche (g für go), der zweite das Ziel (i für Inbox, p für Projekt, m für My Issues). Der Nutzer lernt eine Regel und schaltet fünfzig Shortcuts frei. Notion liefert Slash für Befehle und Cmd-K für die Palette. Figma liefert Ein-Buchstaben-Werkzeuge (V für Verschieben, R für Rechteck, F für Frame, T für Text). Die Tastenkürzel von Gmail sind nach zwanzig Jahren immer noch der Goldstandard für E-Mail.

Flach liegende Voxel-Tastatur, ausgewählte Tasten auf korallenfarbenen Podesten erhöht: G+I für Inbox, V R F T für Figma-Werkzeuge, Slash und Cmd-K in der Mitte, J K für Navigation, die übrigen Tasten in gedämpftem Grau
Flach liegende Voxel-Tastatur, ausgewählte Tasten auf korallenfarbenen Podesten erhöht: G+I für Inbox, V R F T für Figma-Werkzeuge, Slash und Cmd-K in der Mitte, J K für Navigation, die übrigen Tasten in gedämpftem Grau

Das System ist das Produkt. Ein Haufen einzelner Shortcuts ist kein System, sondern ein Backlog, das das Team zu löschen vergessen hat.

3. Saved Views, Filter, Lesezeichen

Der Experte baut das Produkt um seinen Workflow herum. Die Saved Views von Linear erscheinen in der Sidebar, überleben den Logout, lassen sich per URL teilen und aktualisieren sich live. Die gefilterten Datenbankansichten von Notion leisten dasselbe für Inhalte. Die gespeicherten Suchen von Stripe speichern genau den Filter, der Anomalien fängt. Vercel pinnt Team und Projekt pro Lesezeichen, damit das richtige Dashboard einen Tastendruck entfernt ist.

Das Unverhandelbare: Gespeicherter Zustand muss adressierbar sein. Jede Saved View sollte eine URL haben, die einen Logout, einen Gerätewechsel und das Teilen mit Kollegen übersteht. Zustand, der nur in localStorage lebt, verschwindet in dem Moment, in dem der Nutzer das Produkt auf einem anderen Laptop öffnet.

4. Bulk-Operationen

Der Experte fasst am Tag hundert Objekte an. Das Produkt unterstützt das entweder oder bestraft ihn dafür. Die Mehrfachauswahl per Shift-Klick und das anschließende Bulk-Update mit B bei Linear ist kanonisch. Die Mehrfachauswahl in Notion-Datenbanken lässt dich Status, Zuständigen und Tags über dreißig Zeilen in einem Zug ändern. Die Gmail-Shortcuts plus Shift-J sind der Grund, warum der Posteingang im großen Maßstab erträglich ist.

Bulk-Operationen brauchen drei Eigenschaften. Die Auswahl muss offensichtlich sein. Die Aktion muss per Tastatur erreichbar sein. Das Rückgängigmachen muss echt sein. Eine Bulk-Aktion hinter einem Rechtsklick-Menü ist eine Bulk-Aktion, die du nicht nutzen wirst, und eine Bulk-Aktion ohne Ein-Tasten-Undo zerstört Vertrauen, sobald sie das erste Mal schiefgeht.

5. Power-only-Oberflächen

Manche Oberflächen existieren nur für den Experten. Die Figma-API-Konsole, die Raycast-Extensions-Bibliothek, die Notion-Datenbank-Adminansicht, die Vercel CLI, Cron und die reine Tastatur-Zeitblock-Ebene von Notion Calendar. Das ist die Tiefenebene, in der der Experte lebt.

Raycast ist die sauberste Version. Das Basisprodukt ist eine Command Palette. Der Experte installiert Extensions und eigene Skripte, die die Palette in eine persönliche OS-Ebene verwandeln. Die Datenbanken von Notion haben dieselbe Form: Ein Anfänger sieht eine Liste, ein Experte sieht ein relationales Datenmodell mit Rollups und Formeln.

Das Muster ist progressive Tiefe. Das Prinzip der Progressive Disclosure ist die tragende Idee: Tiefe liegt einen Tastendruck entfernt, nicht auf dem Startbildschirm.

Im Inneren der Command Palette

Die Cmd-K-Palette ist die wichtigste Power-User-Oberfläche, und die meisten Teams liefern eine schwache. Fünf Elemente trennen starke Paletten von Suchleisten im Kostüm.

Voxel-Anatomie einer einzelnen Command Palette, in beschriftete Teile zerlegt: oben ein korallenfarbenes Sucheingabefeld, in der Mitte drei Ergebniszeilen, ein cyanfarbener Footer mit Shortcut-Hinweisen, rechts schwebt eine ESC-Taste
Voxel-Anatomie einer einzelnen Command Palette, in beschriftete Teile zerlegt: oben ein korallenfarbenes Sucheingabefeld, in der Mitte drei Ergebniszeilen, ein cyanfarbener Footer mit Shortcut-Hinweisen, rechts schwebt eine ESC-Taste

Eine großartige Palette sortiert Ergebnisse nach Aktualität und Häufigkeit, zeigt neben jedem Ergebnis einen Tastenhinweis, nimmt Argumente inline entgegen, richtet sich nach dem Kontext und schließt mit einem einzigen Esc. Die von Linear kann alle fünf. Raycast kann alle fünf und macht die Palette zum gesamten Produkt. Die meisten Paletten können zwei, und der Nutzer lernt, sie zu ignorieren.

Fünf Regeln für Power-User-UX

Fünf Regeln trennen eine echte Power-User-Oberfläche von einer Liste mit Shortcuts, die in einen Hilfe-Footer gekippt wurde. Erfüllst du vier, funktioniert die Oberfläche meistens. Erfüllst du zwei, geht der Experte.

  1. Jede Aktion hat eine Taste. Wenn der Nutzer es mit der Maus tun kann, sollte er es auch per Tastatur tun können.
  2. Zeige die Tasten, ohne sie aufzudrängen. Tastenhinweise in der Palette, in Tooltips, in Menüzeilen. Der Shortcut sollte in dem Moment sichtbar sein, in dem der Nutzer zur Maus greift, nicht vergraben auf einer Einstellungsseite.
  3. Mehrfachauswahl muss offensichtlich sein. Sichtbare Checkboxen oder ein klares Shift-Klick-Muster. Eine Bulk-Aktion, von der der Nutzer nicht weiß, ist eine Bulk-Aktion, die nicht existiert.
  4. Gespeicherter Zustand muss adressierbar sein. URL-basiert, persistent, teilbar. Zustand, der nur im Browser lebt, ist Zustand, der verschwindet.
  5. Die Power-Oberfläche liegt einen Tastendruck entfernt. Cmd-K, Slash oder ein einzelner Buchstabe. Wenn der Experte erst dorthin navigieren muss, ist es eine Feature-Seite und keine Power-Oberfläche.

Ein Produkt, das vier von fünf trifft, fühlt sich unter den Händen des Experten lebendig an. Ein Produkt, das zwei trifft, fühlt sich an wie eine Website mit ein paar angeschraubten Tastaturtricks.

Anti-Patterns, die zeigen, dass das Team den Experten vergessen hat

Fünf Muster töten mehr Power-User-Oberflächen als alles andere.

Shortcuts, die mit dem Browser kollidieren. Ein umbelegtes Ctrl-W oder Ctrl-T in einer Webapp schließt den Tab, und der Nutzer verliert ungespeicherte Arbeit. Nutze stattdessen einen Namespace innerhalb von Cmd-K.

Shortcuts, die nur in einem Hilfe-Modal drei Klicks tief dokumentiert sind. Ein Cheatsheet hinter Einstellungen, Hilfe, Tastenkürzel sieht der Nutzer nie. Zeige die Tasten im Moment der Aktion. Superhuman liefert das Cheatsheet als erstklassigen Screen. Die meisten Produkte liefern es als Footer-Link, von dem sie hoffen, dass ihn niemand anklickt.

Mehrfachauswahl, die einen Rechtsklick braucht. Eine Bulk-Aktion in einem Kontextmenü existiert fürs Changelog, nicht für den Nutzer.

Pro-Tier-Paywalls auf grundlegenden Shortcuts. Manche Produkte sperren Tastenkürzel, Paletten oder Saved Views hinter einem „Pro“-Plan. Der Shortcut ist nicht das Feature, er ist die Art, wie das Feature genutzt wird. Ihn zu sperren heißt, das Produkt selbst zu sperren.

Saved Views, die den Logout nicht überleben. Ein Filter, der nur in localStorage lebt, löscht sich selbst, wenn der Nutzer das Produkt auf einem anderen Gerät öffnet. Persistiere auf dem Server, hänge es an den Nutzer, lass die URL es tragen.

Das Power-User-Audit

Schick jedes Produkt durch diese sieben Fragen. Fallen zwei oder mehr durch, ist der Experte bis Quartalsende bei einem anderen Produkt.

Voxel-Entscheidungsbaum aus sieben Fragenblöcken, die den Bildausschnitt hinabsteigen: Taste für jede Aktion, Tasten auffindbar, Mehrfachauswahl offensichtlich, Zustand adressierbar, ein Tastendruck entfernt, kein Browser-Konflikt, keine Paywall
Voxel-Entscheidungsbaum aus sieben Fragenblöcken, die den Bildausschnitt hinabsteigen: Taste für jede Aktion, Tasten auffindbar, Mehrfachauswahl offensichtlich, Zustand adressierbar, ein Tastendruck entfernt, kein Browser-Konflikt, keine Paywall
  1. Hat jede Primäraktion ein Tastenkürzel? Liste die zwanzig wichtigsten Aktionen auf und prüfe. Wenn mehr als drei die Maus erfordern, ist die Tastaturebene unvollständig.
  2. Gibt es eine Cmd-K-Palette, die sucht und handelt? Keine Suchleiste. Eine Palette, die Befehle ausführt, Argumente annimmt und Shortcut-Hinweise zeigt.
  3. Sind Shortcuts im Kontext auffindbar? Tooltips, Palettenhinweise, Menübeschriftungen. Der Nutzer sollte den Shortcut beim Ausführen der Aktion lernen, nicht durch Lesen von Docs.
  4. Funktioniert Mehrfachauswahl per Tastatur, mit klarem Undo? Shift-Klick, dann eine Tastenaktion, dann ein Ein-Tasten-Undo. Jedes fehlende Glied bricht die Kette.
  5. Sind Saved Views per URL adressierbar und persistent? Kopiere die URL, füge sie in einem anderen Browser ein, logge dich ein. Lädt die Ansicht nicht, ist gespeicherter Zustand Theater.
  6. Sind Power-Oberflächen von überall einen Tastendruck entfernt? Die Konsole, die API-Oberfläche, die Extensions-Bibliothek. Wenn der Experte erst navigieren muss, sind es Feature-Seiten und keine Power-Oberflächen.
  7. Behandelt das Produkt die Tastatur als erstklassigen Bürger? Keine Shortcuts mit Browser-Konflikt. Keine Shortcuts hinter Paywall. Keine Bulk-Aktionen nur per Maus.

Ein Produkt, das alle sieben besteht, hält den Experten von allein. Eines, das drei oder mehr verfehlt, verliert ihn an Linear, Raycast oder welchen Wettbewerber auch immer das zweite Produkt mit Absicht geliefert hat. Der Beitrag Anti-Dashboard behandelt die Layout-Seite derselben Disziplin, der Text zu visueller Hierarchie behandelt, wie der Experte Dichte liest.

Wo das ins Produkt passt

Power-User-UX ist das Gegenstück zu First-Run-UX. Der Beitrag Onboarding ohne Onboarding kümmert sich um den Nutzer, der das Produkt noch nie gesehen hat. Dieser hier kümmert sich um den Nutzer, der es neunhundertmal gesehen hat. Die Idee Reibung mit Absicht designen gilt hier umgekehrt: Für den neuen Nutzer bringt Reibung im richtigen Moment das Produkt bei. Für den Experten ist jede unnötige Reibung eine Steuer. Die Beiträge zu Landingpage-Designprinzipien und Webdesign-Prinzipien behandeln die Marketingseiten- und die produktweite Version derselben Disziplin.

Baue das verborgene Produkt mit Absicht

Das sichtbare Produkt bekommt den Launch-Post und das Demovideo. Das verborgene Produkt bekommt die Verlängerung und die Mundpropaganda. Linear, Raycast, Superhuman, Notion, Cron, Figma, Gmail, Vercel, Slack, GitHub, Stripe und Cursor teilen alle eine Eigenschaft. Sie haben ein echtes zweites Produkt für den Nutzer geliefert, der schon Bescheid weiß.

Die meisten Teams liefern das erste Produkt und lassen das zweite aus Versehen entstehen. Das ist die Entscheidung, die den Experten kostet. Wähle die Tastaturebene. Wähle die Palette. Wähle das Saved-View-System. Wähle die Bulk-Aktion. Wähle die Power-Oberfläche. Der Zinseszinseffekt ist der Unterschied zwischen einem Produkt, das der Experte erträgt, und einem, das er weiterempfiehlt.

FAQ

Was ist Power-User-UX?

Power-User-UX ist die Designebene für den Nutzer, der das Produkt schon kennt. Sie umfasst die Command Palette, die Tastaturebene, Saved Views und Filter, Bulk-Operationen und Power-only-Oberflächen. Der neue Nutzer braucht sie nicht. Der Experte lebt darin.

Sollte jedes Produkt eine Cmd-K-Command-Palette haben?

Fast jedes Produktivitätsprodukt sollte eine haben. Eine Palette wird zur vereinten Oberfläche zum Suchen und Handeln und gibt dem Experten einen Tastendruck, der jede Aktion öffnet. Linear, Raycast, Notion, Vercel, GitHub und Slack liefern alle eine. Consumer-Produkte mit einer einzigen Primäraktion können darauf verzichten. Die meisten B2B- und Prosumer-Tools nicht.

Wie bringt man Tastenkürzel ohne Tour bei?

Zeige den Shortcut jedes Mal neben der Aktion. Tooltip-Hinweise, Palettenhinweise, Menübeschriftungen. Superhuman liefert das Cheatsheet als erstklassigen Screen, den der Nutzer aufrufen kann. Linear zeigt jeden Shortcut in der Palette und in den Menüs. Der Nutzer lernt die Tastatur, indem er die Arbeit erledigt.

Liefere das zweite Produkt

Wenn du ein Team willst, das die Tastaturebene, die Command Palette und das Saved-State-System als Teil des Produkts designt statt als Aufräumarbeit am Ende, hire Brainy. Wir bauen das verborgene Produkt mit Absicht, damit der Experte dein Tool morgen öffnet und sich schneller fühlt als gestern.

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