SlideShare uma empresa Scribd logo
Protótipos em Papel
 (Paper Prototype)


Técnicas de prototipação rápidas




Guilhermo Almeida dos Reis
reis@guilhermo.com
www.guilhermo.com


Novembro / 2004
Metodologia de Desenvolvimento de Websites

                                                          Modelo de negócios
   Visão – Missão - Objetivos




                                                                                                                                                              Operação e Manutenção
                                Modelagem Conceitual




                                                                                       Implementação




                                                                                                                                                 Publicação
                                                                                                       Integração
           Estratégia




                                                                         Conteúdo




                                                                                                                    Testes
                                                       Arquitetura de




                                                                                                                             Aceite

                                                                                                                                      Piloto
                                                        Informação
                                                                        Look & Feel


                                                        Arquitetura + Projeto de IT

                                                        Back office infra-estrutura,
                                                              parcerias,etc

                                                                Gerenciamento de Projetos
                                                                 Boas Práticas / Guideline

Guilhermo Reis (2004) – www.guilhermo.com                                                                                                      Melly, M.
Prototipação e o ciclo de design


                                    Baixa                    Média                      Alta
                                  Fidelidade               Fidelidade                Fidelidade

      Fase do                Definição de             Especificação da        Lançamento do Produto
      Processo de            Requerimentos            Arquitetura de
      Design                                          Informação


      Tipo de                Esquemas feitos a        Detalhado e com         Realístico
      protótipo              mão                      recursos de interação



      Ferramentas            Material de Escritório   Word                    Dreamweaver
                                                      Power Point             Visual Basic
                                                      Visio                   HTML




Guilhermo Reis (2004) – www.guilhermo.com
Exemplos de protótipos




            Visão Abstrata




                                                                                                         Alta Fidelidade
                                                                                                         http://www.argus-acia.com/




                                                      Média Fidelidade




                                            Evaluating Information Architecture - Argus Center for Information Architecture 2000
          Baixa Fidelidade                  http://argus-acia.com/white_papers/evaluating_ia.pdf
Guilhermo Reis (2004) – www.guilhermo.com
Protótipos de Alta Fidelidade X Baixa Fidelidade
Protótipos de Alta Fidelidade               Protótipos de Baixa Fidelidade
•Apoiam a avaliação de todos os             •Não apoiam a avaliação de todos os
detalhes de um design                       detalhes de um design, como:

•Necessitam mais tempo e recursos            • Interações da interface com o usuário
para serem construídos                       • Layout e formato do produto

                                             • Representações dinâmicas

                                             • Tempo de resposta do sistema

                                            •Apoiam a avaliação do modelo
                                            conceitual usado no design

                                            •Necessitam de pouco tempo e
                                            recursos para serem construídos




Guilhermo Reis (2004) – www.guilhermo.com
O que são Protótipos em Papel ?
•Mock-up ou representações de um design.
•É uma maneira para avaliar um design através de um teste com
usuários.
•Ferramenta de comunicação para facilitar o entendimento de um
design.
•São feitos através de:
        • Esquemas feitos a mão

        • Foto-copias

        • Recortes de pedaços de papel

        • Uma combinação criativa
        de qualquer um dos itens acima



Guilhermo Reis (2004) – www.guilhermo.com
Porque usar Protótipos em Papel ?
•Explorar - Permite testar facilmente diferentes idéias
•Comunicar - Apresenta as idéias de uma forma que pode ser
entendida facilmente
•Colaborar - Facilita que todo o time de design construa e avalie o
protótipo
•Validar - Determina a eficiência dos elementos de design e do fluxo de
navegação




Guilhermo Reis (2004) – www.guilhermo.com
Quando usar protótipos em papel ?
Nos primeiros estágios do processo de design, porque:
        • 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




Guilhermo Reis (2004) – www.guilhermo.com
Vantagens dos protótipos em papel
•Requerem poucos recursos para serem contruídos
•São construídos com ferramentas simples, que não
requerm habilidades específicas
•Permite que as idéias sejam testadas nos primeiros
estágios do processo de design
•Facilita a colaboração entre os membros do time
•Os protótipos são construídos rapidamente
•Identifica os maiores problemas de usabilidade de um
projeto



Guilhermo Reis (2004) – www.guilhermo.com
O que pode ser avaliado com protótipos em papel ?
•Metáforas conceituais
•Navegação
        • Arquitetura da Informação

        • Fluxo de telas

        • Layout e agrupamento dos elementos

•Conteúdo
        • Terminologia e linguagem

        • Rótulos, botões e controles




Guilhermo Reis (2004) – www.guilhermo.com
Passos para criar um Protótipo em Papel
1- Identificar o que prototipar
2- Criar o protótipo
3- Planejar o teste
4- Conduzir o teste com o usuário
5- Analizar os resultados
6- Modificar o design
7- Refazer o teste




Guilhermo Reis (2004) – www.guilhermo.com
1 - Identificando o que prototipar
•Entenda quais são os requerimentos 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




Guilhermo Reis (2004) – www.guilhermo.com
Quais elementos incluir no Protótipo em Papel ?
•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




Guilhermo Reis (2004) – www.guilhermo.com
Tipos de Protótipos em Papel
    Protótipo Horizontal                       Protótipo Vertical                 Protótipo T
 •Representa a arquitetura de               •Representa uma pequena        •Representa toda arquitetura
 informação em amplitude                    área do projeto com            de informação em aplitude e
                                            profundidade de interações e   profundidade
 •Tem pouca ou nenhuma                      funcionalidades
 funcionalidade ou conteúdo                                                •Combina as características
 em profundidade                            •Usado para avaliar o          dos protótipos verticais e
                                            modelo de intereção de uma     horizontais
 •Usado para obter
                                            área do projeto
 impressões gerais do design                                               •Usado para avaliar a
                                                                           arquitetura de informação em
                                                                           algumas áreas detalhadas
                                                                           •Permite generalizar as
                                                                           observações feitas para as
                                                                           demais áreas




Guilhermo Reis (2004) – www.guilhermo.com
2 - Criando o Protótipo
•Fazer brainstorming sobre as idéias e conceitos do projeto
•Formar times com pessoas de diferentes áreas da empresa
(máximo de 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




Guilhermo Reis (2004) – www.guilhermo.com
Ferramentas necessárias
•Papel sulfite
•Canetas coloridas
•Tesoura
•Post-it
•Durex
•Quaisquer outros materiais de escritório


E muita criatividade !


Guilhermo Reis (2004) – www.guilhermo.com
Exemplos de como criar protótipos




Guilhermo Reis (2004) – www.guilhermo.com
Exemplos de como criar protótipos




     Paper prototype da janela File Setup
     do Microsoft Word




                                                                   Carrinho de compra de um site de e-commerce

     Paper prototyping - IBM 2001
     http://www-106.ibm.com.br/developerworks/usability/library/us-paper/

Guilhermo Reis (2004) – www.guilhermo.com
Exemplos de como criar protótipos




                           Telefone Celular                         Quiosque de Auto-Atendimento




     Paper Prototyping: Stills from de Video, AlertBox, 2003
     http://www.nngroup.com/reports/prototyping/video_stills.html

Guilhermo Reis (2004) – www.guilhermo.com
Outras ferramentas
                                            Power Point / Word / Visio
Vantagens
        • Softwares familiares - baixa curva de aprendizagem

        • Permite fazer modificações facilmente sem ter de redesenhar toda
        a página
        • Boa qualidade de impressão auxiliar discussões e testes

Desvantagens
        • Não permite fazer mudanças durante um teste (“on the fly”) sem
        que estas pareçam diferentes do restante do desenho.



Guilhermo Reis (2004) – www.guilhermo.com
Protótipos de Papel em 3D
•Destinado a representar um hardware físico
•Usado quando se deseja avaliar a interação com um aparelho físico como
telefones celulares, caixas eletrônicos, aparelhos de vídeo cassete, etc.




                                                         Computador de bordo para taxi

             Máquina de reciclagem
              de latas dealumínio



             Simo Sade and Katja Battarbee, University of Art and Design Helsinki        Terminal público
             www.apassoc.org/1999_archive/paper_prototypes.html                           de fax e e-mail


Guilhermo Reis (2004) – www.guilhermo.com
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 perfís 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 usuabilidade 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


Guilhermo Reis (2004) – www.guilhermo.com
4 - Conduzindo o teste com o usuário
O teste com protótipo em papel é semelhante a qualquer
outro teste de usabilidade de produto.

        • Peça para o usuário pensar em voz alta

        • Deixe o usuário interagir com o produto e realizar as tarefas




Guilhermo Reis (2004) – www.guilhermo.com
Pessoas envolvidas com o teste
Existem normalmente quatro pessoas envolvidas com o
teste:
        • O Facilitador
        • A pessoa que representa o “Computador”
        • O Usuário
        • Os Observadores                                                      Facilitador                 Computador




                                                               Usuário




Paper Prototyping: Stills from de Video, AlertBox, 2003
http://www.nngroup.com/reports/prototyping/video_stills.html             Organização de um laboratório de usabilidade para
                                                                         uma sessão de paper prototype

Guilhermo Reis (2004) – www.guilhermo.com
O Facilitador
•É usualmente um especialita em usabilidade
•Auxilia o usuário a interajir com o protótipo
        • Explica ao usuário a que se destina o teste

        • Informar ao usuário que o que sendo testado é o sistema, não o usuário

        • Passa ao usuário as instruções das tarefas a realizar

        • Acompanha e intervem quando necessário

•Observa e anota como o usuário realizou a tarefa
•Senta-se próximo ao usuário




Guilhermo Reis (2004) – www.guilhermo.com
O “Computador”
•Deve ser uma pessoa familiarizada com o protótipo.
•Apresenta as telas conforme o usuário interaje com o protótipo.
•Deve sentar-se de frente ao usuário.
•Dicas:
        • Deve ter um postura neutra e quieta durante toda a sessão de teste.
        Manter uma linguagem corporal neutra. Não manifestar emoções.
        • Manter as demais folhas do protótipo fora do alcance da visão do
        usuário.
        • Manter a mesma pessoa representando o computador em todas as
        sessões de teste.




Guilhermo Reis (2004) – www.guilhermo.com
O Usuário
•Interaje com o protótipo
       • Tenta realizar as tarefas
       • 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




 Paper Prototyping: Stills from de Video, AlertBox, 2003
 http://www.nngroup.com/reports/prototyping/video_stills.html
Guilhermo Reis (2004) – www.guilhermo.com
Os Observadores
•Ter no máximo dois observadores na sala de teste
•Faça um rodízio de observadores caso tenha mais de dois
        • Para reduzir barulho, interrupção e distrações

        • O usuário sente-se mais confortável com poucos observadores

        • É dificil observar o teste com mais de dois observadores

•Compartilha suas anotações com o Facilitador ao final de cada sessão
•Devem ter cópias do protótipo




Guilhermo Reis (2004) – www.guilhermo.com
Conduzindo o teste com o usuário
Antes de começar o teste o Facilitador deve apresentar o projeto ao
usuário, explicando com ele deve interajir com o protótipo
        • Explicar de que se trata-se o projeto

        • Mencionar que o projeto está numa fase inicial

        • Explicar que está se testando o sistema não o usuário

        • Explicar ao usuário que ele deve executar as tarefas como se estivesse
        em um computador
                – Explicar que o usuário deve apontar os elementos que deseja clicar
                – Explicar que o usuário deve escrever nos campos o que normalmente
                escreveria se estivesse usando o computador

        • Solicitar ao usuário que ele fale em voz alto o que está pensando sobre o
        sistema e o que pretende fazer
        • Dar uma tarefa de cada vez ao usuário e ter ceteza que ele a entendeu


Guilhermo Reis (2004) – www.guilhermo.com
Dicas para condução do teste
•Minimizar as obstruções dos corpos
        • Posicionar o Facilitador, o “Computador” e o Usuário de forma que eles
        não cubram o protótipo

•Definir a área onde devem ficar as folhas do protótipo
        • Fazer uma marca na mesa para que as folhas sejam sempre colocadas
        na mesma posição. Isto facilita a filmagem.

•Manter o protótipo fora do alcance dos olhos do usuário
        • Os usuários facilmente se distraem ou desejam antecipar suas ações.
        Por isto o protótipo deve ficar embaixo da mesa ou em outro lugar fora do
        alcance de seus olhos.

•Preveja o inesperado
        • Tenha um kit para fazer modificações de emergência “on the fly”.



Guilhermo Reis (2004) – www.guilhermo.com
5 - Analisando os resultados
Observar:
        • Modelo mental
           – 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, desespero ?
        • Conteúdo e linguagem
            – Está apropriado o uso das palavras e da linguagem ?
            – Existem links, termos e rótulos que não são claros ?

        • Agrupamento das informações
            – A arquitetura da informação está clara ?
            – O menu está apropriado ?

Guilhermo Reis (2004) – www.guilhermo.com
Analisando os resultados
•Agrupe as observações semelhantes
•Priorize as observações
        • Quais são as mais importantes ou críticas ?

        • Quais são viáveis ?

•Faça um relatório
        • Recomenda-se fazer este relatório em até 24 horas após o final do
        teste




Guilhermo Reis (2004) – www.guilhermo.com
6 - Modificando o Design
•Fazer brainstorm com o time para avaliar as modificações
que podem ser feitas
•Considerar a vialibilidade e o impacto das mudanças
        • Limitações técnicas

        • Tempo e dinheiro para implementar

        • Criticidade dos problemas observados

•Realizar as mudanças do design que tenham o melhor
custo/benefício




Guilhermo Reis (2004) – www.guilhermo.com
7 - Refazendo o Teste
•Testar as mudanças propostas e verificar se realmente
forma efetiva
•O teste deve ser feito com os mesmos usuários testados
anteriormente e com novos usuário




Guilhermo Reis (2004) – www.guilhermo.com
Propótipos em papel realmente funcionam ?
Sim, funcionam
        • Porque a informalidade é contagiante:
                – Os usuários sentem que podem ajudar a melhorar o produto
                – Os protótipos são fáceis de serem manuseados pelo usuário
                – Os protótipos indicam claramente que o projeto ainda está numa
                fase de desenvolvimento

        • Porque são rápidos e baratos
                – Não é necessário nenhuma habilidade específica ou ferramenta cara
                para desenvolver o protótipo

        • Porque permitem a colaboração de todo o time
                – Qualquer pessoa do time de projeto, independende da sua formação
                entende e pode ajudar na construção do protótipo


Guilhermo Reis (2004) – www.guilhermo.com
Bibliografia
•Introduction to Paper Prototypes - User Exeperience 2001/2002 Conference
•The Third Dimension in Paper Prototypes http://www.upassoc.org/html/1999_archive/paper_prototypes.html
•Using Paper Prototypes to Manage Risc
http://world.std.com/~uieweb/paper.htm
•Five Paper Prototyping Tips
http://world.std.com/~uieweb/paperproto.htm
•Paper Prototypes: Still Our Favorite
http://world.std.com/~uieweb/prototyp.htm
•Prototyping Using Visio
http://www.stcsig.org/usability/newsletter/0007-prototypingvisio.html
•Paper Prototyping
http://www.infodesign.com.au/usability/paperprototypinggraphics.html
•Prototyping and Usability Testing with Visio
http://www.cognetics.com/presentations/witney/VisioPrototyping.pdf
•Evaluating Information Architecture - Argus Center for Information Architecture 2000
http://argus-acia.com/white_papers/evaluating_ia.pdf
•Paper prototyping - Carolyn Snyder, IBM 2001 - http://www-106.ibm.com.developerworks/usability/library/us-paper/
•Paper Prototyping: Stills from de Video - AlertBox, 2003 - http://www.nngroup.com/reports/prototyping/video_stills.html




Guilhermo Reis (2004) – www.guilhermo.com

Mais conteúdo relacionado

Mais procurados

Validação e Testes de software
Validação e Testes de softwareValidação e Testes de software
Validação e Testes de software
Rondinelli Mesquita
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
Gabriel Moura
 
Algoritmos e Estrutura de Dados - Aula 03
Algoritmos e Estrutura de Dados - Aula 03Algoritmos e Estrutura de Dados - Aula 03
Algoritmos e Estrutura de Dados - Aula 03
thomasdacosta
 
Apresentação do professor e disciplina de segurança da Informação
Apresentação do professor e disciplina de segurança da InformaçãoApresentação do professor e disciplina de segurança da Informação
Apresentação do professor e disciplina de segurança da Informação
Cleber Fonseca
 
Qualidade de Software
Qualidade de SoftwareQualidade de Software
Qualidade de Software
Tiago Antônio da Silva
 
Conscientização sobre a Segurança da Informação
Conscientização sobre a Segurança da InformaçãoConscientização sobre a Segurança da Informação
Conscientização sobre a Segurança da Informação
Jean Israel B. Feijó
 
O que é Interação Humano-Computador?
O que é Interação Humano-Computador?O que é Interação Humano-Computador?
O que é Interação Humano-Computador?
Sidney Roberto
 
Desenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosDesenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos Básicos
Fabio Moura Pereira
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com Angular
Elmano Cavalcanti
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
MarceloRosenbrock1
 
11 dicas para alcançar a felicidade no trabalho
11 dicas para alcançar a felicidade no trabalho11 dicas para alcançar a felicidade no trabalho
11 dicas para alcançar a felicidade no trabalho
Elisângela Oliveira
 
Introdução ao design gráfico
Introdução ao design gráficoIntrodução ao design gráfico
Introdução ao design gráfico
Rúben Quadros Ramos
 
Aula 3 - Política de Segurança da Informação (PSI)
Aula 3 - Política de Segurança da Informação (PSI)Aula 3 - Política de Segurança da Informação (PSI)
Aula 3 - Política de Segurança da Informação (PSI)
Carlos Henrique Martins da Silva
 
Metodologias de Desenvolvimento de Software
Metodologias de Desenvolvimento de SoftwareMetodologias de Desenvolvimento de Software
Metodologias de Desenvolvimento de Software
Álvaro Farias Pinheiro
 
Gerenciamento dos Riscos em Projetos
Gerenciamento dos Riscos em ProjetosGerenciamento dos Riscos em Projetos
Gerenciamento dos Riscos em Projetos
Mauro Sotille, MBA, PMP
 
Comércio Eletrônico
Comércio EletrônicoComércio Eletrônico
Comércio Eletrônico
César Augusto Pereira
 
Apresentação TCC - Gustavo de Camargo
Apresentação TCC - Gustavo de CamargoApresentação TCC - Gustavo de Camargo
Apresentação TCC - Gustavo de Camargo
Gustavo de Camargo
 
Apresentação tcc1
Apresentação tcc1Apresentação tcc1
Apresentação tcc1
Adeilson Aragão
 
Tcc ii curso análise e desenvolvimento de sistemas
Tcc ii curso análise e desenvolvimento de sistemasTcc ii curso análise e desenvolvimento de sistemas
Tcc ii curso análise e desenvolvimento de sistemas
Carlos Eduardo Kadu
 
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
Talita Pagani
 

Mais procurados (20)

Validação e Testes de software
Validação e Testes de softwareValidação e Testes de software
Validação e Testes de software
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Algoritmos e Estrutura de Dados - Aula 03
Algoritmos e Estrutura de Dados - Aula 03Algoritmos e Estrutura de Dados - Aula 03
Algoritmos e Estrutura de Dados - Aula 03
 
Apresentação do professor e disciplina de segurança da Informação
Apresentação do professor e disciplina de segurança da InformaçãoApresentação do professor e disciplina de segurança da Informação
Apresentação do professor e disciplina de segurança da Informação
 
Qualidade de Software
Qualidade de SoftwareQualidade de Software
Qualidade de Software
 
Conscientização sobre a Segurança da Informação
Conscientização sobre a Segurança da InformaçãoConscientização sobre a Segurança da Informação
Conscientização sobre a Segurança da Informação
 
O que é Interação Humano-Computador?
O que é Interação Humano-Computador?O que é Interação Humano-Computador?
O que é Interação Humano-Computador?
 
Desenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosDesenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos Básicos
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com Angular
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
11 dicas para alcançar a felicidade no trabalho
11 dicas para alcançar a felicidade no trabalho11 dicas para alcançar a felicidade no trabalho
11 dicas para alcançar a felicidade no trabalho
 
Introdução ao design gráfico
Introdução ao design gráficoIntrodução ao design gráfico
Introdução ao design gráfico
 
Aula 3 - Política de Segurança da Informação (PSI)
Aula 3 - Política de Segurança da Informação (PSI)Aula 3 - Política de Segurança da Informação (PSI)
Aula 3 - Política de Segurança da Informação (PSI)
 
Metodologias de Desenvolvimento de Software
Metodologias de Desenvolvimento de SoftwareMetodologias de Desenvolvimento de Software
Metodologias de Desenvolvimento de Software
 
Gerenciamento dos Riscos em Projetos
Gerenciamento dos Riscos em ProjetosGerenciamento dos Riscos em Projetos
Gerenciamento dos Riscos em Projetos
 
Comércio Eletrônico
Comércio EletrônicoComércio Eletrônico
Comércio Eletrônico
 
Apresentação TCC - Gustavo de Camargo
Apresentação TCC - Gustavo de CamargoApresentação TCC - Gustavo de Camargo
Apresentação TCC - Gustavo de Camargo
 
Apresentação tcc1
Apresentação tcc1Apresentação tcc1
Apresentação tcc1
 
Tcc ii curso análise e desenvolvimento de sistemas
Tcc ii curso análise e desenvolvimento de sistemasTcc ii curso análise e desenvolvimento de sistemas
Tcc ii curso análise e desenvolvimento de sistemas
 
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
 

Semelhante a Protótipos em Papel

Segurança no Desenvolvimento de Software
Segurança no Desenvolvimento de SoftwareSegurança no Desenvolvimento de Software
Segurança no Desenvolvimento de Software
Marcelo Fleury
 
COMPARANDO FRAMEWORKS DE ARQUITETURA CORPORATIVA PARA APLICAÇÃO EM E-COMMERCE
COMPARANDO FRAMEWORKS DE ARQUITETURA CORPORATIVA PARA APLICAÇÃO EM E-COMMERCECOMPARANDO FRAMEWORKS DE ARQUITETURA CORPORATIVA PARA APLICAÇÃO EM E-COMMERCE
COMPARANDO FRAMEWORKS DE ARQUITETURA CORPORATIVA PARA APLICAÇÃO EM E-COMMERCE
Fernando S. de Paulo
 
Soa Next Steps/Passos de Adoção SOA
Soa Next Steps/Passos de Adoção SOASoa Next Steps/Passos de Adoção SOA
Soa Next Steps/Passos de Adoção SOA
Sensedia
 
Uma visão da Manufatura Digital como parte do PLM - Evandro Gama - SAE 250614
Uma visão da Manufatura Digital como parte do PLM - Evandro Gama - SAE 250614Uma visão da Manufatura Digital como parte do PLM - Evandro Gama - SAE 250614
Uma visão da Manufatura Digital como parte do PLM - Evandro Gama - SAE 250614
CADWARE-TECHNOLOGY
 
Apresentação Grupo Conectt
Apresentação Grupo ConecttApresentação Grupo Conectt
Apresentação Grupo Conectt
guest4648fd
 
Gerenciamento de Projeto para Desenvolvimento de Sistema
Gerenciamento de Projeto para Desenvolvimento de SistemaGerenciamento de Projeto para Desenvolvimento de Sistema
Gerenciamento de Projeto para Desenvolvimento de Sistema
elliando dias
 
Teched Brasil 2005 - A Metodologia MSF Agile e o Visual Studio Team System
Teched Brasil 2005 -  A Metodologia MSF Agile e o Visual Studio Team SystemTeched Brasil 2005 -  A Metodologia MSF Agile e o Visual Studio Team System
Teched Brasil 2005 - A Metodologia MSF Agile e o Visual Studio Team System
Fábio Câmara
 
Projetos Digitais v.1.13 from 2013
Projetos Digitais v.1.13 from 2013Projetos Digitais v.1.13 from 2013
Projetos Digitais v.1.8 from 2010
Projetos Digitais v.1.8 from 2010Projetos Digitais v.1.8 from 2010
Enterprise Architcture: Service Oriented Architecture Case
Enterprise Architcture: Service Oriented Architecture CaseEnterprise Architcture: Service Oriented Architecture Case
Enterprise Architcture: Service Oriented Architecture Case
Werther Krause
 
O projeto saber na magneti marelli cofap
O projeto saber na magneti marelli cofapO projeto saber na magneti marelli cofap
O projeto saber na magneti marelli cofap
Sociedade Brasileira de Gestão do Conhecimento
 
BaixadaTech 2012 - Qualidade de Software
BaixadaTech 2012 - Qualidade de SoftwareBaixadaTech 2012 - Qualidade de Software
BaixadaTech 2012 - Qualidade de Software
Adriano Bertucci
 
05 - Waldemir Cambiucci - Matriz de habilidades de um arquiteto TI
05 - Waldemir Cambiucci - Matriz de habilidades de um arquiteto TI05 - Waldemir Cambiucci - Matriz de habilidades de um arquiteto TI
05 - Waldemir Cambiucci - Matriz de habilidades de um arquiteto TI
DNAD
 
Haroldo salgado araujo cv tp1
Haroldo salgado araujo cv tp1Haroldo salgado araujo cv tp1
Haroldo salgado araujo cv tp1
Haroldo Salgado
 
Prototipagem Em Papel
Prototipagem Em PapelPrototipagem Em Papel
Prototipagem Em Papel
elliando dias
 
Portais Corporativos e Marketing Digital - Consultoria WebCarioca
Portais Corporativos e Marketing Digital - Consultoria WebCariocaPortais Corporativos e Marketing Digital - Consultoria WebCarioca
Portais Corporativos e Marketing Digital - Consultoria WebCarioca
WebCarioca
 
Cv Carlos Nunes Pt Br
Cv Carlos Nunes Pt BrCv Carlos Nunes Pt Br
Cv Carlos Nunes Pt Br
guesta120fa80
 
Dheka - Apresentacao Institucional
Dheka - Apresentacao InstitucionalDheka - Apresentacao Institucional
Dheka - Apresentacao Institucional
dheka
 
PortfóLio Way Nova VersãO 2009
PortfóLio Way   Nova VersãO 2009PortfóLio Way   Nova VersãO 2009
PortfóLio Way Nova VersãO 2009
Luciana Pagnossin
 
Elo Group EscritóRio De Processos Vs EscritóRio De Projetos DiferençAs E Te...
Elo Group   EscritóRio De Processos Vs EscritóRio De Projetos DiferençAs E Te...Elo Group   EscritóRio De Processos Vs EscritóRio De Projetos DiferençAs E Te...
Elo Group EscritóRio De Processos Vs EscritóRio De Projetos DiferençAs E Te...
EloGroup
 

Semelhante a Protótipos em Papel (20)

Segurança no Desenvolvimento de Software
Segurança no Desenvolvimento de SoftwareSegurança no Desenvolvimento de Software
Segurança no Desenvolvimento de Software
 
COMPARANDO FRAMEWORKS DE ARQUITETURA CORPORATIVA PARA APLICAÇÃO EM E-COMMERCE
COMPARANDO FRAMEWORKS DE ARQUITETURA CORPORATIVA PARA APLICAÇÃO EM E-COMMERCECOMPARANDO FRAMEWORKS DE ARQUITETURA CORPORATIVA PARA APLICAÇÃO EM E-COMMERCE
COMPARANDO FRAMEWORKS DE ARQUITETURA CORPORATIVA PARA APLICAÇÃO EM E-COMMERCE
 
Soa Next Steps/Passos de Adoção SOA
Soa Next Steps/Passos de Adoção SOASoa Next Steps/Passos de Adoção SOA
Soa Next Steps/Passos de Adoção SOA
 
Uma visão da Manufatura Digital como parte do PLM - Evandro Gama - SAE 250614
Uma visão da Manufatura Digital como parte do PLM - Evandro Gama - SAE 250614Uma visão da Manufatura Digital como parte do PLM - Evandro Gama - SAE 250614
Uma visão da Manufatura Digital como parte do PLM - Evandro Gama - SAE 250614
 
Apresentação Grupo Conectt
Apresentação Grupo ConecttApresentação Grupo Conectt
Apresentação Grupo Conectt
 
Gerenciamento de Projeto para Desenvolvimento de Sistema
Gerenciamento de Projeto para Desenvolvimento de SistemaGerenciamento de Projeto para Desenvolvimento de Sistema
Gerenciamento de Projeto para Desenvolvimento de Sistema
 
Teched Brasil 2005 - A Metodologia MSF Agile e o Visual Studio Team System
Teched Brasil 2005 -  A Metodologia MSF Agile e o Visual Studio Team SystemTeched Brasil 2005 -  A Metodologia MSF Agile e o Visual Studio Team System
Teched Brasil 2005 - A Metodologia MSF Agile e o Visual Studio Team System
 
Projetos Digitais v.1.13 from 2013
Projetos Digitais v.1.13 from 2013Projetos Digitais v.1.13 from 2013
Projetos Digitais v.1.13 from 2013
 
Projetos Digitais v.1.8 from 2010
Projetos Digitais v.1.8 from 2010Projetos Digitais v.1.8 from 2010
Projetos Digitais v.1.8 from 2010
 
Enterprise Architcture: Service Oriented Architecture Case
Enterprise Architcture: Service Oriented Architecture CaseEnterprise Architcture: Service Oriented Architecture Case
Enterprise Architcture: Service Oriented Architecture Case
 
O projeto saber na magneti marelli cofap
O projeto saber na magneti marelli cofapO projeto saber na magneti marelli cofap
O projeto saber na magneti marelli cofap
 
BaixadaTech 2012 - Qualidade de Software
BaixadaTech 2012 - Qualidade de SoftwareBaixadaTech 2012 - Qualidade de Software
BaixadaTech 2012 - Qualidade de Software
 
05 - Waldemir Cambiucci - Matriz de habilidades de um arquiteto TI
05 - Waldemir Cambiucci - Matriz de habilidades de um arquiteto TI05 - Waldemir Cambiucci - Matriz de habilidades de um arquiteto TI
05 - Waldemir Cambiucci - Matriz de habilidades de um arquiteto TI
 
Haroldo salgado araujo cv tp1
Haroldo salgado araujo cv tp1Haroldo salgado araujo cv tp1
Haroldo salgado araujo cv tp1
 
Prototipagem Em Papel
Prototipagem Em PapelPrototipagem Em Papel
Prototipagem Em Papel
 
Portais Corporativos e Marketing Digital - Consultoria WebCarioca
Portais Corporativos e Marketing Digital - Consultoria WebCariocaPortais Corporativos e Marketing Digital - Consultoria WebCarioca
Portais Corporativos e Marketing Digital - Consultoria WebCarioca
 
Cv Carlos Nunes Pt Br
Cv Carlos Nunes Pt BrCv Carlos Nunes Pt Br
Cv Carlos Nunes Pt Br
 
Dheka - Apresentacao Institucional
Dheka - Apresentacao InstitucionalDheka - Apresentacao Institucional
Dheka - Apresentacao Institucional
 
PortfóLio Way Nova VersãO 2009
PortfóLio Way   Nova VersãO 2009PortfóLio Way   Nova VersãO 2009
PortfóLio Way Nova VersãO 2009
 
Elo Group EscritóRio De Processos Vs EscritóRio De Projetos DiferençAs E Te...
Elo Group   EscritóRio De Processos Vs EscritóRio De Projetos DiferençAs E Te...Elo Group   EscritóRio De Processos Vs EscritóRio De Projetos DiferençAs E Te...
Elo Group EscritóRio De Processos Vs EscritóRio De Projetos DiferençAs E Te...
 

Mais de elliando dias

Clojurescript slides
Clojurescript slidesClojurescript slides
Clojurescript slides
elliando dias
 
Why you should be excited about ClojureScript
Why you should be excited about ClojureScriptWhy you should be excited about ClojureScript
Why you should be excited about ClojureScript
elliando dias
 
Functional Programming with Immutable Data Structures
Functional Programming with Immutable Data StructuresFunctional Programming with Immutable Data Structures
Functional Programming with Immutable Data Structures
elliando dias
 
Nomenclatura e peças de container
Nomenclatura  e peças de containerNomenclatura  e peças de container
Nomenclatura e peças de container
elliando dias
 
Geometria Projetiva
Geometria ProjetivaGeometria Projetiva
Geometria Projetiva
elliando dias
 
Polyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better AgilityPolyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better Agility
elliando dias
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Libraries
elliando dias
 
How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!
elliando dias
 
Ragel talk
Ragel talkRagel talk
Ragel talk
elliando dias
 
A Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the WebA Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the Web
elliando dias
 
Introdução ao Arduino
Introdução ao ArduinoIntrodução ao Arduino
Introdução ao Arduino
elliando dias
 
Minicurso arduino
Minicurso arduinoMinicurso arduino
Minicurso arduino
elliando dias
 
Incanter Data Sorcery
Incanter Data SorceryIncanter Data Sorcery
Incanter Data Sorcery
elliando dias
 
Rango
RangoRango
Fab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine DesignFab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine Design
elliando dias
 
The Digital Revolution: Machines that makes
The Digital Revolution: Machines that makesThe Digital Revolution: Machines that makes
The Digital Revolution: Machines that makes
elliando dias
 
Hadoop + Clojure
Hadoop + ClojureHadoop + Clojure
Hadoop + Clojure
elliando dias
 
Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.
elliando dias
 
Hadoop and Hive Development at Facebook
Hadoop and Hive Development at FacebookHadoop and Hive Development at Facebook
Hadoop and Hive Development at Facebook
elliando dias
 
Multi-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case StudyMulti-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case Study
elliando dias
 

Mais de elliando dias (20)

Clojurescript slides
Clojurescript slidesClojurescript slides
Clojurescript slides
 
Why you should be excited about ClojureScript
Why you should be excited about ClojureScriptWhy you should be excited about ClojureScript
Why you should be excited about ClojureScript
 
Functional Programming with Immutable Data Structures
Functional Programming with Immutable Data StructuresFunctional Programming with Immutable Data Structures
Functional Programming with Immutable Data Structures
 
Nomenclatura e peças de container
Nomenclatura  e peças de containerNomenclatura  e peças de container
Nomenclatura e peças de container
 
Geometria Projetiva
Geometria ProjetivaGeometria Projetiva
Geometria Projetiva
 
Polyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better AgilityPolyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better Agility
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Libraries
 
How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!
 
Ragel talk
Ragel talkRagel talk
Ragel talk
 
A Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the WebA Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the Web
 
Introdução ao Arduino
Introdução ao ArduinoIntrodução ao Arduino
Introdução ao Arduino
 
Minicurso arduino
Minicurso arduinoMinicurso arduino
Minicurso arduino
 
Incanter Data Sorcery
Incanter Data SorceryIncanter Data Sorcery
Incanter Data Sorcery
 
Rango
RangoRango
Rango
 
Fab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine DesignFab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine Design
 
The Digital Revolution: Machines that makes
The Digital Revolution: Machines that makesThe Digital Revolution: Machines that makes
The Digital Revolution: Machines that makes
 
Hadoop + Clojure
Hadoop + ClojureHadoop + Clojure
Hadoop + Clojure
 
Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.
 
Hadoop and Hive Development at Facebook
Hadoop and Hive Development at FacebookHadoop and Hive Development at Facebook
Hadoop and Hive Development at Facebook
 
Multi-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case StudyMulti-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case Study
 

Protótipos em Papel

  • 1. Protótipos em Papel (Paper Prototype) Técnicas de prototipação rápidas Guilhermo Almeida dos Reis reis@guilhermo.com www.guilhermo.com Novembro / 2004
  • 2. Metodologia de Desenvolvimento de Websites Modelo de negócios Visão – Missão - Objetivos Operação e Manutenção Modelagem Conceitual Implementação Publicação Integração Estratégia Conteúdo Testes Arquitetura de Aceite Piloto Informação Look & Feel Arquitetura + Projeto de IT Back office infra-estrutura, parcerias,etc Gerenciamento de Projetos Boas Práticas / Guideline Guilhermo Reis (2004) – www.guilhermo.com Melly, M.
  • 3. Prototipação e o ciclo de design Baixa Média Alta Fidelidade Fidelidade Fidelidade Fase do Definição de Especificação da Lançamento do Produto Processo de Requerimentos Arquitetura de Design Informação Tipo de Esquemas feitos a Detalhado e com Realístico protótipo mão recursos de interação Ferramentas Material de Escritório Word Dreamweaver Power Point Visual Basic Visio HTML Guilhermo Reis (2004) – www.guilhermo.com
  • 4. Exemplos de protótipos Visão Abstrata Alta Fidelidade http://www.argus-acia.com/ Média Fidelidade Evaluating Information Architecture - Argus Center for Information Architecture 2000 Baixa Fidelidade http://argus-acia.com/white_papers/evaluating_ia.pdf Guilhermo Reis (2004) – www.guilhermo.com
  • 5. Protótipos de Alta Fidelidade X Baixa Fidelidade Protótipos de Alta Fidelidade Protótipos de Baixa Fidelidade •Apoiam a avaliação de todos os •Não apoiam a avaliação de todos os detalhes de um design detalhes de um design, como: •Necessitam mais tempo e recursos • Interações da interface com o usuário para serem construídos • Layout e formato do produto • Representações dinâmicas • Tempo de resposta do sistema •Apoiam a avaliação do modelo conceitual usado no design •Necessitam de pouco tempo e recursos para serem construídos Guilhermo Reis (2004) – www.guilhermo.com
  • 6. O que são Protótipos em Papel ? •Mock-up ou representações de um design. •É uma maneira para avaliar um design através de um teste com usuários. •Ferramenta de comunicação para facilitar o entendimento de um design. •São feitos através de: • Esquemas feitos a mão • Foto-copias • Recortes de pedaços de papel • Uma combinação criativa de qualquer um dos itens acima Guilhermo Reis (2004) – www.guilhermo.com
  • 7. Porque usar Protótipos em Papel ? •Explorar - Permite testar facilmente diferentes idéias •Comunicar - Apresenta as idéias de uma forma que pode ser entendida facilmente •Colaborar - Facilita que todo o time de design construa e avalie o protótipo •Validar - Determina a eficiência dos elementos de design e do fluxo de navegação Guilhermo Reis (2004) – www.guilhermo.com
  • 8. Quando usar protótipos em papel ? Nos primeiros estágios do processo de design, porque: • 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 Guilhermo Reis (2004) – www.guilhermo.com
  • 9. Vantagens dos protótipos em papel •Requerem poucos recursos para serem contruídos •São construídos com ferramentas simples, que não requerm habilidades específicas •Permite que as idéias sejam testadas nos primeiros estágios do processo de design •Facilita a colaboração entre os membros do time •Os protótipos são construídos rapidamente •Identifica os maiores problemas de usabilidade de um projeto Guilhermo Reis (2004) – www.guilhermo.com
  • 10. O que pode ser avaliado com protótipos em papel ? •Metáforas conceituais •Navegação • Arquitetura da Informação • Fluxo de telas • Layout e agrupamento dos elementos •Conteúdo • Terminologia e linguagem • Rótulos, botões e controles Guilhermo Reis (2004) – www.guilhermo.com
  • 11. Passos para criar um Protótipo em Papel 1- Identificar o que prototipar 2- Criar o protótipo 3- Planejar o teste 4- Conduzir o teste com o usuário 5- Analizar os resultados 6- Modificar o design 7- Refazer o teste Guilhermo Reis (2004) – www.guilhermo.com
  • 12. 1 - Identificando o que prototipar •Entenda quais são os requerimentos 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 Guilhermo Reis (2004) – www.guilhermo.com
  • 13. Quais elementos incluir no Protótipo em Papel ? •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 Guilhermo Reis (2004) – www.guilhermo.com
  • 14. Tipos de Protótipos em Papel Protótipo Horizontal Protótipo Vertical Protótipo T •Representa a arquitetura de •Representa uma pequena •Representa toda arquitetura informação em amplitude área do projeto com de informação em aplitude e profundidade de interações e profundidade •Tem pouca ou nenhuma funcionalidades funcionalidade ou conteúdo •Combina as características em profundidade •Usado para avaliar o dos protótipos verticais e modelo de intereção de uma horizontais •Usado para obter área do projeto impressões gerais do design •Usado para avaliar a arquitetura de informação em algumas áreas detalhadas •Permite generalizar as observações feitas para as demais áreas Guilhermo Reis (2004) – www.guilhermo.com
  • 15. 2 - Criando o Protótipo •Fazer brainstorming sobre as idéias e conceitos do projeto •Formar times com pessoas de diferentes áreas da empresa (máximo de 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 Guilhermo Reis (2004) – www.guilhermo.com
  • 16. Ferramentas necessárias •Papel sulfite •Canetas coloridas •Tesoura •Post-it •Durex •Quaisquer outros materiais de escritório E muita criatividade ! Guilhermo Reis (2004) – www.guilhermo.com
  • 17. Exemplos de como criar protótipos Guilhermo Reis (2004) – www.guilhermo.com
  • 18. Exemplos de como criar protótipos Paper prototype da janela File Setup do Microsoft Word Carrinho de compra de um site de e-commerce Paper prototyping - IBM 2001 http://www-106.ibm.com.br/developerworks/usability/library/us-paper/ Guilhermo Reis (2004) – www.guilhermo.com
  • 19. Exemplos de como criar protótipos Telefone Celular Quiosque de Auto-Atendimento Paper Prototyping: Stills from de Video, AlertBox, 2003 http://www.nngroup.com/reports/prototyping/video_stills.html Guilhermo Reis (2004) – www.guilhermo.com
  • 20. Outras ferramentas Power Point / Word / Visio Vantagens • Softwares familiares - baixa curva de aprendizagem • Permite fazer modificações facilmente sem ter de redesenhar toda a página • Boa qualidade de impressão auxiliar discussões e testes Desvantagens • Não permite fazer mudanças durante um teste (“on the fly”) sem que estas pareçam diferentes do restante do desenho. Guilhermo Reis (2004) – www.guilhermo.com
  • 21. Protótipos de Papel em 3D •Destinado a representar um hardware físico •Usado quando se deseja avaliar a interação com um aparelho físico como telefones celulares, caixas eletrônicos, aparelhos de vídeo cassete, etc. Computador de bordo para taxi Máquina de reciclagem de latas dealumínio Simo Sade and Katja Battarbee, University of Art and Design Helsinki Terminal público www.apassoc.org/1999_archive/paper_prototypes.html de fax e e-mail Guilhermo Reis (2004) – www.guilhermo.com
  • 22. 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 perfís 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 usuabilidade 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 Guilhermo Reis (2004) – www.guilhermo.com
  • 23. 4 - Conduzindo o teste com o usuário O teste com protótipo em papel é semelhante a qualquer outro teste de usabilidade de produto. • Peça para o usuário pensar em voz alta • Deixe o usuário interagir com o produto e realizar as tarefas Guilhermo Reis (2004) – www.guilhermo.com
  • 24. Pessoas envolvidas com o teste Existem normalmente quatro pessoas envolvidas com o teste: • O Facilitador • A pessoa que representa o “Computador” • O Usuário • Os Observadores Facilitador Computador Usuário Paper Prototyping: Stills from de Video, AlertBox, 2003 http://www.nngroup.com/reports/prototyping/video_stills.html Organização de um laboratório de usabilidade para uma sessão de paper prototype Guilhermo Reis (2004) – www.guilhermo.com
  • 25. O Facilitador •É usualmente um especialita em usabilidade •Auxilia o usuário a interajir com o protótipo • Explica ao usuário a que se destina o teste • Informar ao usuário que o que sendo testado é o sistema, não o usuário • Passa ao usuário as instruções das tarefas a realizar • Acompanha e intervem quando necessário •Observa e anota como o usuário realizou a tarefa •Senta-se próximo ao usuário Guilhermo Reis (2004) – www.guilhermo.com
  • 26. O “Computador” •Deve ser uma pessoa familiarizada com o protótipo. •Apresenta as telas conforme o usuário interaje com o protótipo. •Deve sentar-se de frente ao usuário. •Dicas: • Deve ter um postura neutra e quieta durante toda a sessão de teste. Manter uma linguagem corporal neutra. Não manifestar emoções. • Manter as demais folhas do protótipo fora do alcance da visão do usuário. • Manter a mesma pessoa representando o computador em todas as sessões de teste. Guilhermo Reis (2004) – www.guilhermo.com
  • 27. O Usuário •Interaje com o protótipo • Tenta realizar as tarefas • 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 Paper Prototyping: Stills from de Video, AlertBox, 2003 http://www.nngroup.com/reports/prototyping/video_stills.html Guilhermo Reis (2004) – www.guilhermo.com
  • 28. Os Observadores •Ter no máximo dois observadores na sala de teste •Faça um rodízio de observadores caso tenha mais de dois • Para reduzir barulho, interrupção e distrações • O usuário sente-se mais confortável com poucos observadores • É dificil observar o teste com mais de dois observadores •Compartilha suas anotações com o Facilitador ao final de cada sessão •Devem ter cópias do protótipo Guilhermo Reis (2004) – www.guilhermo.com
  • 29. Conduzindo o teste com o usuário Antes de começar o teste o Facilitador deve apresentar o projeto ao usuário, explicando com ele deve interajir com o protótipo • Explicar de que se trata-se o projeto • Mencionar que o projeto está numa fase inicial • Explicar que está se testando o sistema não o usuário • Explicar ao usuário que ele deve executar as tarefas como se estivesse em um computador – Explicar que o usuário deve apontar os elementos que deseja clicar – Explicar que o usuário deve escrever nos campos o que normalmente escreveria se estivesse usando o computador • Solicitar ao usuário que ele fale em voz alto o que está pensando sobre o sistema e o que pretende fazer • Dar uma tarefa de cada vez ao usuário e ter ceteza que ele a entendeu Guilhermo Reis (2004) – www.guilhermo.com
  • 30. Dicas para condução do teste •Minimizar as obstruções dos corpos • Posicionar o Facilitador, o “Computador” e o Usuário de forma que eles não cubram o protótipo •Definir a área onde devem ficar as folhas do protótipo • Fazer uma marca na mesa para que as folhas sejam sempre colocadas na mesma posição. Isto facilita a filmagem. •Manter o protótipo fora do alcance dos olhos do usuário • Os usuários facilmente se distraem ou desejam antecipar suas ações. Por isto o protótipo deve ficar embaixo da mesa ou em outro lugar fora do alcance de seus olhos. •Preveja o inesperado • Tenha um kit para fazer modificações de emergência “on the fly”. Guilhermo Reis (2004) – www.guilhermo.com
  • 31. 5 - Analisando os resultados Observar: • Modelo mental – 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, desespero ? • Conteúdo e linguagem – Está apropriado o uso das palavras e da linguagem ? – Existem links, termos e rótulos que não são claros ? • Agrupamento das informações – A arquitetura da informação está clara ? – O menu está apropriado ? Guilhermo Reis (2004) – www.guilhermo.com
  • 32. Analisando os resultados •Agrupe as observações semelhantes •Priorize as observações • Quais são as mais importantes ou críticas ? • Quais são viáveis ? •Faça um relatório • Recomenda-se fazer este relatório em até 24 horas após o final do teste Guilhermo Reis (2004) – www.guilhermo.com
  • 33. 6 - Modificando o Design •Fazer brainstorm com o time para avaliar as modificações que podem ser feitas •Considerar a vialibilidade e o impacto das mudanças • Limitações técnicas • Tempo e dinheiro para implementar • Criticidade dos problemas observados •Realizar as mudanças do design que tenham o melhor custo/benefício Guilhermo Reis (2004) – www.guilhermo.com
  • 34. 7 - Refazendo o Teste •Testar as mudanças propostas e verificar se realmente forma efetiva •O teste deve ser feito com os mesmos usuários testados anteriormente e com novos usuário Guilhermo Reis (2004) – www.guilhermo.com
  • 35. Propótipos em papel realmente funcionam ? Sim, funcionam • Porque a informalidade é contagiante: – Os usuários sentem que podem ajudar a melhorar o produto – Os protótipos são fáceis de serem manuseados pelo usuário – Os protótipos indicam claramente que o projeto ainda está numa fase de desenvolvimento • Porque são rápidos e baratos – Não é necessário nenhuma habilidade específica ou ferramenta cara para desenvolver o protótipo • Porque permitem a colaboração de todo o time – Qualquer pessoa do time de projeto, independende da sua formação entende e pode ajudar na construção do protótipo Guilhermo Reis (2004) – www.guilhermo.com
  • 36. Bibliografia •Introduction to Paper Prototypes - User Exeperience 2001/2002 Conference •The Third Dimension in Paper Prototypes http://www.upassoc.org/html/1999_archive/paper_prototypes.html •Using Paper Prototypes to Manage Risc http://world.std.com/~uieweb/paper.htm •Five Paper Prototyping Tips http://world.std.com/~uieweb/paperproto.htm •Paper Prototypes: Still Our Favorite http://world.std.com/~uieweb/prototyp.htm •Prototyping Using Visio http://www.stcsig.org/usability/newsletter/0007-prototypingvisio.html •Paper Prototyping http://www.infodesign.com.au/usability/paperprototypinggraphics.html •Prototyping and Usability Testing with Visio http://www.cognetics.com/presentations/witney/VisioPrototyping.pdf •Evaluating Information Architecture - Argus Center for Information Architecture 2000 http://argus-acia.com/white_papers/evaluating_ia.pdf •Paper prototyping - Carolyn Snyder, IBM 2001 - http://www-106.ibm.com.developerworks/usability/library/us-paper/ •Paper Prototyping: Stills from de Video - AlertBox, 2003 - http://www.nngroup.com/reports/prototyping/video_stills.html Guilhermo Reis (2004) – www.guilhermo.com