SECRETARIA DE EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA

SUL-RIO-GRANDENSE – CAMPUS PELOTAS
CSTSI – CURSO SUPERIOR DE TECNOLOGIA EM SISTEMAS PARA INTERNET

Design de Interface II - 6º Semestre

Relatório de Análise de Testes de Usabilidade

NOME DO PROJETO

Johann Carvalho Waltzer

INTRODUÇÃO

Este trabalho visa, por meio do software Quant UX, extrair dados
estatísticos de testes realizados com o público alvo do aplicativo Banco dos
Quadrinhos.

O software Quant UX foi utilizado para registrar a interação dos usuários

com a interface, gerando mapas de calor, gráficos de tarefas e interações, além
de outros dados estatísticos importantes. As métricas analisadas incluem o
tempo de conclusão das tarefas, a quantidade de cliques realizados, e os
pontos de desistência, conhecidos como drop-offs, onde os usuários
abandonaram uma tarefa antes de completá-la.

O foco desta análise recai sobre quatro (e não cinco como vai ser
explicado mais à frente) tarefas principais: criar uma conta, visualizar autores,
pesquisar quadrinhos, e realizar trocas de HQs. Essas funcionalidades foram
consideradas cruciais para a interação e retenção dos usuários na plataforma.
A partir dos dados obtidos, foram identificadas áreas onde a usabilidade pode
ser aprimorada, visando melhorar a clareza dos elementos interativos e
otimizar o fluxo de navegação entre as telas.

Antes de inserir o projeto no Quant UX para a análise de usabilidade, o

design e a prototipação do Banco dos Quadrinhos foram realizados no Figma.
No entanto, algumas ferramentas interativas que funcionavam adequadamente
durante o desenvolvimento no Figma não se adaptaram de forma ideal ao
ambiente de testes do Quant UX. Essa incompatibilidade resultou em uma
experiência menos fluida para os usuários durante as interações, evidenciando
a necessidade de ajustes na transição entre as plataformas de design e teste.
Isso destaca a importância de garantir que todos os elementos e
funcionalidades se integrem de forma consistente em diferentes ferramentas de
desenvolvimento e avaliação.

TAREFA CRIAR CONTA

Nesta seção serão apresentados os resultados dos testes para a tarefa de criar
conta no app.

1. Click HeatMap
A Figura 1 apresenta o fluxo da tela de login e a tela de cadastro, onde
pode-se notar que muitos usuários tentaram já entrar sem criar cadastro
primeiro, talvez indicando que o texto para cadastro do usuário esteja muito
pequeno ou não claro, podendo elevar o contraste das cores.
 Figura 1: Mapa de calor da tela de login e cadastro

2. Tasks and Drop-off

O tasks and drop-off, apresentado na figura 2 e 3, mostram basicamente
a porcentagem das pessoas que realizaram os testes que chegaram nas telas
pedidas para concluir a tarefa de criar a conta. Notando-se na figura 3 que 100
por cento dos usuários conseguiram ir da tela de cadastro até a home page.
 Figura 2: Mapa de Tasks and Drop-off das páginas de cadastro e home
Mas como nota-se pela figura 3 que somente 90 por cento dos usuários
conseguiram acessar a página de perfil, uma queda de 10 por cento de acesso,
indicando que como acessar o perfil não ficou claro para eles.
Figura 2: Mapa de Tasks and Drop-off das páginas home e perfil do
usuário
 3. Views
Scatter Plot
O primeiro gráfico analisado é o Scatter Plot na figura 4, que tem como
função mostrar a média de entre o tempo e interação da realização da tarefa,
até sua conclusão. Cada ponto representa um teste realizado com sucesso,
onde pode-se notar que em sua grande maioria tiveram uma relativa facilidade
para concluir o teste estipulado, com algumas exceções.

Figura 4: Gráfico Scatter Plot para a tarefa Criar conta

Box Plot
O box plot basicamente cria uma média de interações e outra de
duração da tarefa, mostrando o quanto estão concentrados as conclusões das
tarefas.
 Figura 5: Gráfico Box Plot para a tarefa Criar conta
Step-Duration

No gráfico do step-duration na figura 6 vê-se a duração da conclusão da

