Princípios de Interação Humano-Computador

• Mestre em Banco de Dados e Recuperação da Informação pela UFAM (2018)
• Pós-graduando em Ciência de dados – Xpe (2024)
• Pós-graduado em Desenvolvimento de Sistemas para Web – Java pelo IFAM (2010)
• Graduado em Licenciatura em Informática pela UEA (2008)
• Mais de 25 anos de experiência em:
  • Pesquisa e desenvolvimento de software
  • Liderança de equipe
  • Planejamento e acompanhamento de projetos (prazo, qualidade, escopo e recursos)
• Conhecimento e utilização de bancos de dados: PostgreSQL, MySQL, SQLServer, Oracle, Firebird.
• Certificações:
  • CSM (Certified ScrumMaster) CSPO (Certified Scrum Product Owner) pela Scrum Alliance

Engenheiro de Computação formado pela a Universidade Paulista - UNIP, MBA em Gestão de Projetos - IDAAM, Experiência em projetos de desenvolvimento de software, responsável por maximizar o valor resultante do produto desenvolvido, gestão do Product Backlog, visando garantir que o trabalho esteja de acordo com os compromissos estabelecidos com os clientes do projeto. Otimizar o retorno sobre o investimento do trabalho realizado pelo Time de Desenvolvimento. 
Possuo experiência na área de qualidade do software por meio das etapas de testes de forma manual e automática, fazendo uso de ferramentas como Selenium, Robot Frameworks, GitLab e integração contínua. 

Atualmente atuo como Product Owner junto aos projetos de tecnologia na FPF Tech, fazendo uso de metodologias, ferramentas e técnicas que visam sempre extrair e entregar aos clientes e parceiros uma solução com o maior valor agregado possível. Facilitador em reuniões com cliente, times e demais cerimonias diárias referente aos projetos.

Faça dupla com o colega próximo a você

Conforme o quadrante ao lado descreva o apelido e faça o desenho da sua dupla

Por fim cada um deverá entrevistar e preencher o restante do quadrante.

Imagem: https://www.cursospm3.com.br/blog/lean-inception-como-alinhar-pessoas-e-construir-o-produto-certo/

Atividade

30 Minutos

O que significa interagir com pessoas para vocês?

1. Escrevam uma resposta por postit
2. Vamos agrupar as respostas no Flip Chart

Atividade

Atividade - Interação

15 Minutos

E se conseguíssemos interagir igualmente com os computadores?

Com que dispositivos você interage no seu dia a dia?

https://www.menti.com/al7smnzkkf8q

Atividade

7 Minutos

Conjunto de hardware, software e meio de comunicação que geram sistemas computacionais

Tecnologia da Informação e Comunicação - TICs

TICs impactam nossa vida cotidiana e alteram nossa definição de:

Tecnologia da Informação e Comunicação - TICs

Quem pode/deve 

Como

Onde

Por que

Quando

21 de outubro de 2020

Tecnologia da Informação e Comunicação - TICs

O que mais ela pode estar fazendo por meio da tecnologia enquanto corre?

Exemplos de impactos das TICs

A Apple incluiu no Iphone 2008 adicionou novos recursos importantes ao aparelho, como: sensor GPS para monitorar localização, suporte para redes 3G e desempenho mais rápido. O mais importante, no entanto, foi a introdução da App Store, transformando o iPhone em uma plataforma de computação completa.

Em 2007 a Nintendo lançou o inovador Wii®, incluindo sensores infravermelhos conectados a uma TV que rastreava um bastão que transmitia sinais infravermelhos. Com essa nova solução foi possível realizar alguns novos gestos como lançar uma bola de boliche, balançar uma raquete de tênis entre outros movimentos

Second Life (também abreviado por SL) é um ambiente virtual e tridimensional que simula a vida real e social do ser humano através da interação entre avatares. Foi criado em 1999, lançado em 2003.

Melhorar a usabilidade e a experiência do usuário (UX) com sistemas computacionais.

O design de sistemas interativos preocupa-se com o desenvolvimento de alta qualidade, produtos e serviços que combinem com seu modos de vida.

Por quê estudar IHC?

Por quê estudar IHC?

Estudar e compreender IHC nos prepara para construir soluções tecnológicas que ajudem pessoas, construindo sistemas:

• Práticos
• Agradáveis 
• Estimulantes
• Confiáveis
• Produtivos
• Seguros

A Interação Humano Computador - IHC é um campo de estudo multidisciplinar, prática de design, implementação e avaliação de sistemas interativos, considerando a interação entre humanos e computadores.

O que é?

Importância da IHC

Usabilidade

Satisfação do Usuário

Eficiência e Produtividade

Inclusão

Histórico da IHC

Histórico da IHC - 1940-70

https://www.youtube.com/watch?v=_qbBpnA-71w

Histórico da IHC - 1940-60

Histórico da IHC - 1970-80

Histórico da IHC - 1970-80

Histórico da IHC - 1990

Histórico da IHC - 1990

Histórico da IHC - 2000 A vida digital

Onde aplicar IHC?

Onde aplicar IHC?

Onde aplicar IHC?

Onde aplicar IHC?

Onde aplicar IHC?

• Individualmente compartilhe uma experiência positiva e uma negativa com algum sistema/software. Anote uma experiência por postit.
• Pode ser qualquer tipo de interface, como um aplicativo móvel, um website, ou um dispositivo eletrônico.

Atividade

Atividade - Individual

10 Minutos

Organizar grupos de (3-5 alunos).

Cada grupo deve discutir e identificar as principais dificuldades encontradas na interação com sistemas computacionais baseando-se nas experiências compartilhadas anteriormente respondendo as perguntas:

Atividade

Atividade em grupo

• Quais foram os principais problemas enfrentados?
• Como esses problemas afetaram a usabilidade e a experiência do usuário?
• Quais soluções poderiam melhorar essas interfaces?

45 Minutos

Código da turma Classroom: iolh2tw

Cada grupo deve apresentar um resumo das discussões, destacando os principais pontos e possíveis soluções identificadas.

