SlideShare uma empresa Scribd logo
Prototipagem em Papel
Desenvolver e testar interfaces antes de   Ivo Gomes
                  iniciar a programação
                                                       1
Novos desafios

• Interfaces cada vez mais complexos;


• Novos desafios através do uso de Rich Internet Applications:


• Prazos de desenvolvimento cada vez mais curtos;


• É necessário usar uma metodologia mais simples e rápida para modelação de
  interfaces.




                                                                              2
Protótipos?

• Usados para identificar as interacções em rascunho e o design dos ecrãs;


• Podem ser feitos testes e simulações rápidas;


• Servem para transmitir aos designers/developers os ecrãs e/ou as
  funcionalidades que o interface deverá ter, bem como os fluxos de informação;


• Podem ser concebidos em papel ou outros formatos (PowerPoint/Keynote,
  Visio/OmniGraffle, etc...)




                                                                                 3
Porquê em Papel e não noutro formato?

• Porque em papel dá para apagar e voltar a escrever por cima, tirar notas,
  dobrar, recortar... (mesmo durante os testes de usabilidade);


• É mais rápido de desenhar do que usando qualquer software;


• É mais fácil transpor as ideias directamente para o papel;


• É mais fácil envolver outras pessoas no desenvolvimento dos protótipos;


• Os utilizadores conseguem ser mais críticos ao olharem para um protótipo em
  papel do que para uma página com um aspecto mais formal.




                                                                                4
Poupar dinheiro usando protótipos

• As maiores melhorias no interface de um produto são obtidas através da
  recolha de dados de usabilidade nas fases iniciais do seu desenvolvimento.


• Os benefícios da aplicação de metodologias de usabilidade nas fases iniciais é
  10 vezes maior do que se for apenas utilizada numa fase posterior (para
  correcção de erros e alteração de elementos no interface).


• É mais barato alterar um produto na sua fase inicial do que fazer alterações a
  um produto acabado. Estima-se que seja 100 vezes mais barato efectuar
  alterações antes de se começar a programar do que esperar que todo o
  desenvolvimento tenha sido efectuado.



                                                Jakob Nielsen; Alertbox, 14 de Abril de 2003


                                                                                               5
Vantagens dos protótipos no geral

A prototipagem é particularmente útil para recolher dados sobre:


• Conceitos e terminologia;


• Navegação;


• Conteúdo;


• Layout da página;


• Funcionalidade.




                                                                   6
Vantagens dos
Protótipos em Papel

 • Testar o layout antes de
   começar a programar;


 • Fazer alterações
   rapidamente;


 • Eliminar variáveis
   tecnológicas nos testes de
   usabilidade.
Vantagens dos
Protótipos em Papel

 • Baixo custo de
   implementação;


 • Documentação rápida.
Desvantagens dos Protótipos em Papel

• Difícil “copiar” o comportamento de alguns elementos do interface: scrollbars,
  transmissão de informação através do uso de cores, animações, Rich
  Applications, etc...


• Durante a concepção e testes aos protótipos, não é escrita nenhuma linha de
  código, o que pode atrasar o tempo total disponível para o projecto;


• O aspecto dos ecrãs pode fazer com que os utilizadores (e o cliente) sinta que
  é um método pouco profissional;


• Não permite encontrar todo o tipo de problemas de usabilidade.




                                                                                   9
Em que fases se pode aplicar a prototipagem?

• Podem-se criar e testar protótipos em qualquer fase do processo de
  desenvolvimento;


• Alterações nas fases iniciais são mais bem sucedidas e mais baratas do que
  correcções numa fase posterior;


• Podem fazer-se protótipos com base num interface já existente (para testar a
  implementação de novas funcionalidades).




                                                                                 10
Prototipagem de Rich
Internet Applications

Como mostrar em papel as
interacções deste tipo de
aplicações web?
Prototipagem de Rich Internet Applications

• O objectivo de testar um protótipo é o de criar um interface usável. Se for
  difícil de copiar o comportamento de algum efeito no papel, isso pode
  significar que o próprio efeito no site não será muito usável.


• Muitas vezes são usadas novas tecnologias, não necessariamente por serem
  mais usáveis, mas mais porque são cool. O objectivo da prototipagem não é
  testar se o site é cool, mas sim se os utilizadores conseguem realizar as suas
  tarefas.


• Os protótipos não precisam de incorporar todos os elementos da página.
  Apenas necessitam de capturar a funcionalidade do site e fornecer as
  informações correctas e dentro do mesmo contexto.




                                                                                   12
Prototipagem de Rich Internet Applications




                                             13
Prototipagem de Rich Internet Applications




                                             14
Prototipagem de Rich Internet Applications




                                             15
Prototipagem de Rich Internet Applications




                                             16
Case Study

Como o uso de protótipos em
papel pode ser um êxito no
desenho de uma nova aplicação
O problema (deles)

• Uma empresa tinha a necessidade de informatizar todos os seus 9
  departamentos que trocavam vários tipos de informação entre si;


• A informação era escrita em ficheiros XLS e DOC, impressa e enviada para
  outro departamento, que, por sua vez, copiava os dados para o computador,
  alterava, imprimia e passava para outro departamento;


• Relatórios financeiros e de contabilidade feitos à mão em folhas de cálculo;


• Necessidade de uma aplicação web que permitisse eliminar passos
  desnecessários, gerar relatórios automaticamente, ser fácil de usar.




                                                                                18
O problema (nosso)

• Como convencer a empresa da necessidade de um estudo elaborado antes de
  implementar uma solução qualquer?


• Como explicar a importância do uso de entrevistas e protótipos em papel
  antes mesmo de começarmos a desenvolver a solução?


• Receio da reacção dos utilizadores e das chefias perante a apresentação de
  protótipos de baixa resolução e de aspecto tosco (em papel e desenhados à
  mão);




                                                                              19
Entrevistas com os
colaboradores

• Foram feitas entrevistas com os
  colaboradores dos 9
  departamentos;


• Recolha de dados sobre as
  tarefas, procedimentos,
  workflows, dependências e
  métodos de trabalho;
Elaboração de Protótipos em Papel

• Com base nos resultados das entrevistas, foram elaborados protótipos em
  papel de uma futura aplicação web que permitisse informatizar todos os
  processos identificados;




                                                                            21
Testes de Usabilidade

• Testes de usabilidade com todos os 9 departamentos usando os protótipos
  em papel;


• Durante os testes foram identificados possíveis problemas de usabilidade,
  correcção de alguns ecrãs, confirmação (ou não) da qualidade/precisão da
  informação disponibilizada, etc...


• Todos os participantes nas entrevistas estiveram presentes nos testes de
  usabilidade e deram sugestões para alterar alguns ecrãs.




                                                                             24
Conhecer a linguagem dos utilizadores




                                        25
Passagem para a equipa de desenvolvimento

• Após as correcções aos protótipos, foram desenhados wireframes (protótipos
  de resolução superior aos desenhos no papel) para passar à equipa de
  desenvolvimento;


• Através desta metodologia foi possível testar todos os ecrãs antes mesmo de
  se começar a programar;


• Redução da probabilidade de possíveis correcções ao interface no futuro;


• Satisfação elevada dos utilizadores por sentirem que também ajudaram a
  desenvolver o software que estão a usar e que foi feito “por e para eles”.




                                                                                26
Com Protótipos em Papel...

• Poupámos tempo e dinheiro;


• Garantimos um nível elevado de satisfação dos utilizadores e diminuímos a
  probabilidade de ter que efectuar correcções no futuro;


• Fornecemos à equipa de desenvolvimento um conjunto de ecrãs e
  especificações que lhes permitiram desenvolver todo o interface tendo em
  conta as recomendações dos seus reais utilizadores;


• Temos um método simples e rápido para desenhar e testar interfaces.




                                                                              28
Obrigado pela vossa
                      www.ivogomes.com
           atenção!
http://www.ivogomes.com/apresentacoes/
prototipagem-em-papel.pdf

Mais conteúdo relacionado

Mais procurados

Conceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeConceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidade
Nécio de Lima Veras
 
Metáforas em interfaces digitais
Metáforas em interfaces digitaisMetáforas em interfaces digitais
Metáforas em interfaces digitais
Rodrigo Freese Gonzatto
 
Projeto de Interfaces - Aula 01
Projeto de Interfaces - Aula 01Projeto de Interfaces - Aula 01
Projeto de Interfaces - Aula 01
Carlos Rosemberg
 
Avaliação de Interface
Avaliação de InterfaceAvaliação de Interface
Avaliação de Interface
Claudio Diniz - Designer Gráfico
 
