O documento descreve o processo de melhoria da usabilidade do aplicativo Dona Know através de inspeções de usabilidade e técnicas de design. A metodologia incluiu planejamento, análise de defeitos, coleta de feedback de usuários, e projeto de uma interface melhorada. O objetivo era entender melhor os usuários e identificar oportunidades para aprimorar a experiência no aplicativo.

1. Luis Rivero
1
Manaus – Am
Setembro 2013

2. 2
Contexto
O site, http://donaknow.com.br, criado em 2009,
disponibiliza grande quantidade de eventos da
agenda da cidade de Manaus

3. 3
Contexto
O aplicativo Dona Know para dispositivos móveis foi
desenvolvido devido a que maior parte das visitas no site
DonaKnow eram originadas de smartphones. O objetivo do
aplicativo é facilitar a vida dos usuários do site, possibilitando
uma consulta rápida dos eventos diretamente do celular.

4. 4
Motivação
A equipe de desenvolvimento tem
interesse em melhorar a usabilidade
do mesmo.
Segundo a loja de aplicativos Google
Play, o aplicativo já conta com mais de
500 downloads e a equipe de
desenvolvimento espera aumentar
esse número ao melhorar a qualidade
do aplicativo em termos de
usabilidade.

5. 5
Motivação
A equipe de desenvolvimento tem
interesse em melhorar a usabilidade
do mesmo.
Segundo a loja de aplicativos Google
Play, o aplicativo já conta com mais de
500 downloads e a equipe de
desenvolvimento espera aumentar
esse número ao melhorar a qualidade
do aplicativo em termos de
usabilidade.
Mas...
O que podemos fazer para
melhorar a usabilidade do
aplicativo?

6. 6
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de
Interface
Melhorada
Inspeção de
Usabilidade

7. 7
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de
Interface
Melhorada
Inspeção de
Usabilidade
Planejamento

8. 8
Planejamento
Definição de papeis no processo de avaliação de
usabilidade e na execução das técnicas de design.
Materiais:
• Aplicativo a ser testado
• Templates de documentos/planilhas
a serem preenchidos
• Instruções para as Atividades
• Termo de Consentimento
• Incentivos

9. 9
Planejamento
Definição de papeis no processo de avaliação de
usabilidade e na execução das técnicas de design.
Participantes:
• Pesquisador (Moderados das
Atividades)
• Especialistas em Usabilidade
• Participantes de Estudos de Design
(Possíveis Usuários da Tecnologia)

10. 10
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de
Interface
Melhorada
Inspeção de
Usabilidade
Inspeção de
Usabilidade

11. 11
Inspeção de Usabilidade
Início
Planejamento
Detecção de Defeitos
Coleção de Defeitos
Reunião de Discriminação e
Priorização
Fim

12. 12
Inspeção de Usabilidade
Início
Planejamento
Detecção de Defeitos
Coleção de Defeitos
Reunião de Discriminação e
Priorização
Fim

13. 13
Inspeção de Usabilidade -
Planejamento
Preparação dos documentos
a serem utilizados

14. 14
Inspeção de Usabilidade -
Planejamento
Seleção de Participantes:
•3 Especialistas
•Alto Nível de Experiência em
Usabilidade e Inspeções
(Mestres)

15. 15
Inspeção de Usabilidade
Início
Planejamento
Detecção de Defeitos
Coleção de Defeitos
Reunião de Discriminação e
Priorização
Fim

16. 16
Inspeção de Usabilidade –
Detecção de Defeitos
Os inspetores utilizaram
a técnicas Avaliação
Heurística e seguiram o
roteiro de inspeção para
inspecionar a aplicação
Dona Know.

17. 17
Inspeção de Usabilidade –
Detecção de Defeitos
Os inspetores utilizaram
a técnicas Avaliação
Heurística e seguiram o
roteiro de inspeção para
inspecionar a aplicação
Dona Know.
Porque a Avaliação Heurística?
Porque é uma técnica genérica que pode ser
aplicada em qualquer aplicação.
Além disso, os três inspetores já tinham feito
inspeções de usabilidade usando essa técnica.

