Interação Humano Computador ( Aula 4 ) - Abordagens Teóricas
Interação Humano Computador Capítulo 9 - Design
-
Upload
wellington-oliveira -
Category
Education
-
view
1.534 -
download
3
description
Transcript of Interação Humano Computador Capítulo 9 - Design
![Page 1: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/1.jpg)
Interação Humano-Computador
Design
![Page 2: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/2.jpg)
Objetivo
• Entender a natureza do design conceitual e do design físico;
• Entender como a metáfora funciona em design;
• Aprender a realizar uma análise do objeto ação;
• Especificar um design que possa ser implementado pelos programadores.
![Page 3: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/3.jpg)
O que estudamos?
• Cap 2: PACT;
• Cap 3: Design baseado em personas;
• Cap 7: Entendimento;
• Cap 8: Antecipação.
![Page 4: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/4.jpg)
Processo de Design
![Page 5: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/5.jpg)
Design Conceitual
• Os designers precisam garantir que seu conceito de sistema seja facilmente aprendido pelas pessoas e que se encaixe nas suas expectativas e preferências.
• Um bom modelo conceitual será decorrência de se levar em consideração a metáfora subjacente usada para fornecer a estrutura do design.
![Page 6: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/6.jpg)
Design Conceitual
• Uma parte vital do trabalho de design é explorar o espaço de design no abstrato;
• Mantendo-se no abstract o design entende e é entendido pelo usuário.
![Page 7: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/7.jpg)
Explorando conceitos de design
• Bill Verplank (2007) argumenta que o design se concentra em três pontos principais:
• Como você faz? Trata-se de como nós afetamos o mundo
• Como você sente? Trata-se de como damos sentido ao mundo e as qualidades
• Como você sabe? Como as pessoas aprendem e planejam
![Page 8: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/8.jpg)
Explorando o espaço de design
• Um espaço de design restringe o design em algumas dimensões enquanto permite a exploração de alternativas em outras dimensões.
• Brainstorming pode ser usado para expandir os limites do cenário analisando outras alternativas e idéias fora das dimensões estabelecidas.
![Page 9: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/9.jpg)
Metáfora em Design
• Tomar conceitos de um domínio e aplica-los em outro é o que geralmente chamamos de metáfora.
• No desenvolvimento de sistemas interativos estamos constantemente tentando descrever um novo domínio e a metáfora é uma ferramenta chave para descrever tal domínio com domínios que já conhecemos.
![Page 10: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/10.jpg)
Exemplo
![Page 11: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/11.jpg)
Exemplo
![Page 12: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/12.jpg)
Combinação de Domínios
• A combinação que resulta de juntar dois domínios terá algumas características que não estavam nos dominós originais.
• Para que metáforas funcionem deve haver entre os domínios conceitos genéricos que permitam associar dois domínios originais.
![Page 13: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/13.jpg)
Domínios de Conceitos
![Page 14: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/14.jpg)
Design e Metáfora
• Uma das tarefas do designer de interação é criar uma boa metáfora que ajudará as pessoas a aprender a usar o sistema e a entenderem o conteúdo.
![Page 15: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/15.jpg)
Princípios de Design de Metáfora
• O designer deve seguir princípios para manter boas metáforas, segue nos próximos slides alguns detalhes que devem ser mantidos.
![Page 16: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/16.jpg)
Integração
• O objetivo é manipular toda a combinação, mantendo a teia dos relacionamentos das idéias (metáfora).
![Page 17: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/17.jpg)
Desagrupamento
• As pessoas devem ser capazes de desagrupar a combinação e entender de onde vieram os componentes e como eles funcionam.
![Page 18: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/18.jpg)
Topologia
• Refere-se a forma como os conceitos são organizados e estruturados.
![Page 19: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/19.jpg)
Análise
• O design deve se concentrar em obter a funcionalidade e os conceitos adequados explorando as ramificações da metáfora.
![Page 20: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/20.jpg)
Design
• Como representar através de metáforas objetos e ações.
![Page 21: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/21.jpg)
Desing Conceitual
• As histórias ajudam no entendimento e os cenários conceituais são abstraídos de histórias para fornecer atividades genéricas;
• Embora seja superficialmente fáceis de construir, há sempre uma série de maneira nas quais os cenários podem se tornar mais eficazes, segue lista:
![Page 22: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/22.jpg)
Cenários Eficazes
• Complemente os cenários com algumas das técnicas de antecipação mais visuais;
• Em um grande grupo de design, inclua dados e materiais reais;
• Pense bastante sobre as suposições fundamentais;
• Inclua uma boa caracterização e desenvolva várias personas;
![Page 23: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/23.jpg)
Cenários Eficazes
• Proporcione um background conceptual rico (acelera a aceitabilidade);
• Os membros da equipe podem escrever suas próprias versões concretas de um cenário conceitual.
![Page 24: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/24.jpg)
Corpus de Cenários
• Uma boa maneira de fazer design conceitual é realizar uma análise objeto/ação do corpus de cenários.
• Para cada um dos cenários no corpus o analista deve refletir sobre as descrições do cenário, identificando os objetos que são mencionados e as várias ações que são realizadas..
![Page 25: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/25.jpg)
Técnicas Diagramáticas
• O resultado da análise de objeto pode ser representado como um modelo de objeto ou como um modelo entidade-relacionamento.
• O modelo de entidade-relacionamento e o modelo de objetos são técnicas de diagramação comumente utilizados pelos design.
![Page 26: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/26.jpg)
Exemplo Diagrama
![Page 27: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/27.jpg)
Titulo
• xx.
![Page 28: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/28.jpg)
Design Físico
• A preocupação do design físico é com a forma como as coisas funcionarão e o detalhamento da aparência geral do produto.
• O desing físico tem três componentes:
• Operacional (como funciona);
• Representacional (forma física);
• Design de Interação (utilidade).
![Page 29: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/29.jpg)
Linguagem de Design
• Uma linguagem de design consiste no seguinte:
• um conjunto de elementos de design;
• alguns princípios de composição;
• grupos de situações qualificadoras.
![Page 30: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/30.jpg)
Linguagens de Design
• Desenvolvendo Linguagens de Design• Caracterização - o processo de desenvolver suposições;
• Rerregistro - criação de um novo conjunto de suposições;
• Desenvolvimento de demonstrações - usando storyboards, protótipos, etc.;
• Avaliação das reações - Entender a reação das personas aos designs montados;
• Evolução da linguagem - sempre pode ser melhorada.
![Page 31: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/31.jpg)
Design de Interações
• A passagem de design conceitual para físico requer que os designers aboquem funções e conhecimento a pessoas ou dispositivos e que, por tanto, criem intereações.
• O design de interações é a alocação de funções a pessoas ou dispositivos.
![Page 32: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/32.jpg)
Padrões de Interação
• A idéia de padrão foi adotado pelos designers de sistemas interativos e aparece como padrões interação.
• Pense, se mantemos padrões mantemos a familiaridade com as ações e com o comportamento de suas reações.
![Page 33: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/33.jpg)
Técnicas de Diagramação
• Diagramas são bons elementos para demonstrar a interação de usuários.
• Um simples fluxograma, um modelo de sequência, um diagrama de transição de estado ou até mesmo um diagrama de estrutura de tarefas.
![Page 34: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/34.jpg)
Fluxograma
![Page 35: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/35.jpg)
![Page 36: Interação Humano Computador Capítulo 9 - Design](https://reader033.fdocumentos.tips/reader033/viewer/2022061521/5560b892d8b42aef3b8b4b7e/html5/thumbnails/36.jpg)
Referência
• BENYON, David. Interação Humano-Computador. 2. ed. São Paulo: Pearson, 2011.