web design uiMay 1, 202610 min read

Design para Power Users

A maioria dos produtos é desenhada para o usuário de primeira viagem e abandona o especialista que volta todo dia. As cinco camadas de UX para power users, as regras que seguram a linha e uma auditoria para você aplicar já.

By Boone
XLinkedIn
design for power users

O usuário que clica em todos os botões já foi embora. Aquele que vive dentro do seu produto o abre vinte vezes por dia e memorizou uma interface oculta que você talvez nem tenha desenhado. Se o produto de outra pessoa tem uma interface oculta melhor, o especialista sumiu, e o especialista é a coorte que paga.

O UX mainstream fala de first-run e ativação. O especialista nunca vê nada disso. Ele abriu seu produto pela octingentésima vez, apertou Cmd-K e ou voou pelo trabalho ou deu rage quit porque sua palette devolve cinco resultados irrelevantes. UX para power users é o segundo produto, e a maioria dos times ainda não lançou um.

O produto oculto por trás do visível

Todo grande produto tem dois produtos dentro dele. O visível, para o usuário novo, e o oculto, para o usuário que já sabe.

O produto visível é feito de botões, menus, tooltips e tours. O produto oculto é feito de atalhos de teclado, command palettes, saved views, multisseleção e estado endereçável por rota. O primeiro torna a primeira sessão legível. O segundo torna as próximas mil sessões rápidas.

O Linear entrega os dois, de propósito. O usuário novo vê uma inbox limpa com uma ação primária clara. O especialista aperta g e depois i para ir à inbox, c para criar uma issue, shift-click para multisseleção, e cada saved view é uma URL compartilhável. Mesmo produto. Dois produtos. Ambos desenhados.

Power users são a coorte que você não pode perder

O usuário de primeira viagem é barulhento e o especialista é silencioso, então a maioria dos times otimiza para o barulhento. Power users abrem o produto mais dias por mês, geram mais receita por assento e trazem mais usuários novos do que todas as outras coortes juntas. Também são os que saem fazendo mais barulho, porque sabem como é a sensação de rapidez em três produtos concorrentes.

A solução não é "adicionar atalhos". A solução é tratar a superfície de power user como um produto de primeira classe, com orçamento de design e roadmap próprios.

As cinco camadas de UX para power users

UX para power users não é uma feature. São cinco camadas que se acumulam. A maioria dos produtos entrega uma ou duas. Os melhores entregam as cinco, e as camadas se reforçam.

Framework em voxel de cinco camadas empilhadas e inclinadas em direção à câmera: command palette, camada de teclado, saved views, ações em massa e superfícies de poder, conectadas por finas linhas coral como uma espinha dorsal
Framework em voxel de cinco camadas empilhadas e inclinadas em direção à câmera: command palette, camada de teclado, saved views, ações em massa e superfícies de poder, conectadas por finas linhas coral como uma espinha dorsal

1. A command palette

A palette Cmd-K é a superfície unificada de busca e ação. Uma tecla convoca toda ação, rota e objeto do produto, ranqueados por recência e frequência. A palette do Linear é a régua. O Raycast construiu uma camada inteira de sistema operacional em torno da mesma primitiva. Notion, Vercel, GitHub e Slack entregam a sua.

Uma palette de verdade busca conteúdo e ações no mesmo input, mostra dicas de atalho ao lado de cada resultado e aceita argumentos inline. "Mover issue para em andamento" funciona como um único comando em vez de uma corrente de quatro cliques. O modo de falha é a palette que só busca: uma caixa que acha documentos mas não dispara ações é uma barra de busca com delírios de grandeza. O ponto do Cmd-K é achar e agir. O texto empty states são o produto explica por que o estado padrão da palette importa.

2. Atalhos de teclado como sistema de primeira classe

Atalhos não são uma lista de teclas escondida num modal de ajuda. São um sistema com descobribilidade, consistência e profundidade progressiva. O Superhuman é o padrão-ouro. Toda ação tem uma tecla, o cheatsheet vem dentro do produto e o onboarding ensina o teclado antes do mouse.

