Santander's global loader contest
Banco Santander's brand and global UX teams set a challenge and invited professionals from all the group's countries to create new loaders to be used in the digital journeys (app and 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.
Like it? Check out other projects:
Quati Curioso Expedition
A gamified digital educational platform for use in the classroom in the early years of elementary school. As coordinator, my responsibility was to work with the team to find the best experience and interface, with the main goal of having educational content accessible to as many people as possible.
Flame Design System
Idealization and construction of Santander Brasil's Design System, focusing on the definition, production and documentation of elements that relate to user interactions and component motions.
EN 
PT