18. 18
Inspeção de Usabilidade
Início
Planejamento
Detecção de Defeitos
Coleção de Defeitos
Reunião de Discriminação e
Priorização
Fim

19. 19
Inspeção de Usabilidade –
Coleção de Defeitos
Juntamos os defeitos apontados pelos diferentes
inspetores em um único relatório.
•Defeitos únicos foram apontados em amarelo.
•Defeitos repetidos foram apontados em azul, com a
melhor descrição destacada.

20. 20
Inspeção de Usabilidade
Início
Planejamento
Detecção de Defeitos
Coleção de Defeitos
Reunião de Discriminação e
Priorização
Fim

21. 21
Inspeção de Usabilidade – Reunião
de Discriminação e Priorização
?
Houve uma reunião com um
representante da equipe de
desenvolvimento.
Os problemas identificados
foram relatados e explicados.
A equipe discutiu sobre como
o efeito destes problemas e a
prioridade de correção.
Problemas cosméticos foram
descartados.

22. 22
Inspeção de Usabilidade – Reunião
de Discriminação e Priorização
Alguns dos problemas identificados:

23. 23
Inspeção de Usabilidade – Reunião
de Discriminação e Priorização
Alguns dos problemas identificados:
1) O menu principal não é intuitivo. Não é mostrado de cara
para o usuário e é necessário percorrer tudo para saber o que
pode ser feito na aplicação

24. 24
Inspeção de Usabilidade – Reunião
de Discriminação e Priorização
Alguns dos problemas identificados:
2) Tem uma seção só de eventos destacados, porém não existe
forma de saber porque o evento está destacado. Na visão da
equipe, um evento é destacado se acontece uma vez.

25. 25
Inspeção de Usabilidade – Reunião
de Discriminação e Priorização
Alguns dos problemas identificados:
3) A tela de busca confunde os usuários, para poder fazer a
busca é necessário habilitar os campos, dificultando seu uso.

26. 26
Inspeção de Usabilidade – Reunião
de Discriminação e Priorização
Alguns dos problemas identificados:
4) As opções disponíveis relacionadas com os eventos não são
conhecidas pelos usuários e são só informadas ao chegar na
tela de “meus eventos”.

27. 27
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de
Interface
Melhorada
Inspeção de
Usabilidade
Técnicas de Design

28. 28
Técnicas de Design
Início
Planejamento
Brainstorming
Cardsorting
Fim
Utilizamos técnicas de
design para conhecer
melhor os possíveis
usuários e identificar
oportunidades de
melhoria no Dona Know.
Questionários
Padrões de Design e GOMS
Análise
Personas

29. 29
Técnicas de Design
Início
Planejamento
Brainstorming
Cardsorting
Fim
Utilizamos técnicas de
design para conhecer
melhor os possíveis
usuários e identificar
oportunidades de
melhoria no Dona Know.
Questionários
Padrões de Design e GOMS
Análise
Personas

30. 30
Técnicas de Design -
Planejamento
Preparamos os documentos para executar as atividades de
design:
•Roteiros
•Incentivos
•Materiais como cartões, questionários, etc.

31. 31
Técnicas de Design
Início
Planejamento
Brainstorming
Cardsorting
Fim
Utilizamos técnicas de
design para conhecer
melhor os possíveis
usuários e identificar
oportunidades de
melhoria no Dona Know.
Questionários
Padrões de Design e GOMS
Análise
Personas
Brainstorming
O Dona Know não disponibilizava informações
suficientes sobre os eventos, queríamos saber:
Quais informações os usuários gostariam de ter?
Os usuários procurariam eventos por qual informação?
Existe alguma funcionalidade extra que devia ser incorporada?

32. 32
Técnicas de Design -
Brainstorming
Características
• Duração média 15-20 minutos
• 3 perguntas
• Houve 2 seções seguindo o roteiro
• As idéias eram anotadas em um
pedaço de papel

