Regras de UX

O revisor compara nosso trabalho com “Stripe, Square, QuickBooks, Meta and other top SaaS” (os melhores SaaS do mercado). A Intuit é dona do QuickBooks, então este guia pega a estrutura do Intuit Content Design e a preenche com regras copiadas de produtos que as pessoas já usam.

Os cinco princípios

• Menos passos: todo clique, toque, abertura ou resposta que o sistema poderia ter poupado é uma falha.
• Menos rolagem: uma resposta cabe em uma tela, com os itens lado a lado antes de empilhar.
• Menos entradas: a pessoa digita só o que nada mais sabe e valida o resto.
• Máxima intuição: em um relance de um segundo, alguém de fora diz o que a coisa é e o que fazer em seguida.
• Jeito único: como fazemos uma coisa é como fazemos todas.

Medição define como cliques, entradas e linhas são contados nos cinco.

Nota

Uma entrega começa com 100%. Cada rodada de revisão custa 15%. Cada falha em um dos cinco princípios custa 3%, e qualquer outro erro custa 1%. Uma rodada de revisão a mais custa o mesmo que cinco princípios quebrados, por isso o trabalho é checado com cada ator antes de chegar ao revisor.

Alavancas

Princípio	Tela	Email	Formulário	Documento
Menos passos	Os registros abrem no detalhe da tabela. O detalhe mostra a próxima ação. Depois de uma ação, a tela mostra o resultado onde a pessoa já está.	Um botão que leva direto à página onde a ação acontece.	O formulário termina no registro que criou.	A resposta está na primeira página que o leitor abre.
Menos rolagem	Até seis campos por linha do detalhe antes de um novo grupo. No máximo seis campos em um card ou linha, além do título. Linhas extras vão para a direita do título antes de se criar uma nova linha.	O pedido fica na primeira linha.	Um campo que pertence ao lado do vizinho fica ao lado dele.	A resposta vem primeiro.
Menos entradas	Fórmulas, lookups, rollups, automações e preenchimentos automáticos preenchem o que podem. Campos calculados são só leitura. Um clique em uma caixa de número seleciona o valor.	A pessoa responde com um clique no botão.	Os campos conhecidos a partir do lugar onde o formulário foi aberto já chegam preenchidos.	O leitor nunca copia um valor de um lugar para outro.
Máxima intuição	Nomes de página, aba e grupo dizem o que a coisa é em uma ou duas palavras. Os botões usam as palavras em que a pessoa está pensando.	O assunto e o botão dizem qual é a ação.	A pergunta está nas palavras da pessoa, com o marcador de obrigatório no cabeçalho.	Os títulos enunciam a regra e a primeira frase responde à pergunta.
Jeito único	Toda página é de um tipo do page kit. Uma página de detalhe por tabela. Um componente de busca, em um lugar, em um tamanho.	Todo email de um tipo tem as mesmas partes na mesma ordem.	Nomes de campo e marcadores de obrigatório batem com a tabela e o intake dela.	Toda página de regra usa o mesmo esqueleto e os mesmos pares.

Como este guia é montado

O guia tem três camadas. Os fundamentos guardam os cinco princípios. Estilo e uso trata de como palavras, números, cores e marcadores aparecem em qualquer lugar. As camadas de superfície aplicam os dois a um tipo de artefato: produto e UI para telas e formulários, conversa com clientes para email.

Toda regra vem de um produto ou de um guia publicado, com link para a tela ou página de origem. Quando a regra vem só do revisor, a seção Referências avisa.

Cada página de regra segue um esqueleto: Quando usar, Quando não usar, Como funciona, Referências. Dentro de Como funciona, cada regra é um título escrito como instrução, seguido de uma explicação curta e de uma linha que começa com “Passa:”. A linha Passa traz uma condição mensurável, com um número da página medição sempre que um produto de referência foi medido. Onde não há medida, a linha diz uma verificação que duas pessoas responderiam do mesmo jeito. Quando há material, vem depois um par Faça e Não faça. Os dois lados do par diferem em uma coisa só, para o leitor ver o que a regra muda. Exemplos de texto usam um par Troque isto e Por isto.

Os títulos das páginas seguem nomes: uma ou duas palavras. O slug guarda o primeiro nome inglês da página, para que links já compartilhados continuem abrindo.

Tirando o esqueleto da página, copiamos cada uma dessas peças de um guia diferente. Os nomes das seções seguem o Intuit Content Design, cujas páginas ficam em foundations, product and UI e talking to customers. O par Faça e Não faça vem da página de botões da Atlassian, que põe as duas imagens lado a lado, com fundo verde e vermelho e uma legenda embaixo de cada uma. O esqueleto da página é nosso. As referências mais próximas são a Atlassian, cujas páginas de componente dividem a orientação em uso e boas práticas, e os padrões do Stripe Apps. A página de estado vazio do Stripe segue Before you begin, Best practices e depois uma seção por tarefa. A página de botões de ação segue Before you begin e depois uma lista de usos sugeridos. Nenhuma das duas tem uma seção Quando não usar. O par Troque isto e Por isto vem do Microsoft Writing Style Guide.