Please enable JavaScript.

Coggle requires JavaScript to display documents.

DESIGN DE INTERAÇÃO - Coggle Diagram

- - - - se uma das partes age a outra reage e vice-versa, realizando
        troca de dados ou informações
  - - - Fatores envolvidos
        
        Sincronismo
        
        Percepção
        
        Alcance
        
        flexibilidade sensorial
        
        Velocidade
    - - Parceiro de discussão
        
        tenta chegar o mais próximo de uma comunicação humano-humano, o computador deve imitar uma pessoa
        
        exemplo: assistentes
        virtuais.
      - Mídia
        
        usamos o computador como meio para comunicação com outros
        seres humanos
        
        exemplo: aplicativos de mensagens
      - Usuário como computador
        
        limita as ações do usuário estabelecidos pelo design
        
        exemplo: qualquer aplicação feita para uma determinada função
      - Ferramenta
        
        utilizamos o computador como meio para gerar um resultado final
        
        exemplo: programas que usados para gerar resultados em razão de produtividade no trabalho
  - - - Hardware
        
        através de botões físicos, teclado, mouse, câmeras, e touch screens
      - Software
        
        através de feedbacks de botões ou links que mudam de cor perante uma ação, caixas de diálogo, alertas, áreas habilitadas ou desabilitadas
  - - - audição, olfato, paladar e visão, memória
    - - Fatores Internos
        
        Intensidade
        
        atenção dispertada pela coisas que acontecem, ex: o despertador de um relógio
        
        Contraste
        
        despertado pelo contraste entre estímulos, como a troca drástica de cores
        
        Movimento
        
        despertado por objetos que se movem
        
        Incongruência
        
        prestar atenção a coisas que não fazem sentido, coisas
        fora do comum
      - Fatores Externos
        
        Motivação
        
        atenção tomada pelas coisas que nos dão prazer
        
        Experiência
        
        mais atenção ao que já entendemos e conhecemos
        
        Fenômeno social
        
        varia a atenção entre grupos de pessoas ou cultura
      - Outros Fatores
        
        Ambiental
        
        junto com o fator de profundidade, nossa atenção é atraída por objetos pequenos e grandes, mais claros ou mais escuros
        
        Profundidade
        
        atenção varia entre objetos que estão entre diferentes
        distancias
    - - Princípio da segregação figura-fundo
        
        percebemos mais as figuras bem definidas e
        salientes em contraste com o fundo
      - Princípio da boa forma
        
        percebemos mais figuras bem formadas e com formas simples,
        regulares e simétricas
      - Princípio do fechamento ou da tendência à estruturação
        
        temos mais facilidade em organizar objetos semelhantes ou próximos um ao outro
      - Princípio da constância perceptiva
        
        os seres humanos têm resistência à mudança por
        isso tudo que já é conhecido é mais perceptivo
- - - - auxilia e facilita na comunicação entre pessoas, ajuda produtividade de pessoas
      - pouco complicado e pode não ser muito aceito por mudar o processo de como as pessoas se comunicam
      - bom para processos mais burocráticos
      - forma como as pessoas se comunicam através da fala
    - - estudo de como as pessoas interagem com as outras pessoas,
        com
        propriedade intelectual diferente ou os artefatos num contexto
      - baseia em conceitos da psicologia e ciência da cognição
      - conhecimento adquirido
        por cada membro do processo é variável
    - - foco no humano, sua sigla significa pessoas, atividades, contexto e tecnologias
    - - código aberto, ajuda os desenvolvedores na
        criação de páginas interativas e responsivas (adaptam ao tamanho dos dispositivos) mais produtivo e fácil
      - documentação é possível encontrar códigos para construção de componentes, podem ser animados, seu código se baseia em HTML, CSS E Java Script
      - versão 5.0, originalmente foi construído para o Twitter por Mark
        Otto e Jacó Thornton e em agosto de 2011 foi lançado como um código aberto
      - suportado pelos navegadores, Google Chrome, Firefox, Internet Explorer, Opera e Safari
- - - - o que está próximo tem algum tipo de relação, , coisas que estão próximas podem representar um grupo de coisas que se parecem
    - - coisas parecidas têm a mesma relação e por isso
        tendem a ter a mesma função
    - - o usuário saiba qual é o próximo passo é muito
        usado para preenchimento de campos
    - - cérebro consegue distinguir uma figura mesmo
        que ela não tenha todas as linhas, através de experiências que você já teve com aquilo
    - - Nosso cérebro não é capaz de focar ao mesmo tempo na frente e fundo e por isso precisamos escolher, usamos este princípio no design chamando a atenção do usuário para coisas importantes como caixas de diálogo ou modais
    - - é utilizado para cards, diz que objetos agrupados
        e isolados fazem parte de um mesmo grupo de informações, mesmo que estejam perto de outros grupos de informações diferentes com formas parecidas
    - - diz que qualquer elemento que se destaque de outros irá receber a atenção ou foco
- - - - 4 principais premissas
        
        Se funciona para pessoas deficientes funciona para todo mundo
        
        Nosso estado emocional interfere na interação
        
        As pessoas mudam ao longo da vida, em sua capacidade intelectual ou outras habilidades
        
        Usabilidade e estética estão ligadas
  - - - Características
        
        Conveniência
        
        sistemas que forçam as pessoas a fazerem coisas inaceitáveis, design ruim induzindo as pessoas a erros
        
        Hábitos culturais e sociáveis
        
        maneira como as pessoas gostam de viver
        
        Política
        
        sistema ser confiável e politicamente aceitável
        
        Utilidade
        
        um sistema que seja útil
        
        Economia
        
        preço do produto se ele é aceitável ou não
  - - - Dificuldade em formar modelos mentais
      - Econômico
      - Exclusões culturais e social
      - Físico
  - - - facéis de usar e aprender
      - eficaz
      - acessíveis, usáveis social e economicamente
        aceitáveis
    - - Verificar o contexto nos quais a interação acontece
      - Prestar atenção nas tecnologias utilizadas (hardware e software)
      - Focar nas atividades que as pessoas querem realizar
      - Focar nas pessoas
    - - relacionamento entre o humano-computador e as tecnologias seja otimizados em lugares e ambientes diferentes