Atividade

Atividade - Apresentação

30 Minutos

A Interação Humano-Computador (IHC) é baseada em um conjunto interdisciplinar que envolve:

• Ergonomia/ Fatores Humanos;
• Ciências da Computação;
• Psicologia Cognitiva;
• Psicologia Social;
• Linguística;
• Inteligência Artificial;
• Filosofia, Sociologia e Antropologia;
• Engenharia e Design.

A origem da palavra “ergonomia” vem da soma de duas palavras do grego: ergon (trabalho) e nomos (normas). Em linhas gerais, ergonomia é uma ciência que visa o entendimento da relação das pessoas com as máquinas, equipamentos e condições de trabalho.

Ergonomia

Ergonomia

A ergonomia busca atuar com uma abordagem holística, ou seja,  significa olhar para algo como uma entidade totalmente interconectada; entender o quadro maior e não apenas pensar fora da caixa, mas remover a caixa completamente.

Ergonomia

Alguns fatores são considerados no estudo da ergonomia, sendo eles:

A Ergonomia está interessada em utilizar todas as ciências que foram comentadas com objetivo de melhorar as condições de trabalho.

Importante salientar que é entendido como trabalho toda ação humana intermediada por uma interface física, eletrônica ou mecânica. 

O que é uma interface para você?

https://www.menti.com/alac38gt6jgx

A Interface é o nome dado para modo como ocorre a “comunicação” entre duas partes distintas e que não podem se conectar diretamente.

Eis que temos um problema na construção de interfaces:

+ Funcionalidades vs

+ Usabilidade

Exemplos de interface

Exemplos de interface

A forma da interface define o que pode ser feita com ela.

Ex: Diferentes maçanetas formas diferentes de abrir a porta

Modelo de interação humano computador

Fonte: https://www2.dbd.puc-rio.br/pergamum/tesesabertas/0210297_04_cap_03.pdf

Psicologia na IHC

Funções mentais superiores:

• Percepção
  • Teoria da percepção: Ecologista x Construtivista
• Sensação
• Atenção
• Memória
• Linguagem e Pensamento
• Emoção

Psicologia na IHC

Construtivista - A informação é construída envolvendo processos cognitivos

Ecologista - A informação é detectada em um processo direto, ou noção de affordance

Ecologista

Preece, J.; Rogers, Y.; Sharp, E.; Benyon, D.; Holland, S.; Carey, T. (1994) HumanComputer Interaction. England: Addison-Wesley, 1994. Robson, C. (1993) Real World Research. Oxford, UK: Blackwell.

Quais botões temos nessa tela?

Qual frase foi mais fácil de ler?

Olhe abaixo e diga as CORES, não as palavras:

Perceber é muito mais que ver...

• O que vocês conseguem ver?
• Degradando a imagem...
  • Para “ver” o cachorro você adiciona informação que não está presente
  • Uma vez que se “vê” o cachorro é muito difícil não vê-lo mais

• A habilidade de perceber objetos em uma tela - textos, gráficos, representações bi ou tri-dimensionais - é resultado de nosso conhecimento anterior e expectativas do que deveria aparecer

Cognição

A cognição se refere aos processos por meio dos quais nos relacionamos com as coisas ou, em outras palavras, a como ganhamos conhecimento.

O principal objetivo na cognição associada à IHC tem sido compreender e representar a forma como as pessoas interagem com computadores em termos de como o conhecimento é transmitido entre os dois.

Cognição

1. Objetos de design pobre podem ser difíceis e frustrantes de usar;
2. Eles proporcionam falsas dicas, ou não proporcionam dica alguma;
3. Eles atrapalham o usuário no seu processo de interpretação e compreensão.
4. Objetos bem desenhados são fáceis de interpretar e compreender;
5. Eles contêm dicas visíveis para a sua operação.

Cognição - Pontos de atenção

Cognição - Case

• O exemplo ilustra um dos princípios fundamentais do design: a visibilidade.
• As partes corretas devem ser visíveis, e devem passar a mensagem correta, através de sinais naturais, que são interpretados sem necessidade de se ter consciência dos mesmos.

Cognição - Case

Controle de automóveis

• Em geral, cada função tem o seu controle associado (1:1);
• Há bom feedback; o sistema é compreensível;
• Os relacionamentos entre as intenções do usuário (o motorista), as ações requeridas e os resultados são sensatos, não-arbitrários e com significado.

Existem alguns conceitos cognitivos, isto é, associados às atividades mentais realizadas pelo usuário quando do uso de um artefato tecnológico, que servem como princípios para o design de interfaces, aplicando-se principalmente ao design de interfaces gráficas ou de manipulação direta. 

Cognição

Em resumo, a idéia consiste em que os controles e as suas limitações têm que ser visíveis, com um bom mapeamento entre as operações sobre eles e os seus efeitos, e o design deve também sugerir (afford - “bancar”) sua funcionalidade.

Cognição

Affordance é um termo técnico que se refere à propriedade de os objetos deixarem explícita a informação das operações e das manipulações que podem ser feitas sobre os mesmos.

Nos carros, em geral, as coisas são visíveis

Cognição

Em aparelhos eletrônicos como o ao lado não ocorre tão bem, sendo:

1. Muitos botões têm múltiplas funções;
2. Há um feedback pobre, e o usuário normalmente fica em dúvida de se o resultado desejado será atingido.
3. Há estrutura pouco ou quase nada visível;
4. Os mapeamentos entre os controles e os seus efeitos são arbitrários, e não há correspondência entre as metas do usuário e os botões e/ou displays que compõem a interface (o painel de controle);

Cognição

Enquanto a affordance sugere o escopo de um objeto em termos do que pode ser feito com ele, as restrições (constraints) limitam as possibilidades do que pode ser feito com ele.

Norman (1992) sugere que há 4 tipos de restrições:

Cognição

1. físicas;
2. semânticas;
3. culturais;
4. lógicas.