O Linear roda um sistema de pares de letras que escala. A primeira letra nomeia a superfície (g de go), a segunda nomeia o destino (i de inbox, p de project, m de my issues). O usuário aprende uma regra e destrava cinquenta atalhos. O Notion entrega barra para comando e Cmd-K para a palette. O Figma entrega ferramentas de uma letra (V para mover, R para retângulo, F para frame, T para texto). Os atalhos do Gmail seguem sendo o padrão-ouro para e-mail, vinte anos depois.

Teclado em voxel deitado com teclas selecionadas elevadas em pedestais coral: G+I para inbox, V R F T para as ferramentas do Figma, barra e Cmd-K no centro, J K para navegação, o resto das teclas em cinza apagado
Teclado em voxel deitado com teclas selecionadas elevadas em pedestais coral: G+I para inbox, V R F T para as ferramentas do Figma, barra e Cmd-K no centro, J K para navegação, o resto das teclas em cinza apagado

O sistema é o produto. Um monte de atalhos soltos não é um sistema, é um backlog que o time esqueceu de apagar.

3. Saved views, filtros, favoritos

O especialista constrói o produto em torno do seu fluxo de trabalho. As saved views do Linear aparecem na sidebar, sobrevivem ao logout, são compartilhadas por URL e atualizam ao vivo. As views filtradas de database do Notion fazem o mesmo para conteúdo. As buscas salvas do Stripe guardam o filtro exato que pega anomalias. A Vercel fixa time e projeto por favorito, então o dashboard certo fica a uma tecla de distância.

O inegociável: o estado salvo precisa ser endereçável. Toda saved view deve ter uma URL que sobreviva a um logout, a uma troca de dispositivo e a um compartilhamento com um colega. Estado que vive só no localStorage desaparece no instante em que o usuário abre o produto em outro notebook.

4. Operações em massa

O especialista toca cem objetos por dia. O produto ou suporta isso ou o pune por isso. A multisseleção do Linear com shift-click e depois atualização em massa com B é canônica. A multisseleção em databases do Notion permite mudar status, responsável e tags em trinta linhas de uma vez. Os atalhos do Gmail mais shift-J são a razão de a inbox ser suportável em escala.

Operações em massa precisam de três propriedades. A seleção tem que ser óbvia. A ação tem que ser alcançável pelo teclado. O undo tem que ser real. Uma ação em massa atrás de um menu de clique direito é uma ação em massa que você não vai usar, e uma ação em massa sem undo de uma tecla destrói a confiança na primeira vez que dá errado.

5. Superfícies só para power users

Algumas superfícies existem só para o especialista. O console da API do Figma, a biblioteca de extensões do Raycast, a view de administração de database do Notion, a Vercel CLI, o Cron e a camada de time-block só com teclado do Notion Calendar. Essa é a camada de profundidade em que o especialista vive.

O Raycast é a versão mais limpa. O produto base é uma command palette. O especialista instala extensões e scripts personalizados que transformam a palette numa camada pessoal de sistema operacional. Os databases do Notion têm o mesmo formato: o iniciante vê uma lista, o especialista vê um modelo de dados relacional com rollups e fórmulas.

O padrão é a profundidade progressiva. O princípio de progressive disclosure é a ideia que sustenta tudo: a profundidade vive a uma tecla de distância, não na tela inicial.

Por dentro da command palette

A palette Cmd-K é a superfície de power user mais importante, e a maioria dos times entrega uma fraca. Cinco elementos separam as palettes fortes de barras de busca fantasiadas.

Anatomia em voxel de uma command palette desmontada em partes rotuladas: um input de busca coral no topo, três linhas de resultado no meio, um rodapé ciano com dicas de atalho, uma tecla ESC flutuando à direita
Anatomia em voxel de uma command palette desmontada em partes rotuladas: um input de busca coral no topo, três linhas de resultado no meio, um rodapé ciano com dicas de atalho, uma tecla ESC flutuando à direita