Usabilidade - Metas, Principios e Heuristicas
Usabilidade -  Metas, Principios e HeuristicasUsabilidade -  Metas, Principios e Heuristicas
Usabilidade - Metas, Principios e Heuristicas
Lidiane Dos Santos Carvalho
 
Interação Homem Computador Aula 02
Interação Homem Computador Aula 02Interação Homem Computador Aula 02
Interação Homem Computador Aula 02
igoroliveiracosta
 
Introdução a IHC
Introdução a IHCIntrodução a IHC
Introdução a IHC
Rodrigo Rodrigues
 
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHCAula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
André Constantino da Silva
 
Usabilidade Aula-05. Processos: heuristicas
Usabilidade Aula-05. Processos: heuristicasUsabilidade Aula-05. Processos: heuristicas
Usabilidade Aula-05. Processos: heuristicas
Alan Vasconcelos
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
Wellington Oliveira
 
Design de Interação - Método de Inspeção Semiótica
Design de Interação - Método de Inspeção SemióticaDesign de Interação - Método de Inspeção Semiótica
Design de Interação - Método de Inspeção Semiótica
Marcello Cardoso
 
Aula3 engenharia requisitos
Aula3 engenharia requisitosAula3 engenharia requisitos
Aula3 engenharia requisitos
Computação Depressão
 
RELATÓRIO TÉCNICO DE AVALIAÇÃO DE USABILIDADE OBJETO DA AVALIAÇÃO: Bb
RELATÓRIO TÉCNICO DE AVALIAÇÃO DE USABILIDADE OBJETO DA AVALIAÇÃO: BbRELATÓRIO TÉCNICO DE AVALIAÇÃO DE USABILIDADE OBJETO DA AVALIAÇÃO: Bb
RELATÓRIO TÉCNICO DE AVALIAÇÃO DE USABILIDADE OBJETO DA AVALIAÇÃO: Bb
rafahreis
 
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
Rodrigo Freese Gonzatto
 
Planilhas eletronicas (2)
Planilhas eletronicas (2)Planilhas eletronicas (2)
Planilhas eletronicas (2)
Wellington Bolzan
 
Modelos de processos de software
Modelos de processos de softwareModelos de processos de software
Modelos de processos de software
Nécio de Lima Veras
 
Palestra - Testes de Usabilidade
Palestra - Testes de UsabilidadePalestra - Testes de Usabilidade
Palestra - Testes de Usabilidade
Luiz Agner
 
Heurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na webHeurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na web
Daniel Brandão
 
2009 1 - sistemas operacionais - aula 3 - processos
2009 1 - sistemas operacionais - aula 3 - processos2009 1 - sistemas operacionais - aula 3 - processos
2009 1 - sistemas operacionais - aula 3 - processos
Computação Depressão
 
Prototipação de software
Prototipação de softwarePrototipação de software
Prototipação de software
Marcio Costa
 

Mais procurados (20)

Conceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeConceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidade
 
Metáforas em interfaces digitais
Metáforas em interfaces digitaisMetáforas em interfaces digitais
Metáforas em interfaces digitais
 
Projeto de Interfaces - Aula 01
Projeto de Interfaces - Aula 01Projeto de Interfaces - Aula 01
Projeto de Interfaces - Aula 01
 
Avaliação de Interface
Avaliação de InterfaceAvaliação de Interface
Avaliação de Interface
 
Usabilidade - Metas, Principios e Heuristicas
Usabilidade -  Metas, Principios e HeuristicasUsabilidade -  Metas, Principios e Heuristicas
Usabilidade - Metas, Principios e Heuristicas
 
Interação Homem Computador Aula 02
Interação Homem Computador Aula 02Interação Homem Computador Aula 02
Interação Homem Computador Aula 02
 
Introdução a IHC
Introdução a IHCIntrodução a IHC
Introdução a IHC
 
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHCAula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
 
Usabilidade Aula-05. Processos: heuristicas
Usabilidade Aula-05. Processos: heuristicasUsabilidade Aula-05. Processos: heuristicas
Usabilidade Aula-05. Processos: heuristicas
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
 
Design de Interação - Método de Inspeção Semiótica
Design de Interação - Método de Inspeção SemióticaDesign de Interação - Método de Inspeção Semiótica
Design de Interação - Método de Inspeção Semiótica
 
Aula3 engenharia requisitos
Aula3 engenharia requisitosAula3 engenharia requisitos
Aula3 engenharia requisitos
 
RELATÓRIO TÉCNICO DE AVALIAÇÃO DE USABILIDADE OBJETO DA AVALIAÇÃO: Bb
RELATÓRIO TÉCNICO DE AVALIAÇÃO DE USABILIDADE OBJETO DA AVALIAÇÃO: BbRELATÓRIO TÉCNICO DE AVALIAÇÃO DE USABILIDADE OBJETO DA AVALIAÇÃO: Bb
RELATÓRIO TÉCNICO DE AVALIAÇÃO DE USABILIDADE OBJETO DA AVALIAÇÃO: Bb
 
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
O que é isto, a Interação? (Design de Interação e Interação Humano-Computador)
 
Planilhas eletronicas (2)
Planilhas eletronicas (2)Planilhas eletronicas (2)
Planilhas eletronicas (2)
 
Modelos de processos de software
Modelos de processos de softwareModelos de processos de software
Modelos de processos de software
 
Palestra - Testes de Usabilidade
Palestra - Testes de UsabilidadePalestra - Testes de Usabilidade
Palestra - Testes de Usabilidade
 
Heurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na webHeurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na web
 
2009 1 - sistemas operacionais - aula 3 - processos
2009 1 - sistemas operacionais - aula 3 - processos2009 1 - sistemas operacionais - aula 3 - processos
2009 1 - sistemas operacionais - aula 3 - processos
 
Prototipação de software
Prototipação de softwarePrototipação de software
Prototipação de software
 

Destaque

Analise Exploratoria Card Sorting
Analise Exploratoria Card SortingAnalise Exploratoria Card Sorting
Analise Exploratoria Card Sorting
Luiz Agner
 
Digital focado nas pessoas: Metodologia e técnicas de pesquisa acessíveis ao ...
Digital focado nas pessoas: Metodologia e técnicas de pesquisa acessíveis ao ...Digital focado nas pessoas: Metodologia e técnicas de pesquisa acessíveis ao ...
Digital focado nas pessoas: Metodologia e técnicas de pesquisa acessíveis ao ...
Voël
 
Prototipagem em Papel - Oficina
Prototipagem em Papel - OficinaPrototipagem em Papel - Oficina
Prototipagem em Papel - Oficina
Ltia Unesp
 
Workshop - Card Sorting
Workshop - Card SortingWorkshop - Card Sorting
Workshop - Card Sorting
Voël
 
Workshop Mapa de tarefas e Prototipação
Workshop Mapa de tarefas e PrototipaçãoWorkshop Mapa de tarefas e Prototipação
Workshop Mapa de tarefas e Prototipação
Karine Drumond
 
Di karine e leandro 2011 parte i
Di   karine e leandro 2011 parte iDi   karine e leandro 2011 parte i
Di karine e leandro 2011 parte i
Karine Drumond
 
Guia para Cardsorting
Guia para CardsortingGuia para Cardsorting
Guia para Cardsorting
Karine Drumond
 
Trabalho es prototipagem
Trabalho es   prototipagemTrabalho es   prototipagem
Trabalho es prototipagem
Dionei Jr Mariño
 
O Diferencial e as Tendências do Design de Interação
O Diferencial e as Tendências do Design de InteraçãoO Diferencial e as Tendências do Design de Interação
O Diferencial e as Tendências do Design de Interação
UTFPR
 
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
 
Prototipagem de Sistemas Digitais - Introdução a VHDL
Prototipagem de Sistemas Digitais - Introdução a VHDLPrototipagem de Sistemas Digitais - Introdução a VHDL
Prototipagem de Sistemas Digitais - Introdução a VHDL
Brito Filho
 
Workshop - Personas
Workshop - PersonasWorkshop - Personas
Workshop - Personas
Voël
 
Protótipos em Papel
Protótipos em PapelProtótipos em Papel
Protótipos em Papel
elliando dias
 
Curso Prototipagem de ideias e projetos - Material Resumido
Curso Prototipagem de ideias e projetos - Material ResumidoCurso Prototipagem de ideias e projetos - Material Resumido
Curso Prototipagem de ideias e projetos - Material Resumido
Tatiane Carrelli
 
Importancia da Prototipagem
Importancia da PrototipagemImportancia da Prototipagem
Importancia da Prototipagem
Erico Fileno
 
Design de Interação parte II
Design de Interação parte IIDesign de Interação parte II
Design de Interação parte II
Karine Drumond
 
