Modo escuro nas aplicações atuais: um panorama
Tags: ux, design, html, ui
Published: 2021-04-20 12:49:12

Recentemente o Github implementou o tão aguardado modo escuro na sua interface. Embora essa nova opção de visualização possa ser considerada apenas uma questão de preferência, ela traz consigo vantagens como redução do cansaço visual e economia de bateria em dispositivos móveis, além de uma série de implicações na experiência do usuário como um todo.

## Contexto histórico
Implementar uma paleta escura na interface não é exclusividade do Github e existe muita informação sobre o assunto em se tratando de Design. Os processadores de texto WYSIWYG (What You See Is What You Get) foi que introduziram pela primeira vez na década de 80 o contexto de "papel branco com texto preto" pois antes disso os monitores eram monocromáticos e o texto era verde em fundo escuro. Por muito tempo desde então o "modo iluminado" foi considerado o padrão com designers e desenvolvedores raramente pensando em outras opções. No entanto, interfaces de modo escuro de um tipo ou de outro persistiram em certos ambientes digitais, muitas vezes substituindo as interfaces claras. Mais recentemente a interface escura se tornou muito popular entre usuários de aplicações web ou mobile, onde podemos destacar por exemplo o Spotify e a Netflix. 

| ![Interface escura](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1g5e99tda6gre9695uvj.png) | 
|:--:| 
| *Exemplo de interface em um monitor monocromático* |

## O que é o modo escuro, afinal?
O modo escuro é simplesmente uma tendência de design de interface com uma paleta predominantemente escura. Em vez de usar fundos brancos ou claros, é utilizado um fundo preto ou escuro. Como consequência, o texto e os ícones são necessariamente claros para garantir que sejam visíveis. É muito importante também fazer a distinção entre modo escuro e modo noturno, que embora tenham muita semelhança nas aplicações atuais, são bastante diferentes conceitualmente. Enquanto o modo escuro altera toda a configuração de cores do sistema, o modo noturno muda somente o brilho da tela. Mas será que o modo escuro é realmente a melhor opção para o usuário?

