View
53
Download
0
Category
Preview:
Citation preview
Luis Rivero
1 Manaus – Am
Setembro 2013
2
Contexto
O site, http://donaknow.com.br, criado em 2009, disponibiliza grande quantidade de eventos da
agenda da cidade de Manaus
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
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
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
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de Interface
Melhorada
Inspeção de Usabilidade
7
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de Interface
Melhorada
Inspeção de Usabilidade
Planejamento
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
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
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de Interface
Melhorada
Inspeção de Usabilidade Inspeção de Usabilidade
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
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
Inspeção de Usabilidade - Planejamento
Preparação dos documentos a serem utilizados
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
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
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
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
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
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
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
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
Inspeção de Usabilidade – Reunião de Discriminação e Priorização
Alguns dos problemas identificados:
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
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
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
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
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de Interface
Melhorada
Inspeção de Usabilidade
Técnicas de Design
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
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
Técnicas de Design - Planejamento
Preparamos os documentos para executar as atividades de design: •Roteiros •Incentivos •Materiais como cartões, questionários, etc.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de Interface
Melhorada
Inspeção de Usabilidade
Fim Aná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
1° O conceito
Dona Know?
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
Redesign - O conceito
50
2° Controle e Liberdade do
Usuário
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
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
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
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
Análise Geral e Reprojeto – Padrões de Design
56
Análise Geral e Reprojeto – Padrões de Design
57
3° Feedback
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
4° Navegação
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
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
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
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
Análise Geral e Reprojeto – Padrões de Design
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
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
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
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
5° Maiores Informações
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
Redesign – Maiores Informações
72
Redesign – Maiores Informações
Ao selecionar um evento, o aplicativo mostrava a tela com dados.
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
Redesign – Maiores Informações
75
Redesign – Maiores Informações
Apresentamos fotos maiores, tanto do evento quanto do local.
76
Redesign – Maiores Informações
77
Redesign – Maiores Informações
Adicionamos mais informações, e facilitamos o acesso às
funcionalidades.
78
6° Busca Melhorada
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
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
Redesign – Busca Melhorada
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
Redesign – Busca Melhorada
84
Conclusões
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
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
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
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.
Obrigado!
Luis Rivero
89
Recommended