Protótipos em Papel (Paper Prototype)

Protótipos em Papel (Paper Prototype) Guilhermo Reis www.guilhermo.com 2 Tipos de Protótipos O protótipo de um website pode ser classificado conforme o seu grau de fidelidade, ou seja, o quanto ele se aproxima do layout final das páginas que representa. Visão Abstrata Baixa Fidelidade Média Fidelidade Alta Fidelidade Toub, S. Evaluating Information Architecture: A practical guide to assessing web site organization, Argus, 2000. Disponível em: http://argus-acia.com/white_papers/evaluating_ia.pdf. 1

3 Tipos de Protótipos Protótipos de Alta Fidelidade Vantagens Permitem avaliar todos os detalhes de um design. Protótipos de Baixa Fidelidade Vantagens Apóiam a avaliação do modelo conceitual usado no design. São rápidos de construir. Necessitam de poucos recursos. São mais baratos. Desvantagens Demoram para serem construídos. Necessitam de mais recursos. São mais caros. Desvantagens Não permitem avaliar de todos os detalhes de um design, como: Layout e formato do produto (cores, fontes, disposição espacial, etc.). Representações dinâmicas. Tempo de resposta do sistema. Usuários precisam ter boa familiaridade com computadores para entenderem as abstrações do protótipo. 5 O que são protótipos em papel? Protótipos em papel são mockup ou representações de um design. Seu objetivo é avaliar um design através de um teste com usuários nas etapas iniciais do projeto, quando o custo para corrigir os erros ainda são muito baixos. Também é uma ferramenta de comunicação, que facilita o entendimento do design por toda a equipe. Eles são elaborados através de esquemas feitos a mão, fotocópias, recortes de pedaços de papel ou uma combinação criativa de qualquer desses materiais. 2

6 Por que usar protótipos em papel? Quais as vantagens? Requerem poucos recursos para serem construídos. São elaborados com ferramentas simples, que não requerem habilidades específicas. Permitem que as idéias sejam testadas nos primeiros estágios do processo de design. Facilita a comunicação e a colaboração entre os membros do time. São construídos rapidamente. Identifica os maiores problemas de usabilidade de um projeto. Quando usar? Nos primeiros estágios do processo de design. As pessoas são menos resistentes a mudanças. Foi investido pouco tempo e recursos no projeto. Ainda não se tem clareza de qual é a melhor solução. O que pode ser avaliado? Metáforas conceituais. Navegação. Arquitetura da Informação. Fluxo de telas. Layout e agrupamento dos elementos de navegação. Conteúdo. Terminologia e linguagem. Rótulos, botões e controles. 7 Passos para fazer um protótipo em papel 1 2 3 4 5 6 7 Identificar o que prototipar Criar o protótipo Planejar o teste Conduzir o teste com o usuário Analisar os resultados Modificar o design Refazer o teste 3

8 1 - Identificando o que prototipar Entenda quais são os requerimentos do projeto Quais são os requisitos do projeto? Como será avaliado o sucesso do projeto? Defina as tarefas mais importantes Tarefas mais comuns ou típicas. Tarefas mais críticas. Tarefas com maior impacto no negócio. Crie um protótipo que permita executar estas tarefas O protótipo não precisa ser completo. Considere as 3 tarefas prioritárias do projeto e faça um protótipo para testá-las. Comece com conceitos simples e depois evolua para protótipos mais abrangentes ou profundos. 10 2 - Criando o protótipo Faça um brainstorming sobre as idéias e conceitos do projeto. Forme times com pessoas de diferentes áreas da empresa (máximo 6 pessoas). Facilita o entendimento e divide a responsabilidade. Reduz a competição e conflitos. Existe uma base de conhecimento maior. Gera idéias mais criativas. 4

11 Ferramentas necessárias para criar protótipos em papel Os protótipos em papel são feitos com material simples de escritório: Papel sulfite Canetas coloridas Tesoura Post-it Durex E muita criatividade! Information & Design, Paper Prototype, 2003. http://www.infodesign.com.au/usabilityresources/design/paperprototypinggraphics.asp. 12 Como criar protótipos em papel 5

13 Exemplos de protótipos em papel Carrinho de compra de um site de e-commerce Protótipo em papel da janela Page Setup do Microsoft Word SNYDER, C. Paper Prototyping, Snyder Consulting, 2001. http://www.snyderconsulting.net/article_paperprototyping.htm. 14 Exemplos de protótipos em papel Telefone Celular Quiosque de Auto-Atendimento Janela com tabs NIELSEN NORMAN GROUP, Paper Prototyping: Stills from de Video, 2003 http://www.nngroup.com/reports/prototyping/video_stills.html 6

15 Exemplos de protótipos em papel Interface Touchscreen Sales, P; Influência cultural nas interfaces gestuais: metodologia e resultados, 2009 http://www.congressoebai.org/jump/index.php/ebai/2009/paper/view/50 16 Power Point / Word / Visio Vantagens Desvantagens São softwares familiares, têm baixa curva de aprendizagem. Permitem fazer modificações facilmente sem ter de redesenhar toda a página. Não permite fazer mudanças durante um teste (on the fly) sem que estas pareçam diferentes do restante do desenho. Têm boa qualidade de impressão, o que auxilia nas discussões e testes. 7

