Títulos, descrições e botões

Essas são, geralmente, as principais informações textuais de uma tela, uma vez que costumam ser as primeiras a serem lidas. Por isso, é preciso garantir certa consistência.

Lembre-se: um título pode ter diferentes funções, a depender do tipo de interface e do objetivo da tela. Por isso, sua grafia pode ser distinta. 😉

---

Boas práticas gerais

Títulos, subtítulos e descriptions são elementos essenciais para organização visual e contextual de uma interface. Eles devem orientar rapidamente o usuário sobre o conteúdo e ações possíveis.

• Use títulos curtos e objetivos que indiquem claramente a proposta do conteúdo.

✓ Pagamento

✕ Escolha sua forma de pagamento

• Descriptions precisam ser diretas e fornecer informações adicionais relevantes para auxiliar o usuário a prosseguir.

• Já os botões, ao indicarem uma ação com o clique ou toque, devem transmitir uma expectativa clara do que virá a seguir.

Agora que você já conferiu um exemplo de boas práticas, acompanhe algumas definições adicionais para cada um destes componentes:

Títulos

• Curtos, objetivos e em caixa-alta-baixa: Playlists populares.

• Use verbos no imperativo, como: Escolha, Descubra, Pratique, Aproveite, Faça.

• O título é, também, um elemento de navegação. Caso o usuário se perca no fluxo, recorrer ao título para se situar de onde está na interface é um dos caminhos a serem tomados.

• Demais regras podem ser consultadas na padronização de estilo deste Manual.

Os títulos são fundamentais para a escaneabilidade e compreensão rápida das interfaces.

Descriptions

• As descriptions são usadas somente quando necessário! Elas devem trazer informações adicionais e relevantes que só o título não dá conta.

• Elas também podem ser usadas para reforçar alguma mensagem com outras palavras ou trazendo argumentos que somam à ideia central do título.

Use as descriptions com sabedoria! Elas são ótimas aliadas para um ux writer que precisa descrever sua ideia em forma de texto.

Botões e CTAs

Botões e links são textos interativos que guiam diretamente o usuário a realizar ações. Precisam ser claros, concisos e intuitivos.

• Textos de botões devem, preferencialmente, usar verbos no infinitivo: Salvar, Criar conta, Explorar artistas, Ver Lista, Ir para Billie Eilish.

• Use verbos curtos e fuja de ambiguidades.

• Evite textos genéricos na construção de botões e hiperlinks: Clique aqui, Ok, Avançar e afins.

• Seja consistente no estilo dos textos dos botões e hiperlinks em toda a interface.

Escolha um termo único para ações repetidas em todo o produto e padronize estes termos em todos os lugares. O segredo é a consistência!

A clareza e objetividade em botões e links garantem uma ação intuitiva e efetiva.

---

Percebeu um erro, ficou com dúvida ou tem uma sugestão?

Contribua com o Kósmos preenchendo nosso formulário de contribuição — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo.