SlideShare uma empresa Scribd logo
1 de 79
Baixar para ler offline
Prototipação
a arte de gerar, refinar e comunicar idéias
Fabrício Fava
Design de interação . Interação Humano-Computador . Análise de Usabilidade .
Game design . Arquitetura de informação . User Experience . Acessibilidade
Fabrício Fava . Designer de Interação . Atlântico
O design é um ato evolutivo
Pressão constante para gerar idéias
As pessoas não sabem dizer exatamente o que
querem
Mas quando vêem ou interagem com algo, elas
logo sabem o que não querem”
Processo:
Prototipar
Revisar
Refinar
Criar opções Fazer escolhas
Exploração Refinamento
Os protótipos podem ser:
Baixa fidelidade (low fidelity)
Alta fidelidade (high fidelity)
Filosofia:
Rough
Rapid
Right
Personas
Prototipando perfis de usuários
Conheça seu usuário antes de começar a
codificar
Personas estão para os usuários,
como o álbum de fotografias está para uma
viagem
Personas são úteis para:
Comunicar requisitos
Conhecer características dos usuários
Personificar os usuários
Prototipação: a arte de gerar, refinar e comunicar idéias
Moodboard
Prototipando características dos usuários
Quadros de humor que representam estado de
espírito, estilo de vida, hábitos de consumo de
uma persona
Moodboards são úteis para:
Comunicar requisitos
Conhecer características dos usuários
Personificar os usuários
Prototipação: a arte de gerar, refinar e comunicar idéias
Modelo que estamos desenvolvendo
Protótipos em papel
Prototipando com rapidez
Auxiliam na definição do design conceitual do
produto
Encorajam a participação das pessoas no
processo de design
Protótipos em papel são úteis para:
Coletar e identificar requisitos
Discutir e comunicar idéias
Avaliar soluções
Prototipação: a arte de gerar, refinar e comunicar idéias
Prototipação: a arte de gerar, refinar e comunicar idéias
Prototipação: a arte de gerar, refinar e comunicar idéias
Prototipação: a arte de gerar, refinar e comunicar idéias
Prototipação: a arte de gerar, refinar e comunicar idéias
Prototipação: a arte de gerar, refinar e comunicar idéias
Você pode utilizar templates para auxiliar na
geração de protótipos em papel
http://www.uxpin.com/
Wireframe
Prototipando para comunicar idéias
Auxiliam na definição do design conceitual do
produto
Recomenda-se aumentar gradativamente a
fidelidade das informações
Wireframes são úteis para:
Comunicar idéias
Validar a hierarquia do conteúdo
Avaliar soluções de design
Prototipação: a arte de gerar, refinar e comunicar idéias
Prototipação: a arte de gerar, refinar e comunicar idéias
Prototipação: a arte de gerar, refinar e comunicar idéias
Prototipação: a arte de gerar, refinar e comunicar idéias
Wireframes podem ser detalhados
Mesmo assim, recomenda-se apresentá-los ao
invés de enviá-los
Mockup
Prototipando dispositivos físicos
Réplicas, geralmente em tamanho natural, de
artefatos físicos
Mockups são úteis para:
Gerar idéias
Inserir o produto no contexto de uso
Avaliar aspectos físicos do produto
Prototipação: a arte de gerar, refinar e comunicar idéias
Prototipação: a arte de gerar, refinar e comunicar idéias
Prototipação: a arte de gerar, refinar e comunicar idéias
Objetos do cotidiano também podem lhe ajudar
a ter grandes idéias
Prototipação: a arte de gerar, refinar e comunicar idéias
Prototipação: a arte de gerar, refinar e comunicar idéias
Storyboarding
Prototipando cenários de uso
Seqüência de desenhos comentados ilustrando
um cenário de uso específico
É interessante combinar o storyboard com o
wireframe para tornar a visualização da
interação mais rica.
Storyboards são úteis para:
Compreender o contexto de uso
Refinar e avaliar requisitos
Avaliar modelo de interação
Prototipação: a arte de gerar, refinar e comunicar idéias
Prototipação: a arte de gerar, refinar e comunicar idéias
Sketchboard
Prototipando para comunicar idéias
Quadro de protótipos que apresenta requisitos
e fluxos de navegação do sistema
Sketchboards são úteis para:
Comunicar soluções de design
Avaliar soluções de design
Gerenciar as mudanças de projeto
Integrar o time no processo de design
Skecthboard Adaptive Path
Prototipação: a arte de gerar, refinar e comunicar idéias
Protótipo de alta fidelidade
Prototipando o design físico
Representam o design físico do produto
Protótipos de alta fidelidade são úteis para:
Comunicar idéias
Avaliar aspectos físicos do design
Vender uma solução
Prototipação: a arte de gerar, refinar e comunicar idéias
Prototipação: a arte de gerar, refinar e comunicar idéias
O lado ruim...
As pessoas se apegam ao design
Protótipo executável
Prototipando a interação
Implementação de soluções para funcionalidades
do produto
Podem ser de baixa ou alta fidelidade
São bastante utilizados pela indústria de games
E para avaliar novas aplicações para celular
Protótipos executáveis são úteis para:
Avaliar o fluxo de interação com o produto
Realizar testes de usabilidade
Como saber que funcionalidades projetar?
Como obter o melhor da
prototipação?
Defina os seus objetivos
Identifique o tipo de protótipo mais adequado
Escolha tecnologia e ferramenta adequadas
Ouça as idéias do outro e trabalhe para
evoluí-la de forma coletiva
“If at first the idea is not absurd,
then there is no hope for it.”
Albert Einstein
Fabrício Fava
Designer de Interação
fabriciofava@gmail.com