Técnica de prototipação - Aula 1
Técnica de prototipação - Aula 1Técnica de prototipação - Aula 1
Técnica de prototipação - Aula 1
Guilherme Torres
 
Cardsorting - Palestra (atualizada)
Cardsorting - Palestra (atualizada) Cardsorting - Palestra (atualizada)
Cardsorting - Palestra (atualizada)
Luiz Agner
 
Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)
Luiz Agner
 
Prototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta FidelidadePrototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta Fidelidade
Erico Fileno
 

Destaque (20)

Analise Exploratoria Card Sorting
Analise Exploratoria Card SortingAnalise Exploratoria Card Sorting
Analise Exploratoria Card Sorting
 
Digital focado nas pessoas: Metodologia e técnicas de pesquisa acessíveis ao ...
Digital focado nas pessoas: Metodologia e técnicas de pesquisa acessíveis ao ...Digital focado nas pessoas: Metodologia e técnicas de pesquisa acessíveis ao ...
Digital focado nas pessoas: Metodologia e técnicas de pesquisa acessíveis ao ...
 
Prototipagem em Papel - Oficina
Prototipagem em Papel - OficinaPrototipagem em Papel - Oficina
Prototipagem em Papel - Oficina
 
Workshop - Card Sorting
Workshop - Card SortingWorkshop - Card Sorting
Workshop - Card Sorting
 
Workshop Mapa de tarefas e Prototipação
Workshop Mapa de tarefas e PrototipaçãoWorkshop Mapa de tarefas e Prototipação
Workshop Mapa de tarefas e Prototipação
 
Di karine e leandro 2011 parte i
Di   karine e leandro 2011 parte iDi   karine e leandro 2011 parte i
Di karine e leandro 2011 parte i
 
Guia para Cardsorting
Guia para CardsortingGuia para Cardsorting
Guia para Cardsorting
 
Trabalho es prototipagem
Trabalho es   prototipagemTrabalho es   prototipagem
Trabalho es prototipagem
 
O Diferencial e as Tendências do Design de Interação
O Diferencial e as Tendências do Design de InteraçãoO Diferencial e as Tendências do Design de Interação
O Diferencial e as Tendências do Design de Interação
 
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 ...
 
Prototipagem de Sistemas Digitais - Introdução a VHDL
Prototipagem de Sistemas Digitais - Introdução a VHDLPrototipagem de Sistemas Digitais - Introdução a VHDL
Prototipagem de Sistemas Digitais - Introdução a VHDL
 
Workshop - Personas
Workshop - PersonasWorkshop - Personas
Workshop - Personas
 
Protótipos em Papel
Protótipos em PapelProtótipos em Papel
Protótipos em Papel
 
Curso Prototipagem de ideias e projetos - Material Resumido
Curso Prototipagem de ideias e projetos - Material ResumidoCurso Prototipagem de ideias e projetos - Material Resumido
Curso Prototipagem de ideias e projetos - Material Resumido
 
Importancia da Prototipagem
Importancia da PrototipagemImportancia da Prototipagem
Importancia da Prototipagem
 
Design de Interação parte II
Design de Interação parte IIDesign de Interação parte II
Design de Interação parte II
 
Técnica de prototipação - Aula 1
Técnica de prototipação - Aula 1Técnica de prototipação - Aula 1
Técnica de prototipação - Aula 1
 
Cardsorting - Palestra (atualizada)
Cardsorting - Palestra (atualizada) Cardsorting - Palestra (atualizada)
Cardsorting - Palestra (atualizada)
 
Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)
 
Prototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta FidelidadePrototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta Fidelidade
 

Semelhante a Prototipagem Em Papel

Prototipagem de Software para Devs
Prototipagem de Software para DevsPrototipagem de Software para Devs
Prototipagem de Software para Devs
Marcos Marcolin
 
Ferramentas case
Ferramentas caseFerramentas case
Ferramentas case
Manuel Afonso
 
Conceitos de Usabilidade
Conceitos de UsabilidadeConceitos de Usabilidade
Conceitos de Usabilidade
Odair Cavichioli
 
Qualificação Mestrado
Qualificação MestradoQualificação Mestrado
Qualificação Mestrado
Filipe Grillo
 
Cap. 13 variações no método básico
Cap. 13   variações no método básicoCap. 13   variações no método básico
Cap. 13 variações no método básico
Luiz Agner
 
