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