Dark Mode – Vantagens de o utilizar na sua comunicação

Existem dois motivos principais que explicam a razão de cada vez mais os desenvolvedores e designers adotarem o dark mode nos seus websites, aplicações e dispositivos: saúde e economia de bateria.

Saúde e bem-estar

Nos últimos anos o número de dispositivos eletrónicos per capita tem sofrido um aumento significativo.

Estão por toda a parte e para onde quer que nós estejamos a olhar, existe um ecrã. Neste exato momento, o leitor que está a ler este artigo está a olhar para um ecrã.

Utilizamos diariamente os nossos dispositivos móveis durante todo o dia, em especial à noite. O nosso tempo diário de ecrã aumenta todos os dias e todos os dias, novos conteúdos são consumidos através dos nossos ecrãs e que são acrescentados às nossas rotinas diárias. Com estes novos hábitos diários os nossos olhos não estão acostumados a estar muito tempo no ecrã e até tão tarde. E com o dark mode ganhamos inúmeras vantagens: protegemos a nossa visão, contribuímos para a diminuição do cansaço associado e tornamos a leitura mais fácil. 

Um aspeto muito importante é a luz azul que é emitida pelos ecrãs dos nossos smartphones. Como passamos muitas horas em frente a um ecrã, isso causa fadiga ocular ou até mesmo irritação nos olhos. Com o passar do tempo, os fabricantes introduziram melhorias graças ao filtro de luz azul. A redução da luz azul em diferentes dispositivos eletrónicos no geral é boa para os níveis de melatonina (a hormona do sono). 

Um artigo divulgado pela Harvard Medical School em 2018 diz que muita exposição à luz azul interfere na produção de melatonina no corpo. O dark mode emite menos luz azul? Sim é verdade. A razão para isso está na diminuição dos tons mais claros e intensos de cor na interface gráfica. 

Portanto, quando utilizar o seu smartphone em condições de pouca luz, antes de dormir por exemplo, lembre-se de ativar o dark mode para contribuir para um melhor descanso.

Economia de bateria

O outro motivo de cada vez mais existirem aplicações em dark mode é a contribuição da poupança de energia nos dispositivos móveis. A tecnologia está em constante evolução relativamente aos ecrãs. Os smartphones topo de gama das empresas gigantes de tecnologia – Apple, Google, Samsung, Huawei – já quase todos têm ecrã OLED. 

A principal diferença entre o OLED e o LCD é o facto do OLED não necessitar de emitir luz em fundo preto. É realmente uma boa notícia para a durabilidade das baterias dos dispositivos móveis que ajuda a poupar a energia.

Num estudo realizado pela Apple Insider, o iPhone X (com tecnologia OLED) com a utilização diária foi conseguida uma diminuição do consumo de bateria na ordem dos 60%. Em termos práticos, resultou em mais de 3 horas de utilização.

Com este tipo de ecrãs, o dark mode torna-se largamente vantajoso. Ao visualizar uma interface escura, poderá contribuir para a vida útil da bateria do seu dispositivo além das melhorias em termos de saúde já indicadas anteriormente.

Desenhar para dark mode

Regra básica: “escuro” não é igual a “preto”. Não altere apenas o fundo branco por um preto, porque tornará impossível a utilização de sombras nos objetos. O resultado ficará com que o seu design pareça super plano. É importante ter em mente alguns princípios básicos de iluminação e sombreamento.

Os objetos mais elevados devem ter sombras mais claras, simulando a iluminação e o sombreamento na vida real. Dessa forma, é mais fácil distinguir diferentes componentes e a sua hierarquia de informação.

Dois quadrados cinza do mesmo tamanho com uma sombra, um está colocado sobre um fundo 100% preto e o outro sobre um fundo da cor #121212. Ao elevar, o objeto fica com um tom mais claro de cinza.

Quando desenvolver o dark mode para o seu projeto, é possível trabalhar com sua cor primária, desde que o contraste esteja correto. Explicamos este exemplo:

Nesta interface, a sua ação principal é um grande botão laranja na barra inferior. Não existe problema em termos de contraste ao alternar entre o modo claro ou escuro, o botão continua a chamar a atenção, o ícone está claro e está tudo bem.

1) Legibilidade do texto

As regras são simples: nada deve ser 100% preto sobre 100% branco e vice-versa. O branco reflete todos os comprimentos de onda da luz, enquanto o preto a absorve. Se colocar texto 100% branco em um fundo 100% preto, as letras refletem a luz, dispersam e ficam mais difíceis de distinguir uma da outra, afetando a legibilidade.

O mesmo vale para um fundo 100% branco, que reflete muita luz para se concentrar totalmente nas palavras. Tente suavizar um pouco os brancos, utilizando tons de cinza claros para fundos e textos em fundos pretos. Desta forma será mais fácil para os olhos e evita a fadiga ocular.

Quando a mesma cor utilizada em light mode é utilizada em dark mode, em texto por exemplo, surgem problemas de legibilidade. Considere utilizar um tom muito menos saturado na sua cor primária ou precede de outras formas de incorporar as cores da sua marca na interface.

Também se aplica para todas as outras cores saturadas que está a utilizar, como por exemplo as cores de validação ou erro.

A Google utiliza uma camada branca extra de 40% sobre a cor primária de estado de erro segundo as diretrizes do Material de Design da Google, para utilizar como uma nova cor quando se altera para o dark mode. Este é um bom ponto de partida, porque irá melhorar os níveis de contraste para passar nos padrões do nível AA. É claro que pode sempre ajustar essas cores à sua escolha, mas verifique sempre os seus níveis de contraste. 

2) Diretrizes de Design

Resumindo um pouco do que foi falado anteriormente, anote as principais considerações que terá de ter em conta quando trabalhar em dark mode:

• Contraste: Superfícies escuras e texto 100% branco têm um nível de contraste de pelo menos 15.8: 1;
• Profundidade: Em níveis mais altos de elevação, os componentes expressam profundidade exibindo cores de superfície mais claras;
• Dessaturação: As cores primárias são dessaturadas e passam pelo padrão AA do WCAG (Web Content Accessibility Guidelines) de pelo menos 4.5: 1 em todos os níveis de elevação;
• Limitação de cor: As superfícies grandes utilizam uma cor escura, com limitações nas cores primárias: cores saturadas serão mais claras (+40% branco) e brilhantes.

Uma ferramenta útil para analisar esta questão é o plugin Stark que informa exatamente quanto contraste há entre duas camadas. Está disponível para as principais aplicações de desenvolvimento UI/UX (Figma, Adobe XD e Sketch).

O dark mode chegou e está para ficar

Com a introdução deste recurso nos sistemas operativos atuais e nos serviços populares (Facebook, Instagram, Twitter e mais recentemente no WhatsApp) acredito que se tornará um recurso padrão em todas interfaces gráficas.

O único motivo que não deve implementar o dark mode é quando tiver a certeza que o seu produto (website/aplicação) está a ser utilizado exclusivamente durante a luz do dia.

Há alguns pormenores que precisam de ter uma atenção extra ao implementar o dark mode, além dos seus princípios básicos que resumi neste artigo. Em termos de acessibilidade, o dark mode não é o mais fácil de utilizar, pelo facto do contraste ser geralmente mais baixo, o que realmente não melhora a legibilidade.

Desta forma, achamos que o dark mode automático é um recurso genial. O modo ativa à noite e desativa novamente pela manhã. O utilizador que acede ao seu website/aplicação não necessita de pensar sobre isso porque realmente é um recurso de usabilidade. 

Importante acrescentar: dê ao seu utilizador a opção de desativar o dark mode manualmente sempre que ele pretender. Nada é mais frustrante do que uma alteração automática de toda a interface que não pode ser anulada pelo utilizador.

A revolução do dark mode está apenas a começar. Isto significa que é o momento perfeito para implementar este novo recurso no seu website/aplicação e ser criativo. 

Prepare-se para se tornar um pioneiro do dark mode!