apresentacao projeto heurísticos

30
Projeto Heurísticos Pós graduação em Arquitetura da Informação - 2012

Upload: carolina-arlindo

Post on 29-Jun-2015

607 views

Category:

Documents


2 download

DESCRIPTION

Apresentação do trabalho de conclusão de curso de pós graduação em Arquitetura da Informação.

TRANSCRIPT

Page 1: Apresentacao projeto heurísticos

Projeto Heurísticos

Pós graduação em Arquitetura da Informação - 2012

Page 2: Apresentacao projeto heurísticos

Projeto Heurísticos Criação de uma ferramenta online para

avaliação de usabilidade;

Análise heurística remota por avaliadores indicados pelo cliente

Avaliação de interfaces para profissionais (webdesigners, arquitetos da informação, designer de interação e etc)

Relatórios automáticos

Page 3: Apresentacao projeto heurísticos

Avaliação Heurística

Page 4: Apresentacao projeto heurísticos

Avaliação heurística Segundo Nielsen: “O objetivo da avaliação

heurística é encontrar os problemas de utilização na concepção de modo que eles podem ser atendidos como parte de um processo iterativo de design.” (Nielsen, 2005).

Avaliadores: 3 a 5 profissionais

10 heurísticas de Jakob Nielsen

Page 5: Apresentacao projeto heurísticos

10 Heurísticas de Jakob Nielsen1. Visibilidade do status de sistema

2. Correspondência entre o sistema e o mundo real

3. Controle e liberdade do usuário

4. Coerência e padrões

5. Prevenção de erro

6. Mais reconhecimento que recordação

7. Flexibilidade e eficiência de uso

8. Projeto estético e minimalista

9. Ajuda ao usuário, diagnóstico e recuperação dos erros

10. Ajuda e documentação

Maior abrangência dos pontos de usabilidade

Flexibilidade para avaliação de vários tipos de interfaces

Mais conhecidas e difundidas

Page 6: Apresentacao projeto heurísticos

Desenvolvimento do projeto

Pesquisas e testes

Page 7: Apresentacao projeto heurísticos

Pesquisa quantitativa 2 questionários on-

line: primeiro questionário

para profissionais que fizeram ou fazem avaliações heurísticas

segundo para profissionais que nunca fizeram mas que possuíam conhecimento da avaliação.

Page 8: Apresentacao projeto heurísticos

Dados profissionais

Page 9: Apresentacao projeto heurísticos

Heurísticas avaliadas

“Elaboro um roteiro de acordo com a natureza do projeto e uso as heurísticas de Nielsen, mas também levo em conta minha própria experiência profissional.”

Page 10: Apresentacao projeto heurísticos

Como faz a avaliação?

Page 11: Apresentacao projeto heurísticos

Importância da avalição

Page 12: Apresentacao projeto heurísticos

Validação de Wireframes Os wireframes foram testados através do site

Usabilla entre os dias 15 e 17 de Agosto

Para cada página foi solicitado uma “tarefa”

Os usuários podiam inserir comentários sobre as páginas

Page 13: Apresentacao projeto heurísticos

Validação de Wireframes

CadastroComentários dos usuários

1. legal ser bem simples. Descrição é obrigatória?

2. Os passos para a avaliação estão claros e objetivos.

3. Muito boa a divisão das etapas para gerar a nova avaliação.

4. Faltou o campo endereço do site (URL) que estou avaliando, não precisa ser um campo obrigatório para preenchimento.

5. não entendi o que iria em 'arquivo'

6. a principio não entendi o que seria cada passo..vou subir que tipo de arquivo? não posso avaliar uma página já pronta? sem saber o que dá pra fazer, talvez nem cadastraria o projeto

Page 14: Apresentacao projeto heurísticos

Validação de Wireframes

ArquivoComentários dos usuários

1. o nome "Arquivo" não deixou claro quais opções eu teria (URL por exemplo)

2. Talvez uma opção para teste de um vídeo.

3. poderia subir todo o html gerado pelo Axure? ficaria em dúvida entre protótipo e wireframe.

4. Eu acho que as opções estão condizentes com a proposta de avaliação utilizando as Heurísticas

5. Achei que aqui eu já faria upload... não?

6. Cadê o item 3 ???????

7. Acho que protótipo e imagens seria a mesma coisa no critério de avaliação.

Page 15: Apresentacao projeto heurísticos

Validação de Wireframes

AvaliaçãoComentários dos usuários