17 Protótipos de papel em 3D Destinado a representar um hardware físico. Utilizado quando se deseja avaliar a interação do usuário com um dispositivo físico como telefones celulares, caixas eletrônicos, aparelhos eletrônicos, etc. Computador de bordo para taxi Máquina de reciclagem de latas de alumínio SÄDE, S. ; BATTARBEE, K. The Third Dimension in Paper Prototypes. In: Branaghan, R. (ed.) (2001) Design by people for people: Essays on usability, Usability Professionals' Association, Chicago Terminal público de fax e e-mail 18 3 - Planejando o teste Desenvolva um script com as tarefas que se deseja avaliar. Teste o script com alguns usuários. Recrute usuários para o teste definitivo. Os usuários devem representar os perfis do público alvo. Teste com um pequeno número de usuários (de 4 a 6 usuários). Escolha o local do teste. Formal: Laboratórios de usabilidade com salas com espelho falso. Os observadores ficam atrás do espelho. Informal: Sala de reunião com privacidade. Os observadores ficam na mesma sala. Filme o teste. 8

19 4 - Conduzindo o teste com o usuário Existem normalmente quatro pessoas envolvidas em um teste com protótipo em papel: O Facilitador (ou moderador). A pessoa que representa o Computador. O Usuário. Os Observadores. Facilitador Computador Usuário NIELSEN NORMAN GROUP, Paper Prototyping: Stills from de Video, 2003 http://www.nngroup.com/reports/prototyping/video_stills.html Organização de um laboratório de usabilidade para uma sessão de testes com protótipos em papel 20 O Facilitador É usualmente um especialista em usabilidade. Auxilia o usuário a interagir com o protótipo. Explica ao usuário a que se destina o teste. Informa ao usuário que o que sendo testado é o sistema, não o usuário. Solicita ao usuário que descreva suas ações e pensamentos em voz alta. Passa para o usuário as instruções das tarefas que precisa realizar. Acompanha e intervém quando necessário. Observa e anota como o usuário realizou a tarefa. Senta-se próximo ao usuário. 9

21 O Computador Deve ser uma pessoa familiarizada com o protótipo. Apresenta as telas conforme o usuário interage com o protótipo. Senta de frente ao usuário. Deve ter um postura neutra e quieta durante toda a sessão de teste. Manter uma linguagem corporal neutra e não manifestar emoções, como um computador. Mantém as demais folhas do protótipo fora do alcance da visão do usuário. Deve-se manter a mesma pessoa representando o computador em todas as sessões de testes. 22 O Usuário Interage com o protótipo. Tenta realizar as tarefas solicitadas pelo Facilitador. Aponta os elementos que deseja clicar (ex: botões, links). Preenche os campos de formulários. Descreve a ação que vai executar em voz alta e explica o que está sentido com a experiência. NIELSEN NORMAN GROUP, Paper Prototyping: Stills from de Video, 2003 http://www.nngroup.com/reports/prototyping/video_stills.html 10

23 Os Observadores Tenha no máximo dois observadores na sala de teste. Muitos observadores deixam o usuário inibido. Faça um rodízio de observadores caso tenha mais que dois. Para reduzir barulho, interrupção e distrações. O usuário sente-se mais confortável com poucos observadores. É difícil observar o teste com mais de dois observadores. A função dos observadores é: Ouvir atentamente o usuário. Muitas informações valiosas do teste vem dos seus comentários. Compartilhar suas anotações com o Facilitador ao final de cada sessão. Devem ter cópias do protótipo. Filme o teste para facilitar a análise posterior. 25 Dicas para condução do teste Minimize as obstruções dos corpos. Posicione o Facilitador, o Computador e o Usuário de forma que eles não cubram o protótipo. Mantenha o protótipo fora do alcance dos olhos do usuário. Os usuários facilmente se distraem ou desejam antecipar suas ações. Por isso o protótipo deve ficar embaixo da mesa ou em outro lugar fora do campo de visão do usuário. Preveja o inesperado. Tenha um kit para fazer modificações de emergência on the fly. Defina a área onde devem ficar as folhas do protótipo. Faça uma marca na mesa para que as folhas sejam sempre colocadas na mesma posição. Isto facilita a filmagem, especialmente se a câmera estiver colocada sobre um tripé. Marca para posicionar as folhas do protótipo 11

26 5 - Analisando os resultados O que observar durante os testes? Modelo mental do usuário. O protótipo corresponde ao modelo mental do usuário? Esquema de navegação. Existem caminhos que confundem o usuário? Observou-se caminhos onde o usuário se perdeu, baixa confiança, respostas incorretas, insegurança, desespero? Conteúdo e linguagem. O uso das palavras e da linguagem está apropriado? Existem links, termos e rótulos que não são claros? Agrupamento das informações. A organização da informação está clara? O menu está claro e apropriado? Faça um relatório em até 24 horas após o final do teste Agrupe as observações semelhantes. Priorize as observações. Quais são as mais importantes ou críticas? Quais são viáveis de corrigir? 27 6 - Modificando o Design Terminado os testes, Faça um brainstorm com o time de projeto para avaliar as modificações que podem ser feitas. Considere a viabilidade e o impacto das mudanças. Limitações técnicas. Tempo e dinheiro para implementar. Criticidade dos problemas observados. Realize as mudanças do design que tenham o melhor custo/benefício. 12

28 7 - Refazendo o teste Teste as mudanças propostas com novos protótipos em papel e verifique se realmente foram efetivas. O teste deve ser feito com os mesmos usuários testados anteriormente e também com novos usuários. 13