Mapa mental

DESIGN DE INTERAÇÃO

JULIO CESAR Português

Conteúdo do mapa

DESIGN DE INTERAÇÃO

INTERFACE HUMANOCOMPUTADO
- um dos pilares de construção de software
  - sistemas ou aplicativos
    - amigáveis ao usuário,
    - a facilidade para uso
    - software funcional
      - a interface intuitiva
      - usuário confortável e satisfeito
      - considerações
        as cores
        posicionamento de elementos
        conteúdos relevantes ao publico alvo
        opinião do usuário
        protótipos rápidos
        protótipo em papéis
        Designer UX
        Experiência do Usuário
        interface do sistema seja atrativa
        funcional e útil
        pensar primeiramente no usuário
- TCIss (Tecnologias da informação e comunicação)
  - a comunicação
  - recursos tecnológicos integradoss
  - pesquisa cientifica,
  - ensino
  - automação
  - evolução interfaces
    - dispositivos de realidade aumentada
    - dispositivos vestíveis
    - Smart TVs
    - consoles de games
    - assistentes virtuais
    - evolução interação humana
      - Uber
      - Nubank
      - WhatsApp
- INTERFACE
  - A camada que faz a comunicação
    - Física
      - hardware
        ex: chip celular
    - Lógica
      - software
        tecnologia para comunicação
        o IU (Interface de Usuário)
        camada lógica
        frente do software
        comunicação do usuário com o dispositivo
        linguagem artificial
        entrada e saída
  - “design”
    - Contrução de software
      - objetos gráficos
      - elementos
      - efeitos visuais
      - tipos
        Botões,Inputs,Links,texto ,imagens
  - História
    - A partir da Segunda Guerra mundial
      - primeiros computadores
        A interação não amigáveis
        Botôes Físicos
        cabos e chaves
        cartões perfurados
    - 1970
      - computadores com telas
      - 1980
        interfaces gráficas (GUI)
        Apple
        Xerox
        1983
        1985
        1990
        computadores domésticos
        IBM windows
        surgimento WEB
        linguagem HTML
        MS-DOS Executive,
        1987
        Macintosh
        Apple Lisa e os Xerox
- INTERAÇÃO, INTERATIVIDADE E PERCEPÇÃO
  - Interação
    - Interação é a ação de comunicação duas partes
      - pessoas ou dispositivos
        troca de dados ou informações
      - formas
        Usuário como computador
        resultado final
        calculadora
        Parceiro de discussão:
        comunicação humano-humano
        assistentes virtuais.
        Mídia
        comunicação com outros seres humanos
        aplicativos de mensagens
        Ferramenta
        determinada função
        impressora
    - sistema interativo
      - muda a forma como o ser humano interage
        Hardware
        botões físicos
        teclado
        mouse
        câmeras
        touch screens
        Software
        botões de feedbacks
        caixas de diálogo
        alertas,
  - interatividade
    - grau de comunicação
      - velocidade, alcance, sincronismo, percepção, flexibilidade sensorial
  - percepçao
    - sentidos, audição, olfato, paladar ,visão e memória
    - fatores internos
      - Intensidade
      - Contraste
      - Movimento
      - o Incongruência
    - fatores externos
      - Motivação
      - Experiência
      - o Fenômeno social
    - outros fatores
      - Profundidade e Ambiental
    - 4 princípios básicos
      - Princípio do fechamento
      - Princípio da segregação figura-fundo
      - • Princípio da boa forma
      - Princípio da constância perceptiva
COMUNICAÇÃO, EMOÇÃO HUMANA E A COMPUTAÇÃO
- comunicação e a emoção humana
  - comunicação
    - tipos
      - humano para humano
      - humano para máquina
        mensagem precisa ser bem estruturada
        através de interface
        ícones
        mensagens
        símbolos
        uso da semiotica
        linguagem de símbolos ou sinais
        varias culturas diferentes
      - humano para máquina e máquina para humano
    - mensagem
    - emissor
    - receptor
  - emocão
    - estímulos sentimentais,
      - direcionam a nossa atenção
        está ligada as nossas
        personalidade
        temperamento
        motivações
        experiências
      - emoções rápidas e comuns
        medo
        surpresa
        aversão
        raiva
        felicidade
        pode haver variações.
    - mudanças fisiológicas
      - reconhecidas pelas máquinas
        respiração
        ritmo cardíaco
        pulsação
        temperatura
        pressão sanguínea e
  - PRINCÍPIOS DE GESTALT
    - processo terapêutico
      - criado por Fritz Perls
        ajuda entender como as pessoas recebem ideias e reconhecem formas
    - 8 princípios de Gestalt
      - Proximidade
      - Semelhança ou Similaridade:
      - Continuidade
      - Fechamento
      - Segregação ou Figura-Fundo
      - Unidade ou Região Comum
      - Ponto Focal:
      - Pregnância