Qualidade de software e sua influência no sucesso do projeto
Qualidade de software e sua influência no sucesso do projetoQualidade de software e sua influência no sucesso do projeto
Qualidade de software e sua influência no sucesso do projeto
Valquíria Duarte D'Amato
 
Prototipagem e MVP para startups
Prototipagem e MVP para startupsPrototipagem e MVP para startups
Prototipagem e MVP para startups
Jennifer Payne
 
Analise aula2
Analise aula2Analise aula2
Analise aula2
Kelvin Wesley
 
3 apres pb_g4
3 apres pb_g43 apres pb_g4
3 apres pb_g4
Patrícia Gonçalves
 
Apresentação da usi
Apresentação da usiApresentação da usi
Apresentação da usi
Marissol Martins
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEB
Fábio Flatschart
 
Introdução às metodologias ágeis
Introdução às metodologias ágeisIntrodução às metodologias ágeis
Introdução às metodologias ágeis
Comunidade Tá safo!
 
Developer Experience no Nubank
Developer Experience no NubankDeveloper Experience no Nubank
Developer Experience no Nubank
Letticia Nicoli
 
Apresentação: Utilização de Metodologias Ágeis para Adaptação de um Processo ...
Apresentação: Utilização de Metodologias Ágeis para Adaptação de um Processo ...Apresentação: Utilização de Metodologias Ágeis para Adaptação de um Processo ...
Apresentação: Utilização de Metodologias Ágeis para Adaptação de um Processo ...
Felipe Nascimento
 
Introdução às metodologias ágeis de desenvolvimento de software
Introdução às metodologias ágeis de desenvolvimento de softwareIntrodução às metodologias ágeis de desenvolvimento de software
Introdução às metodologias ágeis de desenvolvimento de software
Jaime Schettini
 
Engenharia de Software Aula 1 - Intro
Engenharia de Software Aula 1 - IntroEngenharia de Software Aula 1 - Intro
Engenharia de Software Aula 1 - Intro
Rudson Kiyoshi Souza Carvalho
 
Analise e desenvolvimento
Analise e desenvolvimentoAnalise e desenvolvimento
Analise e desenvolvimento
Gabriel Moura
 
ads pra os nigers.pptx
ads pra os nigers.pptxads pra os nigers.pptx
ads pra os nigers.pptx
AmorimRazo
 
Agile User Experience
Agile User ExperienceAgile User Experience
Agile User Experience
Lógica Digital
 
Testes remotos de usabilidade
Testes remotos de usabilidadeTestes remotos de usabilidade
Testes remotos de usabilidade
Luiz Agner
 

Semelhante a Prototipagem Em Papel (20)

Prototipagem de Software para Devs
Prototipagem de Software para DevsPrototipagem de Software para Devs
Prototipagem de Software para Devs
 
Ferramentas case
Ferramentas caseFerramentas case
Ferramentas case
 
Conceitos de Usabilidade
Conceitos de UsabilidadeConceitos de Usabilidade
Conceitos de Usabilidade
 
Qualificação Mestrado
Qualificação MestradoQualificação Mestrado
Qualificação Mestrado
 
Cap. 13 variações no método básico
Cap. 13   variações no método básicoCap. 13   variações no método básico
Cap. 13 variações no método básico
 
Qualidade de software e sua influência no sucesso do projeto
Qualidade de software e sua influência no sucesso do projetoQualidade de software e sua influência no sucesso do projeto
Qualidade de software e sua influência no sucesso do projeto
 
Prototipagem e MVP para startups
Prototipagem e MVP para startupsPrototipagem e MVP para startups
Prototipagem e MVP para startups
 
Analise aula2
Analise aula2Analise aula2
Analise aula2
 
3 apres pb_g4
3 apres pb_g43 apres pb_g4
3 apres pb_g4
 
Apresentação da usi
Apresentação da usiApresentação da usi
Apresentação da usi
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEB
 
Introdução às metodologias ágeis
Introdução às metodologias ágeisIntrodução às metodologias ágeis
Introdução às metodologias ágeis
 
Developer Experience no Nubank
Developer Experience no NubankDeveloper Experience no Nubank
Developer Experience no Nubank
 
Apresentação: Utilização de Metodologias Ágeis para Adaptação de um Processo ...
Apresentação: Utilização de Metodologias Ágeis para Adaptação de um Processo ...Apresentação: Utilização de Metodologias Ágeis para Adaptação de um Processo ...
Apresentação: Utilização de Metodologias Ágeis para Adaptação de um Processo ...
 
