A importância das cores no produto

A importância das cores no produto
Mateus Villain
Mateus Villain

Compartilhe

Desde que o mundo é mundo, não importa para que lado olhamos, se houver luz, haverá cor. Isso é algo que todas as pessoas sabem, nunca foi um mistério para a humanidade, e isso nos acompanha de diferentes formas desde a nossa infância, em que aprendemos a pintar uma casinha, um céu, pessoas, e pode até não parecer, mas isso nos faz evoluir na sociedade, entendendo que cores são mais do que estética visual, mas possuem significado.

Esse assunto acaba se expandindo também para o universo digital, que tal qual ao mundo real, trabalhamos com diversas cores que, dependendo da situação, vão trazer um tipo de emoção diferente, podem demonstrar um impacto além das palavras, e garantir que a identidade de uma marca seja mantida no produto. E é sobre como as cores são importantes no produto que iremos falar hoje.

O impacto nas pessoas

Para entendermos um pouco do impacto que as cores fazem na gente, gosto de apresentar um vídeo em especial, que é o do ex-fisiculturista William Reed. Reeds nasceu daltônico, uma condição que afeta a possibilidade de enxergar todas as cores que o olho humano pode ver. De acordo sua esposa, o ex-fisiculturista contava que tudo se misturava, em uma espécie de lama, até que um certo dia, foi presenteado com um óculos que o permitiu ver cores pela primeira vez. A reação? Essa eu deixo para você assistir (e se emocionar).

Claro, a gente entende que a emoção dele, de fato, foi de finalmente poder ver o mundo com cores, mas percebe o enorme impacto que elas possuem sobre nós? Um simples elemento pode mudar totalmente o significado de algo.

Banner promocional da Alura, com um design futurista em tons de azul, apresentando dois blocos de texto, no qual o bloco esquerdo tem os dizeres:

O significado das cores

Quando levamos as cores para produtos digitais, como sites e aplicativos, a história não é diferente. Durante a navegação e interação com a interface, queremos trazer uma experiência que seja extremamente positiva, e o uso de cores para sinalizar cenários e acontecimentos é super favorável.

Vamos imaginar o seguinte cenário: você vai fazer login na sua conta do LinkedIn, mas sem querer, erra a sua senha. Normal, quem nunca errou uma senha na vida, que atire a primeira pedra, mas o problema surge após clicar no botão “Entrar”:

Área de login do LinkedIn, contando com os campos de e-mail e senha, embaixo o botão de “Entrar” e, por último, o botão de login com a conta da Apple. O campo de e-mail está normal, e o campo de senha apresentando uma mensagem de erro na cor verde, além de também estar com as bordas esverdeadas.

O aviso de erro está na cor verde, e só esse simples fato já causa uma estranheza enorme no aviso, já que o comum é exibirmos a cor vermelha nesse cenário. Mas você pode argumentar dizendo que “estranheza” não é algo tão impactante assim, que vá ferir a experiência do produto. A não ser que a cor seja um elemento autodescritivo, de certa forma. Um aviso em vermelho aparecendo logo após executar uma ação, mesmo antes de ler, já vai nos dizer que algo deu errado, da mesma forma que uma mensagem em verde sinalizaria algo positivo, de sucesso. É claro que a leitura é essencial para entender o contexto, principalmente em casos de problema, para saber o que ocorreu e como podemos consertar, mas só o fator disso trazer rapidez no entendimento, já melhora a experiência do usuário.

Tudo isso vem de nossa vivência, mas também de outro estudo que acompanha não só o design de interface, mas também branding, arquitetura, cerâmica, e várias outras áreas, que é a Psicologia das Cores.

Na imagem aparecem sete cartões, com as cores Vermelho, Laranja, Amarelo, Verde, Azul, Roxo e Preto, respectivamente. Na cor vermelha, possuem os significados Coragem, Poder e Paixão. Em laranja, possui Exuberância, Energia e Alegria. Em amarelo, possui Clareza, Comunicação e Otimismo. Em verde, possui Natureza, Harmonia e Recompensa. Em azul, possui Calma, Produtividade e Imaginação. Em roxo, possui Intuição, Respeito e Espiritualidade. Por fim, em preto possui Força, Elegância e Sofisticação.