- Stakeholder
  - Usuários
    - usuário participativo
      - Contribui para aceitação do sistema
      - compreender a necessidade e objetivos sobre o produto
      - gerenciamento da expectativa
        mostrar produto de acordo com a realidade
      - sentimento de apropriação
        cliente se sinta envolvido no processo
      - Stakeholder no processo
        vantagens
        menos gastos com suporte
        familiarização do sistema
        usuário se sentirá valorizado e pertencentes
        desvantagens
        inibir a criatividade
        inibir inovação
        podem colocar hábitos ruins nos processos do sistema
  - Técnicas
    - prototipação
    - workshops
    - estudar o ambiente e rotina de trabalho do usuário
- ACESSIBILIDADE, ACEITABILIDADE E USABILIDADE
  - Acessibilidade
    - Razões que excluem as pessoas
      - Físico
      - Dificuldade em formar modelos mentais
      - Econômico
      - Exclusões culturais:
      - Exclusão social:
    - Design para todos
      - Design universal
        4 principais premissas
        As pessoas mudam
        Se funciona para pessoas deficientes funciona para todo mundo
        Nosso estado emocional interfere na interação
        Usabilidade e estética estão ligadas
  - Aceitabilidade
    - Política
    - Conveniência
    - Hábitos culturais e sociáveis
    - Utilidade
    - Economia
  - framework PACT(Pessoas, Atividades, Contextos e Tecnologias).
    - Sistemas fáceis de usar e aprender
      - acessibilidade sustentável.
        eficácia e eficiência do software
        informações
        Necessárias e organizadas
        documentação cominformações necessárias e suficientes
        sistemas seguro
    - 4 principais fatores para usuabilidade
      - Focar nas pessoas
      - Focar nas atividades que as pessoas querem realizar
      - Verificar o contexto que as iterações acontece.
      - Prestar atenção nas tecnologias utilizadas
ANÁLISE E PLANEJAMENTO
- Protótipos
  - forma do usuário interagir com o futuro sistema
  - pode ser feito
    - papel
    - cartolina
    - código front-end
    - versão beta
    - vídeos
  - Design conceitual
    - estudar e levantar todos os requisitos do sistema
      - papel
        baixo cusco
        baixa fidelidade
        prazo do projeto mais longo
  - Design físico
    - estudo mais concreto e detalhado
      - telas, ícones, menus, estruturas
        alta fidelidade
        design físico custa mais caro
        pode-se descobrir possiveis erros na programaçao
  - Whimsical
    - aplicativo on-line
      - prototipação de sistemas
- DESIGN E PADRÕES
  - estética é um dos pontos importantes do design,
    - Cores
      - ajudam no entendimento e aprendizado
        chamar a atenção
        destacar perceber,
        hierarquizar,
        organizar
        ambientar,
        simbolizar
      - indicado que se use no máximo 7 cores
        vermelho
        é indicado para chamar a atenção
        alertas de erros
        O branco
        realça os outros elementos e informações textuais
        indicado para o fundo
        amarelo
        elementos ativos ou que devam ser percebidos
        assertividade, botões de continuidade ou informações positivas.
        azul
        indicado para fundos
- FRAMEWORKS
  - um conjunto de códigos que tenham a função de auxiliar no desenvolvimento
    - Linguagem e ação
      - Cognição distribuída
        como as pessoas interagem com as outras
      - PACT
        ajuda a entender onde o humano se encaixa em cada passo
      - Bootstrap
        framework de código aberto
        ajuda os desenvolvedores na criação de páginas interativas e responsivas
- DESENVOLVIMENTO DE INTERFACES
  - Aplicativos móveis
    - devem atender as exigências e características dos smartphones
      - tela
      - memoria
      - contexto de ambientes
    - tipos de navegação,
      - Dashboards
      - Tabs/Abas
      - Carrossel
      - Menu suspenso
      - Lista
  - Sites Web
    - Formas de navegação
      - Menu
      - Trilhas de migalhas de pão
      - Árvore de navegação
      - Abas
      - Próximo passo
      - Paginação
LINGUAGENS DE PROGRAMAÇÃO
- FRONT-END
  - HTML
    - Linguagem de marcação de hipertexto
      - extensão .html
        baseada em tags <>
  - CSS
    - Cascading Style Sheets
      - extensão .css
        estilos às páginas
        cores,
        fontes
        espaçamentos
  - JAVA SCRIPT
    - interações,animaçao e feitos
      - extensãp .js
        Linguagem de back e front end
        tipagem dinâmica
        orientação a objetos
        eventos
        imperativo e funcional
  - FRAMEWORKS
    - • Vue.JS
    - Angular.JS
    - React.JS
    - Flutter
    - • Bootstrap

Informações

Descrição: Mapa Mental sobre DESIGN DE INTERAÇÃO, criado por JULIO CESAR em 28-05-2022.
Criado por: JULIO CESAR
Visualizações: 0
Avaliação

DESIGN DE INTERAÇÃO

Conteúdo do mapa

Informações

Fale Conosco

O que você acha do novo visual?