qual aula_05__design_e_reprojeto_de_usabilidade
TRANSCRIPT
![Page 1: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/1.jpg)
Luis Rivero
1 Manaus – Am
Setembro 2013
![Page 2: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/2.jpg)
2
Contexto
O site, http://donaknow.com.br, criado em 2009, disponibiliza grande quantidade de eventos da
agenda da cidade de Manaus
![Page 3: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/3.jpg)
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.
![Page 4: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/4.jpg)
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.
![Page 5: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/5.jpg)
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?
![Page 6: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/6.jpg)
6
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de Interface
Melhorada
Inspeção de Usabilidade
![Page 7: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/7.jpg)
7
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de Interface
Melhorada
Inspeção de Usabilidade
Planejamento
![Page 8: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/8.jpg)
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
![Page 9: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/9.jpg)
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)
![Page 10: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/10.jpg)
10
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de Interface
Melhorada
Inspeção de Usabilidade Inspeção de Usabilidade
![Page 11: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/11.jpg)
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
![Page 12: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/12.jpg)
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
![Page 13: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/13.jpg)
13
Inspeção de Usabilidade - Planejamento
Preparação dos documentos a serem utilizados
![Page 14: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/14.jpg)
14
Inspeção de Usabilidade - Planejamento
Seleção de Participantes:
•3 Especialistas •Alto Nível de Experiência em
Usabilidade e Inspeções (Mestres)
![Page 15: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/15.jpg)
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
![Page 16: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/16.jpg)
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.
![Page 17: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/17.jpg)
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.
![Page 18: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/18.jpg)
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
![Page 19: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/19.jpg)
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.
![Page 20: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/20.jpg)
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
![Page 21: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/21.jpg)
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.
![Page 22: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/22.jpg)
22
Inspeção de Usabilidade – Reunião de Discriminação e Priorização
Alguns dos problemas identificados:
![Page 23: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/23.jpg)
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
![Page 24: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/24.jpg)
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.
![Page 25: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/25.jpg)
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.
![Page 26: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/26.jpg)
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”.
![Page 27: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/27.jpg)
27
Metodologia
Início
Fim
Planejamento
Análise
Técnicas de Design
Projeto de Interface
Melhorada
Inspeção de Usabilidade
Técnicas de Design
![Page 28: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/28.jpg)
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
![Page 29: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/29.jpg)
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
![Page 30: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/30.jpg)
30
Técnicas de Design - Planejamento
Preparamos os documentos para executar as atividades de design: •Roteiros •Incentivos •Materiais como cartões, questionários, etc.
![Page 31: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/31.jpg)
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?
![Page 32: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/32.jpg)
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
![Page 33: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/33.jpg)
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.
![Page 34: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/34.jpg)
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.
![Page 35: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/35.jpg)
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
![Page 36: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/36.jpg)
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.
?
?
?
?
![Page 37: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/37.jpg)
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.
![Page 38: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/38.jpg)
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?
![Page 39: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/39.jpg)
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.
![Page 40: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/40.jpg)
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%
![Page 41: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/41.jpg)
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
![Page 42: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/42.jpg)
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.
![Page 43: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/43.jpg)
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.
![Page 44: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/44.jpg)
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.
![Page 45: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/45.jpg)
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.
![Page 46: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/46.jpg)
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
![Page 47: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/47.jpg)
47
1° O conceito
Dona Know?
![Page 48: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/48.jpg)
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.”
![Page 49: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/49.jpg)
49
Redesign - O conceito
![Page 50: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/50.jpg)
50
2° Controle e Liberdade do
Usuário
![Page 51: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/51.jpg)
51
Redesign - Controle e Liberdade do Usuário
Resultados da Inspeção • “Não é possível cancelar a ação de atualizar os dados.”
![Page 52: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/52.jpg)
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?
![Page 53: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/53.jpg)
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.
![Page 54: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/54.jpg)
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.
![Page 55: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/55.jpg)
55
Análise Geral e Reprojeto – Padrões de Design
![Page 56: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/56.jpg)
56
Análise Geral e Reprojeto – Padrões de Design
![Page 57: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/57.jpg)
57
3° Feedback
![Page 58: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/58.jpg)
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”
![Page 59: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/59.jpg)
59
4° Navegação
![Page 60: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/60.jpg)
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)
![Page 61: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/61.jpg)
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.
![Page 62: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/62.jpg)
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.
![Page 63: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/63.jpg)
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.
![Page 64: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/64.jpg)
64
Análise Geral e Reprojeto – Padrões de Design
![Page 65: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/65.jpg)
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%!!!
![Page 66: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/66.jpg)
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”
![Page 67: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/67.jpg)
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.
![Page 68: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/68.jpg)
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.”
![Page 69: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/69.jpg)
69
5° Maiores Informações
![Page 70: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/70.jpg)
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.”
![Page 71: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/71.jpg)
71
Redesign – Maiores Informações
![Page 72: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/72.jpg)
72
Redesign – Maiores Informações
Ao selecionar um evento, o aplicativo mostrava a tela com dados.
![Page 73: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/73.jpg)
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.
![Page 74: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/74.jpg)
74
Redesign – Maiores Informações
![Page 75: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/75.jpg)
75
Redesign – Maiores Informações
Apresentamos fotos maiores, tanto do evento quanto do local.
![Page 76: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/76.jpg)
76
Redesign – Maiores Informações
![Page 77: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/77.jpg)
77
Redesign – Maiores Informações
Adicionamos mais informações, e facilitamos o acesso às
funcionalidades.
![Page 78: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/78.jpg)
78
6° Busca Melhorada
![Page 79: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/79.jpg)
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.”
![Page 80: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/80.jpg)
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.
![Page 81: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/81.jpg)
81
Redesign – Busca Melhorada
![Page 82: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/82.jpg)
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.”
![Page 83: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/83.jpg)
83
Redesign – Busca Melhorada
![Page 84: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/84.jpg)
84
Conclusões
![Page 85: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/85.jpg)
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.
![Page 86: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/86.jpg)
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.
![Page 87: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/87.jpg)
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.
![Page 88: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/88.jpg)
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.
![Page 89: Qual aula_05__design_e_reprojeto_de_usabilidade](https://reader031.vdocuments.pub/reader031/viewer/2022021921/58e8ec281a28ab1f248b4791/html5/thumbnails/89.jpg)
Obrigado!
Luis Rivero
89