Embora fossem considerados marginais há alguns anos, as modas escuras estão se espalhando gradualmente. Depois do Twitter, Messenger, Google Chrome e recentemente do Instagram, acho que posso dizer sem correr muitos riscos que em breve estarão em todos os lugares.
Por que ouvimos cada vez mais sobre o modo escuro? Quais são os impactos dessa mudança de cor na experiência do usuário? Como podemos usá-lo para agregar ainda mais valor aos nossos projetos? Os modos escuros (ajudam) podem salvar o mundo?
Vamos tentar responder a essas perguntas e entender o que está por trás da ideia de adicionar um tema escuro a um aplicativo móvel ou web. Espero convencê-lo a se juntar a mim no lado sombrio depois de ler este artigo.
1 – Por que usamos o modo escuro
Ouvimos falar disso há alguns anos, o Google definiu melhores práticas em design de materiais, a Apple o introduziu em sua última atualização do iOS 13 e, aos poucos, o vemos se espalhando em nosso dia a dia. Mas antes de explicar os motivos desse entusiasmo, vale lembrar que o uso de interfaces escuras não é uma prática nova.
De fato, nos "antigos" dias da computação, os monitores eram verdes e pretos, mas isso se devia à uma restrição técnica. Podemos, portanto, dizer que as primeiras interfaces projetadas em um computador eram… escuras
Mas hoje, esse modo parece estar passando por um renascimento, o espectro de uso se ampliou e existem vários razões pelas quais vemos cada vez mais temas escuros sendo adicionados a vários sites e aplicativos.
Fadiga ocular
Em primeiro lugar, hoje estamos cada vez mais expostos a interfaces ou telas de qualquer tipo. Usamos nossos smartphones de manhã à noite. Nas residências, o número de dispositivos que integram telas está aumentando constantemente e, no trabalho, também somos frequentemente confrontados com telas por várias horas. É aqui que entra uma das primeiras vantagens do modo escuro porque sua ativação reduz a fadiga ocular.
“[Temas escuros] ajudam a melhorar a ergonomia visual reduzindo o cansaço visual, adaptando o brilho às condições atuais de iluminação e facilitando o uso da tela em ambientes escuros.”
- material.io
Observar uma tela branca por um longo período de tempo é, sem dúvida, desconfortável, e as pesquisas científicas ainda não mediram todas as consequências desse desconforto.
Aqui está o que sabemos até agora:
- As interfaces escuras reduzem a fadiga ocular em ambientes escuros ou escuros.
- O alto contraste entre o fundo e o texto reduz o cansaço visual.
- O uso de cores de toque suave permite uma melhor diferenciação contra um fundo escuro, por exemplo, em aplicativos que exigem realce de sintaxe (como software de código), as cores podem facilitar o reconhecimento dos termos.
No entanto, outras pesquisas indicam que:
- Uma interface escura pode exigir mais esforço em ambientes claros.
- Usar 100% de contraste (texto branco em fundo preto e até texto preto em fundo branco) é mais difícil de ler e pode causar fadiga ocular.
- Aplicativos que exigem muita leitura são menos legíveis em um fundo escuro e causam perda de concentração mais facilmente.
O impacto no ciclo do sono e na saúde geral
Como vantagem adicional, os modos escuros eliminam a maior parte da luz azul que interfere no sono , pois a luz azul está incluída no espectro das cores claras, mas não está presente no espectro das luzes escuras. E menos luz azul significa menos interrupções no ciclo do sono.
“Nem todas as cores de luz têm o mesmo efeito no organismo. Os comprimentos de onda azuis, que são benéficos durante o dia, pois aumentam a atenção, a capacidade de resposta e o humor, parecem ser mais perturbadores à noite.”
- faculdade de medicina de harvard
Um estudo recente indica que a exposição diária à luz azul poderia até afetar a longevidade, mais especificamente causaria o afinamento prematuro do córtex, que normalmente é considerado um processo de envelhecimento.
“À medida que a ciência procura maneiras de ajudar as pessoas a permanecerem mais saudáveis, pode ser possível projetar um espectro de luz mais saudável, não apenas para dormir melhor, mas também para a saúde geral.”
– Eileen Chow coautora deste estudo na Oregon State University
Consumo de energia
Outro motivo vem de uma tecnologia de tela que vemos chegando há alguns anos. Os principais modelos de smartphones de praticamente todas as marcas hoje são equipados com telas OLED (ou AMOLED) que, ao contrário das telas LCD, não requerem luz de fundo. Simplificando, essa tecnologia permite iluminar cada pixel individualmente, mas apenas se necessário. Portanto, os pixels pretos (#00000) são apenas desligados, e isso significa que eles não consomem energia. No entanto, todas as outras cores consumirão mais bateria, sendo o branco a cor que mais consome.
Em alguns testes, O Google demonstrou que o uso de um tema escuro no aplicativo do YouTube economizou 60% de bateria em relação ao tema padrão, em um smartphone equipado com tela OLED/AMOLED.
Usando uma interface escura, o usuário, portanto, aumenta significativamente a vida útil de sua bateria. Um dispositivo que consome menos energia é um dispositivo que precisa de menos carregamento... o que também é bom para o planeta !
O ambiente e o contexto de uso -> Rumo a interfaces contextualizadas?
O modo escuro não é a solução para todos os problemas...é um pouco mais complexo. Seu impacto na experiência e na saúde é altamente dependente do contexto. De fato, o ambiente no qual a interface será utilizada é um importante fator de decisão.
O bem-estar visual para o usuário é uma questão de contraste, não apenas dentro da própria interface, mas também em relação ao seu ambiente. O interesse de um modo escuro é combinar o máximo possível a tela com seu ambiente e, assim, evitar ter uma tela brilhante que se destaque com muita força.
Por exemplo, a maioria dos serviços de entretenimento tende a ter apenas temas sombrios. Esses serviços/aplicativos/sites são usados em um ambiente muitas vezes escuro e/ou noturno. As interfaces foram, portanto, adaptadas ao contexto de uso. Além disso, mídias coloridas (capas de filmes, capas de álbuns, fotos e vídeos) se destacam mais facilmente quando apresentadas em um fundo preto.
2 – Como e quando usar o modo escuro?
O motivo pelo qual elementos escuros em fundo claro são usados há tantos anos é que isso simplifica o gerenciamento de contraste e legibilidade. Permite trabalhar com uma ampla paleta de cores sem muita dificuldade. Mas essa dificuldade não justifica negligenciar o conforto e o bem-estar do usuário; vamos explorar algumas dicas para projetar um modo escuro.
Algumas recomendações
Primeiro, vamos concordar: "escuro" não significa "preto "! Não é necessário (eu diria até que não é recomendado) usar preto puro #000000 para os fundos dos seus modos escuros. Fundos escuros levemente iluminados permitem mais possibilidades de combinação de cores e criam profundidade. Parece lógico, as sombras serão perceptíveis no cinza, mas não no preto.
Assim, a recomendação do Material Design é usar, no mais escuro, #121212 para o fundo e #000000 para a sombra.
Quando se trata de componentes, é importante manter em mente o básico de sombreamento e iluminação.
Aqui está um vídeo explicativo do Material Design, que compara a reação de dois quadrados quando eles ganham altura:
Os objetos mais altos devem ser mais brilhantes que a sombra, simulando a iluminação real. Isso torna mais fácil distinguir os diferentes componentes e sua hierarquia.
Convencido do interesse deste modo? Atende a necessidade do produto e o contexto de uso? Antes de gastar todos os seus fundos no #121212, lembre-se também de que a identidade de uma marca também influencia as decisões sobre paletes. Também é possível que muitos elementos não funcionem nativamente em um fundo escuro e precisem ser retrabalhados.
Antes de mais nada, saiba que você pode manter a mesma cor primária, se o contraste for suficiente e não ocupar um grande espaço na tela. Além disso, é necessário evitar ao máximo ter várias cores com alta saturação próximas umas das outras.
O Google nos dá um truque que funciona muito bem e nos permite atender aos padrões de contraste necessários. Adicione uma camada branca, opacidade 40% na cor que deseja adaptar:
Além disso, elementos textuais com alta saturação devem ser absolutamente evitados porque sua legibilidade em um fundo escuro é fortemente comprometida. É menos fácil respeitar as regras de contraste necessárias para que os textos atendam aos padrões de acessibilidade no modo escuro, mas não é impossível.
O material design aconselha o uso dos seguintes níveis de opacidade para texto claro:
Textos importantes – 87% de opacidade
Texto médio e texto de ajuda – 60% de opacidade
Texto de elementos desabilitados – 38% de opacidade
Por em prática
Vamos tentar adaptar duas telas juntas para colocar em prática o que aprendemos para atender aos padrões:
Vamos a um segundo cenário:
- DTransmita um caráter forte e faça com que os visuais se destaquem
- Pprojetar uma sensação de elegância, luxo e prestígio
- Ccriar uma atmosfera de intriga e mistério
- Aajudar a orientar a atenção do usuário com o mínimo de distração possível
A escolha da colorimetria é extremamente importante, pois impacta a experiência do usuário ao longo do uso de um aplicativo ou site. Algumas cores evocam coisas, e só porque um usuário ativa o modo escuro não significa que ele desassocie o que vê da imagem da marca.
Por fim, é importante que nossos projetos sejam testados in situ o máximo possível para identificar o contexto de uso que permitirá validar ou não o interesse de um modo escuro.
Recapitulamos os interesses do modo escuro
Isso facilita a leitura da tela em ambientes escuros ou escuros, como de manhã e à noite.
Isso faz com que o conteúdo se destaque com mais franqueza (especialmente quando se trata de fotos e conteúdo de mídia).
Cansa menos os olhos…quando não há muito texto e o contraste é bem equilibrado.
Isso consome menos energia (e, portanto, economiza um pouco o planeta).
Quando não usar o modo escuro
Se houver uma forte necessidade de legibilidade e memorização.
Quando há muitos tipos diferentes de conteúdo na tela
No caso de aplicativos b2b que serão usados apenas durante o dia e que contêm muitos formulários, widgets etc.
Quando o uso do aplicativo requer o uso de uma grande variedade de cores.
Depois de ter explorado diferentes casos em que o modo escuro tem um interesse mais ou menos importante, a boa prática é propor ao usuário ativar uma troca automática dessa opção e não impor esse estilo a ele. A interface adapta-se assim ao utilizador e não o contrário, o que permite que este se torne Tomador de Decisão e escolher de acordo com seu uso.
No entanto, podemos ter um papel de guia como designer e garante de boas práticas, aconselhando-o a ter a melhor experiência com configurações pré-definidas. Devemos garantir o bem-estar de nossos usuários e garantir que a fadiga ocular seja a menor possível.
Conclusão
Nunca subestime pequenas ações, isso pode causar um efeito dominó. O modo escuro é a prova disso, pois é uma simples decisão de cor que permite ter enormes impactos e isso, em diferentes eixos.
Saiba que se todos os maiores players do mercado estão começando a integrar um modo escuro, é principalmente devido a uma consciência da influência da tecnologia na saúde física e moral, mas também no consumo excessivo de energia de cada um. Para esses atores, salvar o planeta não é apenas uma questão de ecologia, é bom também para a imagem 😉
Da próxima vez que você abrir seu software de design e o padrão for um fundo branco, lembre-se do chamado do lado negro... e lembre-se de que uma tela totalmente desligada é ainda mais saudável e para o planeta. #bemestardigital.
Eric Tadros, designer de UI/UX @UX-Republic