33. 33
Técnicas de Design -
Brainstorming
Resultados
• Além das funcionalidades implementadas, os usuários
gostariam de: comprar ingressos pelo aplicativo, fazer
check-in no evento (dizer que estão ali), classificar o
evento,.
• Os usuários gostariam de ter mais informações sobre o
evento: mapa, local da venda, telefone para contato, fotos
(não só do evento, mas do local), o que o ingresso inclui,
etc.
• Os usuários fariam busca por: tipo de evento, data, valor
do evento, nome, qualidade do evento.

34. 34
Técnicas de Design -
Brainstorming
Resultados
• Além das funcionalidades implementadas, os usuários
gostariam de: comprar ingressos pelo aplicativo, fazer
check-in no evento (dizer que estão ali), classificar o
evento,.
• Os usuários gostariam de ter mais informações sobre o
evento: mapa, local da venda, telefone para contato, fotos
(não só do evento, mas do local), o que o ingresso inclui,
etc.
• Os usuários fariam busca por: tipo de evento, data, valor
do evento, nome, qualidade do evento.
Estas informações serão
utilizadas em etapas
posteriores.

35. 35
Técnicas de Design
Início
Planejamento
Cardsorting
Fim
Utilizamos técnicas de
design para conhecer
melhor os possíveis
usuários e identificar
oportunidades de
melhoria no Dona Know.
Questionários
Padrões de Design e GOMS
Análise
Personas
Brainstorming
O Dona Know disponibiliza uma listagem de eventos.
Mas...
Será que os usuários usam as mesmas categorias para
associar os eventos?
Cardsorting

36. 36
Técnicas de Design -
Cardsorting
Características
• Duração média 20-30 minutos
• Houve 2 seções seguindo o roteiro
• Codificação Aberta e Grupo (participantes criaram
categorias em conjunto)
• Foram formados grupos utilizando os nomes dos
eventos que estavam no sistema.
?
?
?
?

37. 37
Técnicas de Design -
Cardsorting
Resultados
• As categorias foram similares às utilizadas no
aplicativo. Ou seja, não é necessário criar novas
categorias, pois os usuários já associam os eventos às
categorias criadas pelos desenvolvedores do Dona
Know.

38. 38
Técnicas de Design
Início
Planejamento
Brainstorming
Cardsorting
Fim
Utilizamos técnicas de
design para conhecer
melhor os possíveis
usuários e identificar
oportunidades de
melhoria no Dona Know.
Questionários
Padrões de Design e GOMS
Análise
Personas
Questionários
Em paralelo preparamos questionários
para identificar características dos
possíveis usuários:
Quem você é?
Você usaria o
aplicativo?
Você faz o que da
vida?

39. 39
Técnicas de Design -
Questionários
Características
• Duração média 5-10 minutos
• Houve 15 respostas ao
questionário
• Perguntas abertas, sobre as
necessidades dos usuários.
• Perguntas fechadas, sobre as
características dos usuários.

40. 40
Técnicas de Design -
Questionários
Alguns dados demográficos:
Idades: 18-42 anos
Gêneros: Masculino e Feminino
Bairros: Parque 10, Japim 2, Petropolis, Cidade Nova, Distrito
Industrial, Santo António, Alvorada, Etc.
Possui Celular Samsung: 10/15 = 67%, a segunda faixa de mercado é
da LG, seguido pela Nókia
Acesso a Internet desde o Celular: 13/15 = 87%
Utiliza Aplicativos Móveis com Acesso a Internet: A maioria que
possui acesso a internet utiliza esses aplicativos todos os dias.
Utilizaria um Aplicativo de Listagem de Eventos: 14/15 = 93%

41. 41
Técnicas de Design
Início
Planejamento
Brainstorming
Cardsorting
Fim
Utilizamos técnicas de
design para conhecer
melhor os possíveis
usuários e identificar
oportunidades de
melhoria no Dona Know.
Questionários
Padrões de Design e GOMS
Análise
Personas
Quais são os tipos de usuários
que predominam no conjunto
avaliado?
Personas

42. 42
Técnicas de Design - Personas
João – 23 Anos
“Quero saber o que vai rolar e onde!”
Objetivo Pessoal:
Saber o que está acontecendo
Objetivo Prático:
Utilizar um sistema com informações
completas
João está no último ano da faculdade e agora que tem que pagar
menos matérias pode trabalhar e sair nos finais de semana.
João gosta de sair com os amigos a qualquer evento, pode ser um
evento social, show, cultural, ou peca de teatro. Mas para ir, ele tem
que saber informações sobre o evento e como chegar.

43. 43
Técnicas de Design - Personas
Verônica – 39 Anos
“O que posso fazer com meus filhos hoje?”
Objetivo Pessoal:
Ficar informada de eventos para toda a
família
Objetivo Prático:
Utilizar um aplicativo que a alerte dos
eventos
Verônica tem três filhos pequenos e quer saber onde levá-los. Além
disso se interessa por eventos esportivos como corridas, ou prática
de futebol/voley.

44. 44
Técnicas de Design - Personas
Claudia – 21 Anos
“Hoje tem o show que eu adoro! Bora?”
Objetivo Pessoal:
Saber apenas dos eventos que ela gosta
Objetivo Prático:
Utilizar um aplicativo que informe eventos
conforme os gostos que ela têm
A Claudia está no terceiro ano da faculdade. Apesar de estar
ocupada, sempre procura um tempo para relaxar.
Agora, ela só vai para um show o evento se ela realmente gostar.

45. 45
Técnicas de Design
Anti-Persona
Miguel – 28 Anos
“Não utilizo aplicativos, meu celular não
deixa”
Objetivo Pessoal:
Ter o que precisa no momento
Miguel não tem problemas com tecnologia, mas também não
depende muito dela. Apesar do seu celular não ter acesso a internet,
ele não precisa de um melhor e por isso não o trocou.
As informações que ele precisa ele procura no computador mesmo.

46. 46
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de
Interface
Melhorada
Inspeção de
Usabilidade
FimAnálise
Projeto de
Interface
Melhorada
Essas Etapas coincidem com a análise e reprojeto da
Interface.
Padrões de Design e GOMS
Análise

47. 47
1°
O conceito
Dona Know?

48. 48
Redesign - O conceito
Resultados da Inspeção
• “Esse ícone dona know é
estranho. Parece de material de
construção e não de eventos.”
• “Talvez a tela inicial poderia
representar melhor para que serve
o aplicativo. Uma boneca não diz
exatamente que é sobre
informações de eventos na
cidade.”

49. 49
Redesign - O conceito

50. 50
2°
Controle e Liberdade do
Usuário

51. 51
Redesign - Controle e
Liberdade do Usuário
Resultados da Inspeção
• “Não é possível cancelar a ação
de atualizar os dados.”

52. 52
Redesign - Controle e
Liberdade do Usuário
Resultados da Inspeção
• “Não é possível cancelar a ação
de atualizar os dados.”
O usuário não pode cancelar a ação.
Além disso, a ação acontece sem o
usuário ter pedido para atualizar. O
sistema deveria solicitar confirmação.
Como podemos melhorar isso?

53. 53
Análise Geral e Reprojeto –
Padrões de Design
Entramos no site oficial de
desenvolvimento de aplicativos para
Android:
http://developer.android.com/design
/patterns/actionbar.html
No site são disponibilizados padrões
de design para facilitar a interação
com os aplicativos.

54. 54
Análise Geral e Reprojeto –
Padrões de Design
O Android sugere o uso de
confirmação e feedback:
•Confirmação:
Solicitar confirmação, e informar o
que exatamente vai acontecer
quando a ação for executada.
•Feedback:
Informar aos usuários quando a ação
finalizou e os resultados da mesma.

55. 55
Análise Geral e Reprojeto –
Padrões de Design

56. 56
Análise Geral e Reprojeto –
Padrões de Design

57. 57
3°
Feedback

58. 58
Análise Geral e Reprojeto –
Feedback
Resultados da Inspeção
• “A tela principal só mostra o dia
que foi feita a ultima atualização,
não diz a hora. Isso pode levar o
usuário a ficar atualizando
desnecessariamente”

59. 59
4°
Navegação

60. 60
Análise Geral e Reprojeto - GOMS
Para Chegar em Meus Eventos:
1. Preparação Mental (1,2s)
2. Pressionar o Botão “Detalhes” (0,5s Aprox.)
3. Esperar pela resposta do sistema (1s)
4. Preparação Mental (1,2s)
5. Pressionar o Botão “Pesquisa de Eventos” (0,5s Aprox.)
6. Esperar pela resposta do sistema (1s)
7. Preparação Mental (1,2s)
8. Pressionar o Botão “Meus Eventos” (0,5s Aprox.)
9. Esperar pela resposta do sistema (1s)

61. 61
Análise Geral e Reprojeto - GOMS
Para Chegar em Meus Eventos:
1. Preparação Mental (1,2s)
2. Pressionar o Botão “Detalhes” (0,5s Aprox.)
3. Esperar pela resposta do sistema (1s)
4. Preparação Mental (1,2s)
5. Pressionar o Botão “Pesquisa de Eventos” (0,5s Aprox.)
6. Esperar pela resposta do sistema (1s)
7. Preparação Mental (1,2s)
8. Pressionar o Botão “Meus Eventos” (0,5s Aprox.)
9. Esperar pela resposta do sistema (1s)
Estamos gastando perto de 8
segundos para sair de uma tela e ir
para outra.
Devia haver alguma forma de
melhorar a navegação no sistema.

62. 62
Análise Geral e Reprojeto –
Padrões de Design
Entramos no site oficial de
desenvolvimento de aplicativos para
Android:
http://developer.android.com/design
/patterns/actionbar.html
No site são disponibilizados padrões
de design para facilitar a interação
com os aplicativos.

63. 63
Análise Geral e Reprojeto –
Padrões de Design
O Android sugere o uso de três
barras:
•Barra de Ação Principal:
Contém formas de ir para outras
telas de forma hierárquica
•Barra superior:
Permite ao usuário mudar entre abas
ou vistas
•Barra inferior:
Disponibiliza, se necessário, as
funcionalidades suportadas pelo
aplicativo.

64. 64
Análise Geral e Reprojeto –
Padrões de Design

65. 65
Análise Geral e Reprojeto –
Padrões de Design
Para Chegar em Eventos
Favoritos:
1. Preparação Mental (1,2s)
2. Pressionar o Botão “Eventos
Favoritos” (0,5s Aprox.)
3. Esperar pela resposta do
sistema (1s)
Tempo total = 2,7 aprox.
Otimização em mais de 50%!!!

66. 66
Análise Geral e Reprojeto –
Padrões de Design
Para Chegar em Eventos
Favoritos:
1. Preparação Mental (1,2s)
2. Pressionar o Botão “Eventos
Favoritos” (0,5s Aprox.)
3. Esperar pela resposta do
sistema (1s)
Tempo total = 2,7 aprox.
Otimização em mais de 50%!!!
Além disso, adicionamos uma barra
de rolagem na listagem de eventos,
para que os usuários soubessem em
que parte da lista estão.
Isso também foi apontado como
defeito na inspeção:
“Não sei até onde vai a lista, pois
não me indica em qual parte estou”

67. 67
Análise Geral e Reprojeto –
Padrões de Design
Para Chegar em Eventos
Favoritos:
1. Preparação Mental (1,2s)
2. Pressionar o Botão “Eventos
Favoritos” (0,5s Aprox.)
3. Esperar pela resposta do
sistema (1s)
Tempo total = 2,7 aprox.
Otimização em mais de 50%!!!
Também facilitamos o acesso a uma
funcionalidade genérica:
Busca de Eventos.
Assim, existe flexibilidade para o
usuário com diferentes formas de
acesso.

68. 68
Análise Geral e Reprojeto –
Padrões de Design
Para Chegar em Eventos
Favoritos:
1. Preparação Mental (1,2s)
2. Pressionar o Botão “Eventos
Favoritos” (0,5s Aprox.)
3. Esperar pela resposta do
sistema (1s)
Tempo total = 2,7 aprox.
Otimização em mais de 50%!!!
Também solucionamos um
problema: só era possível visualizar
todos os eventos ao fazer uma
busca sem selecionar nenhum
filtro.
Dois inspetores apontaram esse
problema:
“A tela de pesquisa de eventos é a
única que dá acesso a todos os
eventos. Para vê-los tenho que
clicar em pesquisar sem entrar com
dados de filtro.”

69. 69
5°
Maiores Informações

70. 70
Redesign – Maiores Informações
Resultados da Inspeção
• “O que significa eventos em
destaque? Seria os mais
visualizados? Não está claro.”
• “Como sei exatamente que esses
itens apresentados são clicáveis?
Poderia ter um botão “mais
detalhes” para saber isso.”

71. 71
Redesign – Maiores Informações

72. 72
Redesign – Maiores Informações
Ao selecionar um evento, o aplicativo
mostrava a tela com dados.

73. 73
Redesign – Maiores Informações
Ao selecionar um evento, o aplicativo
mostrava a tela com dados.
Porém,
Tanto inspetores como usuários
(durante a seção de brainstorming
e questionários) solicitaram mais
dados, como valor, como chegar ao
evento, classificação, etc.

74. 74
Redesign – Maiores Informações

75. 75
Redesign – Maiores Informações
Apresentamos fotos maiores,
tanto do evento quanto do local.

76. 76
Redesign – Maiores Informações

77. 77
Redesign – Maiores Informações
Adicionamos mais informações, e
facilitamos o acesso às
funcionalidades.

78. 78
6°
Busca Melhorada

79. 79
Redesign – Busca Melhorada
Resultados da Inspeção
• “Na tela de pesquisa de eventos
tem uma pesquisa por texto... Esse
texto é o nome do evento? Ou o
local que eu quero ir? Ou o que?
Não está claro.”
• “A tela de pesquisa de eventos é
feia, muito cheia de quadrados.”
• “Quando eu clico nos dois
checkbox, mesmo não digitando
texto ele me deixa fazer a busca.”

80. 80
Redesign – Busca Melhorada
Resultados do Brainstorming
• Vamos facilitar a busca ao
permitir pesquisar por diferentes
campos ao mesmo tempo.
• O usuário pode escolher se quer
pesquisar por um ou mais campos.
• Adicionar busca por preço e tipo
de evento.
Resultados do Cards Sorting
• Utilizar os rótulos identificados
no cardsorting para servir de tags
de busca.

81. 81
Redesign – Busca Melhorada

82. 82
Redesign – Busca Melhorada
Resultados da Inspeção
• “O sistema não mostra quais
foram os filtros aplicados. Devia
informar quais são os dados que
eu busquei.”

83. 83
Redesign – Busca Melhorada

84. 84
Conclusões

85. 85
O que aprendemos?
• As personas criadas neste trabalho podem ser usadas pela equipe
de desenvolvimento para identificar oportunidades de melhoria no
aplicativo e focar o seu desenvolvimento para um usuário
específico.
• Por exemplo, o aplicativo não tem eventos cadastrados para
pessoas que praticam esporte e ainda não disponibiliza mapa para
chegar ao local do evento.

86. 86
O que aprendemos?
• As análises com GOMS e o estudo de padrões de design de
aplicativos móveis permitiram identificar possíveis soluções para os
problemas identificados durante a inspeção de usabilidade.
• A representante da equipe de desenvolvimento indicou que são
problemas concretos e com soluções pontuais que serão
desenvolvidas ao longo do tempo.

87. 87
O que aprendemos?
• Os questionários, brainstorming e card sorting permitiram
identificar oportunidades de melhoria nos dados apresentados
sobre os eventos e busca.
• Estas informações serviram para projetas uma interface mais
completa.
• Isto não quer dizer que os dados serão incorporados ao aplicativo,
pois isso demanda esforço por parte da empresa de
desenvolvimento.

88. 88
O que aprendemos?
• Pudemos utilizar técnicas de avaliação e design para avaliar um
aplicativo real.
• Os resultados serão utilizados pela equipe de desenvolvimento
para aprimorar o aplicativo.
• Mesmo sendo um trabalho acadêmico, a equipe de
desenvolvimento se mostrou interessada e achou o trabalho muito
útil, com informações valiosas para aumentar a qualidade do
produto.

89. Obrigado!
Luis Rivero
89