Acessibilidade e Inovação:
Redesenhando uma Aplicação Complexa
Este é caso real, devido ao meu contrato de sigilo e segurança de privacidade de dados, chamarei este produto de “e-Reader” e usarei alguns dados falsos nas imagens abaixo.
Contexto do projeto
Esse “e-Reader” era um aplicativo antigo e obsoleto feito para usuários pesquisassem conteúdo em títulos jurídicos, tendo sido lançado em vários países, o que também significa suporte a vários idiomas. Recebeu muitos feedbacks de usuários sobre os desafios de usá-lo. Portanto, tendo isso em mente, os principais objetivos deste projeto foram:
-
Usar o framework e design system atual da empresa
-
Torná-lo responsivo
-
Suporte para acessibilidade web
-
Fazer com que seja consistente com outras plataformas de pesquisa da empresa
A equipe era composta por pessoas de várias nacionalidades diferentes e muitos tipos de profissionais, pessoas incríveis com quem tive o prazer de trabalhar, a composição da equipe era de Desenvolvedores, Gerentes de Projeto, Product Owners, UX Designers e UX Researchers. Nós nos reuníamos semanalmente para sessões de trabalho, onde esclarecíamos nossas dúvidas, fazíamos sessões de design thinking, alinhamentos, revisões e refinamento de design.
The team
The team was a diverse group of professionals from various nationalities, including Developers, Project Managers, Product Owners, UX Designers, and UX Researchers. Working with such a talented group was a pleasure. We held weekly meetings for working sessions where we clarified questions, conducted design thinking exercises, and performed design reviews and refinements.
Colocando as mãos na massa
Para este projeto eu tive a oportunidade de ajudar a planejar um ótimo workflow de UX, que mais tarde toda a equipe passou a usar em outros projetos, nosso workflow era simples mas eficiente. Ele vai desde o processo de descoberta até a entrega, fazendo também o controle de qualidade do ponto de vista de UX. Você pode ver o fluxo de trabalho na imagem abaixo:
Neste projeto, minha função principal era criar o design de interação, a arquitetura da informação e traduzir a aplicação para o português, mas algumas vezes eu tinha que liderar a equipe, outras construir a IU e depois que nosso gerente de projeto recebeu novas responsabilidades, eu também tive que assumir funções de gerente de projetos, neste caso gerenciando reuniões, novas tarefas e ficar de olho nos prazos do nosso time de UX, o que proporcionou ótimas novas experiências.
No geral, melhoramos todo o aplicativo indo até os detalhes mais profundos sem muitas restrições de projeto, dessa forma entregamos um produto realmente ótimo que me deixou muito orgulhoso do resultado final. Neste artigo, falarei apenas sobre dois recursos que foram realmente divertidos e me fizeram colocar todos os meus esforços e criatividade para projetar uma ótima experiência do usuário e mostrar a comparação entre o aplicativo antigo e o redesenhado.
Funcionalidade 1 – Sumário
O sumário, carinhosamente chamado por nós de T.O.C. (table of contents), é com certeza uma das características mais importantes que um e-reader pode ter e isso nos fez prestar ainda mais atenção a esta característica. O sumário legado era um pouco problemático, porque mostrava cada nível em camadas, o que, por exemplo, se um usuário estiver no nível 6 tentando pular de volta para o nível 1, ele terá que passar por todos os níveis anteriores exigindo uma quantidade substancial de tempo além de também não muito acessível via teclado, então os usuários do teclado poderiam ficar presos nele. Abaixo uma representação do design antigo:
Depois de algumas discussões e sessões de design thinking, chegamos a duas das melhores ideias. O primeiro era mais parecido com o antigo sumário, mas melhorado de forma que um usuário pudesse pular rapidamente para uma camada anterior. Os contras desta versão eram que um usuário não podia ter a visão completa de todos os conteúdos, permanecendo a dificuldade de pesquisar .
A segunda opção era mais como um componente em árvore que permite recolher e expandir camadas livremente, desta forma sendo mais fácil para os pesquisadores. Mas a principal desvantagem é que, dependendo do tamanho de um título, ele pode se tornar confuso e exaustivo.
Pensando nisso, trouxemos essas duas opções para sessões de pesquisa com usuários, onde fizemos uma espécie de teste A/B com cerca de 6 escritórios de advocacia, cerca de 15 usuários para este estudo. No final, o grande vencedor foi a segunda opção. Com os insights da pesquisa, avançamos com esse recurso que hoje é totalmente apreciado pelos usuários.
Funcionalidade 2 – Anotações
Anotações é um recurso que permite ao usuário adicionar notas ou destaques a uma parte do texto ou marcar uma página. Trabalhei bastante no design de interação deste recurso, mas não vou me concentrar nisso aqui, quero mostrar como tornei esse recurso acessível para daltônicos.
Este e-Reader oferece 7 cores diferentes para facilitar a pesquisa. Eu tinha uma paleta de cores muito limitada para usar e não podia me afastar muito do nosso design system. Então, eu tinha essas cores:
Mas é sabido que pessoas daltônicas têm um reconhecimento do espectro de cores muito limitado, e cada tipo de daltonismo tem uma cor diferente que não podem ver, o que torna o uso de cores não acessível. WCAG rule 1.4.1, diz que não podemos usar apenas cores para representar apenas informações visuais.
É por isso que os cards de anotações exibem o nome dos rótulos de cores além de tooltips para a seleção de cores.
Mas o verdadeiro desafio foram os destaques, sobre como torná-la distinguíveis para daltônicos, então criei alguns estilos de borda diferentes e para ter certeza de que era realmente uma boa ideia, falei com um colega de trabalho que tem daltonismo. Depois de uma ótima conversa, refinamos as bordas obtendo o seguinte resultado:
Agora é facilmente perceptível para todos, mas existe a possibilidade disso ser frustrante para pessoas com visão normal. É por isso que essas bordas são uma configuração que o usuário pode ativar e desativar a qualquer momento.
Além disso, este aplicativo tem três cores de fundo diferentes para a leitura de um livro, desta forma, eu tive que garantir que não houvesse nenhum problema de contraste de cor com nenhum esquema de cores de fundo. E aqui você pode verificar como ficou o resultado:
Final Design
Eu sei que você pode estar curioso para ver o design final deste aplicativo, então vou mostrar aqui uma pequena a comparação entre eles, nas imagens a seguir, é mostrada a comparação entre o design antigo (cinza) e o novo design (o branco). A primeira imagem representa a comparação da visualização da biblioteca, enquanto a segunda é a comparação da visualização do título.
Visualização da Biblioteca
Visualisação de Título
Eu poderia passar horas aqui explicando todas as diferenças, mas este não é o nosso foco aqui. Portanto, se você quiser conversar mais sobre esse ou outros assuntos, sinta-se à vontade para me enviar um e-mail, será um prazer conversar com você.