As restrições semânticas dependem da semântica da situação de uso que o usuário conhece. Dependem do conhecimento do mundo e da situação específica em que o sistema computacional ou artefato tecnológico está inserido.

A lixeira no mundo real fica escondida "normalmente" para a situação de um artefato tecnológico como a lixeira do MacOS precisamos torná-la visível.

Cognição - Restrições

As restrições culturais consistem na informação e nas regras que permitem que nos comportemos em ambientes sociais. De forma análoga, muitos ícones podem ser criados de forma a capitalizar convenções culturais.

Por exemplo, um sinal de interrogação é associado culturalmente com um sistema de perguntas e respostas, um ambiente de auxílio ou help.

Cognição - Restrições

Cognição - Restrições

Cognição - Mapeamentos

A visibilidade indica o mapeamento entre as ações pretendidas pelo usuário e as operações disponíveis para acionar o aparelho, logo, a visibilidade:

• Indica distinções cruciais, que permitem, por exemplo, distinguir entre sal e pimenta.
• Resposta do sistema permite verificar se o resultado esperado foi ou não alcançado.
• Estreita relação com o mapeamento entre os controles e as funções associadas.
• Controles com mais de uma função associada são não-naturais, difíceis de lembrar e de usar;

Cognição - Visibilidade

Dica:

• ​Quando o número de controles coincide com o número de funções, cada controle pode ser especializado, rotulado; as funções disponíveis são visíveis e, se o usuário esquece alguma função, o controle associado serve como lembrete.

Cognição - Visibilidade

Cognição - Feedback

Cognição - Exemplos

Sensação

1. É a operação que leva ao cérebro informações de fenômenos do meio externo e do estado do organismo
2. É por meio dela que os indivíduos se relacionam com o ambiente

Sensação - Tipos

1. Interoceptiva – permite ao cérebro tomar conhecimento do que acontece nos órgãos internos. Se manifesta de diferentes maneiras (fome, calor, frio, desconforto...); por meio de pressentimentos ou pelos sonhos. São inconsistentes e seu significado é aprendido por meio da experiência.
2. Proprioceptiva – permite ao cérebro tomar conhecimento do seu movimento (movimento corpóreo) no espaço e da sua posição em relação aos outros. Ex: Equilíbrio
3. Exteroceptiva – permite o contato entre o indivíduo e o meio externo por meio dos órgão dos sentidos.

Sensação

  https://www.menti.com/alebakasm2ys

Resumo - Estímulo, Sensação e Percepção

Atenção

Atenção

1. Seleção de coisas para se concentrar dentre várias ao nosso redor, em um dado momento

2. Mecanismo que permite a fixação de alguns estímulos e a organização das informações para o processo de tomada de decisão

   • Seletiva: foca em alguns e descarta os demais
   • É influenciada pelas necessidades, motivações, interesses, personalidade, cultura, objetivo, prazer, medo...

Atenção

1. Atenção focada

   • habilidade de concentrar em um determinado evento quando existe uma série de eventos competindo
     • o que é relevante as atividades e intenções que se tem no momento

2. Atenção dividida

   • Quando se tenta atender a mais de uma demanda ao mesmo tempo

     • ex.: dirigir e conversar com um passageiro ao lado

Atenção - Interface

Exemplo de uso excessivo de gráficos

https://thebiguglywebsite.com/

Facilitando a atenção para Interface

1. Como dirigir a atenção do usuário para a informação relevante no display?

   • Estruturando a interface 
     • torná-la fácil de ser navegada
     • apresentar informação na medida certa: nem muita e nem pouca
     • agrupar e ordenar a informação em partes significativas
2. Outras técnicas
   • cores
   • técnicas de alerta: vídeo reverso, som e etc
   • janelas

Implicação da atenção para projetos de Interface

1. Destacar a informação, quando esta necessitar de atenção

2. Utilizar técnicas que façam com que coisas se destaquem, como:

   • cor, disposição, espaçamento, sublinhado, ordenação e animação.

3. Evitar sobrecarregar a interface

   • Exemplo: Google, possui um design simples e rápido

4. Utilizar os recursos de software avaliando sua real necessidade de uso, ou seja, não apenas porque o software permite implementá-los 

Memória

• "Faculdade de reproduzir conteúdos inconscientes"​
• Memorização e recuperação do material armazenado: Uma vez "prestada a atenção" e registrados os estímulos, pode-se recuperar as informações. Nesse processo de recuperação, a mente humana faz composições, preenche lacunas, etc. As informações mais relevantes tendem a ser lembradas mais facilmente.

Memória

Falhas na recuperação: pode haver falhas na codificação (falta de atenção), no armazenamento (sabe-se apenas como aconteceu), na recuperação, no resgate ou interferências de novas informações.

Memória

Enriquecimento: mecanismos como associação a imagens/idéias, organização e classificação do “material” são apontados como essenciais para o enriquecimento da memória.

Linguagem e Pensamento

• Distinguem o homem dos outros animais.
• São a base do processo de comunicação interna e externa.
• O pensamento compreende atividades mentais como raciocinar e formar conceitos. Já a inteligência é a capacidade de usar o pensamento para a solução de problemas.
• Desenvolvimento do pensamento: O homem se adapta ao ambiente por meio de assimilação e acomodação do estímulo.

Linguagem e Pensamento

• Logo, para o conceito de interface facilitar ou reduzir o esforço de raciocínio e formação de conceitos tendem a dar um resultado melhor para a utilização de tecnologias.
• Exemplo Labels e Rótulos: A escolha das palavras nas interfaces (por exemplo, em botões, menus e mensagens de erro) é fundamental para a clareza e compreensão. Termos intuitivos e familiares facilitam a navegação e reduzem a carga cognitiva.

Emoção

• Estado de sentimentos (somáticos, psíquicos e comportamentais) ligados ao afeto e ao humor. Possui três componentes básicos: cognitivo, fisiológico e comportamental.
• Componentes básicos: Cognitivo (pensamento, crença), fisiológico (próprio organismo) e comportamental (sinais exteriores)
• Componentes culturais: Felicidade, surpresa, raiva, tristeza, medo e repugnância

Emoção

• O impacto emocional pode ser observado por exemplo em:
  • Atração Visual: Um design esteticamente agradável pode gerar uma resposta emocional positiva.
  • Personificação: A inclusão de avatares ou assistentes virtuais que interagem de maneira humana pode criar uma conexão emocional mais forte, tornando a experiência de interação mais pessoal e agradável.

Modelos mentais e metáforas

Modelos mentais e metáforas

Modelos mentais e metáforas

• Um bom modelo conceitual permite antecipar o resultado das ações e verificar se os efeitos são de fato os esperados.
• O modelo conceitual das coisas do dia-a-dia não precisam ser muito complicados. Não é necessário entender as propriedades físicas ou químicas subjacentes a cada artefato, mas, sim, tornar explícito o relacionamento (mapeamento) entre os controles e os resultados das ações.

Modelos mentais e metáforas - Resumindo

Da mesma forma, o modelo conceitual das interfaces homem-máquina não precisa - nem deve - incorporar conceitos de eletrônica, mas, sim, tornar explícito o relacionamento entre as funções oferecidas e o resultado de sua seleção pelo usuário.

Heurísticas

Heurísticas

• Heurísticas são utilizadas em Teste de usabilidade que é um mundo amplo e extremamente detalhista em sua avaliação.
• Portanto para  ter um feedback rápido do nível de usabilidade que possuímos em determinada aplicação ou interface podemos utilizar as heurísticas de Nielsen, que apesar de serem desenvolvidas a décadas ainda são um bom guia.
• Essas heurísticas são os dez princípios gerais do design de interface do usuário, propostas por Jakob Nielsen em 1993.

Heurísticas de Nielsen

Heurísticas

Heurísticas

Heurísticas

Heurísticas

Heurísticas

Heurísticas

Heurísticas

Heurísticas

Heurísticas

Heurísticas

Atividade - Heurísticas

60 Minutos

Design Centrado no Usuário (DCU), consiste em uma metologia de design que visa ajudar a criar interfaces de aplicativos, websites, sistemas, softwares, etc, que atendam as necessidades do usuário e faz com que estes usuários tenham uma boa experiência de uso desse serviço ou produto.

Donald Norman, criador do termo ‘experiência do usuário’ cita:

Princípios do Design Centrado no Usuário

Don Norman definiu 4 grandes princípios do Design Centrado no Usuário que vão nortear e ajudar na implementação do conceito no seu dia a dia.

Princípios do Design Centrado no Usuário

Etapas do Design Centrado no Usuário

Fonte: https://www.interaction-design.org/literature/topics/user-centered-design

Etapas do Design Centrado no Usuário

Fonte: https://www.interaction-design.org/literature/topics/user-centered-design

A ideia de criação de um produto à prova de falhas e perfeito é, não somente uma ilusão, como muito perigoso, trazendo desperdícios de tempo, dinheiro e de outros recursos. Logo como vimos na etapa esse processo necessita ser cíclico ou iterativo, ou seja, a cada fim de etapa é essencial voltar à fase de pesquisa e de identificação de contexto e requisitos para criar uma versão melhorada do produto.

Design Centrado no Usuário

Portanto, a iteratividade do processo é fundamental para que o foco esteja sempre na usabilidade e nos objetivos do usuário.

Esse pensamento cíclico pode ser encontrado, inclusive, em outros conceitos como:

A multidisciplinaridade no Design Centrado no Usuário

As diferentes visões e backgrounds possibilitam uma maior e melhor análise sobre a jornada do usuário e sobre como desenvolver a solução mais adequada. Portanto, é interessante contar com a colaboração de:

• Designers
• Analistas de sistema
• Stakeholders
• Analistas de marketing
• Analistas de negócio
• Vendas, etc.

E como aplicamos Design Centrado no Usuário na prática?

Existem diversas ferramentas que podem te ajudar a efetuar pesquisas, análises e validações a respeito dos seus usuários com o objetivo de entendê-los melhor. Vamos trabalhar com a entrevista e segue outros exemplos abaixo:

• Entrevista com Usuários
• Personas
• Jornada do Usuário
• Teste de Usabilidade
• Pesquisa de Campo

Entrevista com Usuários

O objetivo dessa ferramenta é captar informações do usuário para aprender mais sobre seus hábitos, necessidades, comportamentos ou qualquer outro assunto específico e de interesse para o projeto.

Entrevista com Usuários

A entrevista é um método rápido para coletar informações como:

• Dados de background do usuário (¹demografia e ²etnografia);
• Uso de tecnologia em geral;
• Uso do produto;
• Objetivos, motivações, dores e necessidades do usuário.

²Etnografia é o estudo descritivo da cultura dos povos, sua língua, raça, religião, hábitos etc., como também das manifestações materiais de suas atividades.

¹As demografias do cliente abrangem uma variedade de características que definem uma base de clientes, incluindo idade, gênero, renda, educação, ocupação e muito mais

Em um projeto quando realizar Entrevista com Usuários?

Como preparar uma Entrevista com Usuários?

• Não deixe passar nenhum comentário
• Equipe pelo menos duas pessoas (entrevistador e uma para tomar as notas)

• Torne claro o processo e objetivo da entrevista
• Crie uma conexão com o usuário e o deixe confortável
• Não interrompa o pensamento do usuário durante a fala;
• Não faça suposições (pergunte quantas vezes for necessário)
• Não tenha medo das respostas negativas
• Respeite o silêncio do usuário
• Grave a entrevista se possível
• Peça feedback do usuário sobre a entrevista ao final

Dicas de perguntas

• Perguntas sobre o usuário:

  • Qual é o seu nome e idade?

  • Qual é a sua ocupação ou área de atuação?
  • Você usa algum dispositivo ou tecnologia específica no seu trabalho ou em suas atividades diárias?

Dicas de perguntas

• Perguntas sobre o produto ou serviço:

  • Com que frequência você usa [o produto/serviço]?

  • Em que contextos você usa [o produto/serviço]?
  • Há quanto tempo você usa [o produto/serviço]?

