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 ...
3
Contexto
O aplicativo Dona Know para dispositivos móveis foi
desenvolvido devido a que maior parte das visitas no site
D...
4
Motivação
A equipe de desenvolvimento tem
interesse em melhorar a usabilidade
do mesmo.
Segundo a loja de aplicativos Go...
5
Motivação
A equipe de desenvolvimento tem
interesse em melhorar a usabilidade
do mesmo.
Segundo a loja de aplicativos Go...
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
Pl...
8
Planejamento
Definição de papeis no processo de avaliação de
usabilidade e na execução das técnicas de design.
Materiais...
9
Planejamento
Definição de papeis no processo de avaliação de
usabilidade e na execução das técnicas de design.
Participa...
10
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de
Interface
Melhorada
Inspeção de
Usabilidade
I...
11
Inspeção de Usabilidade
Início
Planejamento
Detecção de Defeitos
Coleção de Defeitos
Reunião de Discriminação e
Prioriz...
12
Inspeção de Usabilidade
Início
Planejamento
Detecção de Defeitos
Coleção de Defeitos
Reunião de Discriminação e
Prioriz...
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
Usabili...
15
Inspeção de Usabilidade
Início
Planejamento
Detecção de Defeitos
Coleção de Defeitos
Reunião de Discriminação e
Prioriz...
16
Inspeção de Usabilidade –
Detecção de Defeitos
Os inspetores utilizaram
a técnicas Avaliação
Heurística e seguiram o
ro...
17
Inspeção de Usabilidade –
Detecção de Defeitos
Os inspetores utilizaram
a técnicas Avaliação
Heurística e seguiram o
ro...
18
Inspeção de Usabilidade
Início
Planejamento
Detecção de Defeitos
Coleção de Defeitos
Reunião de Discriminação e
Prioriz...
19
Inspeção de Usabilidade –
Coleção de Defeitos
Juntamos os defeitos apontados pelos diferentes
inspetores em um único re...
20
Inspeção de Usabilidade
Início
Planejamento
Detecção de Defeitos
Coleção de Defeitos
Reunião de Discriminação e
Prioriz...
21
Inspeção de Usabilidade – Reunião
de Discriminação e Priorização
?
Houve uma reunião com um
representante da equipe de
...
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 principa...
24
Inspeção de Usabilidade – Reunião
de Discriminação e Priorização
Alguns dos problemas identificados:
2) Tem uma seção s...
25
Inspeção de Usabilidade – Reunião
de Discriminação e Priorização
Alguns dos problemas identificados:
3) A tela de busca...
26
Inspeção de Usabilidade – Reunião
de Discriminação e Priorização
Alguns dos problemas identificados:
4) As opções dispo...
27
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de
Interface
Melhorada
Inspeção de
Usabilidade
T...
28
Técnicas de Design
Início
Planejamento
Brainstorming
Cardsorting
Fim
Utilizamos técnicas de
design para conhecer
melhor...
29
Técnicas de Design
Início
Planejamento
Brainstorming
Cardsorting
Fim
Utilizamos técnicas de
design para conhecer
melhor...
30
Técnicas de Design -
Planejamento
Preparamos os documentos para executar as atividades de
design:
•Roteiros
•Incentivos...
31
Técnicas de Design
Início
Planejamento
Brainstorming
Cardsorting
Fim
Utilizamos técnicas de
design para conhecer
melhor...
32
Técnicas de Design -
Brainstorming
Características
• Duração média 15-20 minutos
• 3 perguntas
• Houve 2 seções seguind...
33
Técnicas de Design -
Brainstorming
Resultados
• Além das funcionalidades implementadas, os usuários
gostariam de: compr...
34
Técnicas de Design -
Brainstorming
Resultados
• Além das funcionalidades implementadas, os usuários
gostariam de: compr...
35
Técnicas de Design
Início
Planejamento
Cardsorting
Fim
Utilizamos técnicas de
design para conhecer
melhor os possíveis
...
36
Técnicas de Design -
Cardsorting
Características
• Duração média 20-30 minutos
• Houve 2 seções seguindo o roteiro
• Co...
37
Técnicas de Design -
Cardsorting
Resultados
• As categorias foram similares às utilizadas no
aplicativo. Ou seja, não é...
38
Técnicas de Design
Início
Planejamento
Brainstorming
Cardsorting
Fim
Utilizamos técnicas de
design para conhecer
melhor...
39
Técnicas de Design -
Questionários
Características
• Duração média 5-10 minutos
• Houve 15 respostas ao
questionário
• ...
40
Técnicas de Design -
Questionários
Alguns dados demográficos:
Idades: 18-42 anos
Gêneros: Masculino e Feminino
Bairros:...
41
Técnicas de Design
Início
Planejamento
Brainstorming
Cardsorting
Fim
Utilizamos técnicas de
design para conhecer
melhor...
42
Técnicas de Design - Personas
João – 23 Anos
“Quero saber o que vai rolar e onde!”
Objetivo Pessoal:
Saber o que está a...
43
Técnicas de Design - Personas
Verônica – 39 Anos
“O que posso fazer com meus filhos hoje?”
Objetivo Pessoal:
Ficar info...
44
Técnicas de Design - Personas
Claudia – 21 Anos
“Hoje tem o show que eu adoro! Bora?”
Objetivo Pessoal:
Saber apenas do...
45
Técnicas de Design
Anti-Persona
Miguel – 28 Anos
“Não utilizo aplicativos, meu celular não
deixa”
Objetivo Pessoal:
Ter...
46
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de
Interface
Melhorada
Inspeção de
Usabilidade
F...
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...
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 dad...
52
Redesign - Controle e
Liberdade do Usuário
Resultados da Inspeção
• “Não é possível cancelar a ação
de atualizar os dad...
53
Análise Geral e Reprojeto –
Padrões de Design
Entramos no site oficial de
desenvolvimento de aplicativos para
Android:
...
54
Análise Geral e Reprojeto –
Padrões de Design
O Android sugere o uso de
confirmação e feedback:
•Confirmação:
Solicitar...
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 ...
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 “Detalh...
61
Análise Geral e Reprojeto - GOMS
Para Chegar em Meus Eventos:
1. Preparação Mental (1,2s)
2. Pressionar o Botão “Detalh...
62
Análise Geral e Reprojeto –
Padrões de Design
Entramos no site oficial de
desenvolvimento de aplicativos para
Android:
...
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 f...
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. Pression...
66
Análise Geral e Reprojeto –
Padrões de Design
Para Chegar em Eventos
Favoritos:
1. Preparação Mental (1,2s)
2. Pression...
67
Análise Geral e Reprojeto –
Padrões de Design
Para Chegar em Eventos
Favoritos:
1. Preparação Mental (1,2s)
2. Pression...
68
Análise Geral e Reprojeto –
Padrões de Design
Para Chegar em Eventos
Favoritos:
1. Preparação Mental (1,2s)
2. Pression...
69
5°
Maiores Informações
70
Redesign – Maiores Informações
Resultados da Inspeção
• “O que significa eventos em
destaque? Seria os mais
visualizado...
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...
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
...
80
Redesign – Busca Melhorada
Resultados do Brainstorming
• Vamos facilitar a busca ao
permitir pesquisar por diferentes
c...
81
Redesign – Busca Melhorada
82
Redesign – Busca Melhorada
Resultados da Inspeção
• “O sistema não mostra quais
foram os filtros aplicados. Devia
infor...
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...
86
O que aprendemos?
• As análises com GOMS e o estudo de padrões de design de
aplicativos móveis permitiram identificar p...
87
O que aprendemos?
• Os questionários, brainstorming e card sorting permitiram
identificar oportunidades de melhoria nos...
88
O que aprendemos?
• Pudemos utilizar técnicas de avaliação e design para avaliar um
aplicativo real.
• Os resultados se...
Obrigado!
Luis Rivero
89
Próximos SlideShares
Carregando em…5
×

Qual aula_05__design_e_reprojeto_de_usabilidade

62 visualizações

Publicada em

qualidade

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Qual aula_05__design_e_reprojeto_de_usabilidade

  1. 1. Luis Rivero 1 Manaus – Am Setembro 2013
  2. 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. 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. 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. 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. 6 Metodologia Início Fim Planejamento Análise Técnicas de Design Projeto de Interface Melhorada Inspeção de Usabilidade
  7. 7. 7 Metodologia Início Fim Planejamento Análise Técnicas de Design Projeto de Interface Melhorada Inspeção de Usabilidade Planejamento
  8. 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. 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. 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. 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. 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. 13 Inspeção de Usabilidade - Planejamento Preparação dos documentos a serem utilizados
  14. 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. 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. 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. 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. 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. 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. 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. 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. 22 Inspeção de Usabilidade – Reunião de Discriminação e Priorização Alguns dos problemas identificados:
  23. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 47 1° O conceito Dona Know?
  48. 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. 49 Redesign - O conceito
  50. 50. 50 2° Controle e Liberdade do Usuário
  51. 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. 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. 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. 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. 55 Análise Geral e Reprojeto – Padrões de Design
  56. 56. 56 Análise Geral e Reprojeto – Padrões de Design
  57. 57. 57 3° Feedback
  58. 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. 59 4° Navegação
  60. 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. 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. 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. 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. 64 Análise Geral e Reprojeto – Padrões de Design
  65. 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. 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. 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. 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. 69 5° Maiores Informações
  70. 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. 71 Redesign – Maiores Informações
  72. 72. 72 Redesign – Maiores Informações Ao selecionar um evento, o aplicativo mostrava a tela com dados.
  73. 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. 74 Redesign – Maiores Informações
  75. 75. 75 Redesign – Maiores Informações Apresentamos fotos maiores, tanto do evento quanto do local.
  76. 76. 76 Redesign – Maiores Informações
  77. 77. 77 Redesign – Maiores Informações Adicionamos mais informações, e facilitamos o acesso às funcionalidades.
  78. 78. 78 6° Busca Melhorada
  79. 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. 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. 81 Redesign – Busca Melhorada
  82. 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. 83 Redesign – Busca Melhorada
  84. 84. 84 Conclusões
  85. 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. 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. 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. 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. 89. Obrigado! Luis Rivero 89

×