Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

3
respostas

[Design system] Análise do Proton Mail

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Com poucas cores, o Proton Mail¹ apresenta uma interface simples, focando em seu sentido (comunicar-se por e-mail) e mantendo uma hierarquia entre os componentes do sistema. Na imagem acima, vemos – do lado esquerdo e com destaque – o botão para escrever um novo e-mail, algo que enfatiza um dos propósitos (o outro é receber mensagens) do correio eletrônico. Ainda do lado esquerdo, constam as seguintes seções: Inbox; Drafts; Sent; Starred. Nesse caso, o ícone que acompanha cada seção ajuda a reforçar o sentido. Para Inbox, temos uma bandeja para documentos; para Drafts, temos uma página com algumas linhas; Para Sent, temos um aviãzinho de papel; Para Starred, temos uma estrela. Desses símbolos, talvez a estrela seja o que – a uma percepção apressada – pareça incomum. Contudo, a associação entre estrela e demarção de algo como especial que gostaríamos de guardar está em outros campos, como o Whatsapp e em navegadores quando favoritamos uma página. Prosseguindo, temos uma seta (More) em que podemos clicar para enxergarmos as seções Archive (representada por uma caixa destinada a armazenar documentos); Spam (representada por uma chama); Trash (representada por uma lixeira); All Mail (representada por alguns envelopes enfileirados). O termo "More" já sinaliza que há algo a mais naquele espaço, o que não deixa os usuários sem o conhecimento desse fato. Por sua vez, os símbolos continuam refinando a clareza do objetivo de cada parte. Em seguida, temos mais duas setas, as quais estão vinculadas às seções Folders e Labels, termos que explicitam a ideia de forma minimalista. No canto inferior esquerdo, concluindo o lado esquerdo, temos o espaço de armazamento do e-mail. No meio da página, em razão de ausência de mensagem selecionada, lemos: Seems like you are all caught up for now. Isso avisa ao usuário que não há novas mensagens em sua caixa de entrada. Mensagem sucinta e objetiva. Do lado direito, dado que não há mensagem nova sendo lida, vemos novamente a bandeja para documentos e uma recomendação sobre o uso de folders, o que pode ser útil a quem desconheça o propósito desse item. Para indicar como o acesso às configurações pode ser feito, o Proton Mail usa o desenho de uma engrenagem, ícone que evoca a ideia de sistema, máquina, funcionamento, comum em outras experiências na internet e em aplicativos que funcionem offline. Diante desse exame, saliento também a "sobriedade" cromática do Proton Mail (que se baseia, praticamente, em preto, roxo, cinza e branco)², um sistema que atenua a possível sobrecarga visual dos usuários e, em razão desse fato, deixa mais objetivo o manuseio da ferramenta.

¹ O meu Proton Mail está em inglês, embora seja possível deixá-lo em português.
² A paleta de cores pode ser mudada na parte de configurações, mas sempre usa quatro cores, com uma ou outra variação de tom ou cor de item.

3 respostas

Olá, Ednelson. Tudo bem com você?

Sua análise ficou incrível e super completa. Você conseguiu identificar muito bem como a consistência visual e o uso de uma paleta de cores enxuta ajudam a manter a hierarquia e a clareza da interface, tornando a navegação intuitiva para quem utiliza a ferramenta.

Observar a semiótica dos ícones, como você fez ao mencionar a estrela para marcar itens importantes e a engrenagem para configurações, mostra um olhar bem refinado para o design de interface. A escolha do roxo e das cores neutras cria exatamente esse contraste necessário para dar destaque ao botão principal de nova mensagem sem poluir a tela.

Como uma dica de aprofundamento, quando estiver analisando outros sistemas digitais, vale a pena observar também como esses mesmos componentes se adaptam no modo claro e na versão mobile para ver se a hierarquia visual e a acessibilidade de contraste se mantêm.

Na sua percepção, como você acha que a adição de mais cores primárias na interface afetaria a carga cognitiva de quem passa muitas horas usando o e-mail no dia a dia?

Parabéns pelo excelente trabalho e por compartilhar suas reflexões com a gente. Continue assim e lembre-se que o fórum está sempre à disposição.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Oi, Mike. Embora não seja algo unânime, a adição de mais cores (quando excessiva e deixando funcionalidades com várias cores) aumenta a chance de fadiga visual e cansaço mental. Inclusive, cores com contraste exacerbado entre fundo e letras ou imagens podem deixar os olhos exaustos em virtude do contínuo ajuste de foco. Como muitas pessoas trabalham horas e horas com o e-mail aberto, como você comentou, é necessário diminuir o máximo possível a possibilidade de cansaço visual. Por fim, pensando em acessibilidade, cabe mencionar que a sobrecarga sensorial (o que abarca a visão) em pessoas neurodivergentes é ainda maior.

Oi, Ednelson.

Excelente acréscimo. Você relacionou muito bem o excesso de cores com a fadiga visual e a sobrecarga sensorial em pessoas neurodivergentes, que é um ponto crítico de acessibilidade no design de interfaces. O equilíbrio no contraste e a sobriedade cromática de ferramentas de uso diário, como o e-mail, de fato protegem a saúde visual do usuário e garantem uma experiência inclusiva a longo prazo.

Uma dica para continuar expandindo esse estudo é dar uma olhada nas diretrizes da WCAG sobre contraste e percepção de cor.

Obrigado pelas considerações e bons estudos.

Para saber mais: