![Page 1: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/1.jpg)
Prototipaçãoa arte de gerar, refinar e comunicar idéias
Fabrício Fava
![Page 2: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/2.jpg)
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
![Page 3: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/3.jpg)
O design é um ato evolutivo
![Page 4: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/4.jpg)
Pressão constante para gerar idéias
![Page 5: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/5.jpg)
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”
![Page 6: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/6.jpg)
Processo:
PrototiparRevisarRefinar
![Page 7: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/7.jpg)
Criar opções Fazer escolhasExploração Refinamento
![Page 8: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/8.jpg)
Os protótipos podem ser:
Baixa fidelidade (low fidelity)
Alta fidelidade (high fidelity)
![Page 9: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/9.jpg)
Filosofia:RoughRapidRight
![Page 10: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/10.jpg)
PersonasPrototipando perfis de usuários
![Page 11: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/11.jpg)
Conheça seu usuário antes de começar a codificar
![Page 12: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/12.jpg)
Personas estão para os usuários,como o álbum de fotografias está para uma viagem
![Page 13: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/13.jpg)
Personas são úteis para:Comunicar requisitosConhecer características dos usuáriosPersonificar os usuários
![Page 14: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/14.jpg)
![Page 15: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/15.jpg)
MoodboardPrototipando características dos
usuários
![Page 16: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/16.jpg)
Quadros de humor que representam estado de espírito, estilo de vida, hábitos de consumo de uma persona
![Page 17: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/17.jpg)
Moodboards são úteis para:Comunicar requisitosConhecer características dos usuáriosPersonificar os usuários
![Page 18: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/18.jpg)
![Page 19: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/19.jpg)
Modelo que estamos desenvolvendo
![Page 20: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/20.jpg)
Protótipos em papelPrototipando com rapidez
![Page 21: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/21.jpg)
Auxiliam na definição do design conceitual do produto
![Page 22: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/22.jpg)
Encorajam a participação das pessoas no processo de design
![Page 23: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/23.jpg)
Protótipos em papel são úteis para:Coletar e identificar requisitosDiscutir e comunicar idéiasAvaliar soluções
![Page 24: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/24.jpg)
![Page 25: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/25.jpg)
![Page 26: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/26.jpg)
![Page 27: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/27.jpg)
![Page 28: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/28.jpg)
![Page 29: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/29.jpg)
![Page 30: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/30.jpg)
Você pode utilizar templates para auxiliar na geração de protótipos em papel
http://www.uxpin.com/
![Page 31: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/31.jpg)
WireframePrototipando para comunicar idéias
![Page 32: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/32.jpg)
Auxiliam na definição do design conceitual do produto
![Page 33: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/33.jpg)
Recomenda-se aumentar gradativamente a fidelidade das informações
![Page 34: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/34.jpg)
Wireframes são úteis para:Comunicar idéiasValidar a hierarquia do conteúdoAvaliar soluções de design
![Page 35: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/35.jpg)
![Page 36: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/36.jpg)
![Page 37: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/37.jpg)
![Page 38: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/38.jpg)
![Page 39: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/39.jpg)
Wireframes podem ser detalhados
Mesmo assim, recomenda-se apresentá-los ao invés de enviá-los
![Page 40: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/40.jpg)
MockupPrototipando dispositivos físicos
![Page 41: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/41.jpg)
Réplicas, geralmente em tamanho natural, de artefatos físicos
![Page 42: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/42.jpg)
Mockups são úteis para:Gerar idéiasInserir o produto no contexto de usoAvaliar aspectos físicos do produto
![Page 43: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/43.jpg)
![Page 44: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/44.jpg)
![Page 45: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/45.jpg)
![Page 46: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/46.jpg)
Objetos do cotidiano também podem lhe ajudar a ter grandes idéias
![Page 47: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/47.jpg)
![Page 48: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/48.jpg)
![Page 49: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/49.jpg)
StoryboardingPrototipando cenários de uso
![Page 50: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/50.jpg)
Seqüência de desenhos comentados ilustrando um cenário de uso específico
![Page 51: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/51.jpg)
É interessante combinar o storyboard com o wireframe para tornar a visualização da interação mais rica.
![Page 52: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/52.jpg)
Storyboards são úteis para:Compreender o contexto de usoRefinar e avaliar requisitosAvaliar modelo de interação
![Page 53: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/53.jpg)
![Page 54: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/54.jpg)
![Page 55: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/55.jpg)
SketchboardPrototipando para comunicar idéias
![Page 56: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/56.jpg)
Quadro de protótipos que apresenta requisitos e fluxos de navegação do sistema
![Page 57: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/57.jpg)
Sketchboards são úteis para:Comunicar soluções de designAvaliar soluções de designGerenciar as mudanças de projetoIntegrar o time no processo de design
![Page 58: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/58.jpg)
Skecthboard Adaptive Path
![Page 59: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/59.jpg)
![Page 60: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/60.jpg)
Protótipo de alta fidelidadePrototipando o design físico
![Page 61: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/61.jpg)
Representam o design físico do produto
![Page 62: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/62.jpg)
Protótipos de alta fidelidade são úteis para:Comunicar idéiasAvaliar aspectos físicos do designVender uma solução
![Page 63: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/63.jpg)
![Page 64: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/64.jpg)
![Page 65: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/65.jpg)
O lado ruim...
![Page 66: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/66.jpg)
As pessoas se apegam ao design
![Page 67: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/67.jpg)
Protótipo executávelPrototipando a interação
![Page 68: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/68.jpg)
Implementação de soluções para funcionalidades do produto
![Page 69: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/69.jpg)
Podem ser de baixa ou alta fidelidade
![Page 70: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/70.jpg)
São bastante utilizados pela indústria de games
E para avaliar novas aplicações para celular
![Page 71: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/71.jpg)
Protótipos executáveis são úteis para:Avaliar o fluxo de interação com o produtoRealizar testes de usabilidade
![Page 72: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/72.jpg)
Como saber que funcionalidades projetar?
![Page 73: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/73.jpg)
Como obter o melhor da prototipação?
![Page 74: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/74.jpg)
Defina os seus objetivos
![Page 75: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/75.jpg)
Identifique o tipo de protótipo mais adequado
![Page 76: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/76.jpg)
Escolha tecnologia e ferramenta adequadas
![Page 77: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/77.jpg)
Ouça as idéias do outro e trabalhe para evoluí-la de forma coletiva
![Page 78: Prototipação: a arte de gerar, refinar e comunicar idéias](https://reader035.vdocuments.pub/reader035/viewer/2022070316/555b2f85d8b42afc348b4ad6/html5/thumbnails/78.jpg)
“If at first the idea is not absurd,then there is no hope for it.”
Albert Einstein