1. Muito bom ver o andamento da análise.

2. O que menos gosto é a nomenclatura "encerrar", talvez a nomenclatura fique mais simples se for "Encerrar análise".

3. Esta barra significa o que ?

4. A barra aqui em cima, o drop de Wireframes o "Proximo Wire" e essa barra de heurísticas fazem parte do site de avaliação e o resto é o wire que estou avaliando, é isso? achei que está tudo meio misturado... A barrinha de progresso ali em cima é a indicação de que tenho 6 wires pra avaliar? posso navegar entre eles só indo pra frente ou escolhendo no drop? achei uma opcao muito longe da outra

Page 16: Apresentacao projeto heurísticos

Validação de Wireframes

Avaliação Comentários dos usuários

5. Aproximaria de alguma forma a caixa wireframes da navegação (proximo wire), pois uma complementa a funcionalidade da outra.

6. só olhando assim não entendi como isso vai funcionar

7. nao entendi essa barra numerada

8. Minhas compras recentes

9. Mais gosto da opção de avaliação já na página indicada

Page 17: Apresentacao projeto heurísticos

Validação de Wireframes

AvaliaçãoComentários dos usuários

1. Achei válida a idéia de ter esse acompanhamento de estágio do processo... Mas acho que deveria ter algo explicando o que significa esse campo... algum termo que represente o significado desse campo

2. esta barra está estranha, não sei se está mostrando o processo de compra, muito confusa.

3. Desnecessário o botão estas na cor laranja. Não acho que está de acordo com o layout da página.

4. Gostei da possibilidade de poder visualizar as telas que estão sendo avaliadas

5. Ver as próximas páginas para analisar é muito bom para controlarmos o tempo e cronograma das tarefas.

Page 18: Apresentacao projeto heurísticos

Validação de Wireframes

AvaliaçãoComentários dos usuários

6. Não gostei desta opção de visualizar os wireframes.

7. pra cada heurística marco se está ok ou não? legal.

8. Muito bom a indicação visual sobre a análise.

9. Legal ter a descrição de cada heurística

10. Gostei muito da possibilidade de colocar o comentário no local específico da avaliação.

11. se tiver duas coisas na página que violam a heurística 1, devo posicionar o comentário perto de 1 delas só?

Page 19: Apresentacao projeto heurísticos

Validação de Wireframes

AvaliaçãoComentários dos usuários

12. acho que esse box por cima do wire vai atrapalhar na hora de avaliar o que está por baixo dele...não vale a pena por do lado? pra sempre enxergar o wire todo que estou avaliando e a checklist ao lado mostrando tudo que já avaliei ou não.

13. Acho que este menu não deveria ficar neste lado direito

Page 20: Apresentacao projeto heurísticos

Validação de Wireframes

Minhas AvaliaçõesComentários dos usuários

1. Como não consegui voltar para a tela anterior... não recordo se esse topo estava presente nela, na primeira tela lembro que esse topo aparece. Se não, acho que deveria continuar seguindo esse padrão.

2. Poderia indicar a porcentagem de conclusão da avaliação, assim o avaliador pode começar um projeto, parar e retomar, sabendo por essa tela o quanto avaliou de cada projeto.

3. Possibilidade de gerar o relatório é ótima.

4. Poder editar é super importante. As vezes precisamos ajustar algum comentário ou nota.

Page 21: Apresentacao projeto heurísticos

Validação de Wireframes

Minhas AvaliaçõesComentários dos usuários

5. nao entendi a principio o que são respostas...quantas heuristicas daquela listinha eu ja preenchi que está OK ou não?

6. eu colocaria ícone de lápis para editar e lixeira para apagar

7. Fiquei com dúvida nessa coluna, o item "Resposta" seria a quantidade de pessoas que testou, ou a quantidade de respostas que o avaliador deu?

8. Acho que estes botões na cor laranja não combina com o layout da página.

9. gostei que as opcoes estao bem claras, bem destacado o que é mais importante.

Page 22: Apresentacao projeto heurísticos

Validação de Wireframes

RelatórioComentários dos usuários

1. avaliações = respostas? avaliações fez mais sentido

2. faltou mostrar um relatório quantitativo.

3. Os ícones ficaram perdidos na tela, uma legenda pode ajudar nesse momento, a legenda pode ter a cor e o ícone correspondente.

4. isso quer dizer que das 4 avaliações realizadas, 3 disseram que a ajuda está ruim e 1 disse que a ajuda está OK? estranhei essa variação toda nas barras

