Desafio loader global do Santander
Os times de marca e UX global do Banco Santander fizeram um desafio, e convidaram os profissionais de todos os países do grupo para a criação de novos loaders que seriam usados nas jornadas digitais (app e web).
Entre as propostas apresentadas, eu tive a alegria de ser a vencedora 😊. A seguir, você pode conferir o vídeo que usei na apresentação, e em seguida as explicações mais detalhadas.
Um loader primário com diferentes possibilidades
O big page loader, que é o loader principal, também chamado de loader de página, foi pensado para ser como um Lego, com partes que podem ser utilizadas para montá-lo da melhor maneira, de acordo com a necessidade. Essa característica se mostrou muito importante, já que isso proporcionou escala ao componente, o que é imprescindível para a utilização por diferentes times de diferentes países, com diferentes produtos e demandas. As peças para construi dão ao designer a possibilidade de avaliar a melhor opção para sua necessidade.
Nessa imagem, estão todos os elementos que podem fazer parte do big page loader.
No vídeo acima, é mostrada a construção e desconstrução do loader com os elementos.
Uma coleção de loaders
A proposta é ter liberdade para personalizar o loader, uma vez que siga as regras e a estrutura básica pré-definida.
O uso de ícones animados personalizados trás emoção, proximidade com o usuário e personalização para o produto.
Loader principal
Loader do Santander Universidades
Loader para produtos de viagem
O loader secundário que mantém a conexão com a marca
A maioria dos small loaders, também conhecidos como loaders secundários, são um spinner tradicional, mas no caso deste ele inicia como uma parte do big loader. Essa característica, além de reforçar a marca e manter uma conexão entre os dois, também trás uma solução única.
Além disso, esse mesmo elemento pode ser utilizado juntamente com ícones de positivo ou negativo para assim compôr o botão de feedback.
Vídeo ilustrando a criação do loader secundário.
Acessibilidade no loader
Antes de surgir a possibilidade de propor um novo loader, eu participei de testes de usabilidade nos quais foi identificado que o loader antigo não tinha acessibilidade para pessoas com deficiência visual. E, quando esse desafio para o novo loader surgiu, eu tive desde a criação até o desenvolvimento a intenção de fazê-lo acessível.
Com isso em mente, em parceria com o desenvolvedor do componente, chegou-se a uma solução que suprisse da melhor maneira as necessidades das pessoas com deficiência visual: o leitor de telas lê os textos que estão sendo exibidos, e, ao final do carregamento da página, além do sinal sonoro também tem o áudio "carregado" para dar segurança ao usuário de que ele pode prosseguir.
Apesar da acessibilidade visual ser sempre a mais notada quando se fala deste projeto, existem outros cuidados que foram pensados durante a criação do componente para que ele pudesse ser acessível para a maior parte das pessoas. Entre eles: contraste das cores, tamanho de fonte, linguagem simples, e também a possibilidade de um elemento estático ser exibido no lugar do elemento animado para quando a preferência de redução de movimento estiver habilitada no navegador do usuário.
Detalhe dos loaders aplicados
No vídeo a seguir, você pode ver o recorte da parte da apresentação em que mostra os loaders aplicados nas jornadas do usuário.
Gostou? Confira outros projetos:
Expedição Quati Curioso
Plataforma educativa digital gamificada para uso em sala de aula pelos anos iniciais do Ensino Fundamental. Como coordenadora, tive como responsabilidade junto ao time buscar a melhor experiência e interface, com objetivo principal de ter um conteúdo pedagógico acessível à maior quantidade de pessoas possível.
Flame Design System
Idealização e construção do Design System do Santander Brasil, com foco na definição, produção e documentação de elementos que se relacionam com as interações dos usuários e movimentos (motions) dos componentes.
PT 
EN