Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
prototipagem em
papel
paper prototyping
prototipagem em papel
técnica simples e rápida para desenvolver e testar interfaces web
02 . 45
a história
… idade da pedra...
1980 robin kinkead
1990 jacob nielsen
1993 carolyn snyder
2000 especialistas em usabilidade…
03 . 45
aonde ?
o protótipo de papel
por meio dessa técnica simples é possível
fazer correções rápidas no design
e demais informações ainda no papel
04 . 45
o que é ?
o protótipo de papel
é um teste de usabilidade informal realizado com usuários reais.
05 . 45
material ?
cartolina tesoura lápis ou caneta postits cola...
07 . 45
vantagens...
manuseio fácil | permite recorte e dobras;
permite apagar e desenhar de novo;
mais rápido que um software;
não inibe o usuário;
mais simples que a tela de computador;
permite anotação de observações durante teste;
baixo custo;
economia na fase inicial do projeto.
08 . 45
desvantagens
como não se escreve nenhuma linha de código fica difícil prever o tempo de construção do site!
torna difícil desenho de elementos da interface ex: scrollbars, ícones e animações;
o cliente pode julgar não ser uma técnica muito profissional de avaliação;
corre-se o risco de “viajar” demais na criação e o tempo de desenvolvimento/programação do site ser inviável para o cliente.
09 . 45
quanto tempo dura ?
definição das tarefas: 1h
preparação do teste (desenho das telas): 30 min
seleção dos participantes: 10 min
execução do teste: máx de 15 min
10 . 45
quanto tempo dura ?
1ª pergunta feita pelos clientes
gerentes: tempo (?)
implica: custo e cronograma
11 . 45
quanto tempo dura ?
os testes devem durar o mínimo de tempo possível e é importante considerar que:
o desenvolvimento não pára enquanto os testes acontecem!
a fase de planejamento dos testes, por exemplo, pode começar junto com o desenvolvimento;
as empresas que já trabalham com os testes de usabilidade, o prevêem no custo e no cronograma do projeto – isso é o ideal!
Joseph S. Dumas & Janice C. Redish (1994) 12 . 45
quanto tempo dura ?
o planejamento do tempo de duração de um teste deve levar em consideração os seguintes fatores:
complexidade do produto;
quanto do produto será testado (partes | todo);
infra-estrutura necessária;
selecionar um grupo de usuários e treiná-los junto à equipe que fará o teste;
prever o nível de detalhamento | formalidade do relatório a ser gerado.
Joseph S. Dumas & Janice C. Redish (1994) 13 . 45
etapas
1ª etapa | determinar as tarefas a serem avaliadas
2ª etapa | criação do protótipo de papel construção das fichas em papel com as informações necessárias que simulem as telas: podem ser desenhadas à mão ou até mesmo impressas em papel comum, no caso de um protótipo mais fiel à realidade.
3ª etapa | seleção do usuário real, do “computador”, do facilitador e do anotador com as tarefas pré-determinadas, o “computador” inicia o teste colocando à frente do usuário, de preferência em cima de uma mesa, a primeira tela em papel;
o facilitador explica a tarefa ao usuário e como ele deve interagir com o protótipo (permanece sentado ao lado dele o tempo todo do teste);
é necessário que o usuário simule com o dedo indicador todos os seus passos, como se estivesse “clicando” realmente em botões, ícones ou caixa de listagens com o mouse;
é importante que o colaborador comente suas impressões, dúvidas e observações durante a realização do teste;
todo o diálogo do colaborador com o “computador” é registrado pelo anotador para análise posterior; este último também marca o tempo de realização da tarefa.
4ª etapa | análise dos resultados | conclusão do teste
ancine
validação de ícones em sistemas de informação de uma agência do governo brasileiro
.: o caso do website da ANCINE
16 . 45
ancine
o presente trabalho consiste na validação de ícones para os
Sistemas de Informação da ANCINE-Agência Nacional de Cinema
(ligada ao Ministério da Cultura Brasileira), como um exemplo
de caso de uso real de projeto centrado no usuário.
através de testes de usabilidade (protótipo de papel, avaliação
cooperativa e grupo de foco) realizados na interface web de
determinado sistema com os usuários-ANCINE, conclui-se que é
fator de maior relevância a aplicação do design no desenvolvimento
de novas plataformas de trabalho que se utilizam de tecnologia de
ponta, buscando soluções de maior qualidade, eficiência e rapidez no
âmbito da comunicação organizacional.
17 . 45
ancine
ancine | que uma obra audiovisual foi produzida de acordo com as definições de obra audiovisual brasileira; é o certificado de origem.
ancine | sistemas de informação | equipe web responsável pela manutenção do layout do portal, da intranet e dos sistemas de informação da agência: é composta por dois web designers e dois profissionais da informática.
11 de abril de 2006 | portal | www.ancine.gov.br
30 de setembro de 2006 | anci.netagência nacional de cinema | ministério da cultura é um órgão de fomento, regulação e fiscalização da indústria cinematográfica e vídeofonográfica.
ancine | cpb | certificado de produto brasileiro
18 . 45
ancine
criação de ícones | 15 x 15 pixels
método de pré-seleção: define-se as situações e ações que serão necessárias de acordo com cada tarefa dos sistema de informação;
pesquisa no google/imagem de procura por ícones usados em programas do pacote microsoft e/ou disponíveis na internet;
10 ícones são então selecionados, mas apenas três idéias são produzidas já no padrão visual das telas de sistemas da ANCINE.
“ExCLuiR”
seleção:
aprovação/criação:
19 . 45
ancine – o layout lembra o desenho de fichas
ancine
ancine – legenda dos ícones
ancine – ficha do anotador
papper prototype | 19/11/2005
colaborador a idade: 23 anos profissão: designer local: puc-rio (sala de aula) tempo total de duração: 15 min
obs: os dois participantes nunca haviam visto as telas dos sistemas!
início do teste as fichas com os desenhos da telas de “registro de empresa” foram impressas no tamanho real e coladas em cartolina branca, cada ficha foi sendo mostrada na ordem de necessidade de uso de cada participante para realização das tarefas.
colaborador b idade: 27 anos profissão: analista de marketing local: puc-rio (sala de aula) tempo total de duração: 12min
1: exclua a empresa carlos drummond de andrade do cadastro ancine (nº registro 14751) 2: indique uma melhor ordem para a legenda dos ícones
1: exclua a empresa carlos drummond de andrade do cadastro ancine (nº registro 14751) 2: indique uma melhor ordem para a legenda dos ícones
1: exclua a empresa carlos drummond de andrade do cadastro ancine (nº registro 14751) 2: indique uma melhor ordem para a legenda dos ícones
1: exclua a empresa carlos drummond de andrade do cadastro ancine (nº registro 14751) 2: indique uma melhor ordem para a legenda dos ícones
1: exclua a empresa carlos drummond de andrade do cadastro ancine (nº registro 14751) 2: indique uma melhor ordem para a legenda dos ícones
1: exclua a empresa carlos drummond de andrade do cadastro ancine (nº registro 14751) 2: indique uma melhor ordem para a legenda dos ícones
resultado tarefa 1
sugestão do ítem “ ::Exclusão ” na primeira tela”;
os participantes fizeram o caminho correto de navegação das telas, apenas diferenciaram-se no tempo de realização;
a legenda os confundiu na telas nº 2 e nº 3;
conclusão a legenda só é necessária no final da penúltima tela.
resultado tarefa 2
ordem alfabética por coluna na vertical ou semelhança de ícones.
prOTotIPagEM em pAPeL “Maximum Feedback for Minimum Effort” Snyder (2003)
avaliação cooperativa | 23/11/2005 início do teste: computador ligado | estação ancrjo217 | tela do sistema de registro de empresa aberta
1. exclua sua empresa do cadastro da ancine (3min) os usuários-ancine demoraram de 5 segundos à 1 minuto para realizar a tarefa;
80% clicou direto no link “ :: Empresa Nacional Exibidora/Inclusão”; ERRADO 20% foi no “ :: Manutenção de Entidades Cadastradas/Alteração”; CERTO 100% sugeriu a inserção no menu de link “ :: Excluir”; SUGESTÃO
2. procure a empresa carlos drumond de andrade sob o nº registro 14751 (3min) os usuários-ancine demoraram de 8 à 40 segundos para selecionar o “Campo - nº registro” e digitar “1-4-7-5-1” na combo box ao lado.
3. informe o cnpj desta empresa (2min) esta tarefa foi fácil: os usuários-ancine demoraram de 5 à 10 segundos para dizer o nº do cnpj com precisão.
4. indique a melhor ordem para a legenda (3min) 0% ordem alfabética por linha; 60% ordem alfabética por colunas; 40% ordem por semelhança de função.
focus group | 24/11/2005 antes de começar o teste, o moderador |a| deve pedir a autorização do uso da imagem para fins de apresentação na puc-rio; ambientar os participantes quando chegarem ao local; provocar esta “climatização” no ambiente como se fosse um encontro de amigos oferecendo alimentação e bebidas a serem consumidas; comentar a proposta do estudo; pedir para desligar o celular!
1. Os desenhos dos ícones lhes parece “familiar” (dicas)
alguns ícones sim, são parecidos com ícones do pacote Microsoft (ex: arquivar, salvar, imprimir e excluir);
alguns têm uma funcionalidade muito específica, dificultando a sua compreensão do desenho, portanto precisam da leitura escrita para facilitar o entendimento (ex: alterar, associar e ordenar);
focus group | 24/11/2005 antes de começar o teste, o moderador |a| deve pedir a autorização do uso da
imagem para fins de apresentação na puc-rio; ambientar os participantes quando
chegarem ao local; provocar esta “climatização” no ambiente como se fosse um
encontro de amigos oferecendo alimentação e bebidas a serem consumidas;
comentar a proposta do estudo; pedir para desligar o celular!
2. Você utiliza no dia a dia ícones nos softwares? (3 à 4min)
20% não utiliza;
80% sim utiliza;
conclusão: desenhos são de mais fácil e rápida compreensão do que texto.
3. A utilização de ícones faz sentido nos sistemas da ANCINE? (10min)
100% sim, pois facilita e agiliza a compreensão das informações; portanto os
ícones são necessários e a legenda tem o papel fundamental de complementar as
informações visuais das telas dos sistemas de informação da ANCINE.
relatório
final
consolidação dos resulados
qual a melhor mídia a ser usada para comunicar os resultados do teste?
o que deve entrar no relatório para que as pessoas o utilizem?
como planejar um relatório?
como organizar,formatar e distribuir o relatório?
40 . 45
relatório final
dicas | pós-tarefa e pós-teste
1° passo | manipular os dados dos testes através de tabelas ex: para cada tarefa tabular, o tempo, o número de erros de vários tipos, e outras
medidas como o número de ajudas que o participante precisou;
2° passo | manipular os dados dos testes através de resumos listar os acertos e os erros na navegação (tarefa); listar os comentários importantes que os usuários-colaboradores fizeram durante os testes (observações do anotador|facilitador);
| utilizar letras para denominar os usuários-colaboradores (a, b, c) ex: “o colaborador a, 25 anos, engenheiro, na primeira tarefa teve dificuldade em.... por isso levou 5 minutos para realizá-la. Já o colaborador b, 27 anos, designer, levou 2 minutos a mais para concluir a tarefa porque....”
| manipular os dados dos testes através de porcentagens (%) ex: “os usuários-colaboradores demoraram de 5 segundos à 1 minuto para realizar a primeira tarefa, 80% clicou direto no link tal....a tarefa n° 2 foi a mais demorada de todas, pois 50% dos usuários-colaboradores se perderam na segunda tela.... todos os usuários concordaram que...”
3° passo | relatório final 41 . 45
relatório final
qual a melhor mídia?
verbal | feedback verbal mesmo que os desenvolvedores tenham acompanhado o teste, é importante que você converse com eles sobre os resultados;
escrita | feedback escrito não dá para confiar na memorização de todos os itens; sugestão: fazer uma lista de recomendações e passá-la por escrito aos envolvidos!
visual | fita de vídeo* o apoio da mídia visual é importante; se você tiver de convencer algum grupo sobre determinados aspectos! sugestão: edite a fita com principais pontos do teste e mostre ao grupo. *importante: a fita não substitui o relatório escrito, apenas o complementa!
quem vai ler o documento?
time gerencial | resumo executivo + checklist | facilita a tomada de decisões | tempo ex: caso o produto precise de mais tempo para ser finalizado, mudar a data de
lançamento, pagar pelas mudanças, realizar novos testes!
desenvolvedores | relatório detalhado + (checklist) sugestão: que você separe uma seção de resultados e recomendações!
42 . 45
exemplo da estrutura do relatório final
1. sumário executivo dois ou três parágrafos que falem sobre o produto testado, período do teste, quem fez o teste, quais foram os objetivos, os participantes (quantos, de que grupos), principais resultados e plano para a correção dos problemas.
2. descrição do teste dois ou três parágrafos que falem sobre o produto testado, período do teste, quem fez o teste, quais foram os objetivos, os participantes (tabelas que caracterizem os grupos), descrição das tarefas e cenários e os métodos adotados.
3. descrição dos resultados breve introdução acompanhada de algumas páginas com tabelas de registros de dados das tarefas, resultados dos questionários e lista de descobertas.
4. conclusões e recomendações ponto chave do relatório, contendo: descobertas, explicações e justificativas, além das recomendações.
5. anexos prints de telas, e-mails e folhas de registro dos testes/anotador/facilitador
43 . 45
exemplo da estrutura do relatório final
1ª etapa | avaliação dos resultados pós-testes levantamento dos problemas surgidos nas interfaces web;
2ª etapa | execução da correção nas tarefas identificação das alterações nas tarefas;
3ª etapa | executar as alterações/correções no layout efetuar as alterações nas telas no laboratório;
4ª etapa | conclusão dos testes | entrega do trabalho
elaboração de relatório
44 . 45
exemplo da estrutura do relatório final
1. LOCAL + DATA + HORA | do teste
2. resumo do projeto (produto + website)
3. tarefas estabelecidas
4. tabela com os dados dos usuários-colaboradores
(nome | idade | sexo | profissão | tempo execução da tarefa)
5. arquitetura da informação + wireframes + layout
6. prints | erros diagnosticados | fotos dos testes
7. texto | consolidação dos resultados!
45 . 45