Page 23: Apresentacao projeto heurísticos

Validação de Wireframes

RelatórioComentários dos usuários

5. acho que seria legal no final do prazo das avaliacoes receber esse grafico geral por email e vir para o site ver mais detalhes se quisesse... ou antes do prazo final vir acompanhando no site como está indo

6. Achei mais interessante essa forma de exibição do relatório, pois consigo ter o resultado acesso além das estatística, também é possível visualizar os comentários.

7. legal a forma de mostrar os pontos e os comentarios...o 10 está maior e aparecendo primeiro porque teve mais votos negativos, é isso? legal se for assim.

Page 24: Apresentacao projeto heurísticos

Validação de Wireframes

RelatórioComentários dos usuários

8. Se existirem muitos cometários o relatório pode fica muito comprido, talvez incluiria um collapse e contract nos itens dos comentários.

9. Como será a exibição dos comentários, será de todas as pessoas avaliadoras ou será de uma pessoa só?

10. nao entendi o porquê das cores diferentes

11. Acho que nessa parte pode diferenciar os comentários de cada avaliador. Podendo ser uma cor na numeração para cada avaliador, mas isso ser mostrado somente no wireframe e nos comentários ao lado.

Page 25: Apresentacao projeto heurísticos

Validação de Wireframes

UpgradeComentários dos usuários

1. Faria o upgrade sim!

2. sim

3. não. porque eu não costumo fazer análises heurísticas. eu navego pelo site livremente e anoto o que me chama atenção de ruim e de bom num caderno. ao mesmo tempo, faço inventário de conteúdo. depois faço bench e converso com o cliente para ter mais detalhes das expectativas em relação ao projeto.

4. Faria um estagiário para testar e depois de testado contrataria o freelancer para relatórios mais completos.

5. nao sei pq nao costumo usar esse tipo de avaliacao, mas me parece atrativo poder subir html e ter mais telas pra avaliar por projeto

6. Não gostei do layout desta página. Muita informação. Pode confundir os usuários.

Page 26: Apresentacao projeto heurísticos

Validação de Wireframes

Homepage Tarefa: Nova avaliação

“Você se interessou pelo Proj. Heurísticos e gostaria de avaliar seus wires com essa ferramenta.”

Page 27: Apresentacao projeto heurísticos

Plano de release

Fases do projeto

Page 28: Apresentacao projeto heurísticos

Passos Primeiro release: Validação do produto/negócio

Processo: testes com usuários, entrevistas e questionários.

Entrega: Protótipo navegável.

Segundo release: Lançamento Produto Beta

Processo: Implementação da versão "beta", cadastramento de usuários e análise de feedback (sugestões de melhorias)

Entrega: Versão Beta (site com com versão free, Júnior e Pleno)

Terceiro release: Produto - Fase 2

Processo: Cadastro de uma quantidade de clientes, melhoria na interface seguindo os feedbacks, implementação de cadastro de avaliadores.

Entrega: Versão 2 do produto com as versões Free, Junior, Pleno e Sênior.

Quarto Release: Produto fase - 3

Processo: Cadastramento de usuários nas versões Pleno e Sênior, base de avaliadores suficiente.

Entrega: Versão 3 do produto com as versões Free, Junior, Pleno, Senior e Freela com a opção de utilizar os avaliadores cadastrados no site.

Possíveis próximos releases:

- Integração com outros sistemas de avaliação (por tarefas, testes de 5 segundos e etc)

- Integração de ferramentas: gravação de testes (navegação do usuário)

- Integração de sistemas de avaliação automáticos.

Page 29: Apresentacao projeto heurísticos

Conclusão A ferramenta consiste em basicamente unir

profissionais de usabilidade e afins aos outros profissionais que não tenham conhecimento específico

Em nossas pesquisas descobrimos que a maioria dos profissionais relacionados veem a importância nas validações heurísticas, mas não possuem um mecanismos para tal ação, fazendo assim de forma manual

Criar mecanismos para a qualidade dos novos projetos web, começando assim por validações com base nas heurísticas criadas por Jakob Nielsen e progredindo conforme a experiência adquirida com a evolução do projeto

Page 30: Apresentacao projeto heurísticos

Obrigado!

CARLOS ALBERTO DA SILVA

CAROLINA ARLINDO

ROBSON MOULIN DA SILVA

RODRIGO YOSHIOKA