tarefa e quanto tempo levou para chegar em determinadas telas, como se pode
notar a maioria dos usuários chegaram na tela home em um tempo rápido, com
algumas exceções, mas mantendo uma boa média, a última parte da tarefa era
acessar a tela de perfil de usuário que foi atingida também com uma boa média
de tempo.
 Figura 6: Gráfico Step-Duration para a tarefa Criar conta
Step-Interaction
A seguir analisa-se o gráfico step-interaction na figura 7, que tem como
função parametrizar quantos cliques são realizados durante a execução da
tarefa. Neste caso houveram bastante cliques até a conclusão da tarefa,
principalmente na parte de acessar o perfil do usuário, mostrando que talvez
não tenha ficado muito claro o botão de acesso dele.
 Figura 7: Gráfico Step-Interaction para a tarefa Criar conta

TAREFA VISUALIZAR AUTOR

1. Click HeatMap
A Figura 8 apresenta o fluxo da tela de visualização do quadrinho e o
acesso ao perfil do autor. Muitos usuários inicialmente tentaram clicar no
quadrinho ou em áreas adjacentes ao invés do botão destinado para visualizar
o autor, sugerindo que o design do botão poderia estar pouco evidente.
Figura 8: Mapa de calor da tela de visualização da página inicial, perfil do
autor e quadrinho
2. Tasks and Drop-off e Views
Infelizmente nesta tarefa, foi cometido um erro por parte do autor,
aparentemente esta tarefa acabou ficando simples demais para a coleta de
dados e isso vale tanto para o tasks and drop-off como para as views.

Figura 9: A tela mostrada ao abrir os gráficos da tarefa visualizar autor

TAREFA PESQUISAR QUADRINHO
1. Click HeatMap
A Figura 10 mostra o mapa de calor das interações dos usuários ao
tentarem pesquisar um quadrinho. Notou-se que muitos usuários tentaram usar
a barra de pesquisa, mas alguns clicaram em ícones não relacionados,
indicando que o layout da barra de pesquisa poderia ser mais destacado.

Figura 15: Mapa de calor da tela de pesquisa de quadrinhos

2. Tasks and Drop-off
Conforme a Figura 11, 95% dos usuários que iniciaram a tarefa
conseguiram pesquisar e visualizar os resultados de quadrinhos, com apenas
5% desistindo antes de concluir a tarefa.

Figura 11: Mapa de Tasks and Drop-off da tarefa de pesquisa de

quadrinho
3. Views
Scatter Plot
O gráfico da Figura 12 apresenta a relação entre o tempo e as
interações dos usuários na pesquisa de quadrinhos. A maioria dos testes foi
concluída de maneira eficiente, mas algumas exceções sugerem que o
processo de busca poderia ser refinado.
 Figura 12: Gráfico Scatter Plot para a tarefa Pesquisar quadrinho
Box Plot
A Figura 13 mostra que a duração da tarefa de pesquisa variou entre os
usuários, mas a maioria completou a tarefa rapidamente, indicando que a
interface de pesquisa está funcional.

Figura 13: Gráfico Box Plot para a tarefa Pesquisar quadrinho

Step-Duration
O gráfico da Figura 14 demonstra que o tempo para concluir a pesquisa
de quadrinho foi, em média, satisfatório, com algumas variações nos tempos de
conclusão.

Figura 14: Gráfico Step-Duration para a tarefa Pesquisar quadrinho

Step-Interaction

A análise da Figura 15 mostra que o número de cliques durante a

pesquisa foi alto em alguns casos, sugerindo que o sistema de filtragem ou o
layout da página de resultados poderia ser melhorado.
 Figura 20: Gráfico Step-Interaction para a tarefa Pesquisar quadrinho
TAREFA TROCA DE HQs

1. Click HeatMap

A Figura 16 demonstra o comportamento dos usuários durante a tarefa

de trocar HQs. Alguns usuários tentaram clicar em áreas não interativas,
indicando uma necessidade de melhorar a visibilidade do que é botão e o que
não é.
 Figura 16: Mapa de calor para a tela de troca de HQs
2. Tasks and Drop-off
Na Figura 17, vê-se que apenas 85% dos usuários concluíram a tarefa
de trocar HQs, com um drop-off de 15% antes de finalizar a troca, sugerindo
que a interface de troca pode não ser tão intuitiva.
 Figura 17: Mapa de Tasks and Drop-off para a tarefa de troca de
