qual aula_05__design_e_reprojeto_de_usabilidade

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

http://donaknow.com.br/

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


Melhorada


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


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


Planejamento




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


Planejamento




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


Planejamento




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


Planejamento




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


Alguns dos problemas identificados:

23



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



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



3) A tela de busca confunde os usuários, para poder fazer a busca é necessário habilitar os campos, dificultando seu uso.

26



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


Melhorada


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


Planejamento

Brainstorming

Cardsorting

Fim


Questionários


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


Planejamento

Brainstorming

Cardsorting

Fim


Questionários


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


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


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


Planejamento

Cardsorting

Fim


Questionários


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


Planejamento

Brainstorming

Cardsorting

Fim


Questionários


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


Planejamento

Brainstorming

Cardsorting

Fim


Questionários


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


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


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


Melhorada


Fim Análise Projeto de Interface

Melhorada

Essas Etapas coincidem com a análise e reprojeto da Interface.


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


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


56


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


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


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


65


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




sistema (1s)


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




sistema (1s)


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




sistema (1s)


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


72


Ao selecionar um evento, o aplicativo mostrava a tela com dados.

73


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


75


Apresentamos fotos maiores, tanto do evento quanto do local.

76


77


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

qual aula_05__design_e_reprojeto_de_usabilidade

Education