Dicas de perguntas

• Perguntas sobre necessidades e objetivos:
  • Quais são suas principais necessidades ao usar [o produto/serviço]?
  • Quais são os problemas ou desafios que você enfrenta ao tentar realizar essas tarefas?
  • Quais são seus objetivos ao usar [o produto/serviço]?
  • O que você espera alcançar ou resolver ao usar [o produto/serviço]?

Dicas de perguntas

• Perguntas sobre usabilidade e satisfação:
  • Quão fácil ou difícil é usar [o produto/serviço]?
  • Você encontrou alguma dificuldade específica ao usar [o produto/serviço]? Se sim, pode descrever?
  • Quão satisfeito você está com [o produto/serviço]?
  • O que você mais gosta em [o produto/serviço]?
  • O que você menos gosta em [o produto/serviço]?

Dicas de perguntas

• Perguntas sobre funcionalidades e design:
  • Quais funcionalidades de [o produto/serviço] você usa com mais frequência?
  • Há alguma funcionalidade que você sente falta ou que gostaria que fosse melhorada?
  • O que você acha do design da interface de [o produto/serviço]?
  • Você acha que a navegação é intuitiva e fácil de entender?

Dicas de perguntas

• Perguntas sobre comportamento e preferências:
  • Pode descrever um dia típico ou um cenário em que você usa [o produto/serviço]?
  • Que outras ferramentas ou produtos você usa em conjunto com [o produto/serviço]?
  • Você prefere usar [o produto/serviço] em um dispositivo específico (ex.: desktop, smartphone, tablet)?
  • Que tipo de suporte ou ajuda você prefere ao usar [o produto/serviço]?

Dicas de perguntas

• Perguntas sobre feedback e sugestões:
  • Se você pudesse mudar uma coisa em [o produto/serviço], o que seria?
  • Você já entrou em contato com o suporte ao cliente? Como foi sua experiência?
  • Há alguma funcionalidade ou característica que você gostaria de ver adicionada no futuro?
  • Que sugestões você tem para melhorar [o produto/serviço]?

Dicas de perguntas

• Perguntas sobre concorrentes e alternativas:
  • Você já usou produtos/serviços similares antes? Se sim, quais?
  • Como [o produto/serviço] se compara a esses outros produtos/serviços?
  • O que faria você considerar mudar para um produto/serviço alternativo?
  • Quais são os fatores mais importantes para você ao escolher um produto/serviço dessa categoria?

Dicas de perguntas

• Perguntas amplas:
  • Você pode me dizer mais sobre [x]?
  • Pode me dar um exemplo sobre essa situação?
  • Você mencionou [x], qual o motivo disso?
  • O que você quis dizer com [x]?
  • Por que?
  • Deixa eu ver se entendi direito, você quis dizer [x]?
  • Você pode me mostrar como você fez [x]?

Dicas de perguntas

• Perguntas com para identificar questões negativas do produtos:
  • O que você gosta menos sobre o nosso produto?
  • Quais motivos fariam você desistir do nosso produto?

Atividade

1. Separem-se em grupos de 3 a 4 pessoas
2. Cada grupo deve escolher um "usuário" para ser entrevistado (pode ser um dos próprios alunos), elaborar sua persona e identificar uma solução que o mesmo queira contextualizar (ex: Ifood, Whats e qualquer outra solução).
3. Os outros membros do grupo serão os "entrevistadores".
4. Os grupos revisaram a lista de perguntas e ajustaram conforme necessário, adicionando perguntas específicas que possam ser relevantes para o contexto da sala de aula.
5. Os entrevistadores devem anotar as respostas e observações importantes.
6. Após a entrevista, os grupos devem discutir e analisar as respostas coletadas.
7. Cada grupo deve identificar os principais pontos de dor, necessidades e sugestões mencionadas pelo "usuário".

60 Minutos

Atividade - Apresentação

1. Cada grupo deve apresentar um resumo das suas descobertas para a turma em um Power Point.
2. Destacar os principais insights obtidos e discutir como essas informações poderiam ser usadas para melhorar um produto/serviço específico.

30 Minutos

Prototipação - História

• A prototipagem foi criada em 1984 é considera uma réplica de um determinado objeto, construído a partir de uma moldagem direta, com materiais específicos para esse fim.
• A primeira impressora 3D funcionando a pleno vapor foi inventada por Chuck Hull, um norte-americano do estado da Califórnia, em 1984.

Prototipação

Prototipação - O que é?

Um protótipo é uma amostra de início ou modelo construído para testar um conceito, produto ou processo, algo para se replicar ou aprender com.

Prototipação - Fidelidade

• O quanto um protótipo se parecerá com a versão final de uma aplicação é o que chamamos de “fidelidade”.
• Segundo Deborah J. Mayhew (autora do livro “The Usability Engineering Lifecycle“), são quatro as dimensões que definem a fidelidade de um protótipo

Prototipação - 4 dimensões da Fidelidade 

1. Detalhamento: a quantidade de detalhes que o modelo suporta.
2. Grau de funcionalidade: a extensão na qual os detalhes de operação são completos.
3. Similaridade de interação: o quão similar as interações com o modelo serão com o produto final.
4. Refinamento estético: o quão realista o modelo é.

Prototipação - Classificando 

Baixa fidelidade​

• Baixo nível de detalhamento.
• Preferencialmente feito com papel e caneta.
• Representa visualmente as funcionalidades.
• Baixo custo.
• Rapidez na prototipação.
• Descartável.

Protótipo de baixa fidelidade para um web app
[Imagem: Grace Colbert, via Dribble]

Prototipação - Classificando 

Média fidelidade (wireframe)​

• Prioriza a hierarquia das informações e o fluxo de navegação.
• Possui simulações simples de uso (interação com botões, por exemplo).
• Pode ser feito com o auxílio de um computador, utilizando ferramentas 

Wireframe de um site de agência de viagens
[Imagem: Robert Smith, via Medium]

Prototipação - Classificando 