Mais conteúdo relacionado

Mais procurados

Design como ferramenta para inovacao
Design como ferramenta para inovacaoDesign como ferramenta para inovacao
Design como ferramenta para inovacaoAlessandra Rosa
 
Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...Catarinas Design de Interação
 
Protótipos em Papel
Protótipos em PapelProtótipos em Papel
Protótipos em Papelelliando dias
 
Workshop • UX design •
Workshop • UX design •  Workshop • UX design •
Workshop • UX design • Suzi Sarmento
 
[Palestra UNICAP] UX Design - Projetando Soluções e Experiências
[Palestra UNICAP] UX Design - Projetando Soluções e Experiências[Palestra UNICAP] UX Design - Projetando Soluções e Experiências
[Palestra UNICAP] UX Design - Projetando Soluções e ExperiênciasAndreza Godoy
 
Personas na prática - Um estudo de caso (re)pensado
Personas na prática - Um estudo de caso (re)pensadoPersonas na prática - Um estudo de caso (re)pensado
Personas na prática - Um estudo de caso (re)pensadoAlan Vasconcelos
 
UX Design como estratégia para conquistar mais clientes e impactar negócios
UX Design como estratégia para conquistar mais clientes e impactar negóciosUX Design como estratégia para conquistar mais clientes e impactar negócios
UX Design como estratégia para conquistar mais clientes e impactar negóciosCatarinas Design de Interação
 
Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)DesignCarminatti
 
Projeto de Interfaces - Aula 02
Projeto de Interfaces - Aula 02Projeto de Interfaces - Aula 02
Projeto de Interfaces - Aula 02Carlos Rosemberg
 
UX e sua importância na construção das marcas
UX e sua importância na construção das marcasUX e sua importância na construção das marcas
UX e sua importância na construção das marcasFabiano Nadler
 
How to Translate Research into Insights by Amyris Fernández, Ph. D. of Búscap...
How to Translate Research into Insights by Amyris Fernández, Ph. D. of Búscap...How to Translate Research into Insights by Amyris Fernández, Ph. D. of Búscap...
How to Translate Research into Insights by Amyris Fernández, Ph. D. of Búscap...InsightInnovation
 
User Experience: O que sua empresa pode ganhar com isso.
User Experience: O que sua empresa pode ganhar com isso.User Experience: O que sua empresa pode ganhar com isso.
User Experience: O que sua empresa pode ganhar com isso.Catarinas Design de Interação
 
Webdesign - Design Interface
Webdesign - Design InterfaceWebdesign - Design Interface
Webdesign - Design InterfaceOdair Cavichioli
 
Moderando Testes de Usabilidade
Moderando Testes de UsabilidadeModerando Testes de Usabilidade
Moderando Testes de UsabilidadeAna Paula Batista
 
Introdução ao Design de Interação
Introdução ao Design de InteraçãoIntrodução ao Design de Interação
Introdução ao Design de InteraçãoUTFPR
 
Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015Luisa Ambros
 

Mais procurados (20)

Design como ferramenta para inovacao
Design como ferramenta para inovacaoDesign como ferramenta para inovacao
Design como ferramenta para inovacao
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...
 