Introdução às metodologias ágeis de desenvolvimento de software
Introdução às metodologias ágeis de desenvolvimento de softwareIntrodução às metodologias ágeis de desenvolvimento de software
Introdução às metodologias ágeis de desenvolvimento de software
 
Engenharia de Software Aula 1 - Intro
Engenharia de Software Aula 1 - IntroEngenharia de Software Aula 1 - Intro
Engenharia de Software Aula 1 - Intro
 
Analise e desenvolvimento
Analise e desenvolvimentoAnalise e desenvolvimento
Analise e desenvolvimento
 
ads pra os nigers.pptx
ads pra os nigers.pptxads pra os nigers.pptx
ads pra os nigers.pptx
 
Agile User Experience
Agile User ExperienceAgile User Experience
Agile User Experience
 
Testes remotos de usabilidade
Testes remotos de usabilidadeTestes remotos de usabilidade
Testes remotos de usabilidade
 

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
 

Último

Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
Danilo Pinotti
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
Faga1939
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
Momento da Informática
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
WELITONNOGUEIRA3
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Gabriel de Mattos Faustino
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
Momento da Informática
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
TomasSousa7
 

Último (7)

Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
 

Prototipagem Em Papel

  • 1. Prototipagem em Papel Desenvolver e testar interfaces antes de Ivo Gomes iniciar a programação 1
  • 2. Novos desafios • Interfaces cada vez mais complexos; • Novos desafios através do uso de Rich Internet Applications: • Prazos de desenvolvimento cada vez mais curtos; • É necessário usar uma metodologia mais simples e rápida para modelação de interfaces. 2
  • 3. Protótipos? • Usados para identificar as interacções em rascunho e o design dos ecrãs; • Podem ser feitos testes e simulações rápidas; • Servem para transmitir aos designers/developers os ecrãs e/ou as funcionalidades que o interface deverá ter, bem como os fluxos de informação; • Podem ser concebidos em papel ou outros formatos (PowerPoint/Keynote, Visio/OmniGraffle, etc...) 3
  • 4. Porquê em Papel e não noutro formato? • Porque em papel dá para apagar e voltar a escrever por cima, tirar notas, dobrar, recortar... (mesmo durante os testes de usabilidade); • É mais rápido de desenhar do que usando qualquer software; • É mais fácil transpor as ideias directamente para o papel; • É mais fácil envolver outras pessoas no desenvolvimento dos protótipos; • Os utilizadores conseguem ser mais críticos ao olharem para um protótipo em papel do que para uma página com um aspecto mais formal. 4
  • 5. Poupar dinheiro usando protótipos • As maiores melhorias no interface de um produto são obtidas através da recolha de dados de usabilidade nas fases iniciais do seu desenvolvimento. • Os benefícios da aplicação de metodologias de usabilidade nas fases iniciais é 10 vezes maior do que se for apenas utilizada numa fase posterior (para correcção de erros e alteração de elementos no interface). • É mais barato alterar um produto na sua fase inicial do que fazer alterações a um produto acabado. Estima-se que seja 100 vezes mais barato efectuar alterações antes de se começar a programar do que esperar que todo o desenvolvimento tenha sido efectuado. Jakob Nielsen; Alertbox, 14 de Abril de 2003 5
  • 6. Vantagens dos protótipos no geral A prototipagem é particularmente útil para recolher dados sobre: • Conceitos e terminologia; • Navegação; • Conteúdo; • Layout da página; • Funcionalidade. 6
  • 7. Vantagens dos Protótipos em Papel • Testar o layout antes de começar a programar; • Fazer alterações rapidamente; • Eliminar variáveis tecnológicas nos testes de usabilidade.
  • 8. Vantagens dos Protótipos em Papel • Baixo custo de implementação; • Documentação rápida.
  • 9. Desvantagens dos Protótipos em Papel • Difícil “copiar” o comportamento de alguns elementos do interface: scrollbars, transmissão de informação através do uso de cores, animações, Rich Applications, etc... • Durante a concepção e testes aos protótipos, não é escrita nenhuma linha de código, o que pode atrasar o tempo total disponível para o projecto; • O aspecto dos ecrãs pode fazer com que os utilizadores (e o cliente) sinta que é um método pouco profissional; • Não permite encontrar todo o tipo de problemas de usabilidade. 9
  • 10. Em que fases se pode aplicar a prototipagem? • Podem-se criar e testar protótipos em qualquer fase do processo de desenvolvimento; • Alterações nas fases iniciais são mais bem sucedidas e mais baratas do que correcções numa fase posterior; • Podem fazer-se protótipos com base num interface já existente (para testar a implementação de novas funcionalidades). 10
  • 11. Prototipagem de Rich Internet Applications Como mostrar em papel as interacções deste tipo de aplicações web?
  • 12. Prototipagem de Rich Internet Applications • O objectivo de testar um protótipo é o de criar um interface usável. Se for difícil de copiar o comportamento de algum efeito no papel, isso pode significar que o próprio efeito no site não será muito usável. • Muitas vezes são usadas novas tecnologias, não necessariamente por serem mais usáveis, mas mais porque são cool. O objectivo da prototipagem não é testar se o site é cool, mas sim se os utilizadores conseguem realizar as suas tarefas. • Os protótipos não precisam de incorporar todos os elementos da página. Apenas necessitam de capturar a funcionalidade do site e fornecer as informações correctas e dentro do mesmo contexto. 12
  • 13. Prototipagem de Rich Internet Applications 13
  • 14. Prototipagem de Rich Internet Applications 14
  • 15. Prototipagem de Rich Internet Applications 15
  • 16. Prototipagem de Rich Internet Applications 16
  • 17. Case Study Como o uso de protótipos em papel pode ser um êxito no desenho de uma nova aplicação
  • 18. O problema (deles) • Uma empresa tinha a necessidade de informatizar todos os seus 9 departamentos que trocavam vários tipos de informação entre si; • A informação era escrita em ficheiros XLS e DOC, impressa e enviada para outro departamento, que, por sua vez, copiava os dados para o computador, alterava, imprimia e passava para outro departamento; • Relatórios financeiros e de contabilidade feitos à mão em folhas de cálculo; • Necessidade de uma aplicação web que permitisse eliminar passos desnecessários, gerar relatórios automaticamente, ser fácil de usar. 18
  • 19. O problema (nosso) • Como convencer a empresa da necessidade de um estudo elaborado antes de implementar uma solução qualquer? • Como explicar a importância do uso de entrevistas e protótipos em papel antes mesmo de começarmos a desenvolver a solução? • Receio da reacção dos utilizadores e das chefias perante a apresentação de protótipos de baixa resolução e de aspecto tosco (em papel e desenhados à mão); 19
  • 20. Entrevistas com os colaboradores • Foram feitas entrevistas com os colaboradores dos 9 departamentos; • Recolha de dados sobre as tarefas, procedimentos, workflows, dependências e métodos de trabalho;
  • 21. Elaboração de Protótipos em Papel • Com base nos resultados das entrevistas, foram elaborados protótipos em papel de uma futura aplicação web que permitisse informatizar todos os processos identificados; 21
  • 22.
  • 23.
  • 24. Testes de Usabilidade • Testes de usabilidade com todos os 9 departamentos usando os protótipos em papel; • Durante os testes foram identificados possíveis problemas de usabilidade, correcção de alguns ecrãs, confirmação (ou não) da qualidade/precisão da informação disponibilizada, etc... • Todos os participantes nas entrevistas estiveram presentes nos testes de usabilidade e deram sugestões para alterar alguns ecrãs. 24
  • 25. Conhecer a linguagem dos utilizadores 25
  • 26. Passagem para a equipa de desenvolvimento • Após as correcções aos protótipos, foram desenhados wireframes (protótipos de resolução superior aos desenhos no papel) para passar à equipa de desenvolvimento; • Através desta metodologia foi possível testar todos os ecrãs antes mesmo de se começar a programar; • Redução da probabilidade de possíveis correcções ao interface no futuro; • Satisfação elevada dos utilizadores por sentirem que também ajudaram a desenvolver o software que estão a usar e que foi feito “por e para eles”. 26
  • 27.
  • 28. Com Protótipos em Papel... • Poupámos tempo e dinheiro; • Garantimos um nível elevado de satisfação dos utilizadores e diminuímos a probabilidade de ter que efectuar correcções no futuro; • Fornecemos à equipa de desenvolvimento um conjunto de ecrãs e especificações que lhes permitiram desenvolver todo o interface tendo em conta as recomendações dos seus reais utilizadores; • Temos um método simples e rápido para desenhar e testar interfaces. 28
  • 29. Obrigado pela vossa www.ivogomes.com atenção!