Alta fidelidade ​

• Foco em aspectos visuais e funcionais da interface.
• Permite navegação e interação similares à versão final do produto.
• São desenvolvidos com o auxílio de softwares para criação de interfaces

https://www.figma.com/​

Prototipação 

Exemplo de protótipo de alta fidelidade, simulando um fluxo de navegação [Imagem: Victor Luna, via Dribble]

Componentes de UI Design

Os principais elementos de UI incluem uma variedade de componentes visuais e interativos que permitem aos usuários interagir com um aplicativo, site ou sistema de forma eficaz e intuitiva.

Elementos Web UI/UX
[Imagem: Freepik]

Componentes de UI Design - Botões

• O botão é um dos elementos de UI mais comuns e está presente em praticamente qualquer interface.
• As origens dos botões da interface do usuário remontam aos botões físicos que apareceram pela primeira vez em eletrônicos e outros gadgets.

Componentes de UI Design - Botões

Botão Call to Action (CTA) — chamada para ação em português

É muito comum ver esses botões em landing pages que estão vendendo algum produto ou serviço.

Componentes de UI Design - Botões

Botão Primário e Secundário

• O botão primário é aquele que será utilizado com maior frequência dentro da interface.
• O botão secundário é utilizado quando queremos mostrar duas ações mas a primeira delas é a ação principal.

Componentes de UI Design - Botões

Qual deles está desabilitado e qual deles é o secundário?

Componentes de UI Design - Botões

Botão com ícones

Componentes de UI Design - Botões - Dica

Os rótulos dos botões são tão importantes quanto seu design. Use verbos de ação para informar aos usuários o que o botão faz para que eles possam agir sem ler o texto de apoio.

Use a forma imperativa em voz ativa para rótulos para minimizar o número de palavras e facilitar a leitura do rótulo.

Componentes de UI Design - Checkbox (Caixa de Seleção)

Checkbox

• Permite que sejam selecionadas  opções simultaneamente além do que oferece aos usuários que ativem ou desativem uma opção. Quando ativados, eles exibem uma marca de seleção.

Componentes de UI Design - Radio Button (Seleção Circular)

Radio Button

• Enquanto as caixas de seleção permitem que várias opções sejam selecionadas, os botões de opção permitem apenas uma. Eles são usados em grupos, onde as opções disponíveis são mutuamente exclusivas (como “sim” ou “não”).
• Geralmente são exibidos inicialmente sem nenhuma opção selecionada. Depois que uma opção é selecionada, eles não podem retornar a esse estado

Componentes de UI Design - Toggle Switch (Interruptor)

Toggle Switch

• Os interruptores de alternância são vistos com mais frequência em telas de configurações em aplicativos. Um switch permite que os usuários alternem entre duas opções mutuamente exclusivas

Componentes de UI Design - Text Input (Entrada de texto)

Text Input

• As entradas de texto são o tipo de entrada de formulário mais comum. Eles podem assumir muitas formas e formatos, dependendo da situação e do tipo de dados que estão sendo inseridos.

Componentes de UI Design - Menu

Menu

• Os menus são elementos temporários que se abrem após interações específicas, como tocar em uma lista suspensa ou clicar com o botão direito.

Componentes de UI Design - Form

Form

• Os formulários incluem vários controles de entrada, permitindo entrada estruturada ou complexa por meio de caixas de seleção, botões de opção, entradas de texto e outros tipos de campos de entrada.

Componentes de UI Design - Modal

Modal

• Os modais devem ser usados com moderação, seja em resposta a uma ação que o usuário realizou ou para avisá-lo sobre algo importante. Sempre que um modal é acionado indiretamente, ele interrompe o fluxo de tudo o que o usuário estava fazendo. Use-os apenas quando o benefício superar essa interrupção.

Componentes de UI Design - Card

Card

• Os cartões na interface do usuário se assemelham a cartões comerciais na vida real — eles são retangulares e geralmente incluem uma imagem e algum texto.

• Os layouts baseados em cartão são úteis para interfaces com muitos conjuntos semelhantes de informações

Componentes de UI Design - Table (Tabela)

Table

• As tabelas (também chamadas de data tables) são comumente vistas para itens como classificação de equipes esportivas, horários de voos de companhias aéreas, listas de inventário e conjuntos de dados semelhantes em que várias informações estão relacionadas.

Ferramentas 

Oferecem elementos prontos para a interface (como botões, campos de formulário etc.), agilizando a criação.

• Baixa Fidelidade
  • Balsamiq
  • Mockflow
  • Draw.io
  • Excalidraw
• Alta Fidelidade
  • Sketch
  • Figma
  • Adobe XD

Atividade

60 Minutos

Atividade

1. Vamos acessar https://excalidraw.com/ 
2. Explorar as bibliotecas
3. Converter o wireframe feito em papel para o Excalidraw

50 Minutos

Usabilidade

• A norma ISO 9241-11 (JOKELA et al, 2003) possui a seguinte definição de usabilidade:
  • A medida para a qual um produto pode ser usado por usuários específicos para alcançar objetivos específicos com efetividade, eficiência e satisfação num determinado contexto de uso.

Usabilidade

No início do uso de computadores, o termo utilizado para avaliação de um sistema era "amigável" (user friendly). NIELSEN (1993) da foto ao lado, considera esse termo inapropriado por dois motivos:

1. Usuários apenas necessitam de máquinas que não atrapalhem a realização de uma tarefa, sendo amigáveis ou não;

2. Um sistema pode ser amigável e não atender a necessidade do usuário.

Usabilidade

Modelo de atributos de acessibilidade do sistema de NIELSEN (1993)

Usabilidade

O que faz um produto ter uma boa usabilidade na visão de vocês?

https://www.menti.com/als26tp5khi3

Atividade no Flipchart

• O que é um problema de usabilidade?
  • Comentem alguns problemas já enfrentaram, pode ser em qualquer plataforma.
  • Escreva um problema por postit

Resumindo problema de usabilidade

