RTFM #02: o guia básico do componente Button

Entenda o uso do Button e suas particularidades nos produtos da Quero Educação

Jan Klever
Jul 31, 2020 · 6 min read

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.

Publicidade antiga de um rádio com botões utilizados para sintonizar novas estações
Publicidade antiga de um rádio com botões utilizados para sintonizar novas estações

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!

Vários exemplos de botões utilizados nos produtos da Quero
Vários exemplos de botões utilizados nos produtos da Quero

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.

Início da seção sobre diferenças
Início da seção sobre diferenças

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.

Início da seção de regras
Início da seção de regras

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.

Com relação a hierarquia, o uso incorreto apresenta os botões 'Voltar' e 'Continuar' possuem o mesmo peso hierárquico
Com relação a hierarquia, o uso incorreto apresenta os botões 'Voltar' e 'Continuar' possuem o mesmo peso hierárquico

02 Clareza

Os buttons precisam evidenciar uma ação clara com um rótulo textual ou iconográfico.

Image for post
Image for post

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. ;)

Com relação a rotulação, o exemplo incorreto mostra um botão com rótulo 'Clique aqui'
Com relação a rotulação, o exemplo incorreto mostra um botão com rótulo 'Clique aqui'

04 Interatividade

Os buttons precisam interagir com o mouseover quando habilitados.

Com relação a interatividade, o botão se modifica visualmente com o mouseover
Com relação a interatividade, o botão se modifica visualmente com o mouseover

05 Inatividade

Os buttons podem se apresentarem um estado desabilitado, perdendo qualquer interatividade e diferenciando seu visual do estado ativo.

Com relação a inatividade, o botão incorreto que se encontra desabilitado não distingue seu visual
Com relação a inatividade, o botão incorreto que se encontra desabilitado não distingue seu visual

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…

Propaganda vintage da câmera fotográfica da Kodak
Propaganda vintage da câmera fotográfica da Kodak

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.

Anúncio antigo com a Maitê Proença, um aparelho e os dizeres: Com o novo Sony Betamax SL-30 você leva para casa a sua estrela
Anúncio antigo com a Maitê Proença, um aparelho e os dizeres: Com o novo Sony Betamax SL-30 você leva para casa a sua estrela

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:

Tech at Quero

Blog do time de Tecnologia da Quero Educação — A EdTech que…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store