Entender a psicologia das cores é super simples, ao mesmo tempo que super útil, principalmente quando você vai trabalhar em uma área que atua constantemente com isso. Nela, é explicado os mais diversos significados que podem ser transmitidos ao colorir um determinado elemento.

Ao criar a composição de cores de um produto, o tópico principal que deve vir a mente precisa ser: “qual mensagem quero passar para as pessoas usuárias?”. Mesmo que uma cor possa trazer mais de 10 significados, cabe a você, como designer, criar o cenário ideal, com outros elementos além das cores, para que as pessoas captem a mensagem com a precisão e rapidez que comentei.

A importância da acessibilidade

Lembra do vídeo que mostrei no começo do artigo? Ele pode ser tanto um exemplo de como as cores são importantes para nós, pois elas trazem toda a emoção consigo, mas também reflete a relevância de se distinguir uma da outra para enxergamos melhor. Ter uma visão em que se enxerga tudo em tons amarronzados, como é a do ex-fisiculturista pode tornar as coisas muito difíceis não só na vida real, como também na digital. Veja só um exemplo:

Página inicial da Alura, exibindo o título “Mergulhe em tecnologia”. Abaixo, está a descrição da seção, e os cartões de cada escola, exibindo seu ícone, nome, e conteúdos.

A imagem se trata da página inicial da Alura. Veja que ele aparenta ser uma página inicial como muitas que você já deve ter visto por aí, e não há nada dificultando na usabilidade. Pelo menos, não para quem enxerga todas as cores. Para uma pessoa daltônica que não enxerga a cor verde, que é o que chamamos de “deuteranopia”, a visualização dessa interface se torna bem diferente, considerando que muitos elementos acabam ficando amarelados ou azulados (como no exemplo abaixo).

Página inicial da Alura, exibindo as mesmas informações da imagem anterior, mas desta vez a imagem está com o esquema de cores do ponto de vista do daltônico com deuteranopia. Os cartões das escolas de Programação, DevOps, Data Science e Inovação e Gestão ficaram na cor amarela, enquanto a de UX & Design ficou na cor azul.

Para que isso não fosse um impedimento para qualquer pessoa aluna da nossa plataforma, temos os ícones que identificam cada escola, não limitando a identificação apenas às cores. O uso de símbolos para esses casos pode ser de extrema ajuda, não só no ambiente digital como também no físico.

Trabalhar com os contrastes é importante ao se construir produtos digitais, pensando não só no caso de pessoas com daltonismo, mas sim de todos num geral, tendo ou não alguma condição, pois contrastes ruins atrapalham o entendimento de qualquer pessoa. Como via de regra, sempre que você perceber que uma pessoa precisa forçar a vista para enxergar algo, então sua interface possui problemas que precisam ser ajustados antes de ser lançada para o público utilizar.

Conclusão

Não é preciso um artigo extremamente longo e complexo para você saber que as cores são um elemento importante da nossa vida, que nos ajuda a tomar decisões, que colabora com nosso humor, muda todo o ponto de vista de um cenário, e que pode facilitar muito na visualização e entendimento, desde que bem trabalhada. Agora eu passo o bastão para você estudar mais sobre esse conteúdo que, de verdade, vai agregar muito no seu conhecimento pessoal e profissional.

Abaixo, estão alguns links de artigos aqui da Alura falando sobre os mais diversos tópicos relacionados a cores e sua utilização em produtos digitais:

A gente se vê por aí, valeu!


Redação: Mateus Villain

Revisão didática: Cinthia Bregola e Isabela Teodoro

Mateus Villain
Mateus Villain

Product designer, instrutor de UX na Alura, pro player de Figma e especialista em Harry Potter.

Veja outros artigos sobre UX & Design