Protótipos em Papel
Protótipos em PapelProtótipos em Papel
Protótipos em Papel
 
Workshop • UX design •
Workshop • UX design •  Workshop • UX design •
Workshop • UX design •
 
[Palestra UNICAP] UX Design - Projetando Soluções e Experiências
[Palestra UNICAP] UX Design - Projetando Soluções e Experiências[Palestra UNICAP] UX Design - Projetando Soluções e Experiências
[Palestra UNICAP] UX Design - Projetando Soluções e Experiências
 
Personas na prática - Um estudo de caso (re)pensado
Personas na prática - Um estudo de caso (re)pensadoPersonas na prática - Um estudo de caso (re)pensado
Personas na prática - Um estudo de caso (re)pensado
 
Ux vs Ui
Ux vs UiUx vs Ui
Ux vs Ui
 
UX Design como estratégia para conquistar mais clientes e impactar negócios
UX Design como estratégia para conquistar mais clientes e impactar negóciosUX Design como estratégia para conquistar mais clientes e impactar negócios
UX Design como estratégia para conquistar mais clientes e impactar negócios
 
Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)
 
Projeto de Interfaces - Aula 02
Projeto de Interfaces - Aula 02Projeto de Interfaces - Aula 02
Projeto de Interfaces - Aula 02
 
UX e sua importância na construção das marcas
UX e sua importância na construção das marcasUX e sua importância na construção das marcas
UX e sua importância na construção das marcas
 
Ideação de Produtos e Geração de Ideias
Ideação de Produtos e Geração de Ideias Ideação de Produtos e Geração de Ideias
Ideação de Produtos e Geração de Ideias
 
How to Translate Research into Insights by Amyris Fernández, Ph. D. of Búscap...
How to Translate Research into Insights by Amyris Fernández, Ph. D. of Búscap...How to Translate Research into Insights by Amyris Fernández, Ph. D. of Búscap...
How to Translate Research into Insights by Amyris Fernández, Ph. D. of Búscap...
 
Interface Homem Computador - Aula02 - Principios de design em IHC
Interface Homem Computador - Aula02 - Principios de design em IHCInterface Homem Computador - Aula02 - Principios de design em IHC
Interface Homem Computador - Aula02 - Principios de design em IHC
 
User Experience: O que sua empresa pode ganhar com isso.
User Experience: O que sua empresa pode ganhar com isso.User Experience: O que sua empresa pode ganhar com isso.
User Experience: O que sua empresa pode ganhar com isso.
 
Webdesign - Design Interface
Webdesign - Design InterfaceWebdesign - Design Interface
Webdesign - Design Interface
 
Moderando Testes de Usabilidade
Moderando Testes de UsabilidadeModerando Testes de Usabilidade
Moderando Testes de Usabilidade
 
Introdução ao Design de Interação
Introdução ao Design de InteraçãoIntrodução ao Design de Interação
Introdução ao Design de Interação
 
Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015
 

Semelhante a Prototipação: a arte de gerar, refinar e comunicar idéias

Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...
Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...
Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...Alessandro Lima
 
Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira Doisnovemeia Publicidade
 
Estrategia de AI - Criando o Relatorio de Estratégia
Estrategia de AI  - Criando o Relatorio de EstratégiaEstrategia de AI  - Criando o Relatorio de Estratégia
Estrategia de AI - Criando o Relatorio de EstratégiaLuiz Agner
 
Aulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o UsuárioAulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o UsuárioSilvia Dotta
 
Design Thinking no BPM DAY RJ 2015
Design Thinking no BPM DAY RJ 2015Design Thinking no BPM DAY RJ 2015
Design Thinking no BPM DAY RJ 2015Victor Gonçalves
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Jane Vita
 
Semana SEBRAE de Tecnologia e Inovação 2015 - Victor Gonçalves
Semana SEBRAE de Tecnologia e Inovação 2015 - Victor GonçalvesSemana SEBRAE de Tecnologia e Inovação 2015 - Victor Gonçalves
Semana SEBRAE de Tecnologia e Inovação 2015 - Victor GonçalvesVictor Gonçalves
 
Como transformar pesquisa em ideias
Como transformar pesquisa em ideiasComo transformar pesquisa em ideias
Como transformar pesquisa em ideiasAmyris Fernandez
 
