Considerações iniciais
Dentro de um projeto sempre temos que tomar decisões baseadas em dados ou fatores técnicos. Nesse estudo de caso, tentarei entender como melhorar a experiência do usuário na tela de check out.
Esse estudo está sendo feito no mês de maio do ano de 2020, no meio de uma das maiores crises do século XXI, a crise do Coronavírus. Tendo isso em mente, as decisões tomadas dentro desse projeto terão influências temporais do que está sendo vivido hoje.
Análise heurística da tela de check out
Vamos começar a análise tentando encontrar inconsistências heurísticas.
Item 1
A crítica nesse item surge pela violação da heurística da Flexibilidade e Eficiência, que nos ajuda a entender que a interface desenvolvida precisa ser útil e atender tanto os usuários inexperientes quanto os experientes. E que os inexperientes precisam de informações mais detalhadas.
Erro - Há uma inversão de pesos entre os elementos desse bloco. Essa inversão pode dificultar o entendimento de usuários novos ou inexperientes.
Nota - Pode-se referenciar o endereço tornando a indicação textual personalizada, baseando-se na heurística de Compatibilidade entre o Sistema e o Mundo real, que incentiva a tornar a linguagem da interface pessoal e familiar.
Item 2
A crítica nesse item surge pelas violações das heurísticas de Flexibilidade e Eficiência, já citada anteriormente, e de Visibilidade do Status do Sistema que nos diz que o sistema através deve dar feedbacks instantâneos para o usuário, que servem para orientar e o conduzir pelo caminho correto.
Esses textos podem parecer confusos para usuários novos ou inexperientes dentro do app.
Erro 1 - A informação de quando o pedido será entregue está no subtítulo do item 2, como informação secundária. Isso poderia causar confusão a um usuário novo que seleciona para agendar o pedido e não vê essa informação de status do sistema, podendo causar uma eventual compra errada.
Erro 2 - Não há informação clara de que “90-100 min” é o tempo estimado para entrega.
Nota 1 - Pode-se realocar, de melhor forma, o status de quando o pedido será entregue.
Nota 2 - Pode-se informar de maneira mais clara que o tempo, no subtítulo, se refere ao tempo estimado de entrega.
Item 3
A crítica nesse item surge pelas violações das heurísticas de Visibilidade do Status do Sistema, já citada, de Flexibilidade e Eficiência, já citada, e de Liberdade e controle do usuário que nos ajuda a entender que devemos dar liberdade o usuário decidir e tomar as ações que quiser, não impondo ou forçando a tomada de decisão dele.
Erro - A sacola do app Ifood tem como função não só informar os produtos escolhidos pelo usuário, mas também informar endereço escolhido, inserção de cupom e escolha de forma de pagamento e entrega. Esse tanto de funções pode atrapalhar o usuário a escolher os produtos e a revisar os produtos escolhidos. O bloco em destaque nessa página é o do botão “Fazer pedido”, isso pode influenciar, inconscientemente, o usuário a finalizar a compra, e não ver mais produtos.
Nota - Pode-se separar todos esses processos, citados acima, e dar a liberdade ao usuário de escolher primeiramente os produtos e depois revisar os itens e por fim finalizar a compra.
Primeiras conclusões
Aprendemos e descobrimos com a análise heurística da tela de checkout algumas coisas. Agora vamos para fase de ideação, onde pensamos algumas ideias técnicas para resolver esses problemas. Também vamos relembrar os problemas que vamos resolver.
Item 1 - Há desequilíbrio entre os pesos dos elementos do Item 1. Para resolver isso, podemos implementar a heurística de Compatibilidade entre sistema e mundo real. Criar uma linguagem familiar pode ajudar o usuário a não confundir endereços. Quando o usuário cadastra um endereço, ele também insere um nome, ou descrição, do endereço. Podemos usar essa descrição como elemento principal do Item 1 e assim priorizar as informações que ajudarão o usuário a revisar o endereço.
Item 2 - Aqui também há um texto que pode causar confusão ao usuário. Vamos tentar corrigir isso acrescentando a frase “Tempo estimado” antes do tempo descrito. Sobre a informação de quando o pedido será entregue, temos que realocá-la em outro local que dê mais visibilidade ao status de entrega.
Item 3 - Separar os processos de escolha de produto e revisão de compra e pagamento.
Primeira prototipação em baixa fidelidade
Pensando em tudo que aprendemos até agora, vamos para a primeira prototipação. Para não gastar recursos desnecessários, fizemos o primeiro protótipo em baixa fidelidade.
Ao desenhar em papel, conseguimos entender melhor como será a visualização do usuário e fazer alguns ajustes e percebemos que precisamos de mais informações.
Benchmark
Para entendermos mais, vamos para uma outra parte importante do processo, que é o benchmark, que consiste em pesquisar alguns concorrentes e outros apps existentes e aprender um pouco sobre as tendências de mercado e inovações.
Depois de algumas horas de pesquisa, selecionei 2 telas que podemos utilizar para estudo de implementação de ideias.
Vamos a primeira:
Na imagem acima vemos como pode ser a estrutura de uma sacola para visualização rápida de itens para compra. Percebemos que a imagem ajuda o usuário a visualizar melhor o produto. Além disso ele pode acrescentar itens e alternar entre a navegação do aplicativo e a revisão de itens comprados de maneira veloz e sem outros elementos que perturbem a harmonia visual.
Vamos a segunda:
Nessa imagem, visualizamos uma estrutura de sacola contendo revisão de produtos e outros campos juntos, isso pode ser um erro. Porém vamos ignorar o primeiro bloco e nos atentar ao resto!
Todos os itens estão comprimidos e resumidos, para uma fácil visualização e entendimento. Há um resumo pequeno ao rodapé da página que ajuda a revisar os itens comprados e o valor.
Conclusões
Aprendemos e descobrirmos mais algumas coisas. Estamos no caminho certo para o protótipo da sacola de itens, porém, podemos redefinir alguns elementos da tela de revisão e pagamento e aplicar os aprendizados do benchmark.
*Precisamos comprimir os elementos da tela de revisão e pagamento e ordená-los de maneira mais objetiva.
*Acrescentar iniciativas que ajudem no combate ao Covid-19, que aprendemos no benchmark.
Segunda prototipação em baixa fidelidade
Revisando as informações que tínhamos e acrescentando as novas, fiz esse protótipo de baixa fidelidade. Levando em conta o que aprendemos
criei a primeira tela, Sacola, e a segunda, Revisão e pagamento.
criei a primeira tela, Sacola, e a segunda, Revisão e pagamento.
Na primeira tela, utilizei os mesmos elementos comuns do app da Ifood. Na segunda, removi parcialmente os produtos, colocando-os numa aba oculta que pode ser visualizada pelo usuário quando quiser. Revi e reescrevi o texto base do bloco de endereço de entregas e tipo de entrega, consertando as violações heurísticas. Além de acrescentar 3 blocos ou campos:
1 - Observações para o entregador, esse campo ajuda o usuário a dar instruções de localização, referência, ou de orientações quanto ao transporte do pedido;
2 - Ajudar esse pequeno restaurante, essa função permite o usuário a doar um valor pequeno ao estabelecimento, nesse momento de crise, e pode ser adicionado ao carrinho só com um click;
3 - Uma mensagem pop-up Prevenções e cuidados contra o coronavírus, após a confirmação de compra.
Agora que já temos uma base. Vamos para a prototipação de média fidelidade.
Prototipação em média fidelidade
Nessas telas foram aplicadas as mudanças de todo estudo feito até aqui e acrescentado os textos complementares.
Prototipação em alta fidelidade
Agora implementando todo padrão de organização, sistema de design, ícones, imagens e ajustes nos textos, finalizamos com o protótipo em alta fidelidade.
Veja a navegação do protótipo em alta fidelidade
