Interfaces de usuário escuras. O bom e o mau. Faça e não faça.

Publicados: 2022-03-11

As UIs escuras são dramáticas, estilosas e elegantes. No entanto, os designers devem ter cuidado se optarem por andar no “lado escuro”.

Criar a aparência de um produto é uma das principais responsabilidades de um designer - a decisão inicial do design deve ser apropriada ao propósito do produto, à situação específica e ao seu público. O esquema de cores terá um impacto duradouro e deve ser cuidadosamente escolhido – e tudo começa com a seleção de um plano de fundo no qual os elementos de design serão colocados – a “tela”. A escolha usual, quase por padrão, é um fundo branco.

Há boas razões para escolher um fundo brilhante. Contraste, texto e legibilidade e a capacidade de trabalhar com uma ampla gama de cores sutis são alguns deles. De acordo com muitos estudos científicos, a legibilidade ideal requer texto preto em fundo branco. A marca também pode influenciar a decisão porque os logotipos e cores da empresa não funcionarão com uma paleta de cores escuras.

A maioria dos estudos mostrou que o texto escuro em um fundo claro é superior ao texto claro em um fundo escuro, ou seja, é mais fácil de ler. Em um estudo famoso, a “fadiga visual” foi significativamente maior quando os sujeitos liam caracteres claros em um fundo escuro versus caracteres escuros em um fundo claro (Bauer, D., Bonacker, M. e Cavonius, CR 1983).

Há também uma expectativa : as pessoas estão acostumadas a ver uma variedade de conteúdos renderizados com tinta escura sobre um fundo branco apresentado junto com imagens. Pense em jornais e revistas – que existem há mais de 350 anos. Voltando ainda mais longe – trinta e cinco mil anos até a era paleolítica (os dias do homem das cavernas), encontramos desenhos rupestres de leões e mamutes geralmente colocados sobre um fundo claro com carvão ou ossos queimados usados para desenhar as representações.

Pintura pré-histórica na caverna de Chauvet, França — Pinturas pré-históricas de 30.000 anos na Caverna de Chauvet, França.

No entanto, quando um projeto o justifica, os designers de produtos digitais de hoje podem optar por trabalhar com um esquema de cores escuras por vários motivos. Como sugerido acima, muitas vezes é uma escolha estética destinada a transmitir drama e provocar uma emoção – algo inesperado – ou talvez um designer queira fundir o design com a marca ou garantir que o conteúdo visual se destaque.

maçã — Para a Apple TV, o site da Apple muda para uma interface de usuário escura para efeito dramático e porque seu uso geralmente está associado ao entretenimento noturno.

No entanto, se um designer optar por passar para o “lado sombrio”, ele enfrentará vários desafios. Todos os tipos de problemas de usabilidade entram em jogo, principalmente relacionados à digitalização, legibilidade e contraste. O principal aspecto a considerar é o contraste suficiente entre texto e fundo. O contexto (caso de uso) e o ambiente também devem ser considerados, bem como o dispositivo no qual a interface do usuário provavelmente será visualizada.

A Breitling optou por um fundo preto para destacar seus designs de relógios.

Algumas UIs escuras são projetadas para minimizar o “fadiga ocular digital”. Com o aumento da tecnologia digital, passamos a maior parte do dia olhando para as telas. A fadiga ocular digital é uma condição comum que afeta milhões de pessoas diariamente. Causada por tudo, desde o uso excessivo do computador até a exposição regular à luz brilhante, pode causar dores de cabeça, dor no pescoço, visão turva e olhos ardentes / ardendo.

Procuravam-se designers de UI freelancers em tempo integral nos EUA

Existem até coisas como Síndrome da Visão Computacional (CVS) e “desconforto ocular”. De acordo com um estudo, mais de 83% dos americanos usam dispositivos digitais por mais de duas horas por dia, com 60,5% relatando que apresentam sintomas de fadiga ocular digital. (Olhos superexpostos: Dilema do dispositivo digital.)

Produtos SaaS business-to-business e aplicativos de edição multimídia são usados por muitas horas seguidas. Muitos foram projetados em uma interface de usuário com tema escuro para reduzir a fadiga ocular e ainda oferecer suporte à clareza visual. No entanto, tal abordagem requer uma avaliação cuidadosa e antecipada da direção do projeto.