HQs
3. Views
Scatter Plot
A Figura 18 apresenta que a maioria dos usuários concluiu a troca de
HQs em um tempo razoável, mas algumas interações foram mais demoradas,
possivelmente devido à complexidade do processo.
 Figura 18: Gráfico Scatter Plot para a tarefa Troca de HQs
Box Plot
A Figura 19 demonstra que a média de interações e a duração da tarefa
de troca de HQs apresentam variação mais significativa do que as tarefas
anteriores, sugerindo que o processo poderia ser simplificado de algum jeito.
 Figura 24: Gráfico Box Plot para a tarefa Troca de HQs
Step-Duration
A Figura 20 indica que, embora a troca de HQs tenha sido concluída em
um tempo adequado pela maioria, houve usuários que levaram mais tempo,
sugerindo dificuldades, principalmente em acessar a página da minha estante.

Figura 20: Gráfico Step-Duration para a tarefa Troca de HQs

Step-Interaction
Conforme a Figura 21, o número de interações foi elevado,
principalmente na etapa de acessar minha estante, sugerindo que o fluxo da
interface de troca pode ser melhorado.

Figura 26: Gráfico Step-Interaction para a tarefa Troca de HQs

TAREFA ACESSAR AUTOR PELO QUADRINHO
1. Click HeatMap
A Figura 22 mostra que a maioria dos usuários tentou acessar o autor
pelo quadrinho de forma direta, mas houve confusão sobre onde clicar,
indicando que o acesso ao autor poderia ser mais intuitivo e bem definido.
 Figura 22: Mapa de calor para a tela de acesso ao autor via quadrinho
2. Tasks and Drop-off
A Figura 23 revela que 95% dos usuários conseguiram acessar o autor a
partir do quadrinho, com 5% de drop-off durante a navegação, sugerindo que o
fluxo de interação poderia ser mais claro.
 Figura 28: Mapa de Tasks and Drop-off para a tarefa Acessar autor pelo
quadrinho
3. Views
Scatter Plot
A Figura 24 mostra que a maioria dos usuários acessou o autor pelo
quadrinho de forma eficiente, embora algumas exceções indiquem a
necessidade de ajustes na navegação.
Figura 29: Gráfico Scatter Plot para a tarefa Acessar autor pelo quadrinho
Box Plot
Na Figura 25, observa-se que as interações e a duração da tarefa foram
consistentes para a maioria dos usuários, sugerindo uma experiência razoável.

Figura 25: Gráfico Box Plot para a tarefa Acessar autor pelo quadrinho
Step-Duration
A Figura 26 demonstra que o tempo médio para acessar o autor via
quadrinho foi satisfatório, mas com bastantes variações nos tempos de
conclusão, indicando que talvez seja difícil de achar o acesso para o autor na
página do quadrinho.

Figura 26: Gráfico Step-Duration para a tarefa Acessar autor pelo

quadrinho
Step-Interaction
O gráfico da Figura 27 indica que o número de cliques foi maior que o
esperado, sugerindo que os usuários podem ter tido dificuldades para localizar
o botão de acesso ao autor.
 Figura 32: Gráfico Step-Interaction para a tarefa Acessar autor pelo
quadrinho

CONCLUSÃO

Os testes de usabilidade realizados no Banco dos Quadrinhos, utilizando

o Quant UX, forneceram insights valiosos sobre o comportamento dos usuários
e a eficiência da interface do aplicativo. A análise detalhada das tarefas
principais, como criar conta, visualizar autores, pesquisar quadrinhos e realizar
trocas de HQs, revelou áreas de sucesso e pontos de melhoria na navegação e
interação.

De maneira geral, os usuários conseguiram completar as tarefas

propostas, mas alguns obstáculos, como a pouca clareza de certos botões e
áreas interativas, causaram dificuldades e um maior número de cliques do que
o esperado. Esses problemas foram particularmente evidentes nas tarefas de
acessar o perfil do autor e trocar HQs, sugerindo a necessidade de ajustes no
layout e no design de elementos interativos.

Com base nos resultados, recomenda-se aumentar a visibilidade de

elementos importantes, como botões de acesso ao perfil e de troca de HQs,
além de revisar o fluxo de navegação para torná-lo mais intuitivo. Essas
melhorias contribuirão para uma experiência de usuário mais eficiente e
satisfatória, alinhada aos objetivos do Banco dos Quadrinhos.