.png)
EzFill é um serviço móvel de entrega de combustível em rápido crescimento que mantém as frotas de viagens e de negócios funcionando sem precisar tirar uma folga do dia para ir a um posto de gasolina.
Embora eles já tivessem um site e um celular existentes para seus membros, eles perceberam que precisavam para melhorar seu produto e ofereça uma experiência de usuário muito melhor para seu público-alvo.
1. Pesquisa, análise e comparação do produto atual com base nas 10 regras heurísticas de usabilidade de uso da Internet de Jakob Nielsen com concorrentes.
2. Aplique Avaliação heurística para determinar se o aplicativo atual atende às necessidades expressas pelo cliente no que diz respeito às necessidades do usuário.
3. Apresentação das descobertas e uma recomendação formal para comunicar o melhor curso de ação.
EzFill pediu à nossa equipe que fizesse uma análise geral do aplicativo e fornecer recomendações para melhorar a usabilidade e a acessibilidade.
Mais de 2 semanas de UX Designer em uma equipe de 4 ou mais Figma
Nossa equipe trabalhou com o usuário do cliente em mente por meio da aparência e da falta de seu sistema de aplicativos anterior, para identificar todos os recursos essenciais que eles precisariam implementar em seu sistema atual.
A equipe avaliou diferentes concorrentes com base em vários fatores-chave, como design, pontos fortes e fracos, acessibilidade e autenticidade como base para nossas recomendações. Nosso objetivo era entender as práticas e padrões padrão entre os concorrentes para implementar boas práticas em nosso design ou até mesmo elaborar sobre isso.
.png)
Em equipe, avaliamos o produto em seções, desde a integração até as telas de ajuda. Nós usamos Heurística de 10 usabilidades de Jakob Nielsen como regra geral, fazer isso. Não apenas apontamos os principais problemas encontrados, mas também oferecemos as melhores práticas para cada um deles.
É muito desafiador para apenas uma pessoa analisar um projeto inteiro e encontrar todos os problemas de usabilidade. Por causa disso, cada um de nós exploramos o aplicativo individualmente e depois compartilhamos nossas descobertas para garantir que pessoas diferentes vissem problemas de usabilidade diferentes. Começamos com uma revisão geral da avaliação heurística e depois a dividimos em implementações essenciais que precisariam ser feitas.
As telas “Splash” e “Onboarding” falharam requisitos de contraste de cores, e o tamanho do subtexto era muito pequeno para exibição móvel, o que se enquadra na regra #8 Design Estético e Minimalista. Além disso, o símbolo da marca registrada não foi exibido como em outras telas.
Selecione diferentes tonalidades de cores para passar a acessibilidade, aumente o tamanho da fonte do subtexto e adicione ou remova símbolos de marca registrada para ficar consistente em todo o aplicativo. Uma boa prática para dispositivos móveis é ter um tamanho de fonte de 16px.
1. Seguindo o princípio da familiaridade, a primeira tela é inesperada para a maioria dos aplicativos, maximizando assim a carga cognitiva que o usuário precisará executar para passar para a próxima etapa.
2. O contraste de cores do botão de call to action (CTA) não atende aos requisitos de contraste de cores. Além disso, o botão “Usar localização atual” também precisa ser alterado para melhorar a legibilidade.
3. Texto do cabeçalho principal “Onde você precisa de combustível entregue? “precisa estar alinhado à esquerda.
4. O estilo e a localização do a mensagem de erro varia entre as telas. Por exemplo, na tela “Número do celular”, a notificação aparece abaixo do campo de entrada, a cor vermelha é muito mais clara e uma exclamação é usada no lugar do “x” usado aqui.
5. De acordo com as regras #4 e #8, o botão “Criar conta” do CTA é laranja, apesar de ter campos de entrada vazios. Em outras partes do aplicativo, laranja significa que o usuário pode prosseguir para a próxima etapa.
1. Usando a regra #4 Consistência e padrões, rreorganizar a ordem das telas apresentadas ou reformule o título para ajudar os usuários a entender a meta do aplicativo de verificar a disponibilidade em sua localização.
2. Escolher uma cor cinza mais escura para contrastar com o texto branco para facilitar a leitura.
3. Alinhar o título à esquerda melhoraria a estética e o design de acessibilidade da tela.
4. Como a mensagem de erro cobre o título da página, seria melhor para colocar mensagens de erro abaixo dos campos de entrada de forma consistente. A melhor prática seria escolher um esquema de cores que passe pela acessibilidade.
5. Em vez disso, o botão deve ficar cinza enquanto houver campos vazios. Depois que os usuários inserirem informações suficientes para criar sua conta, o botão deverá ficar laranja, significando que o usuário pode ir para a próxima etapa.
1. Conforme mostrado na tela anterior, o botão laranja não atende aos requisitos de acessibilidade. Além disso, de acordo com a regra #8, a etiqueta numérica pode ser desnecessária até que um veículo seja adicionado tPara preservar o design minimalista.
2. Dependendo do tamanho do texto/frase, isso fará com que a coluna fique muito apertada. Portanto, a tabela será apertado e mal distribuído para a organização em geral.
1. Supondo que um usuário iniciante veja essa tela, removendo o valor numérico adicional (0) é recomendado.
2. Para ter uma mesa organizada, deve haver espaço suficiente entre as colunas do lado esquerdo e do lado direito. Para economizar espaço, considere usar “gal” ou “GL”, que geralmente são usados para abreviar a palavra galão após #8 do design.
1. O botão nessas telas fica laranja quando o campo de entrada está vazio. O texto não está alinhado à esquerda, conforme mencionado anteriormente. Além disso, o aplicativo solicitou um número de telefone, para que eles sejam notificados quando o serviço for transferido para a área do usuário. No entanto, já foi perguntado em telas anteriores.
2. Com outros formulários em toda a experiência do usuário, esse tipo de lista (botões individualizados) não é visto.
1. Botão deve ficar cinza até que o usuário tenha preenchido todos os campos de texto de entrada e textos alinhados à esquerda. A consistência é essencial para demonstrar profissionalismo e um fluxo de usuários coeso em todo o aplicativo. Portanto, se o número de telefone já foi solicitado, não deve haver uma segunda solicitação.
2. Para permanecer consistente com o resto do aplicativo, uma alternativa seria para converter os botões em uma lista suspensa e combine-a com a página “Onde você precisa entregar combustível” para eliminar espaços em branco desnecessários. Essa regra, #1 Visibilidade do status do sistema, ajuda a manter o usuário informado sobre o que está acontecendo por meio de feedback apropriado.
1. A mesa de casa/trabalho pode causar confusão resultando na projeção do usuário da ideia de que haverá um menu diferente para cada opção do botão de alternância.
2. A mensagem notificando o usuário de que ele ainda não tem nenhum pedido retira a ação necessária. Embora a mensagem incentive o usuário a visualizar o botão abaixo, um botão de call to action (CTA) eliminaria uma etapa.
1. Para minimizar a confusão na Visão geral da conta, colocar a tabela da casa e do trabalho na seleção “Seu endereço” na lista suspensa ajudaria.
2. O “Obtenha seu primeiro EZFill” deve ser um botão de CTA para minimizar o tempo gasto na tela para descobrir qual ação realizar. Isso proporcionaria a flexibilidade e a eficiência de uso de acordo com a regra #7
1. As telas de Notificação e Carteira são exibidas diferentes layouts de listas em todo o aplicativo. Alguns são divididos por linhas, enquanto outros não são segmentados.
2. Se houver apenas uma forma de pagamento, editar o livro pode esclarecer o que inserir. Isso corresponderia à regra #2 Combinação entre o sistema e o mundo real.
1. Conforme mencionado anteriormente, consistência em todo o aplicativo traduz um design profissional e coeso.
2. Títulos claros podem ajudar os usuários a entender o que inserir evite qualquer confusão.
1. O botão “+” para adicionar veículo não é extremamente visível nem intuitivo. Para ajudar os usuários a navegar e adicionar carros, o botão deve ser colocado no botão esquerdo e evite que os usuários precisem esticar o dedo para chegar ao topo. O posicionamento e a ênfase dados ao logotipo podem dar a impressão de que é um botão quando não é.
2. O botão continuar na parte inferior da tela tem a mesma finalidade do botão laranja — ambos levam os usuários de volta à página “Combustível”. Isso faz a opção de continuar é redundante.
3. Contraste de cores entre o cinza exibido com o fundo branco não passa pela acessibilidade. Os usuários podem ter dificuldade em ler e isso pode causar desconforto.
4. As opções “Excluir veículo” e “Salvar atualizações” os botões são inconsistentes como um pergaminho, e o outro permanece imóvel.
5. As informações e os ícones não são extremamente claro para o usuário, que falha na regra #10 Ajuda e documentação porque exige que o usuário tenha uma explicação adicional.
1. Remover o logotipo e alinhar o título à esquerda ou adicionar uma ação ao logotipo criaria componentes mais organizados e significativos para ajudar os usuários a navegar no aplicativo de acordo com a regra #7.
2. O botão Continuar pode ser excluído ou redesenhado para levar o usuário a uma página diferente.
3. As melhores práticas para essa tela seriam selecionar tonalidades de cinza diferentes/mais escuras para passar pela acessibilidade.
4. Coloque o botão “Excluir veículo” abaixo do botão “Salvar atualizações”. O uso mais substancial da laranja implica uma ação primária, enquanto o contorno laranja implica uma ação secundária. Consistente com layouts típicos, a ação/botão mais importante deve ser listada primeiro.
5. O uso de “x” aqui implica a opção de excluir. Considere reutilizar o “x” como um atalho para excluir e trocar sua posição com o ícone de edição. Como alternativa, considere se livrar do “x” e incluir um ícone de ponto de exclamação laranja para acompanhar o texto “Nenhuma cobertura encontrada para automóveis”.
1. A quantidade excessiva de texto faz o layout parece condensado e, portanto, deve ser adicionado espaço em branco extra entre todos os elementos.
2. Para usar melhor o espaço disponível na tela, o título pode ser alterado para uma versão mais curta e deve ser alinhado à esquerda para facilitar a leitura.
3. O texto nesse pop-up faz duas perguntas ao usuário: se ele gostaria de confirmar e se gostaria de continuar. Embora os dois sejam sinônimos nesse caso, é melhor se concentrar em uma pergunta simples para evitar confundir o usuário.
1. Reformule a mensagem tentando ser transmitido ou remover qualquer texto/informação desnecessária necessária para que o usuário dê um passo.
2. As alternativas podem ser “Localizar veículo” ou “Confirmar endereço”.
3. Os usuários podem cometer erros de vez em quando. Portanto, dando-lhes confirmação adicional com redação precisa nas principais áreas de fluxo podem evitar erros no futuro. Considere se livrar da pergunta na parte inferior e mudar de “Sim” para a ação “Confirmar”.
1. A opção da barra de pesquisa pode ser benéfica para usuários que procuram encontrar uma pergunta específica em vez de rolar a tela inteira para cima e para baixo.
2. A cor cinza do corpo do texto não atende aos requisitos de contraste.
3. O FAQ e os Termos de Serviço abrem uma nova tela dentro do aplicativo EZFill, enquanto a Política de Privacidade é aberta em um navegador da web.
1. Seguem as opções de acordeão para os usuários padrões da indústria e são fáceis de usar, conforme declarado na regra #4.
2. Uma cor mais escura e o tamanho do texto podem ser alterados tPara seguir as melhores práticas de acessibilidade.
3. A consistência deve ser aplicada em todas as opções e mostre profissionalismo e um design geral coeso.
Com informações mais do que suficientes que a equipe reuniu, estávamos prontos para a proposta algumas rodadas completas de avaliação posteriormente. Ao apontar áreas de melhoria, nosso cliente poderia determinar qual melhoria seria melhor para seu produto e proporcionaria uma experiência de usuário excepcional.
Embora nosso cliente não tivesse requisitos rigorosos para a análise de aplicativos, minha equipe e eu pudemos comparar minuciosamente os produtos da concorrência para aplicar práticas comuns usando as 10 regras heurísticas de usabilidade de Jakob Nielsen e apontar as principais áreas de melhoria.
A principal lição para este projeto é definitivamente “mantenha a mente aberta e esteja disposto a repetir.” O processo de design está em constante mudança e precisa atender às expectativas dos usuários.
A equipe EZFill aplicou alguns dos conceitos apontados em nossa análise, proporcionando uma experiência agradável para seus usuários.