Design de interface do usuário escura dos aplicativos Bloomberg Anywhere iOS — Aplicativos Bloomberg Anywhere iOS (por Jeremy Fuerst).

A maioria dos desenvolvedores usa uma tela preta com sintaxe codificada por cores para reduzir o cansaço visual. Como o desenvolvedor do Toptal, Kevin Bloch, coloca: “Um fundo preto reduz o cansaço visual e torna a codificação automática de cores mais fácil de ler, o que torna o código muito mais rápido de entender de relance”.

O desenvolvedor do Toptal, Amin Shah Gilani, acrescenta: “Pessoalmente, uso o tema escuro solarizado para meu editor de código. Eu prefiro um tema escuro porque um fundo mais escuro parece mais fácil para os olhos, especialmente porque eu gosto de manter as luzes fracas ou trabalhar à noite.”

Desenvolvedor Toptal Amin Shah Gilani — Editor de código do desenvolvedor Toptal Amin Shah Gilani pela Atom.

As UIs de aplicativos de jogos também tendem a temas mais escuros. O contexto de jogo e o ambiente onde os jogadores estão jogando se encaixam melhor com uma paleta de cores preta. Um design de fundo preto reforça visuais impressionantes, introduz uma sensação de mistério, tem melhor contraste e suporta a hierarquia visual.

Design de plano de fundo preto do Halo App Windows

Quando as UIs escuras funcionam bem

A maioria das interfaces de usuário relacionadas ao entretenimento (smart TVs, consoles de jogos e aplicativos de TV e filmes) tendem a ter designs de interface de usuário com temas escuros - por um bom motivo. A maioria das atividades relacionadas ao entretenimento ocorre à noite, são vistas a uma distância de 6 a 10 pés e são assistidas em salas mal iluminadas – em outras palavras, a tela combina com o ambiente. Além disso, o conteúdo colorido (por exemplo, arte da capa e promoções) se destaca dramaticamente em interfaces de usuário com temas escuros.

O objetivo é corresponder ao contexto da atividade: “Está escurecendo, estou relaxando e quero assistir um pouco de TV”. Semelhante a milhares de pequenas lâmpadas, as telas digitais emitem luz onde quer que um pixel brilhante esteja presente; portanto, uma interface de usuário brilhante iluminaria a sala - um efeito indesejável considerando a atividade. Nesse cenário, o design da interface do usuário está tentando corresponder ao contexto: o dispositivo, o conteúdo, a atividade e o ambiente.

Apple iTunes — Aplicativo iTunes da Apple.

No contexto, ambiente, aplicativo e uso corretos, as UIs de fundo preto fazem sentido. Sempre considere o contexto em que a interface provavelmente será usada. Mas vai além disso — a escolha de acompanhá-la deve depender do conteúdo e do contexto : o que , quando , onde e em qual dispositivo .

Para obter um visual forte e dramático para visuais impressionantes
Para projetar uma sensação de estilo e elegância, luxo e prestígio
Para criar uma sensação de intriga e mistério
Para ajudar a focar e orientar a atenção do usuário com o mínimo de distrações
Para dar suporte à hierarquia visual e à arquitetura da informação

Conceito de controle e diagnóstico remoto do carro — Conceito de controle remoto e diagnóstico de carro por Ramotion.

As UIs escuras devem ser usadas apenas com texto esparso, mínimo e informações “em partes” com forte ênfase em recursos visuais – texto claro. Se o texto for usado, ele deve estar em alto contraste com o fundo escuro – de preferência branco puro ou outra cor forte (não cinza escuro) em um fundo preto.

Paleta de cores escuras com texto e imagens de forte contraste em um site — CINEMATEK, um arquivo de filmes em Bruxelas, usa um fundo preto para um efeito dramático.

Quando as UIs escuras não funcionam bem

Conforme indicado anteriormente no artigo, UIs com temas escuros são uma má escolha para conteúdo com muito texto e dados, ou quando se usa uma variedade de tipos de conteúdo (texto, imagens, vídeo, tabelas de dados, menus suspensos, campos etc.). ). O consenso geral na comunidade de design é que UIs escuras são um grande desafio para projetar, a menos que você esteja lidando com conteúdo simples e apenas uma pitada de texto aqui e ali.