- - - - Este tipo de interface é conhecido como IU (Interface de Usuário)
        
        camada lógica
        
        frente do software que facilita
        a comunicação do usuário com o dispositivo computaciona
        
        interação entre o computador e o humano
        
        através de uma linguagem artificial e depende do design
        
        deve fornecer mecanismos de
        entrada e saída
        
        campos para injeção de textos e informações expostas na tela
        
        Design de Interface
        
        é um dos processos da construção de um software
        
        CONSTITUIDO
        
        Elementos
        
        Imagens
        
        1 more item...
        
        Textos
        
        1 more item...
        
        Inputs (entradas de texto)
        
        1 more item...
        
        Ícones
        
        1 more item...
        
        Links
        
        1 more item...
        
        Animações
        
        1 more item...
        
        Botões
        
        1 more item...
        
        Efeitos Visuais
        
        Objetos Gráficos
  - - - ENIAC OU IBM
        
        não tinha interface
- - - - Prototipação
        
        protótipos ou versões incompletas do sistema
      - , Workshops
        
        encontros periódicos
        com os stakeholders
        
        estudar o ambiente e rotina de trabalho dos stakeholders
    - - o usuário se sentirá valorizado e pertencentes
      - o usuário estará familiarizado com o sistema
      - com essa familiarização a
        consequência é menos gastos com suporte técnico
      - possível fazer treinamentos com versões em pré-lançamento (Beta)
    - - podem colocar hábitos ruins nos processos do sistema
      - em projetos longos o stakehold pode achar que sua contribuição não tenha tanto valor, ele ficará esgotado
      - Os stakeholders, em contato com os designers, podem inibir a criatividade e inovação dos designers
- - - - conteúdos relevantes ao usuário ou público alvo
      - posicionamento de elementos
      - cores utilizadas
    - - grande responsável por garantir que a interface do sistema seja atrativa e atenda todas as necessidades do usuário
  - - - inclui
        
        softwares,
        hardwares e serviços relacionados
        
        recursos tecnológicos integrados, pesquisa cientifica,
        ensino, automação etc
    - - dispositivos de realidade aumentada, dispositivos
        vestíveis, as Smart TVs, consoles de games, assistentes virtuais
- - - - Tabs/Abas
        
        posicionadas principalmente no canto inferior ou superior, auxiliam na navegação entre páginas
      - Carrossel
        
        parecido com uma passagem de slides é bastante usada para imagens, interessante conter um indicador de quantidade para mostrar ao usuário o início e o fim, informação é geralmente indicada por pequenos círculos na parte inferior do objeto
      - Dashboards
        
        possui uma tela principal com atalhos de fácil acesso para algumas funções, são representados por botões grandes
      - Menu suspenso
        
        lista de botões que abre ao ser arrastada para o lado com funções importantes do aplicativo
      - Lista
        
        uma lista com vários itens formados por texto e ícones, pode
        ser vertical ou horizontal
  - - - Menu
        
        principais componentes de um site, pode ser localizado no topo, na lateral (utilizados em sites dinâmicos) de um site, pode ter subitens chamados de dropdown
      - Trilhas de migalhas de pão
        
        usado para mostrar ao usuário em que ponto do site ele está ou onde já passou
      - Árvore de navegação
        
        lista de links que podem se abrir, possue pequeno sinal
        
        sinal de mais ou setas apontam para frente quando fechados
        
        sinal de menos ou seta para baixo quanodo abertos
      - Abas
        
        são como telas que se sobrepõem quando clicadas
        
        aba clicada se destaca com cor diferente
        
        os rótulos são resumidos em uma palavra
      - Próximo passo
        
        utilizado na formulação de questionários, função de passar de uma página para outra, processo de confirmação
      - Paginação
        
        parecida com a navegação por passos tem uma lista com o número das páginas, em um intervalo é possível saber quando e em qual página está
- - - - uma forma do usuário interagir , saber o que o usuário realmente deseja
      - pode ser feito em papel, cartolina, código front-end em versão beta ou até vídeos
      - utilização dos protótipos em papel (Baixa Fidelidade) é possível identificar e antecederpossíveis alterações positivas, responder dúvidas ou alterações antes de escrever
        qualquer código e testar o design com o usuário
    - - estudar e levantar todos os requisitos do sistema com os stakeholders
      - vantagem de ter baixo custo
      - desvantagem, deixa o prazo do projeto mais longo
    - - estudo mais concreto e detalhado
      - baseado em telas, ícones, menus,
        estruturas
      - revisar os requisitos do design, balancear requisitos
        ambientais, usabilidade e requisitos funcionais
      - alta fidelidade
      - este protótipo leva mais tempo para ser construído
      - necessário utilizar uma ferramenta de desenvolvimento para os devidos fins
      - se for uma versão beta
        envolvendo desenvolvedores, eles ficaram mais resistentes as mudanças
      - design físico custa
        mais caro, pois exige esforço desses profissionais e não só do design
      - As expectativas dos
        stakeholders serão maiores e talvez já nos protótipos são encontrados erros de programação