## Desvantagens... e vantagens
Apesar do conforto momentâneo causado pelo modo escuro, usar essa configuração com muita frequência nem sempre é a melhor opção, conforme apontado por um [artigo] (https://www.nngroup.com/articles/dark-mode/) de 2020 escrito por Raluca Budiu do Nielsen Norman Group. Isso porque no modo escuro nossas pupilas dilatam para conseguirmos enxergar os detalhes. E quando as pupilas dilatam, a nitidez da visão diminui. Por outro lado, quando as pupilas se contraem devido à forte exposição à luz, a visão fica mais nítida. Por esse motivo, pode ser mais difícil para algumas pessoas ver claramente os detalhes no modo escuro. A conclusão, no mesmo artigo, é de que em pessoas com visão normal (ou visão corrigida para normal), o desempenho visual tende a ser melhor com o modo claro, enquanto algumas pessoas com catarata e distúrbios relacionados podem ter um desempenho melhor com o modo escuro. Por outro lado, a leitura de longo prazo no modo claro pode estar associada à miopia.
Um estudo de 2017 da revista Applied Ergonomics descobriu que "caracteres escuros em fundo claro levam a uma melhor legibilidade e são fortemente recomendados, independentemente da idade do observador", além da leitura ser mais fácil em condições de pouca luz. Outro estudo do Journal of the Human Factors and Ergonomics Society descobriu em 2013 que "a luminância normalmente mais alta de telas de polaridade positiva (texto de fonte escura sobre fundo claro) leva a uma percepção aprimorada de detalhes".
Por outro lado, se você realmente gosta do modo escuro (assim como eu), existem fatores muito interessantes em que a legibilidade diminuída não precisa ser considerada um problema, e afinal, existem alguns contextos em que o modo escuro pode ser útil. De acordo com as diretrizes de interface humana da Apple, o modo escuro permite que o “conteúdo se destaque enquanto a interface do usuário circundante fica em segundo plano”. Portanto, faz sentido que aplicações como o Photoshop utilizem uma interface de usuário escura: seu foco está na edição de imagens, e a interface do usuário escura prioriza o visual, minimizando os elementos textuais menos relevantes. Por esse mesmo motivo, o modo escuro funciona bem quando você deseja estimular o leitor a examinar rapidamente as estatísticas e se concentrar nos principais pontos de dados (O próprio Github, por exemplo), como ao observar tabelas ou gráficos. É o que sugere inclusive um artigo publicado na [FastCompany](https://www.fastcompany.com/90169654/two-fascinating-things-salesforce-discovered-when-it-studied-color), em que pode haver alguns benefícios funcionais quando se trata de ler tabelas e gráficos no modo escuro. 
É importante também notar que se os usuários costumam estar em um ambiente escuro, uma tela brilhante olhando para eles não é nada bom. Na verdade, isso reduz as chances de que os usuários olhem para a tela e simplesmente optem por não utilizar o site ou aplicativo em questão. Talvez por isso a maioria dos serviços de streaming de vídeo adotou como padrão o modo escuro, porque as pessoas assistem muito à noite ou em espaços mal iluminados. Portanto, uma interface de modo escuro é a melhor escolha para garantir que a interface não prejudique o conteúdo. Podemos inclusive relacionar com as televisões que raramente possuem uma moldura clara.

| ![Spotify interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/janxrvl2ic5eaay0k5jp.jpg) | 
|:--:| 
| *Interface escura do Spotify* |


## Utilizar ou não?
A partir das diversas referências pesquisadas, os pontos-chave para decisão de implementar ou não o modo escuro no sistema podem ser resumidos em: 
* Para telas com muito texto, o fundo claro com texto escuro é o preferido como padrão (legibilidade)
* Para interfaces de mensagens, o fundo claro com texto escuro é preferido como padrão (interpretação)
* Para pessoas com problemas de dor de cabeça ou enxaqueca, o tema escuro é preferido como padrão (saúde)
* Para pessoas que trabalham muitas horas de trabalho em frente a telas, uma interface escura é preferida como padrão (preferência pessoal)

Além disso, sempre que possível, uma opção é projetar para ambos os modos escuro e iluminado, fornecendo ao usuário a opção de alternar entre eles.

## Conclusão
Oferecer suporte ao modo escuro ou projetar seu aplicativo inteiramente usando uma paleta escura pode ser muito benéfico para os usuários, levando em consideração as desvantagens citadas acima. Mas o mais importante é que não se trata apenas de estilo. As opções de design, como uma paleta de cores, têm implicações enormes em relação à usabilidade e percepção. Fundos escuros reduzem o brilho geral da tela, portanto, podem ser usados ​​em qualquer condição de iluminação e usar um aplicativo com um fundo claro pode ser difícil ou mesmo perigoso no escuro, pois prejudica a aclimatação da visão noturna. Por outro lado, em relação à usabilidade e legibilidade, o modo escuro não é realmente o melhor. 
É sempre necessário focar no usuário e entender o contexto em que as pessoas que usariam aquele sistema estão inseridas. A escolha de uma interface escura ou não, não deve ser baseado em preferência estética pessoal. Como questionamento é importante refletir se a utilização de interfaces do usuário escuras por muitas grandes empresas tem origem na pesquisa científica ou na preocupação com as decisões de marketing e tendências. 

## Referências

* Dobres, J. Chahine, N. Reimer, B. (2017). Effects of ambient illumination, contrast polarity, and letter size on text legibility under glance-like reading;  Applied Ergonomics, 2017 Apr;

* Piepenbrock, C. Mayr, S. Buchner, A. (2013). Positive Display Polarity Is Particularly Advantageous for Small Character Sizes: Implications for Display Design. Journal of the Human Factors and Ergonomics Society, 2013 Dez;

* Mangen, A. et al. (2014). Mystery story reading in pocket print book and on Kindle: possible impact on chronological events memory. Conference paper presentation, IGEL (The International Society for the Empirical Study of Literature and Media), Turin, Italy July 21-25;

* Teixeira, Vinicius. (2016). Introdução e boas práticas em UX Design. Casa do Código, 2016;

Links: 

* https://www.nngroup.com/articles/dark-mode/

* https://www.fastcompany.com/90169654/two-fascinating-things-salesforce-discovered-when-it-studied-color

* https://www.uxmatters.com/mt/archives/2020/01/dark-isnt-just-a-mode.php

* https://uxdesign.cc/the-story-of-dark-mode-light-mode-and-the-user-87782f180ae5