Aspectos da interface do usuário que podem causar uma usabilidade reduzida ao usuário final do sistema

Avaliação

A usabilidade é normalmente medida através de um número de testes com usuários (os selecionados devem ser os mais representativos dos usuários pretendidos possíveis) que usem o sistema para desempenhar uma seleção de tarefas pré-determinada.

Avaliação

Sendo um atributo de qualidade, usado para estimar o quão fácil de usar é uma interface, NIELSEN (2003) aponta seus 5 componentes

Objetivos da Avaliação de Usabilidade

• Três grandes objetivos:
  • Avaliar a funcionalidade do sistema
    • Estar adequada aos requisitos da tarefa do usuário
    • Efetuar a tarefa pretendida e de modo mais fácil e eficiente
  • Avaliar o efeito da interface junto ao usuário
    • Avaliar quão fácil é aprender a usar o sistema; a atitude do usuário com relação ao sistema; identificar áreas do design as quais sobrecarregam o usuário de alguma forma, por exemplo, exigindo que uma série de informações sejam relembradas
  • Identificar problemas específicos do sistema
    • Identificar aspectos do design os quais quando usados no contexto alvo, causam resultados inesperados ou confusão entre os usuários

Métodos de Avaliação de Usabilidade

• Observação e pesquisa contextual

  • Essa prática consiste em observar a interação do usuário com o equipamento em seu ambiente real de uso para entender como os usuários utilizam o produto, podendo, por exemplo, focar a observação em quais as necessidades não são atendidas ou quais funcionalidades não são utilizadas.

Métodos de Avaliação de Usabilidade

• Análise de tarefas

  • A análise de tarefas consiste em decompor as funções ou atividades de um produto em tarefas menores a fim de determinar a sequência, hierarquia, condições e critérios para execução desta. Basicamente, é fazer um passo a passo de como atingir o objetivo final, passando por todas as interações do usuário com o produto.

  • Através dessa análise é possível entender como o processo de uso ocorre, identificando potenciais falhas ou incertezas.

Métodos de Avaliação de Usabilidade

• Os testes de usabilidade são entrevistas estruturadas, com foco nas características e funcionalidades específicas de um produto e podem revelar, rapidamente, informações sobre a maneira na qual uma pessoa utiliza um produto e seu modelo mental ao utilizá-lo (HENRIQUES et al., 2022).

Teste de Usabilidade

• Exemplo de Métricas Quantitativas

  • ​Tempo de cada tarefa

  • Porcentagem de tarefas completadas

  • Porcentagem de tarefas não-completadas

  • Números de erros

  • Tempo de navegação para encontrar uma informação

  • Número de passos

  • Número de cliques

  • Quantidade de informações encontradas

  • Número de acessos ao help

Atividade

• Tempo de carregamento página Web

  • Acessem https://pagespeed.web.dev/

  • Escolham um site para realizar avaliação

  • Destaque 3 ações que poderiam ser realizado para melhorar o carregamento do site

• Explore a documentação do PageSpeed Insights (PSI)

10 Minutos

Teste de Usabilidade

• Exemplos de Métricas Qualitativas

  • Facilidade de uso
  • Facilidade de navegação
  • Utilidade
  • Facilidade de aprendizagem
  • Facilidade de se recuperar de um erro
  • Help

Severidade

• Para categorizar os problemas detectados podemos utilizar a combinação de três fatores:

  • Frequência com que ele ocorre
  • Impacto do problema quando ele ocorre
  • Persistência do problema
• Considerar também o impacto do problema
  no produto e mercado ao qual ele está inserido

Sugestão de Grau de Severidade

1. Eu não concordo que isso é um problema de usabilidade
2. É um problema cosmético somente - precisa ser corrigido somente se sobrar algum tempo no projeto
3. Problema de usabilidade menor - corrigi-lo deve ter prioridade baixa
4. Problema de usabilidade grave - importante corrigi-lo, deve ser dada alta prioridade
5. Catástrofe de usabilidade - a sua correção é imperativa antes do produto ser liberado

Quantas pessoas para realizar a avaliação?

Nielsen (2001) defende que com apenas 5 usuários é possível levantar cerca de 75% dos problemas mais críticos de experiência do usuário (UX) (OLIVEIRA, 2021). Por essa razão, esse é o número com o qual geralmente se trabalha na prática (AGNER, 2009).

Atividade

30 Minutos

Acessibilidade

• É um dos principais temas tratados pela área de IHC (Interação Humano-Computador), esse termo pode ser definido na ideia de permitir que o maior número possível de usuários possa utilizar algo independente de suas limitações.

Quais as vantagens de se ter um produto com acessibilidade?

• Possibilidade de atingir 100% do público alvo

• Atender melhor todas as pessoas

• Fidelizar clientes Atender com qualidade novos clientes que surgem com a inclusão digital

• Dar apoio ao crescimento do consumidor acima dos 65 anos

• Manutenção mais rápida e barata, com melhor performance e diminuição dos custos

• Diferencial competitivo e melhoria da qualidade Valorização da diversidade e responsabilidade social

Quem impacta?

• Pessoas com algum tipo de privação, seja ela visual, motora, auditiva ou mental, ocupam cerca de 23,9% da população brasileira, segundo o IBGE de 2010. No mundo cerca de 650 milhões de pessoas possuem algum tipo de deficiência segundo a ONU.

• Logo além dos portadores de alguma deficiência podemos considerar também os idosos e suas privações naturais advindas da idade.

Atividade

• Ferramenta para avaliação de acessibilidade

   

• Acessem https://wave.webaim.org/

• Escolham um site para realizar avaliação

10 minutos

Acessibilidade em conteúdo para web (WCAG) 

• Define as exigências e critérios específicos para desenvolvedores de web sites

https://www.w3.org/TR/WCAG21/

WCAG

Web Content Accessibility Guidelines

Acessibilidade em conteúdo para web (WCAG) 

