Nota para o professor: no momento estou sem disponibilidade para assistir as aulas de forma síncrona e estou fazendo o projeto de forma individual. Contudo, ficaria muito feliz e agradecido com um feedback do trabalho. O meu e-mail para contato é almeidag2001@gmail.com. Obrigado!
- Introdução
- Fluxos de usuário
- Personas
- Cenários
- Protótipo lo-fi
- Protótipo hi-fi
- Avaliação das Heurísticas de Nielsen
Esse projeto compreende todos os entregáveis relacionados a atividade interdisciplinar (A3) do quarto semestre do curso de Análise e Desenvolvimento de Sistemas da Universidade São Judas. O projeto tem como objetivo a realização do redesign das telas do software de compra e recarga de bilhetes dos trens, metrôs e ônibus da cidade de São Paulo. O sistema atual é gerido pela TOP (AutoPass) e também abrange a recarga de cartões Bilhete Único.
Os fluxos de usuário são uma técnica para realizar o mapeamento das telas de um aplicativo de maneira ágil a fim de compreender todos os possíveis caminhos e necesidades de um sistema.
Partindo dessa premissa, foram mapeados os fluxos de todos os tipos de compra que podem ser realizadas através da ATMs do TOP. Sendo eles: compra de Cartão TOP ou Bilhete Único utilizando dinheiro como forma de pagamento e compra de QRCode, Cartão TOP ou Bilhete Único utilizando cartão de débito como forma de pagamento.
Com o intuito de gerar uma melhor visualização - devido as grandes dimensões - dos fluxos de usuário, você pode acessar os fluxos criados através do seguinte link:
As personas são as representações fictícias do seu cliente ideal que são baseadas em comportamentos e características reais de seus usuários. Para abranger uma parte maior dos passageiros de trem, ônibus e metrô de São Paulo, foram criadas personas com idade e personalidade contrastantes.
Arnaldo foi pensado como um adulto de meia idade que apesar de ter vivido a revolução da tecnologia durante sua fase adulta, não tem medo de tentar aprender a utilizar novas tecnologias, desde que essas façam sentido e tragam praticidade no seu dia a dia.
O perfil de Elizabete faz referência ao público mais velho que utiliza o transporte público e que, na maioria dos casos, enfrenta dificuldades de adaptação com as mais recentes tecnologias. Contudo, é importante entender e auxiliar esse grupo de clientes.
Pedro é jovem, arrojado e curioso um perfil que sozinho vai aprender e migrar para a mais recente e prática maneira de realizar tarefas. Sua personalidade abrange grande parte do público mais jovem.
Os cenários ajudam a comunicar a essência da idéia de produto dentro de um definido contexto provável de uso. Pensar em o que o usuário vai fazer pode parecer não muito controlável mas mapear alguns cenários comuns pode ser útil para compreender as limitações da solução, afinal é o produto que deve se adaptar ao contexto de uso, e não o contrário.
Os cenários aqui presentes foram criados em volta da realidade das personas que foram desenvolvidas para esse projeto e serão relatados em sequência.
Certo dia no caminho para o trabalho, Arnaldo precisa recarregar o seu vale transporte. Ao chegar na estação de trem, ele é informado que a única ATM que existia ali está em manutenção. Apesar de um pouco nervoso, por imaginar que irá precisar comprar um bilhete, ele mantém a calma e pede informação para um dos guardas da estação perguntando se existe alguma outra maneira de realizar essa recarga.
O guarda, de maneira solícita, o ajuda a baixar o aplicativo no celular e fazer o processo pelo próprio app da TOP. Arnaldo fica impressionado com a praticidade do aplicativo e começa, após o ocorrido, fazer todos os processos relacionados ao seu cartão diretamente do app no conforto da sua casa.
Pela manhã, Dona Bete se arruma e faz seu caminho até a estação de trem com o objetivo de se locomover até a casa de seu filho mais velho para ajudá-lo com seu neto, ainda bebê, uma vez que ambos os pais da criança precisam trabalhar.
Ao chegar na estação, se depara com uma fila enorme nas ATMs onde costuma comprar o seu bilhete. Finalmente chega a sua vez e após realizar a compra do bilhete, ela percebe a mensagem de que a compra do bilhete pode ser realizada também pelo app do TOP. Ainda que tenha resistência para aprender novas tecnologias, Bete resolve dar uma chance a fim de evitar o estresse da fila.
Mais tarde, Elizabete pede ajuda para o seu filho que lhe ensina como usar o aplicativo. Então, à partir desse dia ela começou a realizar as compras apenas através do app.
No caminho para o trabalho no início do mês, Pedro precisa realizar a recarga do seu cartão TOP na ATM da estação. Por conta da quantidade de pessoas precisando passar pelo mesmo processo, ele decide, de uma vez por todas, baixar o aplicativo e realizar a recarga do seu cartão ali mesmo.
Devido a utilização do app, Pedro não se atrasou nesse dia. O app, então, virou costume e agora todo final/início de mês ele utiliza o aplicativo para realizar a recarga do seu vale transporte.
Os protótipos lo-fi, também conhecidos como protótipos de baixa fidelidade, são representações simplificadas e de baixo custo de uma interface ou experiência do usuário. Eles são criados durante a fase inicial do processo de design para explorar ideias, testar conceitos e iterar rapidamente. Os protótipos lo-fi podem ser feitos de forma manual, usando papel, canetas, recortes ou de forma digital, com ferramentas simples de design. Eles são úteis para comunicar e validar ideias, envolver stakeholders, testar fluxos de interação e identificar problemas de usabilidade antes de investir recursos na implementação final. Ao criar protótipos de baixa fidelidade, os designers podem obter feedback valioso, refinar a experiência do usuário e economizar tempo e recursos no desenvolvimento.
Foram criados wireframes (layout de uma interface, sem detalhes visuais, cores ou elementos gráficos refinados) das principais telas do sistema para a criação de uma visualização prévia de como o sistema, como um todo, vai ser apresentado para o usuário. Outras telas que podem ser necessárias posteriormente serão baseadas nos protótipos já existentes. Você pode ter acesso ao projeto dos wireframes no link a seguir:
Figma - Protótipos WireframeA seguinte tela será a cara do sistema, ou seja, a primeira que será apresentada ao usuário durante o uso de uma ATM. Nela, o usuário poderá escolher o tipo de compra de bilhete que irá efetuar. Além disso, disponibilizaremos um QRCode para download do aplicativo e informações à respeito do mesmo.
Essa tela irá aparecer sempre que algo um processo estiver sendo carregado ou algum procedimento estiver sendo realizado pelo usuário (como o pagamento através da máquina de cartão, por exemplo). Nesses casos, uma imagem relacionada a ação que esta sendo executada será disposta, tal qual a descrição dessa ação.
Aqui, o usuário selecionará o tipo de recarga que irá realizar na ATM. Lembrando que as opções sempre serão dispostas de acordo com a disponibilidade da ATM em questão.
Nessa parte do sistema o usuário irá determinar a quantidade de bilhetes ou o valor da compra. Para pagamentos com dinheiro a seleção será por valor e para outros tipos de pagamento será por quantidade de bilhetes, a fim de facilitar em ambos os casos.
O protótipo hi-fi é uma representação detalhada e próxima do produto final, com elementos visuais, interações e funcionalidades refinados. Criado com ferramentas avançadas, ele permite testar o design e validar a experiência do usuário antes da implementação. Com animações, transições e interações complexas, o protótipo hi-fi proporciona uma visão precisa do produto, identificando problemas e ajustes antes do desenvolvimento completo, economizando tempo e custos.
O protótipo hi-fi do projeto foi criado utilizando a ferramenta Figma, permitindo a criação de uma representação visual detalhada e interativa do produto final. Com o Figma, foi possível desenvolver transições, animações e interações que reproduzem o fluxo real do sistema, proporcionando uma experiência de navegação completa e realista. Você pode acessar o prótipo através do seguinte link:
As heurísticas de Nielsen, também conhecidas como as "10 Heurísticas de Nielsen", são um conjunto de diretrizes de usabilidade propostas por Jakob Nielsen, renomado especialista em design de interação. Essas heurísticas são um conjunto de princípios amplamente aceitos que ajudam a identificar problemas de usabilidade em interfaces de usuário. Elas fornecem um conjunto de diretrizes gerais, como feedback ao usuário, consistência e flexibilidade do sistema, prevenção de erros e design estético. As heurísticas de Nielsen são amplamente utilizadas na avaliação de interfaces e no processo de design, auxiliando os profissionais a criar produtos mais eficientes, intuitivos e satisfatórios para os usuários.
A avaliação do projeto de acordo com as Heurísticas de Nielsen pode ser encontrada no seguinte arquivo: