Princípios de Interação Humano-Computador
Introdução à IHC
Teorias e Princípios da IHC
Design Centrado no Usuário
Usabilidade e Avaliação
Prototipação e Ferramentas
Acessibilidade e Inclusão
Design de Experiência do Usuário (UX)
#0 Apresentação
Vanilton Pinheiro
Analista de Sistemas
#0 Apresentação
Gilberto Santos
Analista de Sistemas
#0 Apresentação
Geyder Ribeiro
QA | Product Owner - CSPO | Pessoas e Processos PP.
#0 Apresentação
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.
1
2
3
Atividade
#0 Apresentação
30 Minutos
#1 Introdução à IHC
O que significa interagir com pessoas para vocês?
Atividade
Atividade - Interação
15 Minutos
#1 Introdução à IHC
E se conseguíssemos interagir igualmente com os computadores?
#1 Introdução à IHC
Com que dispositivos você interage no seu dia a dia?
Atividade
7 Minutos
#1 Introdução à IHC
Conjunto de hardware, software e meio de comunicação que geram sistemas computacionais
Tecnologia da Informação e Comunicação - TICs
#1 Introdução à IHC
TICs impactam nossa vida cotidiana e alteram nossa definição de:
Tecnologia da Informação e Comunicação - TICs
Quem pode/deve
Como
1
2
4
5
Onde
Por que
3
Quando
#1 Introdução à IHC
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?
#1 Introdução à IHC
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.
#1 Introdução à IHC
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?
#1 Introdução à IHC
Por quê estudar IHC?
Estudar e compreender IHC nos prepara para construir soluções tecnológicas que ajudem pessoas, construindo sistemas:
#1 Introdução à IHC
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 é?
#1 Introdução à IHC
Importância da IHC
Usabilidade
Satisfação do Usuário
Eficiência e Produtividade
Inclusão
1
2
3
4
#1 Introdução à IHC
Histórico da IHC
1940-70: Primeiros estudos em ergonomia e usabilidade, focados em hardware.
1
2
3
4
1980: Consolidação da IHC como disciplina, com o foco em interfaces gráficas
1990: Popularização de computadores pessoais e internet, necessidade crescente de interfaces amigáveis.
2000 em diante: Expansão para dispositivos móveis, web, e a crescente importância da experiência do usuário (UX).
#1 Introdução à IHC
Histórico da IHC - 1940-70
Bush publicou um artigo no Atlantic Monthly chamado, "As We May Think" no qual a ideia era o Memex dispositivo de armazenamento e recuperação usando microfilme. Esta ideia foi a base para o Hipertexto
MURREL, K. F. H define o termo ergonomia - “a ciência do trabalho” deriva do grego ergon (trabalho) e nomos (leis) que seria a disciplina científica preocupada com a compreensão das interações entre humanos e outros elementos de um sistema,
#1 Introdução à IHC
Histórico da IHC - 1940-60
O engenheiro e inventor do mouse, Douglas Engelbart estabeleceu um laboratório no Instituto de Pesquisa da Universidade de Stanford, voltado ao desenvolvimento de softwares e hardwares para “ampliar o intelecto humano”; no caso, facilitar a comunicação entre pessoas e computadores, ainda muito rudimentares.
Ted Nelson inventou os termos hipertexto e hipermídia, em 1963, e os publicou em livro, no ano de 1965. A definição dele para Hipertexto: “escritas associadas não sequenciais, conexões possíveis de se seguir, oportunidades de leitura em diferentes direções”.
#1 Introdução à IHC
Histórico da IHC - 1970-80
Em 01 de março de 1973, nos lendários laboratórios Xerox PARC, era apresentado o computador Xerox Alto, verdadeira revolução que mudaria definitivamente o mundo da computação. Primeiro computador a contar com um sistema operacional com interface gráfica, mouse, e editor gráfico WYSIWYG.
O Star para estação de trabalho, oficialmente 8010 Star, foi desenvolvido pela Xerox e lançado em 1981. Foi o primeiro sistema operacional comercial baseado em janelas. Em 1982 e 1984 foi seguido por Apple Lisa e Apple Macintosh respectivamente.
#1 Introdução à IHC
Histórico da IHC - 1970-80
Microsoft Windows 1.0 é lançado. Nesta versão ainda não tinha o recurso de "sobrepor janelas" como os windows mais modernos, ao invés disso, as janelas ficavam lado a lado em uma divisão de tela, ou ficavam em tela cheia.
Paul Smolensky utiliza o termo "User-Centered Design"
#1 Introdução à IHC
Histórico da IHC - 1990
Tim Berners-Lee tinha construído as ferramentas necessárias para o funcionamento da Web: o Protocolo de Transferência de Hipertexto (HTTP), a Linguagem de marcação de hipertextos (HTML), o primeiro navegador (browser), chamado WorldWideWeb, o primeiro servidor HTTP, o primeiro servidor web o http://info.cern.ch e as primeiras páginas Web que descreviam o projeto todo.
#1 Introdução à IHC
Histórico da IHC - 1990
Pela primeira vez é utilizado o termo "User Experience" (UX) pelo professor de ciência cognitiva na Universidade da Califórnia Donald Norman em San Diego.
A International Standards Organization publica "Guidance on Usability" (ISO 9241-11). A ISO 9241-11 define usabilidade e explica como identificar a informação necessária a ser considerada na especificação ou avaliação de usabilidade de um computador em termos de medidas de desempenho e satisfação do usuário.
#1 Introdução à IHC
Histórico da IHC - 2000 A vida digital
#1 Introdução à IHC
Onde aplicar IHC?
Software de produtividade: E.g., editores de texto, planilhas.
1
#1 Introdução à IHC
Onde aplicar IHC?
2
Aplicativos móveis: E.g., redes sociais, aplicativos de mensagens.
#1 Introdução à IHC
Onde aplicar IHC?
3
Sistemas embarcados: E.g., interfaces de automóveis, eletrodomésticos.
#1 Introdução à IHC
Onde aplicar IHC?
4
Jogos digitais: Interfaces de jogos e realidade virtual.
#1 Introdução à IHC
Onde aplicar IHC?
5
Websites e e-commerce: Lojas online, serviços web.
#1 Introdução à IHC
Atividade
Atividade - Individual
10 Minutos
#1 Introdução à IHC
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
45 Minutos
Código da turma Classroom: iolh2tw
#1 Introdução à IHC
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
#2 Teorias e Princípios da IHC
A Interação Humano-Computador (IHC) é baseada em um conjunto interdisciplinar que envolve:
#2 Teorias e Princípios da IHC
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
#2 Teorias e Princípios da IHC
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.
#2 Teorias e Princípios da IHC
Ergonomia
Alguns fatores são considerados no estudo da ergonomia, sendo eles:
Físicos
1
2
3
4
Cognitivos
Sociais
Organizacionais
5
Ambientais
#2 Teorias e Princípios da IHC
#2 Teorias e Princípios da IHC
#2 Teorias e Princípios da IHC
#2 Teorias e Princípios da IHC
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.
#2 Teorias e Princípios da IHC
O que é uma interface para você?
#2 Teorias e Princípios da IHC
A Interface é o nome dado para modo como ocorre a “comunicação” entre duas partes distintas e que não podem se conectar diretamente.
#2 Teorias e Princípios da IHC
Eis que temos um problema na construção de interfaces:
+ Funcionalidades vs
+ Usabilidade
#2 Teorias e Princípios da IHC
Exemplos de interface
Esta interface é adequada para destros e canhotos?
#2 Teorias e Princípios da IHC
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
#2 Teorias e Princípios da IHC
Modelo de interação humano computador
#2 Teorias e Princípios da IHC
Psicologia na IHC
Funções mentais superiores:
#2 Teorias e Princípios da IHC
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
#2 Teorias e Princípios da IHC
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.
#2 Teorias e Princípios da IHC
Quais botões temos nessa tela?
Os objetos possuem características que dirigem nossa percepção sobre eles
#2 Teorias e Princípios da IHC
Qual frase foi mais fácil de ler?
#2 Teorias e Princípios da IHC
Olhe abaixo e diga as CORES, não as palavras:
O lado Direito do cérebro diz a cor e o Esquerdo diz a palavra :)
#2 Teorias e Princípios da IHC
Perceber é muito mais que ver...
Logo, a demanda por memorização e a carga cognitiva exigida pelas interfaces de comandos, nas interfaces gráficas é deslocada para o processamento perceptual e viso-motor.
#2 Teorias e Princípios da IHC
E para o Design de Interface o que isso implica?
A implicação óbvia é projetar representações que sejam facilmente perceptíveis, exemplo:
#2 Teorias e Princípios da IHC
Abordagem Construtivista
#2 Teorias e Princípios da IHC
Abordagem Construtivista
#2 Teorias e Princípios da IHC
Abordagem Construtivista
#2 Teorias e Princípios da IHC
Abordagem Ecológica
Percepção é um processo direto no qual a informação é simplesmente detetada ao invés de ser construída
#2 Teorias e Princípios da IHC
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.
#2 Teorias e Princípios da IHC
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
#2 Teorias e Princípios da IHC
Cognição - Pontos de atenção
#2 Teorias e Princípios da IHC
Cognição - Case
Exemplo 1: uma porta
Não há muito que se fazer com uma porta: abrir ou fechar;
Você se defronta com uma porta:
• Como ela abre? Ela é de correr ou de girar?
• Se ela for de girar, tem que puxar ou empurrar? De que lado?
• Se ela for de correr, ela abre para a esquerda ou para a direita? De que lado?
A resposta deveria ser dada através do design, sem necessidade de ensaio e erro!
#2 Teorias e Princípios da IHC
Cognição - Case
As coisas são visíveis; os mapeamentos entre os controles e as coisas controladas são naturais;
Controle de automóveis
#2 Teorias e Princípios da IHC
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
#2 Teorias e Princípios da IHC
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.
#2 Teorias e Princípios da IHC
Nos carros, em geral, as coisas são visíveis
Cognição
1. Há bons mapeamentos entre os controles e o seu efeito, entre as metas e as necessidades do motorista e as funções disponíveis no painel de controle;
2. Um controle normalmente tem uma única função;
3. Há bom feedback e o sistema é compreensível;
4. Em geral, os relacionamentos entre as metas do usuário, as ações requeridas e os resultados são sensatos, têm significado e são não-arbitrários.
#2 Teorias e Princípios da IHC
Em aparelhos eletrônicos como o ao lado não ocorre tão bem, sendo:
Cognição
#2 Teorias e Princípios da IHC
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
#2 Teorias e Princípios da IHC
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
#2 Teorias e Princípios da IHC
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
#2 Teorias e Princípios da IHC
As restrições lógicas limitam a ordem, a posição e/ou a localização do objeto.
Cognição - Restrições
A exibição de itens de um menu é logicamente restrito na medida em que a lista de itens é exibida dentro de uma linha condutora, horizontal ou vertical. Seria ilógico se as diversas opções estivessem dispostas aleatoriamente na tela em diversas direções.
#2 Teorias e Princípios da IHC
Os mapeamentos entre as metas e intenções do usuário e os controles disponíveis na interface são bons se eles são naturais.
Cognição - Mapeamentos
Mapeamentos são ruins quando os relacionamentos entre metas e controles são inconsistentes, ou incompatíveis. Um exemplo em que normalmente ocorre inconsistência entre as intenções do usuário e as operações disponíveis é no painel nos fogões.
#2 Teorias e Princípios da IHC
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:
Cognição - Visibilidade
#2 Teorias e Princípios da IHC
Dica:
Cognição - Visibilidade
#2 Teorias e Princípios da IHC
O feedback pode ser definido como o “envio de informação ao usuário sobre a ação que ele efetivamente executou e qual o resultado associado”.
Cognição - Feedback
Em interfaces de manipulação direta ou gráficas, o feedback pode ser textual (como nos outros estilos de interação), visual ou auditivo.
#2 Teorias e Princípios da IHC
Cognição - Exemplos
#2 Teorias e Princípios da IHC
Sensação
Nota: Vale destacar que estímulos muito tênues ou muito intensos não são detectados. Além disso, a sensação é relativa, ou seja, varia de acordo com o ambiente – estado emocional, uso de medicamentos, etc.
#2 Teorias e Princípios da IHC
#2 Teorias e Princípios da IHC
Sensação - Tipos
#2 Teorias e Princípios da IHC
Sensação
#2 Teorias e Princípios da IHC
Resumo - Estímulo, Sensação e Percepção
#2 Teorias e Princípios da IHC
Atenção
#2 Teorias e Princípios da IHC
Atenção
Seleção de coisas para se concentrar dentre várias ao nosso redor, em um dado momento
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
#2 Teorias e Princípios da IHC
Atenção
Atenção focada
Atenção dividida
Quando se tenta atender a mais de uma demanda ao mesmo tempo
#2 Teorias e Princípios da IHC
Atenção - Interface
As informações de uma interface devem ser estruturadas para capturar a atenção do usuário, por exemplo usando fronteiras perceptíveis (windows), cor, vídeo reverso, som e luzes piscantes
#2 Teorias e Princípios da IHC
Exemplo de uso excessivo de gráficos
#2 Teorias e Princípios da IHC
Facilitando a atenção para Interface
Como dirigir a atenção do usuário para a informação relevante no display?
#2 Teorias e Princípios da IHC
Implicação da atenção para projetos de Interface
Destacar a informação, quando esta necessitar de atenção
Utilizar técnicas que façam com que coisas se destaquem, como:
cor, disposição, espaçamento, sublinhado, ordenação e animação.
Evitar sobrecarregar a interface
Exemplo: Google, possui um design simples e rápido
Utilizar os recursos de software avaliando sua real necessidade de uso, ou seja, não apenas porque o software permite implementá-los
#2 Teorias e Princípios da IHC
Memória
#2 Teorias e Princípios da IHC
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.
#2 Teorias e Princípios da IHC
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.
#2 Teorias e Princípios da IHC
Linguagem e Pensamento
#2 Teorias e Princípios da IHC
Linguagem e Pensamento
#2 Teorias e Princípios da IHC
Emoção
#2 Teorias e Princípios da IHC
Emoção
#2 Teorias e Princípios da IHC
Modelos mentais e metáforas
Modelos mentais são os modelos que as pessoas têm de si mesmas, dos outros, do ambiente e das coisas com as quais elas interagem.
Temos um modelo conceitual ou modelo mental do funcionamento de uma bicicleta.
Como sabemos que a bicicleta da figura não vai funcionar?
#2 Teorias e Princípios da IHC
Modelos mentais e metáforas
As pessoas podem construir os modelos mentais através de experiência, de treinamento ou de instrução.
#2 Teorias e Princípios da IHC
Modelos mentais e metáforas
#2 Teorias e Princípios da IHC
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.
#2 Teorias e Princípios da IHC
Heurísticas
"Uma regra, simplificação, ou aproximação que reduz ou limita a busca por soluções em domínios que são difíceis e pouco compreendidos"
#2 Teorias e Princípios da IHC
Heurísticas
#2 Teorias e Princípios da IHC
Heurísticas de Nielsen
#2 Teorias e Princípios da IHC
Heurísticas
Manter o usuário informado do que está acontecendo no sistema.
#2 Teorias e Princípios da IHC
Heurísticas
Utilizar vocabulários, medidas ou processos familiares ao usuário.
#2 Teorias e Princípios da IHC
Heurísticas
Fornecer alternativas ao usuário e ”saídas de emergências”;
Ex:. Desfazer ou Refazer
#2 Teorias e Princípios da IHC
Heurísticas
Manter padrões de interação em diferentes contextos. Falar a mesma língua o tempo todo, e nunca identificar uma mesma ação com ícones ou labels diferentes.
#2 Teorias e Princípios da IHC
Heurísticas
Ações drásticas como deletar arquivos, devem ser bem sinalizadas. Além disso, ter sempre uma confirmação ou possibilidade de desfazer o que foi feito.
#2 Teorias e Princípios da IHC
Heurísticas
O usuário não é obrigado a reaprender o serviço toda vez que o acessa. Devemos evitar acionar a memória do usuário o tempo inteiro.
#2 Teorias e Princípios da IHC
Heurísticas
Forneça caminhos alternativos e customizáveis
#2 Teorias e Princípios da IHC
Heurísticas
Não usar desnecessariamente excessos de cores e elementos visuais que confundam o usuário. Dialogar de forma simples e direta, com um layout mais limpo, com diálogos naturais, de fácil entendimento e que apareçam em momentos necessários.
#2 Teorias e Princípios da IHC
Heurísticas
Prevenir um erro é algo de máxima importância, mas tão importante quanto, é ajudar o usuário a identificar e resolver os problemas que acabam sendo inevitáveis. Mensagens de erro claras, com textos simples e diretos, não intimidando o usuário e sim o conduzindo à possíveis soluções.
#2 Teorias e Princípios da IHC
Heurísticas
Uma interface intuitiva e clara evita a solicitação de ajuda em algumas situações. Mesmo assim devemos manter ao alcance do usuário, itens de auxílio para determinadas ações. Além disso, devemos manter ajudas fixas que podem ser acessadas à qualquer momento em caso de dúvidas. Um exemplo disso são os FAQs com as questões mais solicitadas.
#2 Teorias e Princípios da IHC
Atividade - Heurísticas
60 Minutos
#3 Design Centrado no Usuário
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.
#3 Design Centrado no Usuário
Donald Norman, criador do termo ‘experiência do usuário’ cita:
Nenhum produto é uma ilha. Um produto é mais que o produto. É um conjunto coeso e integrado de experiências
#3 Design Centrado no Usuário
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.
#3 Design Centrado no Usuário
Princípios do Design Centrado no Usuário
Resolver a raiz do problema:
Ter foco nas pessoas:
Ter abordagem sistêmica:
Realizar testes rápidos e contínuos:
#3 Design Centrado no Usuário
Etapas do Design Centrado no Usuário
Identificar contexto de uso
Identificar requisitos
Desenvolver solução
Avaliar
solução
KeyUsers; Momento de uso da aplicação; Motivador para o uso da solução
O que precisa para que o produto seja desenvolvido; Quais são os objetivos do usuário; Quais metas do negócio;
Criar a solução a partir das informações coletadas sobre o usuário;
Testes de usabilidade para verificar o que funciona e o que precisa de alteração
#3 Design Centrado no Usuário
Etapas do Design Centrado no Usuário
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.
#3 Design Centrado no Usuário
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:
#3 Design Centrado no Usuário
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:
#3 Design Centrado no Usuário
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:
#3 Design Centrado no Usuário
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.
#3 Design Centrado no Usuário
Entrevista com Usuários
A entrevista é um método rápido para coletar informações como:
²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
#3 Design Centrado no Usuário
Em um projeto quando realizar Entrevista com Usuários?
As entrevistas servem para coletar informações sobre o usuário e suas necessidades, proporcionando insights para a criação de personas e de jornadas do usuário;
Para enriquecer as informações já existentes sobre o usuário, observando seu comportamento em uma pesquisa de campo;
Para coletar respostas verbais sobre um determinado comportamento ao utilizar o produto após por exemplo de teste de usabilidade.
#3 Design Centrado no Usuário
Como preparar uma Entrevista com Usuários?
Dicas
#3 Design Centrado no Usuário
Dicas de perguntas
Qual é o seu nome e idade?
#3 Design Centrado no Usuário
Dicas de perguntas
Com que frequência você usa [o produto/serviço]?
#3 Design Centrado no Usuário
Dicas de perguntas
#3 Design Centrado no Usuário
Dicas de perguntas
#3 Design Centrado no Usuário
Dicas de perguntas
#3 Design Centrado no Usuário
Dicas de perguntas
#3 Design Centrado no Usuário
Dicas de perguntas
#3 Design Centrado no Usuário
Dicas de perguntas
#3 Design Centrado no Usuário
Dicas de perguntas
#3 Design Centrado no Usuário
Dicas de perguntas
#3 Design Centrado no Usuário
Atividade
60 Minutos
#3 Design Centrado no Usuário
Atividade - Apresentação
30 Minutos
#3 Design Centrado no Usuário
#4 Prototipação e Ferramentas
Prototipação - História
#4 Prototipação e Ferramentas
Prototipação
#4 Prototipação e Ferramentas
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.
#4 Prototipação e Ferramentas
Prototipação - Fidelidade
#4 Prototipação e Ferramentas
Prototipação - 4 dimensões da Fidelidade
#4 Prototipação e Ferramentas
Prototipação - Classificando
Baixa fidelidade
Protótipo de baixa fidelidade para um web app
[Imagem: Grace Colbert, via Dribble]
#4 Prototipação e Ferramentas
Prototipação - Classificando
Média fidelidade (wireframe)
Wireframe de um site de agência de viagens
[Imagem: Robert Smith, via Medium]
#4 Prototipação e Ferramentas
Prototipação - Classificando
Alta fidelidade
#4 Prototipação e Ferramentas
Prototipação
Exemplo de protótipo de alta fidelidade, simulando um fluxo de navegação [Imagem: Victor Luna, via Dribble]
#4 Prototipação e Ferramentas
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]
#4 Prototipação e Ferramentas
Componentes de UI Design - Botões
#4 Prototipação e Ferramentas
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.
#4 Prototipação e Ferramentas
Componentes de UI Design - Botões
Botão Primário e Secundário
#4 Prototipação e Ferramentas
Componentes de UI Design - Botões
Qual deles está desabilitado e qual deles é o secundário?
#4 Prototipação e Ferramentas
Componentes de UI Design - Botões
Botão com ícones
#4 Prototipação e Ferramentas
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.
#4 Prototipação e Ferramentas
Componentes de UI Design - Checkbox (Caixa de Seleção)
Checkbox
#4 Prototipação e Ferramentas
Componentes de UI Design - Radio Button (Seleção Circular)
Radio Button
#4 Prototipação e Ferramentas
Componentes de UI Design - Toggle Switch (Interruptor)
Toggle Switch
#4 Prototipação e Ferramentas
Componentes de UI Design - Text Input (Entrada de texto)
Text Input
#4 Prototipação e Ferramentas
Componentes de UI Design - Menu
Menu
#4 Prototipação e Ferramentas
Componentes de UI Design - Form
Form
#4 Prototipação e Ferramentas
Componentes de UI Design - Modal
Modal
#4 Prototipação e Ferramentas
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
#4 Prototipação e Ferramentas
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.
#4 Prototipação e Ferramentas
Ferramentas
#4 Prototipação e Ferramentas
Atividade
Considere um sistema que auxilia o time de RH de uma empresa a coletar dados dos seus colaboradores. Para tanto os analistas de RH precisam que os colaboradores preencham duas áreas com informações distintas. Elabore wireframes no papel ao qual o usuário possa navegar entre as informações (abaixo), sinalize em cada papel qual é o fluxo de navegação.
60 Minutos
#4 Prototipação e Ferramentas
Atividade
50 Minutos
#5 Usabilidade e Avaliação
Usabilidade
#5 Usabilidade e Avaliação
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:
Usuários apenas necessitam de máquinas que não atrapalhem a realização de uma tarefa, sendo amigáveis ou não;
Um sistema pode ser amigável e não atender a necessidade do usuário.
#5 Usabilidade e Avaliação
Usabilidade
Aceitabilidade do Sistema
Aceitabilidade Social
Aceitabilidade Prática
Usefulness (Proveito)
Utilidade
Usabilidade
Modelo de atributos de acessibilidade do sistema de NIELSEN (1993)
#5 Usabilidade e Avaliação
Usabilidade
O que faz um produto ter uma boa usabilidade na visão de vocês?
#5 Usabilidade e Avaliação
Atividade no Flipchart
#5 Usabilidade e Avaliação
Resumindo problema de usabilidade
Aspectos da interface do usuário que podem causar uma usabilidade reduzida ao usuário final do sistema
#5 Usabilidade e Avaliação
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.
#5 Usabilidade e Avaliação
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
Fácil aprendizado
Eficiência
Fácil memorização
Poucos erros
Satisfação
#5 Usabilidade e Avaliação
Objetivos da Avaliação de Usabilidade
#5 Usabilidade e Avaliação
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.
#5 Usabilidade e Avaliação
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.
#5 Usabilidade e Avaliação
Métodos de Avaliação de Usabilidade
#5 Usabilidade e Avaliação
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
#5 Usabilidade e Avaliação
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
#5 Usabilidade e Avaliação
Teste de Usabilidade
Exemplos de Métricas Qualitativas
#5 Usabilidade e Avaliação
Severidade
Para categorizar os problemas detectados podemos utilizar a combinação de três fatores:
#5 Usabilidade e Avaliação
Sugestão de Grau de Severidade
#5 Usabilidade e Avaliação
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).
#5 Usabilidade e Avaliação
Atividade
30 Minutos
#6 Acessibilidade e Inclusão
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.
#6 Acessibilidade e Inclusão
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
#6 Acessibilidade e Inclusão
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.
#6 Acessibilidade e Inclusão
Atividade
Ferramenta para avaliação de acessibilidade
Acessem https://wave.webaim.org/
Escolham um site para realizar avaliação
10 minutos
#6 Acessibilidade e Inclusão
Acessibilidade em conteúdo para web (WCAG)
WCAG
Web Content Accessibility Guidelines
#6 Acessibilidade e Inclusão
Acessibilidade em conteúdo para web (WCAG)
#6 Acessibilidade e Inclusão
Acessibilidade em conteúdo para web (WCAG)
#6 Acessibilidade e Inclusão
Acessibilidade em conteúdo para web (WCAG)
#6 Acessibilidade e Inclusão
Acessibilidade em conteúdo para web (WCAG)
#6 Acessibilidade e Inclusão
Atividade
60 minutos
#7 Design de Experiência do Usuário (UX)
#7 Design de Experiência do Usuário (UX)
#7 Design de Experiência do Usuário (UX)
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.
#7 Design de Experiência do Usuário (UX)
#7 Design de Experiência do Usuário (UX)
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.
#7 Design de Experiência do Usuário (UX)
O porquê envolve as motivações dos usuários para adotar um produto, seja se relacionando com uma tarefa ou que desejam realizar com ele, seja com valores e pontos de vista associados à propriedade e uso do produto.
Onde o Design UX quer chegar?
LÍMBICO
O que aborda as coisas que as pessoas podem fazer com o produto, a sua funcionalidade.
O como, relaciona-se ao design da funcionalidade de uma maneira acessível e esteticamente agradável.
#7 Design de Experiência do Usuário (UX)
Consiste no trabalho de investigar quais são as necessidades das pessoas que vão interagir com seu produto.
Os 5 elementos para construir um Design UX
Esse é o momento de definir os requisitos funcionais e de conteúdo para o produto que está sendo desenvolvido. Quais os recursos e conteúdos a aplicação (produto) deve ter, quais requisitos deve cumprir e como eles estarão alinhados com os objetivos estratégicos da organização.
Momento de definir como o usuário irá interagir com o produto. Ou seja: "Como o sistema (ou produto) irá se comportar quando o usuário interagir com ele?";
O esqueleto determina a forma visual da tela, a apresentação de todos os elementos que forem necessários para que a interação ocorra com uma funcionalidade existente na interface. (Wireframe)
Pode ser desde interfaces, protótipos, até o produto final (o momento onde determinamos, também, como será o produto e qual será o layout, como será a tipografia, as palheta de cores e etc). É considerada a parte concreta do produto
#7 Design de Experiência do Usuário (UX)
Design de interação
Design de interação é uma das disciplinas que é fundamental para uma boa experiência de usuário. Ela ajuda a definir o que funciona melhor para o usuário final.
#7 Design de Experiência do Usuário (UX)
Design de interação
Para aplicar com eficiência vale observar o pontos:
Definir padrões de interação de acordo com o contexto
Incorporar a necessidade do usuário no design
Interface intuitiva
Informações importantes para o usuário
Comunicar pontos fortes do sistema
Consistência em todo o sistema
#7 Design de Experiência do Usuário (UX)
Design de interação - Dimensões
#7 Design de Experiência do Usuário (UX)
Design Visual
O design visual é o uso de imagens, cores, tipografia e formas para melhorar a usabilidade e melhorar a experiência do usuário.
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.
#7 Design de Experiência do Usuário (UX)
Design Visual
O design visual é o uso de imagens, cores, tipografia e formas para melhorar a usabilidade e melhorar a experiência do usuário.
#7 Design de Experiência do Usuário (UX)
Design Visual
Escala: Trata-se de utilizar elementos em tamanhos variados para determinar a importância de cada informação.
#7 Design de Experiência do Usuário (UX)
Design Visual
Hierarquia visual: Trata-se de dispor os elementos de um texto ou imagem de modo a guiar a forma de leitura e interação pelo usuário.
#7 Design de Experiência do Usuário (UX)
Design Visual
Equilíbrio: Trata-se de utilizar elementos de forma proporcional e igualmente distribuída pelo documento, de forma simétrica e coerente.
#7 Design de Experiência do Usuário (UX)
Design Visual
Contraste: Trata-se da justaposição entre elementos com grandes diferenças visuais, de modo a garantir que o leitor compreenda suas diferentes funções.
#7 Design de Experiência do Usuário (UX)
Design Visual
Princípios da Gestalt: Trata-se da forma como o cérebro humano organiza informações e imagens complexas de forma subconsciente, para interpretá-las como um todo, apesar de serem partes individualizadas. São diversos princípios compreendidos neste conceito que nos ajudam a organizar informações, tais como similaridade, continuidade, proximidade, simetria, dentre outros.
#Referências
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://museucapixaba.com.br/hoje/computador-xerox-alto-de-1973/
#Referências
Fundamentos e Teorias IHC
#Referências
Fundamentos e Teorias IHC
https://psicologiaaplicadaets.blogspot.com/2013/04/funcoes-mentais-superiores.html
https://www.interaction-design.org/literature/topics/user-centered-design
https://prezi.com/haumg7kg17lw/historia-da-prototipagem/?webgl=0
https://pt.slideshare.net/slideshow/modelo-de-prototipao/39099014?from_search=0
#Referências
Usabilidade e Avaliação
https://www2.dbd.puc-rio.br/pergamum/tesesabertas/0210297_04_cap_03.pdf
https://usabilidade.unifei.edu.br/2020/01/metodos-de-avaliacao-de-usabilidade/
https://brasil.uxdesign.cc/ux-baseado-em-fatos-teste-de-usabilidade-ce8dc58841a3
HENRIQUES, C.; IGNÁCIO, E.; PILAR, D. UX Research com sotaque brasileiro: Ou sobre como pesquisar com usuários no Brasil sem apegos acadêmicos ou erros do mercado. Casa do Código, 2022. 432 p. ISBN 978–85–5519–319–4.
TEIXEIRA, F. Introdução e boas práticas em UX Design. Casa do Código, 2014. 262 p. ISBN 978–85–66250–48–0.
#Referências
Usabilidade e Avaliação
OLIVEIRA, J. Design de Produto: Uma visão Product-Led sobre design de produtos digitais. 2. ed. Florianópolis: Amazon Serviços de Varejo do Brasil Ltda, 2021. 200 p. ISBN 978–65–00–24175–4.
AGNER, L. Ergodesign e Arquitetura de Informação: Trabalhando com o Usuário. 2. ed. Rio de Janeiro: Quartet Editora & Comunicação Ltda, 2009. 196 p. ISBN 978–85–7812–017–7.
#Referências
Acessibilidade
#Referências
Design UX
https://pt.wikipedia.org/wiki/Experi%C3%AAncia_do_usu%C3%A1rio
What is User Experience (UX) Design?. The Interaction Design Foundation (em inglês). Consultado em 23 de julho de 2024
https://www.linkedin.com/pulse/o-famoso-iceberg-ux-mois%C3%A9s-tedeschi/
https://brasil.uxdesign.cc/qual-a-diferenca-entre-design-de-interacao-e-ux-design-66f8a4f140f
https://www.linkedin.com/pulse/os-5-princ%C3%ADpios-do-design-visual-tales-calaza/
#Referências
Design UX