Arquitetura da Informação
Arquitetura da InformaçãoArquitetura da Informação
Arquitetura da InformaçãoMarcello Cardoso
 
Protótipos de papel
Protótipos de papelProtótipos de papel
Protótipos de papelRobson Santos
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot CampUTFPR
 
Design de Interação em Produtos Eletrônicos
Design de Interação em Produtos EletrônicosDesign de Interação em Produtos Eletrônicos
Design de Interação em Produtos EletrônicosEdyd B. Junges
 
Design de Interação em Produtos Eletrônicos
Design de Interação em Produtos EletrônicosDesign de Interação em Produtos Eletrônicos
Design de Interação em Produtos EletrônicosUTFPR
 
Design De Interfaces
Design De InterfacesDesign De Interfaces
Design De InterfacesBruno Brant
 
Design de Interação Mobile
Design de Interação MobileDesign de Interação Mobile
Design de Interação MobileDouglas Schmidt
 
Interação Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - AntecipaçãoInteração Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - AntecipaçãoWellington Oliveira
 
Capítulo 2 compreendendo e conceitualizando a interação [ final ]
Capítulo 2   compreendendo e conceitualizando a interação [ final ]Capítulo 2   compreendendo e conceitualizando a interação [ final ]
Capítulo 2 compreendendo e conceitualizando a interação [ final ]M. Torres
 
Design Thinking - Prototipação
Design Thinking  - PrototipaçãoDesign Thinking  - Prototipação
Design Thinking - PrototipaçãoUFPA
 
Design Customizado
Design CustomizadoDesign Customizado
Design Customizadobernardolm
 

Semelhante a Prototipação: a arte de gerar, refinar e comunicar idéias (20)

Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...
Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...
Métodos de Design: Uma abordagem para estudos de viabilidade em projetos de s...
 
Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira
 
Estrategia de AI - Criando o Relatorio de Estratégia
Estrategia de AI  - Criando o Relatorio de EstratégiaEstrategia de AI  - Criando o Relatorio de Estratégia
Estrategia de AI - Criando o Relatorio de Estratégia
 
Aulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o UsuárioAulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o Usuário
 
Design Thinking no BPM DAY RJ 2015
Design Thinking no BPM DAY RJ 2015Design Thinking no BPM DAY RJ 2015
Design Thinking no BPM DAY RJ 2015
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.
 
Semana SEBRAE de Tecnologia e Inovação 2015 - Victor Gonçalves
Semana SEBRAE de Tecnologia e Inovação 2015 - Victor GonçalvesSemana SEBRAE de Tecnologia e Inovação 2015 - Victor Gonçalves
Semana SEBRAE de Tecnologia e Inovação 2015 - Victor Gonçalves
 
Como transformar pesquisa em ideias
Como transformar pesquisa em ideiasComo transformar pesquisa em ideias
Como transformar pesquisa em ideias
 
Arquitetura da Informação
Arquitetura da InformaçãoArquitetura da Informação
Arquitetura da Informação
 
Protótipos de papel
Protótipos de papelProtótipos de papel
Protótipos de papel
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot Camp
 
Design de Interação em Produtos Eletrônicos
Design de Interação em Produtos EletrônicosDesign de Interação em Produtos Eletrônicos
Design de Interação em Produtos Eletrônicos
 
Design de Interação em Produtos Eletrônicos
Design de Interação em Produtos EletrônicosDesign de Interação em Produtos Eletrônicos
Design de Interação em Produtos Eletrônicos
 
Design De Interfaces
Design De InterfacesDesign De Interfaces
Design De Interfaces
 
Design de Interação Mobile
Design de Interação MobileDesign de Interação Mobile
Design de Interação Mobile
 
Interação Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - AntecipaçãoInteração Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - Antecipação
 
Capítulo 2 compreendendo e conceitualizando a interação [ final ]
Capítulo 2   compreendendo e conceitualizando a interação [ final ]Capítulo 2   compreendendo e conceitualizando a interação [ final ]
Capítulo 2 compreendendo e conceitualizando a interação [ final ]
 
Design Thinking - Prototipação
Design Thinking  - PrototipaçãoDesign Thinking  - Prototipação
Design Thinking - Prototipação
 
Design Customizado
Design CustomizadoDesign Customizado
Design Customizado
 
UX - Entregaveis
UX - EntregaveisUX - Entregaveis
UX - Entregaveis
 

Prototipação: a arte de gerar, refinar e comunicar idéias