design de interação - capítulo 8 - design, prototipação e construção -
DESCRIPTION
Curso: Engenharia de Computação e Informação - UFRJ Disciplina: Trabalho do Futuro - 2013 Resumo do capítulo 8 (sobre design, prototipação e construção) do livro Design de Interação - Além da Interação Homem-computador, de Helen Sharp, Yvonne Rogers e Jennifer Preece.TRANSCRIPT
![Page 1: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/1.jpg)
Trabalho do Futuro
2013-1
![Page 2: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/2.jpg)
Alunos:
Nilton Guedes
Pedro de Vasconcellos
![Page 3: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/3.jpg)
Capítulo 8
Design, Prototipação e Construção
![Page 4: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/4.jpg)
Representação limitada de um design que permite
aos usuários interagir com ele e explorar a sua
conveniência.
Protótipo
![Page 5: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/5.jpg)
Protótipo
![Page 6: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/6.jpg)
Protótipo
Protótipo de celular
Apple, 1985
![Page 7: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/7.jpg)
Protótipo
Protótipo de controle de N64
![Page 8: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/8.jpg)
Protótipo
Úteis para a realização de testes:
• Viabilidade técnica de uma idéia
• Esclarecer requisitos vagos
• Realizar testes com usuários e
avaliações
• Verificar compatibilidade entre o
design e o restante do sistema
![Page 9: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/9.jpg)
Prototipação
Baixa
FidelidadeAlta Fidelidade
![Page 10: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/10.jpg)
Prototipação de Baixa
Fidelidade
Não se assemelha
muito ao produto final
Mais
simples
Mais
baratos
Rápida
produçãoFacilidade de
modificação
![Page 11: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/11.jpg)
Prototipação de Baixa Fidelidade
Storyboard
de um novo
scanner
![Page 12: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/12.jpg)
Prototipação de Baixa Fidelidade
Prototipação em papel
![Page 13: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/13.jpg)
Prototipação de Alta Fidelidade
Usa material final e se assemelha
ao produto final
![Page 14: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/14.jpg)
Prototipação de Alta Fidelidade
Protótipo de um site
![Page 15: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/15.jpg)
Prototipação de Alta Fidelidade
GreenGT H2: carro automobilístico movido a eletricidade e hidrogênio
![Page 16: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/16.jpg)
Baixa Fidelidade x Alta Fidelidade
![Page 17: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/17.jpg)
Baixa Fidelidade x Alta Fidelidade
![Page 18: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/18.jpg)
Prototipação Horizontal x Vertical
![Page 19: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/19.jpg)
Prototipação
Evolutiva
Protótipo evolui
para o produto
final
Protótipos são
pontos de apoio e
então descartados
Exige testes e tempo,
mas permite reutilização
Rápidos, porém esforço
excessivo se torna
desperdício
Prototipação
Descartável
![Page 20: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/20.jpg)
Design Conceitual
Transformação dos requisitos e
necessidades dos usuários em um
modelo conceitual
![Page 21: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/21.jpg)
Design Conceitual
Princípios:
• Mente aberta, sem esquecer os
usuários e seu contexto
• Discutir ideias com outros
stakeholders• Usar prototipação de baixa
fidelidade para rápido feedback• Iteração (“para ter uma boa idéia,
tenha muitas idéias”)
![Page 22: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/22.jpg)
Design Conceitual
Decisões:
• Quais serão as funções do produto
(divisão das tarefas entre humano e
máquina; divisão entre software e
hardware)
• Como as funções se relacionam
(separadas, paralelas, restritivas,
etc.)
• Informações a serem consideradas
![Page 23: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/23.jpg)
Design Conceitual
Utilização de cenários para
trabalhar com possíveis situações
de uso do produto.
![Page 24: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/24.jpg)
Design Conceitual
![Page 25: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/25.jpg)
Design Físico
Mais concreto e detalhado:
que interface , ícones, menu, etc.
Envolve conciliar conflitos (ex.:
celular, muitas funcionalidades,
tamanho limitado)
![Page 26: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/26.jpg)
Design Físico
Regras de Ouro:
• Buscar consistência
• Habilitar atalhos
• Oferecer feedback informativo
• Diálogos que concluam uma ação
• Oferecer prevenção de erros e conserto
simples
• Permitir reverter uma ação
• Deixar o usuário no controle
confortavelmente
• Reduzir a carga de memória do usuário a
curto prazo
![Page 27: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/27.jpg)
Design Físico
Menu: drop-down, pop-up,
single, etc.
Ícones
Tela: como tarefas são
divididas em número e
individualmente
![Page 28: Design de Interação - Capítulo 8 - Design, Prototipação e Construção -](https://reader031.vdocuments.net/reader031/viewer/2022013105/559b69c61a28ab1d188b45b7/html5/thumbnails/28.jpg)
Design Físico
Ferramentas