Uma ótima palette ranqueia resultados por recência e frequência, mostra uma dica de atalho ao lado de cada resultado, aceita argumentos inline, se adapta ao contexto e fecha com um único Esc. A do Linear faz as cinco. A do Raycast faz as cinco e transforma a palette no produto inteiro. A maioria das palettes faz duas, e o usuário aprende a ignorá-las.

Cinco regras para desenhar UX para power users

Cinco regras separam uma superfície de power user de verdade de uma lista de atalhos largada no rodapé da ajuda. Acerte quatro e a superfície costuma funcionar. Acerte duas e o especialista vai embora.

  1. Toda ação tem uma tecla. Se o usuário consegue fazer com o mouse, deve conseguir fazer pelo teclado.
  2. Mostre as teclas sem exibi-las. Dicas de atalho na palette, em tooltips, nas linhas de menu. O atalho deve estar visível no momento em que o usuário estica a mão para o mouse, não enterrado numa página de configurações.
  3. A multisseleção precisa ser óbvia. Checkboxes visíveis ou um padrão claro de shift-click. Uma ação em massa que o usuário não sabe que existe é uma ação em massa que não existe.
  4. O estado salvo precisa ser endereçável. Baseado em URL, persistente, compartilhável. Estado que vive só no navegador é estado que evapora.
  5. A superfície de poder vive a uma tecla de distância. Cmd-K, barra ou uma única letra. Se o especialista tem que navegar até ela, é uma página de feature, não uma superfície de poder.

Um produto que acerta quatro de cinco parece vivo nas mãos do especialista. Um que acerta dois parece um site com uns truques de teclado parafusados por cima.

Antipadrões que mostram que o time esqueceu o especialista

Cinco padrões matam mais superfícies de power user do que qualquer outra coisa.

Atalhos que conflitam com o navegador. Ctrl-W ou Ctrl-T remapeados dentro de um webapp fecham a aba e o usuário perde trabalho não salvo. Faça namespace dentro do Cmd-K.

Atalhos documentados só num modal de ajuda a três cliques de distância. Um cheatsheet atrás de Configurações, Ajuda, Atalhos de teclado é um que o usuário nunca verá. Mostre as teclas no momento da ação. O Superhuman entrega o cheatsheet como uma tela de primeira classe. A maioria dos produtos entrega como um link no rodapé que torce para ninguém clicar.

Multisseleção que exige clique direito. Uma ação em massa dentro de um menu de contexto existe para o changelog, não para o usuário.

Paywalls de plano Pro em atalhos básicos. Alguns produtos trancam atalhos de teclado, palettes ou saved views atrás de um plano "Pro". O atalho não é a feature, é como a feature é usada. Travá-lo é travar o próprio produto.

Saved views que não sobrevivem ao logout. Um filtro que vive só no localStorage se apaga quando o usuário abre o produto em outro dispositivo. Persista no servidor, vincule ao usuário, deixe a URL carregar.

A auditoria de power user

Passe qualquer produto por estas sete perguntas. Falhou em duas ou mais, e o especialista estará no produto de outra pessoa até o fim do trimestre.

