Criando Terminais de Autoatendimento Inclusivos: Um Processo de Design
Este foi um desafio de design do qual participei no passado. Portanto, este é apenas um projeto fictício feito para mostrar parte do meu processo de design pessoal. Tive apenas 48 horas para fornecer uma solução. Abaixo você confere o que entreguei para este projeto.
Contexto do projeto
Um supermercado está planejando usar terminais de auto atendimento para agilizar o processo de pagamento para clientes com menos de 15 itens. Cada terminal é equipado com leitor de código de barras, monitor touch screen, balança e PIN pad que aceita cartões de débito e crédito.
O Arquiteto de Informação já definiu um processo de design UX com os seguintes métodos e produtos:
-
Entrevista com o usuário
-
Personas
-
Wireframes de baixa fidelidade
-
Wireframes de alta fidelidade
Nota: Para este teste, considere que você tem tempo e recursos ilimitados para desenvolver este projeto.
Tarefa 1 - Você concorda com o processo de design de UX escolhido?
Minha resposta: Discordo. Em primeiro lugar, um processo de design é um ciclo, nunca teremos um produto digital 100% concluído, por causa de uma série de fatores e tendências mundiais que mudam rápido, sempre virão melhorias e novas funcionalidades para um grande projeto. Mas, neste caso, o mais importante é que não consigo ver nenhuma etapa de validação/teste o que pode ser muito arriscado, já que estamos construindo algo novo. Não consigo ver nenhum planejamento de escopo, é importante construir uma estratégia do projeto, como uma definição de MVP. Além disso, gostaria de ver algum tipo de acompanhamento com os stakeholders. Então, o que eu acredito ser a melhor abordagem é a seguinte:
No processo de descoberta, identificamos as dores e necessidades de nossos usuários e verificamos como outras empresas estão gerenciando isso atualmente. Para a definição do escopo, nesta etapa traremos nossa descoberta para a equipe e definiremos uma estratégia para construí-lo, mesmo sendo mais um assunto do time de negócios, eu envolveria alguém da equipe de UX nessas conversas para atuar como voz do usuário e garantir que estamos trabalhando para equilibrar as necessidades do negócio com a dos usuários, nesta etapa também definiremos como será a estratégia da equipe e quais devem ser os nossos entregáveis.
Na etapa de design, trabalharemos com base na estratégia da etapa anterior, para este projeto vamos imaginar que começaremos com design de baixa fidelidade e assim que conseguirmos a aprovação interna pelos stakeholders começamos os testes com nossos usuários e então o processo de design tem o ciclo reiniciado usando tudo o que aprendemos na etapa anterior de forma que sempre teremos o nosso produto/serviço aprimorado.
Claro que isto é apenas um processo de design resumido, também podemos acompanhar os desenvolvedores e até mesmo participar no controle de qualidade para garantir um produto entregue extremamente fiel aos designs.
Tarefa 2 - Proponha uma solução de design para os terminais de autoverificação
Minha solução: Em primeiro lugar, gostaria de destacar que este projeto também exigirá um planejamento de experiência do usuário para o mundo real, por exemplo, temos pessoas com diferentes alturas algumas delas terão diferentes deficiências (temporais e permanentes). Algumas das muitas questões que devem ser pensadas: Qual a altura que colocaremos o monitor para atender pessoas com 1,98m e outras com 1,30m de altura? Como evitar itens roubados? Como podemos chamar a atenção e deixar claro que é um terminal de auto atendimento? Como tornar acessível para uma pessoa cega? Visão limitada? Usuário de cadeira de rodas? Braço quebrado? Etc… É sobre acessibilidade e posso ter ideias para alguns desses casos, mas com certeza exigirá muita pesquisa sobre isso. Mas, para este projeto, pensarei apenas na experiência do usuário e da acessibilidade da web no aplicativo.
Para o app comecei a pensar na jornada do usuário, eu fiz isso me colocando no papel de muitos usuários/personas diferentes, sempre com pelo menos um deficiente tentando cumprir o objetivo principal. Então, desta forma, as ideias começam a surgir na minha mente e também penso em alguns erros que podem acontecer. Não uso papéis, faço anotações nem nada além da minha mente neste primeiro passo. Depois de muitas ideias, eu queria usar um método de descoberta progressiva para permitir que o usuário concluísse facilmente sua tarefa. Então aqui está o melhor fluxo que pensei:
Tendo a jornada do usuário mapeada, comecei a construir os wireframes, criei telas a partir de um modelo de tela de tablet orientado pela posição horizontal. Vou adicionar telas aqui e explicar minhas ideias para cada uma.
Home
Meu principal objetivo nesta tela é fornecer algumas instruções e regras usando um pequeno texto. Além disso, para fins de acessibilidade, usei um tamanho de fonte maior. Para salvar algumas etapas do usuário, decidi acionar o terminal quando o leitor de código de barras ou a balança forem ativados. O relógio é um bônus adicionado para ajudar os usuários a ter mais controle de seu próprio tempo.
Produto com código de barras
Acionada quando um código de barras é reconhecido. Aqui temos alguns padrões que persistirão na maioria das telas, o que está em azul significa que é um elemento interativo.
Sua lista de itens estará onde mostra todos os itens já adicionados, é possível clicar em um produto para visualizá-lo e cancelar se foi adicionado por engano ou se o usuário mudar de ideia no meio do processo. O mais importante é manter o valor total visível
Cancelar este item (Botão), permite remover itens de sua lista de itens.
Pagar e finalizar irá acionar a tela de pagamento, eu o fiz maior para torná-la facilmente perceptível, pois é uma das ações mais importantes
O botão finalizar sessão permitirá cancelar a sessões atuais e iniciar uma nova, uma caixa de diálogo de confirmação deve ser exibida.
A informação do produto, o elemento mais importante desta tela, permitirá ao usuário identificar e verificar o produto adicionado. Mostra o nome do produto, imagem da marca e preço. Tudo em um tamanho grande para ser facilmente perceptível, principalmente o nome do produto e o preço. Estou considerando ainda mais unidades do mesmo produto contando como um único item, então decidi não colocar uma ação nesta tela para aumentar a quantidade do mesmo produto.
Produto de pesagem
Disparado quando a balança é ativada . Aqui, o usuário deverá selecionar um item de uma lista. Uma barra de pesquisa é adicionada para facilitar a localização do produto. Fotos dos produtos também são adicionadas para identificar facilmente se o usuário não tiver muito conhecimento sobre o nome de vegetais por exemplo.
Visualização de cartão/lista, altera a visualização para torná-la mais dinâmica, dependendo do perfil do usuário. Se fosse um projeto real, gostaria de confirmar qual deveria ser mostrado por padrão.
A tela acima é o modo de visualização em lista, que traz as mesmas informações da visualização do cartão, mas exibidas de uma maneira diferente.
Após o usuário selecionar um item, serão exibidos os detalhes como nome, foto, preço por kg, peso e preço total.
Produto não encontrado
Se de alguma forma o código de barras não puder ser lido corretamente ou o produto não for encontrado, uma mensagem será exibida fornecendo a oportunidade de encontrar o item em uma lista.
O botão pagar e finalizar tem pouca visibilidade, pois a ideia é permitir que o usuário encontre o produto em uma lista. Se o botão “Não” for selecionado, ele retornará à tela anterior.
Encontrando o item, visão semelhante e usabilidade ao pesar um produto. Poderíamos trazer algumas sugestões dependendo de como o usuário digita e tornar a lista dinâmica de filtragem de acordo com os tipos de carateres digitados (começando após 3 caracteres).
Se nada for encontrado, fornecemos orientação e oportunidade para continuar adicionando itens ou finalizar a compra.
Limite de itens excedido
Se algum espertinho tentar quebrar o limite de 15 itens, o sistema não permitirá adicionar mais itens e mostrará uma mensagem e a única coisa possível a fazer é pagar ou encerrar a sessão (também remover itens da lista se desejar). Não podemos impedi-los de iniciar uma nova sessão após o término, então deve ser uma coisa para discutir com a equipe.
Pagamento
Após acionar o botão “pagar e finalizar” o terminal mostrará as formas de pagamento disponíveis, ficando ainda disponível remover itens da lista ou voltar à tela anterior.
Depois de escolher a forma de pagamento, fornece algumas instruções sobre como continuar.
Mensagem que o pagamento foi efetuado com sucesso e mensagem para aguardar a impressão do comprovante de pagamento.
Uma mensagem para o caso de o usuário adicionar a senha errada do cartão pedindo para tentar a ação novamente.
Uma mensagem de agradecimento é mostrada quando a sessão termina.
Diálogo de confirmação se o usuário clicar no botão “Encerrar sessão”, é importante evitar erros e perder todo o trabalho e, pior ainda, desacelerar toda a fila.
Design de alta fidelidade e UI Design
Minha ideia de IU é basicamente usar as mesmas cores de marca do supermercado. Para a fonte optei por uma família de fontes bem legível, a escolhida foi a família “Segoe UI”. Como eu tinha a liberdade de escolher essas cores, decidi usar algumas difíceis de usar do ponto de vista da acessibilidade. Nesse caso, eu queria brincar com alguns tons de verde e azul-turquesa.
Então, aqui estão o logotipo fictício e as cores da marca:
O contraste de cores desta marca e do fundo branco são:
A regra do WCAG 1.4.3 diz que o contraste de cor para texto normal deve ser de pelo menos 4,5:1 para texto normal e 3:1 para texto grande e WCAG 1.4.11 requer pelo menos 3:1 para objetos visíveis e componentes de IU, logotipos e elementos não interativos são uma exceção. Tendo isso em mente, brinquei com alguns tons mais escuros de azul-turquesa e verde.
Assim, consegui as cores principais de que precisava para começar a construir o visual acessível, e o resultado final é:
Fiz todos os elementos interativos no tom de azul-turquesa e o que não eram um elemento interativo (por exemplo cor de fundo). Usei alguns tons claros para atender ao requisito. Uma vez que todas as cores atendem aos critérios de sucesso da WCAG, eu não terminei, só queria verificar se estava tudo bem para daltônicos e os resultados são:
Parece que não haverá qualquer problema para daltônicos, para o último teste de IU, uma vez que é um aplicativo de toque, quero garantir que o critério do WCAG 2.5.5 seja atendido, ele diz que o alvo deve ter uma área de toque de pelo menos 48 x 48 px. Após análise, a única coisa que não atende a esse critério é a lista de itens. Portanto aumentei um pouco mais a área de toque.
Ele passou de 40x90px para 65x90px, agora está acessível.
Como pode perceber, a maioria das minhas decisões de design foi para tornar o projeto acessível. Eu sempre uso WCAG como um grande recurso para criar e disponibilizar meus projetos para o maior número de usuários possível, e isso ajuda a manter os projetos no caminho certo. Espero que tenha gostado da minha solução.
Se você quiser conversar mais sobre este ou outros assuntos sinta-se à vontade para me enviar um e-mail, será um prazer conversar com você.