Como a cor afeta o UX e o comportamento do usuário
Publicados: 2016-12-24Cor: quando um design acerta, você provavelmente nunca percebe – mas quando erra? Não importa se é um plano de fundo excessivamente brilhante e chamativo ou texto preto em um plano de fundo cinza escuro, as opções de cores abaixo da média podem arruinar até o aplicativo mais funcional. Assim como outros aspectos do design, a cor não existe apenas para apimentar um aplicativo. A cor pode ser uma ferramenta como qualquer outro recurso da experiência do usuário.
A filosofia de design gráfico usada para projetar um aplicativo – desde o tamanho de cada elemento, como ele desliza pela interface do usuário, até sim, a cor – afeta o comportamento do usuário. Há uma boa razão pela qual os designers frequentemente passam os primeiros meses de um projeto agonizando sobre paletas de cores e não wireframes, afinal.
Escolher a paleta perfeita pode ser a diferença entre criar um aplicativo de meditação que realmente ajude os usuários a relaxar e um que os faça querer jogar o telefone na parede. É a diferença entre um aplicativo bancário que deixa você nervoso ao verificar seu saldo e um que pode aliviar suas ansiedades sobre quando o próximo pagamento chegará.
Então, como você acerta – e o que você pode fazer para dominar as cores em seu design?
Filosofia do Design Gráfico: A Teoria da Cor
Antes de entrar na filosofia do design gráfico (e psicologia!), é importante entender alguns princípios básicos de cor e design. Embora a cor possa não parecer um assunto extremamente complexo, há uma boa razão pela qual toda aula de arte começa não apenas com uma lição sobre como usar a cor, mas como fazer cor.
O básico – conforme explicado pela roda de cores – é simples: cores primárias (vermelho, amarelo e azul) podem ser combinadas para criar cores secundárias (verde, roxo e laranja). Da mesma forma, várias frações de branco podem ser adicionadas a uma cor para criar tons, e preto pode ser adicionado para criar tons.
Cores opostas umas das outras (como vermelho e verde, ou azul e laranja) são consideradas complementares. Essas cores contrastam fortemente, fazendo com que se destaquem quando próximas (ou em cima) umas das outras.
As cores que estão próximas umas das outras são consideradas análogas. Essas cores têm contraste muito menor, o que significa que elas tendem a não se destacar tanto quando próximas umas das outras.
Não há nada inerentemente “certo” ou “errado” em cores com alto ou baixo contraste. Às vezes, um aplicativo exigirá cores brilhantes que contrastam fortemente umas com as outras. Outras vezes, você vai querer algo um pouco mais suave. Geralmente, quanto mais você quer que algo se destaque, mais você deve confiar em cores contrastantes.
A melhor maneira de ter uma ideia de como as cores combinam (e não combinam) é brincar com elas. Mesmo se você não estiver trabalhando em um projeto agora, uma rápida rotação na roda de cores da Adobe pode fazer sua mente pensar sobre cores de uma nova maneira.
Amostras de emoção: cor e psicologia
Quando você está solidificando a filosofia de design gráfico por trás do seu aplicativo, você não pode apenas pensar em como as coisas se parecem – você tem que pensar em como elas se sentem. Também não estamos falando de feedback tátil. Desde que Johann Wolfgang Goethe estudou os efeitos fisiológicos da cor, ficamos obcecados em usar a cor para produzir efeitos físicos e emocionais.
Ainda hoje, a cor ocupa um lugar central na filosofia de design de muitas marcas. Saúde, negócios e governo tendem a usar o azul, pois transmite uma sensação de confiança e profissionalismo. O verde é visto como uma cor jovem e cheia de energia – e, claro, reflete uma sensação de ambientalismo e proximidade com a natureza. O vermelho é enérgico e impulsivo, dando a impressão de velocidade, eficiência e poder. Cada cor que vemos (e certamente cada cor que associamos intrinsecamente a certas marcas) implica algo, direta ou indiretamente, que ajuda a direcionar nossa percepção de marcas individuais.
Pense nas marcas e símbolos que você reconhece como sendo muito centrados em cores. Apple, Wikipedia e The New York Times apresentam cores em tons de cinza, simbolizando uma confiabilidade calma. Essas marcas são vistas como equilibradas e confiáveis. Whole Foods, John Deere e Starbucks apresentam tons de verde em seus logotipos, conectando natureza e salubridade à sua marca e seus produtos.
Algumas cores vão até além de suas marcas, definindo indústrias inteiras. Pense em quantas redes de fast food ou restaurantes usam esquemas de cores vermelho ou amarelo, por exemplo. Essas cores ajudam a nos desencadear mentalmente, nos colocando em um certo lugar psicológico que nos prepara para comprar algum tipo de produto.
Embora isso seja algo que os profissionais de marketing descobriram há muito tempo, a ciência justifica muitos de nossos sentimentos mútuos sobre cores. Verificou-se que o vermelho, por exemplo, faz algumas pessoas reagirem mais rápido e com mais força a certos estímulos. Também pode intimidar: os pesquisadores descobriram que quando os participantes do teste viram a cor vermelha, suas pontuações foram piores.
Ainda mais estranho? A cor de uma pílula tem um efeito suave sobre como ela funciona. As pílulas azuis funcionam melhor como sedativos, as amarelas funcionam melhor como antidepressivo e, em todos os casos, as cores brilhantes funcionam melhor. Embora isso provavelmente seja apenas o efeito placebo que aumenta nossas respostas à medicação ativa, o efeito é forte o suficiente para as empresas considerá-lo ao produzir novos produtos farmacêuticos.
Agora, não estamos dizendo que usar um esquema de cores baseado em amarelo em seu aplicativo de rastreamento de humor o tornará eficaz como antidepressivo, mas a paleta de cores que você escolher pode ter um impacto razoável no humor de um usuário – então escolha sabiamente.
Recomendado para você:
Como o Metaverse transformará a indústria automobilística indiana
O que significa a provisão antilucratividade para startups indianas?
Como as startups de Edtech estão ajudando a qualificação da força de trabalho da Índia e se preparando para o futuro
Ações de tecnologia da nova era esta semana: os problemas do Zomato continuam, EaseMyTrip publica...
Startups indianas pegam atalhos em busca de financiamento
Plataforma de marketing digital Logicserve Bags Financiamento de INR 80 Cr, renomeia como LS Dig...
Cor e usabilidade
O design não é apenas bonito - é sobre funcionalidade e usabilidade, os dois princípios que são sem dúvida os mais importantes para qualquer designer de UX. Se o UX não for suave, não importa quão bonita seja a paleta de cores escolhida ou quão impressionante seja sua interface do usuário. Se um usuário não puder passar por ele com eficiência, ele não terá nenhum poder de permanência.
Mas o que a cor tem a ver com tudo isso?
Simples: a cor é uma ferramenta que pode ajudar a guiar o olhar . Se você puder usar as cores com eficiência, poderá orientar um novo usuário pelo aplicativo sem um longo tutorial, uma série de vídeos complexos ou até mesmo uma única palavra. Uma interface de usuário intuitiva usa cores para direcionar não apenas a atenção do usuário, mas também suas interações com toda a experiência.
Imagine, por um segundo, que você está desenvolvendo um aplicativo para uma empresa de catering que ajuda grandes organizações a personalizar facilmente os pedidos de comida. Um cliente em potencial baixa seu aplicativo pela primeira vez e o abre. O que eles veem?
No aplicativo, a maioria dos itens de menu - incluindo o plano de fundo e quaisquer caixas de informações - são coloridos em uma paleta suave e opaca de cores em escala de cinza. A única exceção é uma caixa vermelho-alaranjada que diz “pedido”. Como designer, você sabe que a primeira coisa que os usuários querem fazer quando estão usando seu aplicativo é configurar o pedido de comida sem problemas. Em vez de ocultar esse recurso no aplicativo ou exigir que eles rolem página após página para acessá-lo, você o está colocando na frente e no centro. Não só isso, mas você está chamando a atenção deles para isso imediatamente. A cor ajuda a destacar e mostra aos novos usuários exatamente onde eles precisam ir.
Da mesma forma, interagimos com a cor de várias maneiras diariamente e construímos certas associações sociais em nossas mentes. Pegue um semáforo, por exemplo: verde significa ir, vermelho significa parar e amarelo significa desacelerar (ou nos alerta para algo à frente). Colocando um aviso importante em amarelo ou usando vermelho para destacar algo, você pode transmitir uma mensagem poderosa que prepara um usuário para sua entrada.
Essa mesma lógica pode ser usada para mais do que apenas telas de aviso, no entanto. Alterar a cor de um botão em seu aplicativo que leva a compras no aplicativo pode afetar significativamente as taxas de conversão.
Embora não estivesse dentro de um aplicativo, a HubSpot descobriu que eles poderiam aumentar sua taxa de conversão em 21% simplesmente tornando um botão vermelho em vez de verde. Agora, isso não significa que você deve mudar cada botão de compra no aplicativo para um vermelho brilhante, mas há um argumento a ser feito aqui que a cor não pode ser apenas parte de sua filosofia de design: ela deve ser central para toda a sua filosofia de desenvolvimento de aplicativos.
Usando cores com sabedoria: uma filosofia de design e acessibilidade
Na Proto.io, a acessibilidade está sempre na vanguarda da nossa filosofia de design. Para ser franco, a acessibilidade é algo que deve ser incorporado ao bom design. Se não estiver lá, então o design simplesmente não é muito bom.
Cerca de 8% dos homens e 0,5% das mulheres têm algum tipo de daltonismo. Ao contrário do pensamento popular, não há um tipo singular de daltonismo, mas o daltonismo vermelho/verde tende a ser o mais comum. Alguém que sofre desta forma de daltonismo geralmente terá dificuldade em ver variações de vermelho e verde. Embora a gravidade dessa forma de daltonismo varie bastante, mesmo o daltonismo leve vermelho/verde pode tornar o uso de muitos aplicativos praticamente impossível.
Fora do daltonismo, os usuários míopes geralmente lutam para ler texto com baixo contraste, a menos que movam a tela para perto do rosto – algo que pode prejudicar a usabilidade de muitos aplicativos.
A solução para esses dois problemas é bastante simples: evite usar cores não contrastantes ao exibir texto em um plano de fundo . Embora você não possa garantir que todos possam ver seu aplicativo da maneira que você pretende, se você estiver usando cores contrastantes, pelo menos estará dando às pessoas um aplicativo que elas podem usar. Da mesma forma, o uso de cores de alto contraste tornará o texto mais fácil de ler para todos, mesmo que não tenham problemas de visão.
Outra opção para aumentar a acessibilidade é oferecer paletas de cores trocáveis em seu aplicativo. Embora essa não seja uma opção para todos, ela pode aumentar bastante a acessibilidade do seu aplicativo. Você também pode permitir que os usuários alterem a cor de recursos específicos. Por exemplo, você pode ter uma opção que altera a cor de destaque do seu aplicativo ou a cor do texto em todo o aplicativo. Embora essas duas opções possam tirar algum controle de você, elas garantirão que seu aplicativo seja acessível a um público mais amplo.
Se você ainda está lutando para descobrir como integrar a cor à sua filosofia de design de uma forma que não prejudique a acessibilidade do seu aplicativo, sugerimos que verifique a biblioteca de design de materiais do Google.
Escolhendo a paleta perfeita: solidificando sua filosofia de design
Embora deva ficar claro que existem algumas regras a serem seguidas quando se trata de cor, também não é necessariamente uma ciência. A cor é muitas vezes sobre coisas mais abstratas, como sentir. Mesmo que seu aplicativo não esteja tentando manifestar algum tipo de emoção em um usuário, isso não significa que não o fará. Embora encontrar a paleta perfeita não seja um esforço em preto e branco, sugerimos começar com algo em tons de cinza .
Crie um protótipo plano do seu aplicativo em um gradiente de escala de cinza e use-o como linha de base. Anote a aparência e a sensação: passe para sua equipe de controle de qualidade e veja o que eles têm a dizer. Seu processo de integração é obscuro sem cor? Você está chamando a atenção para as partes erradas do seu aplicativo? Com esse feedback, projete mais alguns protótipos, desta vez trazendo cores. Não confie em uma paleta única. Em vez disso, siga o site de design de materiais do Google e brinque com algumas de suas amostras.
Envie essas revisões para o controle de qualidade também. Não tenha medo de testá-los A/B uns contra os outros (e contra a versão original em escala de cinza). Certifique-se de fazer algumas perguntas difíceis sobre as cores que você está trazendo para a briga. Você está usando cores para guiar o olhar do usuário no aplicativo? Você está apenas jogando cores na tela para adicionar uma faísca? A cor está distraindo o usuário de chegar onde ele quer ir?
Não se esqueça da psicologia do usuário ou acessibilidade. Se você está criando um aplicativo de viagem, você realmente quer que tudo seja vermelho brilhante? Se você estiver criando um aplicativo de saúde, seu plano de fundo deve ser realmente verde? Suas cores contrastam o suficiente para que o texto fique legível?
Um bom design de UX leva todas essas questões em consideração – afinal, a cor tem um impacto definitivo no comportamento e no prazer do usuário. Se sua filosofia de design não levar isso em consideração, você pode estar criando um aplicativo que não é tão acessível ou utilizável quanto você pensa. Certifique-se de prototipar seu design a cada passo do caminho e não fique muito preso a uma ou duas cores.
Experimente, escolha outra cor e continue a revisar até chegar a uma paleta perfeita para você.