Dark UI: tudo o que você precisa saber sobre interfaces escuras

Published in

UI Lab

8 min readJan 22, 2018

Independente se você vai desenvolver uma interface escura ou uma interface clara, a decisão nunca deve ser feita apenas considerando o apelo estético que cada uma carrega. Embora a tentação de fazer uma Dark UI apenas por achar bonito ou por querer seguir uma tendência seja mais forte, devemos tomar nossas decisões avaliando alguns pontos fundamentais que afetam diretamente o usuário antes de entrarmos para o lado negro da força.

Usualmente, quando pensamos em montar nosso esquema de cores, optamos pelo comum fundo branco com letras escuras. E há boas razões que nos levam a essa escolha: conseguimos um bom contraste, mantemos uma boa leiturabilidade e temos a capacidade de combinarmos um bom espectro de cores.

Além disso, vários estudos já comprovaram que texto escuro sob fundo branco é superior a texto claro sob fundo escuro porque o primeiro garante facilidade de leitura e diminui a fadiga visual. Há também, segundo o designer Miklos Philips, uma certa expectativa nessa escolha porque as pessoas estão vendo uma variedade enorme de conteúdos sendo apresentados com tinta preta sobre fundos brancos há muito tempo. Basta pensar em jornais e revistas que estão aí há mais de 350 anos. E se voltarmos ainda mais no tempo, lá pela era Paleolítica, veremos pinturas rupestres de leões e mamutes geralmente colocadas em fundos claros com tinta escura.

Pinturas pré-históricas de trinta mil anos na Caverna Chauvet, França — Fonte

Mas vamos voltar às interfaces escuras porque é o que nos interessa aqui.

Para continuar essa discussão é interessante abordamos inicialmente quatro aspectos principais: leiturabilidade, contraste, ambiente e aspecto emocional. A partir daí podemos fundamentar melhor a nossa escolha por uma Dark UI.

Leiturabilidade (Readability)

Como eu explico em uma das aulas do meu curso de UI Design para Iniciantes, leiturabilidade está relacionada em quão fácil é a experiência de ler um texto, e para alcançar isso temos que lidar com contraste, cor, tamanho e outras características.

Quando trabalhamos com interfaces escuras a complexidade disso é naturalmente muito maior. E por mais que ler textos escuros sob fundos claros seja melhor, se mudarmos um pouco o cenário não teremos a mesma experiência. Se incluirmos uma grande quantidade de horas na frente da tela do computador lendo vários textos como esse que você está lendo agora, invariavelmente nossos olhos começarão a mostrar sinais de fadiga. É por conta disso que a maioria dos desenvolvedores optam por usar um fundo escuro com letras mais claras em seus editores de texto ao invés do usual preto no branco. Dessa forma, eles podem passar longas horas trabalhando sem tanto stress na leitura.

Contudo, não basta apenas colocar o texto com uma cor clara sob um fundo escuro e achar que o problema está resolvido. Em muitas situações isso atrapalha muito mais do que ajuda.

No exemplo a seguir temos a tela do aplicativo 12min — um app que traz vários resumos de livros para quem não tem tempo de ler o livro todo. Nas configurações do aplicativo nós podemos optar por ler os textos em fundo claro com fonte preta ou em fundo escuro com fonte branca. Mas se você experimentar ficar lendo por mais de 10 minutos num fundo escuro com letra branca nas configurações padrões, seus olhos vão implorar por misericórdia.

É por isso que eles também oferecem mais duas opções de ajuste: luminosidade e tamanho da fonte. Com esses dois ajustes você define o que menos agride seus olhos e o que mais te proporciona uma boa experiência de leitura.

A Google também tem algo bem interessante para seu app Google Play Books. Eles introduziram um recurso que é tipo um "Night light" para leitura que gradualmente substitui a luz azul que é emitida pela tela por uma cor âmbar baseado na hora do dia e da sua região.

A emissão da luz azul, que é feita pelas telas dos nossos devices, aumentam nossos níveis de atenção, humor e reação durante o dia. Mas durante o período noturno isso pode ser um impeditivo para uma boa noite de sono.

Ambiente

O ambiente em que o usuário utilizará uma Dark UI é outro aspecto importante que devemos levar em consideração. Já sabemos que o brilho da luz a noite ou em um ambiente escuro não é bom para os olhos. Por essa razão, serviços como Netflix, Steam, Spotify ou Youtube optam por apresentar seus conteúdos em um tema escuro. Eles sabem que a maioria dos seus usuários tendem a realizar suas atividades mais tarde, depois do trabalho ou em um quarto com poucas luzes.

