RTFM #02: o guia básico do componente Button
Entenda o uso do Button e suas particularidades nos produtos da Quero Educação
Se o assunto é Design System, não tem como não falar dele, um dos componentes mais importantes desse ecossistema que a gente adora fazer parte. É uma pecinha pequena, porém, essencial para um quebra-cabeça por seu poder de ação, interação e execução. O Button é a varinha mágica, digo, o componente que dá o poder de ação para os usuários e vida para novas possibilidades de ações para quem o utilizar.
Não concorda comigo sobre a relevância desse componente em um produto digital? Então, como eu gosto bastante de uma boa analogia, vou te fazer uma pergunta: como é mesmo que você faz para ligar sua TV, seu liquidificador ou o portão da sua garagem? Ah, e não me venha dizendo que você vive em uma smart house e que é sua assistente de voz que faz tudo isso, porque não vou acreditar. Apesar de eu ser fã também desses equipamentos, até mesmo os smart speakers precisam de um botão para começar a funcionar (tum dum tss!).
Se os Cards são os queridinhos dos produtos da Quero Educação, tenho que admitir que os Buttons são os amados de qualquer designer que trabalha com design system. É só você dar uma pesquisada por aí. TODOS amam esse componente e, mesmo que eu goste de ser diferente, não posso fugir a essa regra: eles são mesmo muito eficientes desde a era dessas propagandas vintage. É só apertar um botão e… Plim! A mágica acontece!
E é assim que começamos mais uma edição do RTFM (Recurso Técnico de Fixação Mental). Se não está entendendo sobre o que estamos falando, convido você a começar pelo nosso artigo introdutório para saber tudo sobre a documentação do design system da Quero Educação.
Agora chega de enrolação e aperta logo o botão para a gente ouvir o que interessa!
Definição: O que são Buttons?
Buttons comunicam ações que podem ser executadas pelo usuário. Em geral, apresentam-se em toda interface do usuário e devem ser facilmente identificáveis, mesmo que em diferentes níveis de affordance — princípio fundamental da interação.
Se você não sabe, de maneira bem simples, affordance (nem adianta traduzir porque em português não tem a mesmo representação) é a relação entre o objeto e o usuário, entre as propriedades do objeto e as capacidades da pessoa que o utilizar de forma intuitiva ou por experiências anteriores. Entendeu porque gosto tanto de fazer analogia com coisas velhas, digo, retrô? Por mais que você seja jovem assim como eu, a boa experiência é que sempre conta.
Ou seja, o componente da série de hoje realmente parece com o power button do seu aparelho doméstico, com um design bem pensado para você — em vez de apertar — clicar para esperar pela ação que assim o representa. Ele comunica o status preciso para o usuário, criando, além da interação, o estilo necessário como parte do processo.
Comparando os Buttons com outros elementos
Buttons ≠ Links
Links são âncoras para páginas ou seções, ou seja, eles movimentam o usuário para outro lugar enquanto os buttons estão mais relacionados à realização de uma ação, como confirmar um pagamento.
Buttons ≠ Button Groups
Button Groups são utilizados para agrupar ações equivalentes (como centralizar ou justificar um conteúdo). Já os buttons são componentes individuais e até podem vir acompanhados de outros botões, sejam eles com ações equivalentes ou antagônicas (como voltar ou continuar em um fluxo), mas não grudados.
Buttons ≠ Tag
Tags realizam escolhas relacionadas à filtragem ou à categorização. Isso até representa uma ação, mas, diferente dos buttons, elas possuem o estado selecionado.
Os do’s and don’ts dos Buttons
Já que o button é o componente queridinho de todos e mais que necessário para um usuário ter o poder de ação em nossos produtos, é bom que você leia esse pequeno manual de instruções como se seu design system fosse mesmo um produto físico, um aparelho doméstico. Ou como a referência do nome desta série diz, Read the F****** Manual! ;)
01 Hierarquia
Os buttons, utilizados em uma mesma seção, devem se diferenciar entre si para gerar uma hierarquia dentre suas ações — sem que haja repetição indevida.
02 Clareza
Os buttons precisam evidenciar uma ação clara com um rótulo textual ou iconográfico.
03 Rotulação
Os buttons com rótulos textuais devem ser representados com verbos flexionados no infinitivo para identificar a ação que será desempenhada pelo usuário. Por isso, o UX writing é tão importante. ;)
04 Interatividade
Os buttons precisam interagir com o mouseover quando habilitados.
05 Inatividade
Os buttons podem se apresentarem um estado desabilitado, perdendo qualquer interatividade e diferenciando seu visual do estado ativo.
Como utilizamos os buttons na Quero Educação
Assim como em qualquer outro produto digital, os Buttons também têm igual importância por aqui. No Quero Bolsa, no Guia da Carreira, no Mundo Vestibular, esses botões dão o poder de ação para os alunos que estão à procura de um novo curso para estudar. Do botão de busca por uma faculdade, passando pelo botão de envio da sua prova de vestibular do Nota Quero, até o envio de documentos para se matricular na instituição de ensino, este componente está presente em todo o percurso de um aluno em busca de educação.
Aperta o botão para desligar!
Entendeu porque o button é como uma varinha mágica? Se a gente não tivesse um time de marketing capacitado, eu poderia até finalizar esse artigo reaproveitando esse outro exemplo de publicidade antiga e dizer que é só o usuário apertar o botão para…
Mas, não, não vou fazer isso. E antes de apertar, enfim, o botão de desliga, vou só reforçar que os buttons fazem parte do nosso plano de encurtar essa trajetória daqueles que querem aprender até quem sabe ensinar. "Marketing da Quero Educação, aprendi direitinho???"
E agora, sim, fico por aqui. Mas, em vez de desligar, vou apertar o botão de stand-by, porque em breve volto com o próximo componente da nossa série.
E não deixe de apertar o botão para levar o conteúdo de outras estrelas do squad Design System da Quero Educação para casa:
- RTFM: Recurso Técnico de Fixação Mental
- RTFM #01: o guia básico do componente Card
- Design System: da confusão à construção de um produto 👷🏾♂️
- OPS! Evoluímos nosso Design System 📐
- Design system por um desenvolvedor front-end, parte 1 e parte 2. 👨🏻💻
- Design System: conectando desenvolvedores e designers 🖌⚙️
