Download - Prototipagem em Papel - Oficina
![Page 1: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/1.jpg)
“Há mais papel entre um homem e sua
interface que julga sua vã filosofia”
![Page 2: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/2.jpg)
![Page 3: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/3.jpg)
Introdução
Do que se trata a oficina:
Uma técnica de prototipagem para Design de interface
Roteiro:
Introdução à UX
Protótipos
Protipagem em papel
Parte prática / Intervalo
Teste do que foi feito
Encerramento
![Page 4: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/4.jpg)
Experiência
Experiencia em geral
Usuário
User Experience
• Umbrella Topic
![Page 5: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/5.jpg)
UX – Umbrella Topic
Emotion Design
Interface Design
Information Design
Information Architecture
Interaction Design
Usability
User Research
Social Media
…
![Page 6: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/6.jpg)
Design de Interface
O que é (comparação com a Matrix)
Foi o que levou a computação a atingir o maior númerode usuários possível. Ambiente amigável x código.
Interface = interação entre coisas. Homem x máquina, máquina x máquina, etc.
Antes homem interagia com máquina através de válvulas, alavancas e etc.
![Page 7: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/7.jpg)
Arquitetura de Informação
Exemplo do submarino, super mercado
Arquitetura de sistemas é dinâmica, pois o conteúdomuda, novas tecnologias surgem e os usuáriosdesenvolvem novas necessidades.
![Page 8: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/8.jpg)
Vídeo
![Page 9: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/9.jpg)
Usabilidade
Usabilidade vs UX
Aumentar o desempenho da utilização da interface, sem desgastar o usuário
Heurísticas – o que são
Testes com usuário (o objetivo é testar a interface, nãoo usuário)
Survey
![Page 10: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/10.jpg)
Prototipagem
Desenhos de Leonardo da Vincci
Idéias e aplicabilidade - Thomas Edison
Processo, avaliação e método Henry Dreyfuss
Por que prototipar?Por que protótipos sao representações tangiveis de suas idéias,Eles devem refletir os requesitos e as decisões necessáriasPara a melhor desenvolvimento do produto.
![Page 11: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/11.jpg)
Fácil de usar e aprender?
![Page 12: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/12.jpg)
Prototipagem
O uso do protótipo é intuitivo?
Um usuário tradicional completa tarefas com sucesso?
Deixar claras as consequências de tarefas complexas?
A interface é facil de aprender?
![Page 13: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/13.jpg)
Mercado: percepção de valores
para consumidor
Custo é um fator muito importante em qualquer projeto.
É um produto que vale o investimento?
Os clientes em potencial valorizam a funcionalidade oferecida?
Requer custo de treinamento?
Requer atualizações caras e/ou frequentes?
![Page 14: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/14.jpg)
Olhar e sentir
Se é uma experiência de marca, faz o vínculo do usuário com o produto?
O conteúdo é compreensível e comunicativo?
Os usuários se divertem durante a utilização?
![Page 15: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/15.jpg)
Processo
1. Verificarrequerimentos2. Desenvolver: tarefas, interações e fluxos3. Determinar cenário4. Definir protótipocomponentes e conteúdo5. Extrair o conteúdonecessário
6. Definir os critérios do design*
7. projetar e construir o protótipo8. Revisar o protótipo9. Validar usabilidade do protótipo10. Passar do protótipopara a real implementação.
![Page 16: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/16.jpg)
Processo
6. Definir os critérios do designDeterminar as telas de maior prioridade
Separar as partes mais importantes de sua tela
Fazer layout das telas mais importantes com todos oselementos necessários.
Layout das telas importantes restantes
Especificar cada tela, todas as interações, fluxos e elementosde forma racional.
![Page 17: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/17.jpg)
Tipos de Prototipos
Níveis de fidelidade de cada prototipo
Dois tipos de prototipagem de software:Rapid“Demorada”Porque usar cada uma?
![Page 18: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/18.jpg)
Tipos de Prototipos
Rapid (é a que nós costumamos trabalhar)WireframesStoryboardVideoSoftwares de prototipagemPaper
![Page 19: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/19.jpg)
![Page 20: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/20.jpg)
Vídeo
![Page 21: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/21.jpg)
Paper Prototyping
Versão em papel da interface, manipulada por umapessoa que faz o papel de computador
Os usuários realizam tarefas realistas
![Page 22: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/22.jpg)
Paper Prototyping
O que é e o que não é:
É paper protoyping a partir do momento em que há papel e interação
Wireframes exlusivamente não são paper prototyping, mas podem vir a ser se houver um "computador" que responda pela ações
Storyboards : usados na maioria das vezes para conceituar a interface e o fluxograma do projeto. Pode se tornar um paper prototyping adicionando informações necessárias para dar suporte às tarefas que devem ser realizadas.
![Page 23: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/23.jpg)
Paper Prototyping
Não requer práticatimes multidisciplinares podem trabalhar juntos
Funções envolvidas:usuário, facilitador, Computador, e observador
![Page 24: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/24.jpg)
Benefícios
Na equipe ($$$)Designing / Rendering / Coding menos gastos com equipeDesenvolvimento interativo rápidoEconomia com testes usando protótipos mais carosFeitos no estágio inicial – espera-se respostas de interação
![Page 25: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/25.jpg)
Benefícios
No usuário (psicológicos)Respostas mais criativasOs usuários entendem que a interface não está em estágio
final e por isso se preocupam com coisas mais importantes, como a navegação em si e a realização de tarefas – não precisa ter uma estética perfeita ou bem acabada
O protótipo pode ser remendado e atualizado durante os testes (até mesmo pelo próprio usuário)
![Page 26: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/26.jpg)
Paper prototyping
e usabilidade
Determinar as metas do teste – o que se quer aprender
Quem são os usuários ?
Criar tarefas ao redor do que os usuários irão fazer
Criar os protótipos em papel das peças necessáriaspara a performance das tarefas
Preparar o teste (poupar discussões internas sobre a interface)
![Page 27: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/27.jpg)
Paper prototyping
e usabilidade
Conduzir vários testes de usabilidade para refinar o protótipo
Estabelecer as prioridades para os problemasencontrados
Planejar mudanças adicionais e anotá-las para quepossam ser feitas depois
Comunicar suas descobertas para os que não estiveremdiretamente envolvidos
![Page 28: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/28.jpg)
Dicas
Linhas retas não são essenciais para os protótipos (se o alinhamento se torna realmente importante a interface provavelmente deveria ser feita com ajudade um software).
Nas fases iniciais quando ainda estamos tentando entender as necessidades dos usuários ou estabelecer a funcionalidade, tamanho pode não ser tão crítico como é nas fases posteriores do projeto.
![Page 29: Prototipagem em Papel - Oficina](https://reader034.vdocuments.pub/reader034/viewer/2022051314/555b2ee6d8b42ae82e8b4c73/html5/thumbnails/29.jpg)
Obrigado, e mantenham contato!
Diego Coutinho
Fernanda Rodrigues
Henrique Perticarati