Árvore de decisão em voxel com sete blocos de pergunta descendo pelo quadro: tecla para toda ação, teclas descobríveis, multisseleção óbvia, estado salvo endereçável, a uma tecla de distância, sem conflito com o navegador, sem paywall
Árvore de decisão em voxel com sete blocos de pergunta descendo pelo quadro: tecla para toda ação, teclas descobríveis, multisseleção óbvia, estado salvo endereçável, a uma tecla de distância, sem conflito com o navegador, sem paywall
  1. Toda ação primária tem um atalho de teclado? Liste as vinte principais ações e confira. Se mais de três exigem o mouse, a camada de teclado está incompleta.
  2. Existe uma palette Cmd-K que busca e age? Não uma barra de busca. Uma palette que executa comandos, aceita argumentos e mostra dicas de atalho.
  3. Os atalhos são descobríveis no contexto? Tooltips, dicas na palette, rótulos de menu. O usuário deve aprender o atalho enquanto faz a ação, não lendo documentação.
  4. A multisseleção funciona pelo teclado, com um undo claro? Shift-click, depois uma ação por tecla, depois um undo de uma tecla. Qualquer elo faltando quebra a corrente.
  5. As saved views são endereçáveis por URL e persistentes? Copie a URL, cole em outro navegador, faça login. Se a view não carrega, estado salvo é teatro.
  6. As superfícies de poder estão a uma tecla de qualquer lugar? O console, a superfície da API, a biblioteca de extensões. Se o especialista precisa navegar para chegar até elas, são páginas de feature, não superfícies de poder.
  7. O produto trata o teclado como cidadão de primeira classe? Sem atalhos que conflitam com o navegador. Sem atalhos atrás de paywall. Sem ações em massa só com mouse.

Um produto que passa nas sete retém o especialista por padrão. Um que falha em três ou mais o perde para o Linear, o Raycast ou qualquer concorrente que lançou o segundo produto de propósito. O anti-dashboard cobre o lado de layout da mesma disciplina, e o texto sobre hierarquia visual cobre como o especialista lê densidade.

Onde isso se encaixa no produto

UX para power users é a contraparte do UX de first-run. O texto onboarding sem onboarding cuida do usuário que nunca viu o produto. Este aqui cuida do usuário que já o viu novecentas vezes. A ideia de projetar fricção de propósito se aplica ao contrário aqui: para o usuário novo, fricção no momento certo ensina o produto. Para o especialista, toda fricção desnecessária é um imposto. Os textos sobre princípios de design de landing page e princípios de web design cobrem as versões de página de marketing e de produto inteiro da mesma disciplina.

Construa o produto oculto de propósito

O produto visível ganha o post de lançamento e o vídeo de demo. O produto oculto ganha a renovação e o boca a boca. Linear, Raycast, Superhuman, Notion, Cron, Figma, Gmail, Vercel, Slack, GitHub, Stripe e Cursor compartilham uma característica. Entregaram um segundo produto de verdade para o usuário que já sabe.

A maioria dos times entrega o primeiro produto e deixa o segundo acontecer por acidente. Essa é a escolha que custa o especialista. Escolha a camada de teclado. Escolha a palette. Escolha o sistema de saved views. Escolha a ação em massa. Escolha a superfície de poder. O efeito composto é a diferença entre um produto que o especialista tolera e um produto que o especialista evangeliza.

FAQ

O que é UX para power users?

UX para power users é a camada de design voltada ao usuário que já conhece o produto. Inclui a command palette, a camada de teclado, saved views e filtros, operações em massa e superfícies só para power users. O usuário novo não precisa disso. O especialista vive dentro disso.

Todo produto deveria ter uma command palette Cmd-K?

Quase todo produto de produtividade deveria. Uma palette vira a superfície unificada de busca e ação e dá ao especialista uma tecla que abre qualquer ação. Linear, Raycast, Notion, Vercel, GitHub e Slack entregam uma. Produtos de consumo com uma única ação primária podem dispensar. A maioria das ferramentas B2B e prosumer não pode.

Como ensinar atalhos de teclado sem um tour?

Mostre o atalho ao lado da ação, toda vez. Dicas em tooltips, dicas na palette, rótulos de menu. O Superhuman entrega o cheatsheet como uma tela de primeira classe que o usuário pode invocar. O Linear mostra cada atalho na palette e nos menus. O usuário aprende o teclado fazendo o trabalho.

Entregue o segundo produto

Se você quer um time que desenhe a camada de teclado, a command palette e o sistema de estado salvo como parte do produto, e não como limpeza no final, contrate a Brainy. Construímos o produto oculto de propósito, para que o especialista abra sua ferramenta amanhã e se sinta mais rápido do que ontem.

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