• Perceptível (as informações e os componentes da interface do usuário devem ser apresentados em modelos que possam ser identificados pelo usuário):
  • fornecer alternativas textuais para qualquer conteúdo não textual; fornecer alternativas para mídias baseadas em tempo;
  • criar conteúdo que possa ser apresentado de diferentes maneiras sem perder informação ou estrutura;
  • facilitar a audição e a visualização de conteúdo aos usuários, incluindo a separação entre o primeiro plano e o plano de fundo;

Acessibilidade em conteúdo para web (WCAG) 

• Operável (os componentes de interface de usuário e a navegação devem ser operáveis, a interface não pode exigir interação que um usuário não pode executar):
  • funcionalidades disponíveis a partir do uso de teclado;
  • fornecer aos usuários tempo suficiente para ler e utilizar o conteúdo;
  • não criar conteúdo que suscite convulsões; fornecer métodos para auxiliar os usuários a navegar e localizar conteúdos;

Acessibilidade em conteúdo para web (WCAG) 

• Compreensível (a informação e a operação da interface de usuário devem ser compreensíveis, o conteúdo ou a operação não pode estar além do seu entendimento):
  • tornar o conteúdo de texto legível e compreensível;
  • fazer com que as páginas web apareçam e funcionem de modo previsível;
  • auxiliar os usuários a evitar e corrigir erros;

Acessibilidade em conteúdo para web (WCAG) 

• Robusto (maximizar a compatibilidade, ou seja, conforme as tecnologias e os agentes do usuário evoluem, o conteúdo deve permanecer acessível):
  • o conteúdo deve ser robusto o suficiente para ser interpretado de modo confiável por uma ampla variedade de agentes do usuário, incluindo tecnologias assistivas.

• Organizem-se em grupo entre 3 e 5 pessoas
• Escolham um site ou aplicativo para realizar a avaliação de acessibilidade
• Utilize os princípios do WCAG (Web Content Accessibility Guidelines)
• Utilize a ferramenta https://wave.webaim.org/
• Façam um resumo dos resultados e sugira alterações para melhoria da usabilidade

Atividade

60 minutos

Fonte: https://blog.signainfo.com.br/detalhes/inovacao-para-experiencia-do-usuario

Fonte: https://blog.signainfo.com.br/detalhes/inovacao-para-experiencia-do-usuario

Experiência do usuário (EU), do inglês user experience (UX), é o conjunto de elementos e fatores relativos à interação do usuário com um determinado produto, sistema ou serviço cujo resultado gera uma percepção positiva ou negativa.

• A experiência do usuário é de natureza subjetiva, pois é sobre a percepção e pensamento individual
• Logo, quando o usuário encontra um produto, forma uma impressão momentânea, que evolui ao longo do tempo. Neste processo, a percepção, ação, motivação e cognição do usuário se integram para formar uma história memorável e coerente: chamada "experiência do usuário".

• Um designer UX considerará o uso de certas questões a serem feitas como "Por que?", "O que" e "Como" .

Onde o Design UX quer chegar?

A comunicação é mais eficaz quando estruturada de dentro para fora (Golden Circle de Simon Sinek) e com todos os elementos próprios de cada nível cerebral.

Onde o Design UX quer chegar?

LÍMBICO

Os 5 elementos para construir um Design UX

Design de interação

Design de interação

Design de interação - Dimensões

Fonte: https://willianmatiola.medium.com/botoes-em-ui-design-e8e8a7473747

Design Visual

Os princípios do design visual nos informam como os elementos do design se combinam para criar visuais completos e bem pensados.
Gráficos que aproveitam os princípios de um bom design visual podem gerar engajamento e aumentar a usabilidade.

O princípio da escala refere-se ao uso do tamanho relativo para sinalizar a importância e a classificação em uma composição.

O princípio da hierarquia visual refere-se a orientar o olhar na página para que atenda aos elementos do design na ordem de sua importância.

O equilíbrio ocorre quando há uma quantidade igualmente distribuída de sinal visual em ambos os lados de um eixo imaginário.

O princípio do contraste refere-se à justaposição de elementos visualmente diferentes para transmitir o fato de que esses elementos são diferentes.

Os princípios da Gestalt capturam nossa tendência de perceber o todo em oposição aos elementos individuais.

Design Visual

Design Visual

Design Visual

Design Visual

Design Visual

Design Visual

Fundamentos e Teorias IHC

• https://pt.slideshare.net/slideshow/interao-humano-computador-introduo/33717273

• https://pt.slideshare.net/robsonsantos/interao-humano-computador-1#22

• https://pt.slideshare.net/slideshow/o-que-interao-humanocomputador/18870615

• https://www.gonzatto.com/projetos/hipertextos2014/e_bushmemex/

• https://tecnoblog.net/responde/quem-inventou-o-mouse/

• https://museucapixaba.com.br/hoje/computador-xerox-alto-de-1973/

• https://pt.wikipedia.org/wiki/Windows_1.x

• https://www.researchgate.net/publication/234807094_Social_science_and_system_design_interdisciplinary_collaborations

Fundamentos e Teorias IHC

• https://en.wikipedia.org/wiki/ISO_9241#cite_note-Georgsson_5%E2%80%9311-11

• https://www.rsdesign.com.br/espaco_arquiteto/ergonomia-fisica-cognitiva-e-organizacional-para-a-construcao-de-um-ambiente-de-trabalho-humanizado/

• https://www2.dbd.puc-rio.br/pergamum/tesesabertas/0210297_04_cap_03.pdf

• https://sketchplanations.com/affordance

• https://www.inf.ufpr.br/laura/IHC-2016-2/Material%20anterior/IHC-Engenharia-Cognitiva-26-09-16.pdf

• https://tnr.nied.unicamp.br/interhad/nied/interhad/miscelanea/MO622/material-de-apoio/Fundamentos1Percepcao.pdf.1.pdf

• https://edisciplinas.usp.br/pluginfile.php/5094509/mod_resource/content/1/Norman%20-%20O%20Design%20do%20Dia-a-Dia.pdf

• https://pt.slideshare.net/slideshow/aula-6-design-e-processo-de-design-de-interfaces-de-usurio/49040301