Mapa mental
DESIGN DE INTERAÇÃO
Contenido del 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
- interface do sistema seja atrativa
- Experiência do Usuário
- sistemas ou aplicativos
- 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
- INTERFACE
- A camada que faz a comunicação
- Física
- hardware
- ex: chip celular
- hardware
- 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
- frente do software
- linguagem artificial
- entrada e saída
- camada lógica
- o IU (Interface de Usuário)
- tecnologia para comunicação
- software
- Física
- “design”
- Contrução de software
- objetos gráficos
- elementos
- efeitos visuais
- tipos
- Botões,Inputs,Links,texto ,imagens
- Contrução de software
- 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
- A interação não amigáveis
- primeiros computadores
- 1970
- computadores com telas
- 1980
- interfaces gráficas (GUI)
- Apple
- Xerox
- 1983
- 1985
- 1990
- computadores domésticos
- IBM windows
- surgimento WEB
- linguagem HTML
- computadores domésticos
- MS-DOS Executive,
- 1987
- Macintosh
- 1990
- Apple Lisa e os Xerox
- 1985
- interfaces gráficas (GUI)
- A partir da Segunda Guerra mundial
- A camada que faz a comunicação
- 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
- resultado final
- Parceiro de discussão:
- comunicação humano-humano
- assistentes virtuais.
- comunicação humano-humano
- Mídia
- comunicação com outros seres humanos
- aplicativos de mensagens
- comunicação com outros seres humanos
- Ferramenta
- determinada função
- impressora
- determinada função
- Usuário como computador
- pessoas ou dispositivos
- 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,
- Hardware
- muda a forma como o ser humano interage
- Interação é a ação de comunicação duas partes
- interatividade
- grau de comunicação
- velocidade, alcance, sincronismo, percepção, flexibilidade sensorial
- grau de comunicação
- 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
- Interação
- um dos pilares de construção de software
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
- linguagem de símbolos ou sinais
- através de interface
- mensagem precisa ser bem estruturada
- humano para máquina e máquina para humano
- mensagem
- emissor
- receptor
- tipos
- emocão
- estímulos sentimentais,
- direcionam a nossa atenção
- está ligada as nossas
- personalidade
- temperamento
- motivações
- experiências
- está ligada as nossas
- emoções rápidas e comuns
- medo
- surpresa
- aversão
- raiva
- felicidade
- pode haver variações.
- direcionam a nossa atenção
- mudanças fisiológicas
- reconhecidas pelas máquinas
- respiração
- ritmo cardíaco
- pulsação
- temperatura
- pressão sanguínea e
- reconhecidas pelas máquinas
- estímulos sentimentais,
- PRINCÍPIOS DE GESTALT
- processo terapêutico
- criado por Fritz Perls
- ajuda entender como as pessoas recebem ideias e reconhecem formas
- criado por Fritz Perls
- 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
- processo terapêutico
- comunicação
- 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
- vantagens
- usuário participativo
- Técnicas
- prototipação
- workshops
- estudar o ambiente e rotina de trabalho do usuário
- Usuários
- 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
- 4 principais premissas
- Design universal
- Razões que excluem as pessoas
- 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
- Necessárias e organizadas
- sistemas seguro
- acessibilidade sustentável.
- 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
- Sistemas fáceis de usar e aprender
- Acessibilidade
- comunicação e a emoção humana
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
- papel
- estudar e levantar todos os requisitos do sistema
- 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
- telas, ícones, menus, estruturas
- estudo mais concreto e detalhado
- Whimsical
- aplicativo on-line
- prototipação de sistemas
- aplicativo on-line
- 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
- é indicado para chamar a atenção
- O branco
- realça os outros elementos e informações textuais
- indicado para o fundo
- realça os outros elementos e informações textuais
- amarelo
- elementos ativos ou que devam ser percebidos
- assertividade, botões de continuidade ou informações positivas.
- elementos ativos ou que devam ser percebidos
- azul
- indicado para fundos
- vermelho
- ajudam no entendimento e aprendizado
- Cores
- estética é um dos pontos importantes do design,
- 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
- framework de código aberto
- Cognição distribuída
- Linguagem e ação
- um conjunto de códigos que tenham a função de auxiliar no desenvolvimento
- 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
- devem atender as exigências e características dos smartphones
- Sites Web
- Formas de navegação
- Menu
- Trilhas de migalhas de pão
- Árvore de navegação
- Abas
- Próximo passo
- Paginação
- Formas de navegação
- Aplicativos móveis
- Protótipos
LINGUAGENS DE PROGRAMAÇÃO
- FRONT-END
- HTML
- Linguagem de marcação de hipertexto
- extensão .html
- baseada em tags <>
- extensão .html
- Linguagem de marcação de hipertexto
- CSS
- Cascading Style Sheets
- extensão .css
- estilos às páginas
- cores,
- fontes
- espaçamentos
- estilos às páginas
- extensão .css
- Cascading Style Sheets
- 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
- Linguagem de back e front end
- extensãp .js
- interações,animaçao e feitos
- FRAMEWORKS
- • Vue.JS
- Angular.JS
- React.JS
- Flutter
- • Bootstrap
- HTML
- FRONT-END
Información
- Descripción
- Mapa Mental sobre DESIGN DE INTERAÇÃO, creado por JULIO CESAR el 28/05/2022.
- Creado por
- JULIO CESAR
- Visitas
- 0
- Valoración