Não é atoa que se compararmos a interface da Netflix com sua versão Kids teremos dois produtos completamente diferentes. A segunda é majoritariamente dominada por um público que consome conteúdo em horários diúrnos, justificando a utilização de uma interface predominantemente branca. Já a primeira, como dito no parágrafo anterior, é consumida em horários ou ambientes com pouca intensidade de luz.

Esse tipo de decisão de design, como você pode ver, não é tomada por acaso.

Interfaces escuras como as da Netflix e Steam tem sua ênfase direcionada ao conteúdo principal — um filme ou um jogo — e o background oferece menos distrações. Os usuários acabam imergindo facilmente em suas atividades e tem uma experiência melhor com o que está sendo consumido. Além disso, as interfaces escuras em ambientes escuros previnem que nossos olhos tenham que dar aquele desconfortável ajuste na visão que todos odeiam (Netflix com sua intro branca que o diga!😠).

Com base no ambiente de uso do seu serviço ou produto, fica mais fácil decidir se é realmente necessário uma Dark UI ou se é mais conveniente uma Light UI.

Contraste

Lidar com o contraste em interfaces escuras é fundamental para garantir uma boa experiência do usuário. Conforme o exemplo do app 12min que vimos anteriorimente, nem sempre um texto branco sob um fundo preto é o suficiente para garantir um contraste eficiente e que não agrida os olhos. Nesses casos é essencial dosar a quantidade de branco que há em textos ou outros elementos que interagem com fundos escuros.

Mas a boa notícia é que fundos escuros contrastam com praticamente qualquer tipo de cor. E com isso somos capazes de criar soluções elegantes e atrativas que, por conta do seu alto contraste, cativam a atenção dos usuários.

Uma boa maneira de garantir que você está tendo um bom contraste entre duas ou mais cores é utilizar alguns verificadores que utilizam as diretrizes recomendadas pela WCGA 2.0 (Web Content Accessibility Guidelines). Minha recomendação para quem utiliza o Sketch App é o plugin Stark, mas você pode encontrar outros Contrast Checkers online facilmente.

Uma última coisa para falar sobre contraste em interfaces escuras é que além da facilidade de trabalhar com diversas cores, também temos grandes oportunidades de fazer um excelente trabalho com imagens, fotos, ilustrações e outros conteúdos gráficos.

Exemplo de uso de gráficos em Dark UI — Laws of UX

Emocional

O último aspecto para ser analisado, mas não menos importante que os anteriores, é o que tange nossas emoções.

Levando em consideração a psicologia das cores, veremos que cores escuras geralmente estão associadas com elegância, formalidade, prestígio e poder. Com isso em mente, temos em nosso arsenal mais uma ferramenta que pode ser explorada quando estivermos desenvolvendo interfaces que se encaixam em alguma dessas características.

Quando, então, podemos usar uma Dark UI?

As dicas que deixarei a seguir são uma síntese do que você viu nesse artigo e podem ajudar na difícil decisão de quando usar uma Dark UI ou uma Light UI.

Você pode utilizar uma Dark UI:

Quando há pouco texto para ler e mais imagens/vídeos para ver;
Quando você quer dar aos seus usuários a sensação de intriga e mistério como em um filme;
Quando você quer que o elemento principal da página se destaque e ganhe mais proeminencia;
Quando você quer reduzir a fadiga visual e tornar confortável para o usuário que fica longos períodos de tempo em seu produto;
Quando você quer alcançar uma visão forte e dramática para imagens impressionantes;
Quando você quer projetar um sentimento de estilo e elegância, luxo e prestígio;
Quando você quer ajudar a focar e orientar a atenção do usuário com mínimas distrações;
Quando é apropriado para o contexto e uso, como aplicativos de entretenimento noturno;
Para reduzir a tensão ocular, como páginas em que há muitos dados e que são usadas por longos períodos de tempo;

Conclusão

Assim como em qualquer decisão de Design, optar por uma Dark UI deve ter muita pesquisa e embasamento. É necessário analisar se o ambiente é propício, se o público é o certo e se todo o conjunto da obra é favorável.

Como eu disse no comecinho desse artigo, sua decisão nunca deve ser feita apenas pelo apelo estético que uma Dark UI tem. E completo dizendo que sua escolha tampouco deve ser feita baseada em suas premissas do que é bonito e do que é tendência. Designers fazem escolhas que atendam as necessidades dos usuários e dos seus clientes, não as do seu ego.

Grande abraço! Me siga no Twitter e veja meu Portfolio.