O desafio é tentar manter contraste suficiente, o que impacta o desafio abrangente: legibilidade, que está ligada à usabilidade, que impacta o UX. Geralmente, todas as cores funcionam em um fundo branco, enquanto em um fundo escuro o intervalo útil de cores é drasticamente reduzido.

O design de fundo preto para análise precisa ser abordado com cuidado — Há contraste insuficiente em alguns dos elementos da interface do usuário neste exemplo, afetando a experiência do usuário. (por GUOHAO.W)

Aqui está um exemplo do mundo real de quando não usar uma interface de usuário com tema escuro: eu estava envolvido com um projeto B2B SaaS em que o CEO estava convencido de que, para “ser diferente”, ele queria usar um tema escuro UI—que combinava com a marca da empresa… para toda a plataforma. Para tudo. Após várias reuniões, e reunindo a equipe de design e os gerentes de produto por trás da causa, conseguimos convencê-lo de uma decisão potencialmente desastrosa.

A plataforma usava um conjunto padrão de componentes de interface do usuário do aplicativo SaaS e, consequentemente, estava cheia de formulários, widgets, menus suspensos, pictogramas e ícones, além de texto e dados numéricos em tabelas. A navegação, o layout e a funcionalidade se tornariam incrivelmente difíceis de gerenciar, ao mesmo tempo em que obtinha contraste suficiente e um esquema de cores consistente. Em resumo, teria sido quase impossível fazer tudo funcionar com uma interface do usuário com tema escuro.

Dependendo da adequação do aplicativo, talvez a escolha certa fosse sugerir uma mistura de UIs claras e escuras. Por exemplo, as páginas de configurações com widgets e formulários e tabelas de dados podem ter sido projetadas em um fundo claro, e as páginas de análise com gráficos podem ter sido projetadas com um esquema de cores mais escuro.

IU do painel de análise — Interfaces de usuário, análises e infográficos do painel funcionam bem em uma interface de usuário escura, mas ainda devem ser “tratados com cuidado” para garantir contraste suficiente. (por Alex Gilev)

Os prós e contras de usar UIs escuros

Para encerrar, a decisão de usar uma IU escura precisa ser abordada com cuidado. Os designers não devem fazer isso pelos motivos errados – ser moderno, diferente ou copiar o design de outra pessoa. É crucial que um designer considere o contexto, o conteúdo (contraste e legibilidade), o dispositivo e o caso de uso, e tenha um bom motivo para sua escolha. É um ato de equilíbrio delicado, pois há potencialmente muitos benefícios, mas também muitas armadilhas.

Quando não há problema em usar IUs escuras:

Quando um esquema de cores de marca garante isso
Quando o design é esparso e minimalista com apenas alguns tipos de conteúdo
Quando for apropriado para o contexto e uso, como aplicativos de entretenimento noturno
Para reduzir o cansaço visual, como páginas de análise que são usadas por longos períodos de tempo
Para provocar uma emoção - por exemplo, um sentimento de intriga e mistério
Para criar um visual marcante e dramático
Para criar uma sensação de luxo e prestígio
Para apoiar a hierarquia visual

Quando é melhor ficar longe de IUs escuras:

Quando há muito texto (é difícil ler em um fundo escuro)
Quando há muito conteúdo misto na tela
No caso de aplicativos B2B com muitos formulários, componentes e widgets
Quando o design pede uma ampla gama de cores

O design de fundo preto para jogos não — Mesmo sendo um jogo, muitos tipos de conteúdo misto não funcionam bem com uma paleta de cores escuras.

A travessia para o “lado escuro” deve ser abordada com cuidado. Recomenda-se uma pesquisa e análise mais profunda e completa antes de tomar uma decisão potencialmente precária e repleta de armadilhas. Uma vez que um designer segue esse caminho, é muito difícil voltar atrás. Os designers deveriam considerar todos os aspectos – o bom e o ruim, os prós e contras, antes de entrar com os dois pés.

• • •