Conceitos de interfaces e Interação Humano-Computador
Interface
Uma interface é uma superfície de contato que reflete as propriedade físicas das partes que interagem, as funções a serem executadas e o balanço entre poder e controle
Pela definição acima, podemos considerar que uma torneira é uma interface?
Exemplo de interface
A torneira é uma superfície de contato, pois literalmente encostamos nela para que ela cumpra a sua função. Girar para um lado aumenta o fluxo de água, girar para o outro vai diminuí-lo.
Como um exercício, pense nessa definição de interface para outros objetos cotidianos que você utiliza.
Dois componentes
A interface é composta por dois elementos: o agente e o paciente.
O agente é aquele que deseja que uma ação seja executada e, assim, aciona a interface, que recebe a interação e responde a ela
No caso o paciente é a torneira que é acionada pela ação do agente
E no caso de uma torneira acionada automaticamente?
Possuem diversas funções que devem ser executadas em um único objeto
Em uma mesma máquina, você pode acessar sites da Internet, editar textos e imagens, jogar um jogo ou conversar com outras pessoas
Tudo feito por meio de interfaces!
As interfaces buscam sempre ser imperceptíveis e cada vez vez menos passivas, para que o usuário possa chegar à ação desejada da maneira mais fácil possível.
O ato de abrir o navegador de seu computador e visitar um site, parece algo natural e direto
Jan Leike: Eu adoraria entender melhor o que está impulsionando tudo isso, o que está fazendo ele viralizar. Tipo, honestamente, não entendemos. Não sabemos.
Parte da perplexidade da equipe vem do fato de que a maior parte da tecnologia que move o ChatGPT não é nova. O ChatGPT é uma versão aprimorada do GPT-3.5, uma família de grandes modelos de linguagem que a OpenAI lançou alguns meses antes do chatbot. O próprio GPT-3.5 é uma versão atualizada do GPT-3, que apareceu em 2020.
ChatGPT foi construído com base em uma arquitetura chamada Transformers, uma arquitetura de redes neurais que foi proposta pelo Google em 2017.
O sucesso do ChatGPT e a relação com interfaces
Jan Leike: De certa forma, podemos entender o ChatGPT como uma versão de um sistema de IA que já temos há algum tempo. Não é um modelo essencialmente mais capaz do que o que tínhamos antes. Os mesmos modelos básicos estavam disponíveis na API há quase um ano antes do lançamento do ChatGPT. Mas se olharmos por outro aspecto, o tornamos mais alinhado com o que os humanos querem fazer com ele. Ele fala com você em diálogo, sua interface é um bate-papo de fácil acesso, ele tenta ser útil. É um progresso incrível, e acho que é isso que as pessoas estão percebendo.
Um breve histórico da IHC
Década de 1940: Durante a Segunda Guerra Mundial, os primeiros computadores eletrônicos, como o Colossus e o ENIAC, foram desenvolvidos. A interação com essas máquinas era feita principalmente por meio de painéis de controle e cartões perfurados.
ENIAC
Tamanho e peso: Ocupando uma sala inteira e pesando 30 toneladas.
Capacidade de processamento: Embora enorme, sua capacidade de processamento era inferior à de calculadoras modernas, capaz de realizar cerca de 5.000 adições por segundo.
Programação: O sistema operacional era operado por um grupo de funcionárias do exército, consideradas as primeiras programadoras.
Um breve histórico da IHC
Década de 1960: Surgiram as primeiras interfaces de linha de comando, que permitiam aos usuários interagir com os computadores por meio de comandos de texto. A IBM introduziu o sistema de entrada/saída de dados chamado de “ponto de vista do terminal”.
Um breve histórico da IHC
Década de 1970: Com o surgimento dos primeiros computadores pessoais, como o Apple II e o IBM PC, as interfaces gráficas começaram a ganhar destaque. O Xerox PARC desenvolveu o sistema Alto, que foi pioneiro na utilização de ícones, menus e janelas.
Um breve histórico da IHC
Em 1979, Steve Jobs, cofundador da Apple, visitou o Xerox PARC e viu pela primeira vez a interface gráfica e o mouse. Ele percebeu o enorme potencial da tecnologia e rapidamente decidiu implementá-la nos produtos da Apple.
Um breve histórico da IHC
Década de 1980: A Apple lançou o Macintosh, popular utilizando ainda mais as interfaces gráficas. O uso do mouse como dispositivo de entrada tornou-se comum, e os sistemas operacionais, como o Windows da Microsoft, adotaram amplamente esse paradigma.
Um breve histórico da IHC
Década de 1990 em diante: Com a expansão da Internet e o surgimento dos dispositivos móveis, como smartphones e tablets, as interfaces humano-computador evoluíram para se adaptar a essas novas plataformas. Surgiram interfaces baseadas em toque, gestos e sensores, proporcionando interações mais intuitivas e imersivas.
Um breve histórico da IHC
Atualidade: Hoje em dia, as interfaces humanocomputador continuam a evoluir com a incorporação de tecnologias como inteligência artificial, realidade virtual e aumentada, reconhecimento de voz e muito mais. A ênfase está na criação de interfaces que sejam acessíveis, intuitivas e que proporcionem uma experiência de usuário satisfatória.
Objetivo do IHC
IHC é a disciplina preocupada com o design, avaliação e implementação de sistemas computacionais interativos para uso humano e com o estudo dos principais fenômenos ao redor deles
Resumindo: Produzir sistemas usáveis, seguros e funcionais
Ergonomia e usabilidade
Para ajudar os profissionais a detalhar os processos e otimizar cada vez mais a interação, foram criados dois conceitos que abrangem o estudo dessas relações entre as pessoas e as coisas: a ergonomia e a usabilidade
Ergonomia
Ergonnomos: Trabalho + regras
A ergonomia é um conjunto de normas criado para otimizar o trabalho
O estabelecimento da ergonomia tem grande relação com a Segunda Guerra Mundial, quando se tornou necessário pensar melhor nas características humanas para que um mesmo avião fosse facilmente pilotado por diversos pilotos.
Ergonomia
“As máquinas eram construídas com pouca ou nenhuma consideração pelos indivíduos que iriam trabalhar com elas… Em anos recentes, porém, a situação mudou muito rapidamente; as máquinas tornaram-se cada vez mais sofisticadas e as pessoas que trabalham com elas passaram a atuar cada vez menos como executores, e cada vez mais como controladores. E isto, por sua vez, transferiu a ênfase do aspecto físico do trabalho humano para o aspecto mental”. – Mureel (1978)
Ergonomia
Ergonomia Física: referente às características humanas anatômicas, antropométricas, fisiológicas e biomecânicas, e como estas se relacionam com a atividade física. Tópicos importantes incluem posturas de trabalho, levantamento de material, movimentos repetitivos, distúrbios musculoesquelético relacionados ao trabalho, layout do local de trabalho, segurança e saúde.
Ergonomia Cognitiva: referente aos processos mentais: percepção, memória, raciocínio e respostas motoras. Estuda também como esses processos afetam as interações entre pessoas e outros elementos do sistema. Tópicos relevantes são a carga de trabalho mental, tomada de decisão, interação homem-computador, estresse e treinamento de trabalho da maneira que possam se relacionar com o projeto humanosistema.
Ergonomia
A ergonomia deve pensar na melhor maneira de algo se adaptar ao seu usuário, e não que o ser humano precise se adaptar a esse algo.
Ajustar as exigências do trabalho às possibilidades do ser humano, com o intuito de reduzir a carga externa.
Conceber as máquinas, os equipamentos e as instalações pensando em maior eficácia, precisão e segurança.
Estudar cuidadosamente a configuração dos postos de trabalho, de forma a assegurar ao trabalhador uma postura correta.
Adaptar o ambiente às necessidades fisicas do ser humano.
Usabilidade
Usabilidade é um termo que se tornou popular a partir da década de 1990 para caracterizar interfaces a partir da facilidade de uso e interação com o usuário. A primeira norma de usabilidade foi a ISO/IEC 9.126, publicada em 1991.
Eficiência: as pessoas podem realizar ações mediante uma quantidade adequada de esforço.
Eficácia: o sistema realiza funções a que se destina com informações adequadas e organizadas apropriadamente.
Fácil de aprender: é possivel aprender como realizar as ações e lembrar como repeti-las após algum tempo.
Segurança: o sistema é seguro de operar na variedade de contextos em que será usado.
Utilidade: o sistema realiza aquilo que as pessoas querem que seja feito.
Usabilidade centrado no humano
Assim como o objetivo da ergonomia é focar o humano, o mesmo ocorre com a usabilidade. Para alcançar a usabilidade adequada, o desenvolvimento de um sistema deve ser centrado no humano, já que são pessoas que vão utilizá-lo e que podem depender dele para conseguir realizar as ações que desejam. Porém, enquanto a ergonomia foca o trabalho e o conforto fisico/mental do usuário, a usabilidade lida com interfaces e a satisfação de quem vai utilizá-las.
Diretrizes para o projeto de interação
Ao estudar os conceitos de ergonomia e usabilidade vemos que inúmeros fatores influenciam a interação das pessoas com as interfaces que nos cercam o tempo todo. Embora existam diversos tipos de interface, algumas premissas e conceitos são comuns a todos os projetos. Antes de tudo, vamos entender um pouco melhor o ato de projetar
O que é projetar?
Em qual contexto você já ouviu a palavra projeto? Engenheiros e arquitetos fazem projetos para suas obras. Os pesquisadores precisam de um projeto de pesquisa antes de iniciarem seus estudos. Designers projetam objetos, e urbanistas projetam a cidade.
O que há de comum?
Todos esses profissionais lidam com problemas a serem resolvidos.
Projetos em IHC
Para profissionais que trabalham com IHC. Ao idealizarem uma interface para um software, assim como o arquiteto faz com a casa, esses profissionais, antes mesmo de escreverem uma única linha de código, vão pensar na melhor maneira de interagir com o usuário, se vão utilizar menus ou botões, imagens ou texto, quais as melhores cores para cada mensagem, enfim, como deixar tudo com a melhor usabilidade possível.
Interface e interação
Vimos que a interface é tudo aquilo que utilizamos para interagir com algo, a interface de um sistema computacional é formada pelos elementos que uma pessoa utiliza para interagir com um computador.
A interação é, então, o conjunto formado por usuário e sistema, em que o usuário executa ações sobre o sistema, que os interpreta e os comunica em linguagem de máquina às aplicações disponíveis
Estilos de interação
A escolha do estilo de interação é parte de um projeto de IHC, porque define como o usuário vai utilizar o sistema e a complexidade de desenvolvimento que ele vai demandar.
Linguagem Natural
A linguagem natural é um estilo de interação em que se reproduz o modelo cotidiano por meio da língua. Em resumo, é como se conversássemos com a máquina. A principal vantagem desse estilo é a facilidade de uso para usuários com pouco conhecimento de computadores, porque a ideia é que as máquinas entendam a fala da mesma forma que um amigo nos entende quando conversamos com ele.
Linguagens de comando
Nas interfaces de linguagem de comando, o usuário envia comandos específicos à máquina para que esta execute as ações desejadas. A máquina entende um conjunto de comandos predefinidos, que podem ser palavras, abreviações ou teclas de funções.
mkdir -p pasta/subpasta
Menus
Menus são conjuntos de opções apresentadas ao usuário, em que cada opção representa uma ação diferente. Ainda hoje muito populares nos computadores desktop, e mesmo na Internet, a vantagem é que neles os comandos são autoexplicativos
Manipulação direta
Por manipulação direta entendemos as interfaces que tentam imitar os movimentos do usuário. A interação mais comum que fazemos por manipulação direta é o ato de clicar e arrastar com o mouse. O que vemos na tela é uma analogia do nosso movimento com o mouse.
Atualmente, novas ações de manipulação direta são desenvolvidas a partir dos dispositivos touch, como os smartphones e os tablets. ato de arrastar se tornou mais “direto” ainda, já que, quando arrastamos, ao encostar em uma tela, temos maior impressão de estarmos manipulando o elemento virtual.
WIMP
WIMP é a sigla para windows, icons, menus e pointers, que são as palavras em inglês para janelas, ícones, menus e apontadores. Os WIMP compõem a característica mais básica dos sistemas operacionais modernos e de todos os Graphical User Interface (GUI) desenvolvidos até hoje. Como podemos ver, o WIMP é formado por quatro estilos diferentes. Mesmo assim, podemos encontrar outros estilos, como manipulação direta e preenchimento de formulários.
Sua principal vantagem é a flexibilidade e a variedade de saídas para o usuário. Por exemplo: você pode copiar um texto a partir do ícone de copiar, pelo menu Editar > Copiar, ou ainda com o comando Ctrl + C do teclado.
Comparativo
Projeto de interação
Agora que você sabe o que é interação e seus diferentes estilos, deve se perguntar: como decidir qual a melhor solução para o usuário? Chegou a hora de iniciar um projeto de interação.
“O projeto de interação é uma atividade prática e criativa que tem por objetivo final o desenvolvimento de um produto que ajude os usuários a atingirem suas metas”. Portanto, é sempre preciso ter em mente que o objetivo do projeto de interação é tornar mais simples a vida do seu usuário.
Processos do projeto de interação
Não existe um único modelo para criar um projeto de interação. No entanto, como ele envolve dezenas de processos, uma vez que a interação é um fenômeno complexo e que envolve muitas ações do usuário, é importante que tudo seja muito detalhado e descrito
Essa descrição rica em detalhes leva ao desenvolvimento de wireframes, modelos e outros tipos de protótipos que levam a testes mais precisos e que reduzem o tempo do desenvolvimento.
Wireframe de baixa fidelidade
Atividades do projeto de interação
Desde a identificação do problema até o início do desenvolvimento, um projeto de IHC passa por diversas fases.
Identificar necessidades e estabelcer requisitos
Desenvolver projetos alternativos
Construir versões interativas
Avaliar o projeto
Identificar necessidades e estabelcer requisitos
Devemos conhecer quem são nossos usuários-alvo
De que forma o produto interativo poderia ser útil.
Essas necessidades constituem as bases dos requisitos do produto e sustentam o projeto e o seu desenvolvimento. Essa atividade é fundamental para uma abordagem centrada no usuário
Desenvolver projetos alternativos
Atividade central do projeto de interação:
Projeto conceitual: envolve produzir o modelo conceitual para o produto. Um modelo conceitual descreve que produto deve fazer, como se comportar e com o que parecer.
Projeto fisico: considera detalhes como cores, sons, imagens, menus e ícones. As alternativas são consideradas em cada ponto.
Desenvolver projetos alternativos
Projeto conceitual 1
A Xerox nos anos 70 foi a percussora da interface gráfica e da conhecida GUIs (Graphical User Interface). Esta nova forma de manipular a informação é a definição de um novo modelo conceitual
Metáfora: referência de uma mesa de trabalho e seus elementos relacionados, como documentos, pastas e lixeiras;
WYSIWYG (what you see is what you get): os usuários manipulam objetos diretamente na interface a exemplo dos documentos e pastas.
Consistência de comandos: os conceitos de ações aplicados ao sistema e aos objetos são preservados e as semelhanças de execução entre comandos é mantida sempre que possível (copiar, selecionar, colar, mover ou excluir possuem sempre a mesma forma de realização da tarefa).
Construir versões interativas
A maneira mais sensata de os usuários avaliarem os projetos é interagir com eles, que requer uma versão interativa dos projetos a serem construídos, embora isso não signifique que seja necessária uma versão em software.
Por meio da simulação, os usuários poderão ter uma noção real de como será interagir com o produto.
Avaliar o projeto
Diz respeito ao processo de determinar a usabilidade e a aceitabilidade do projeto. É medido por meio de vários critérios, incluindo o número de erros que os usuários cometem, se o projeto e o produto são atraentes, se preenchem os requisitos, e assim por diante. O projeto de interação exige um alto nível de participação do usuário
Técnicas de elicitação de requisitos
Trata-se de obter dados que possam contribuir com projeto, ou seja, levantar as necessidades e entender o problema proposto, que é exatamente o primeiro passo que indicamos no item anterior.
Me ajuda a te ajudar – Frase do filme Jerry Maguire
Entrevistas
As entrevistas são um método bastante popular no levantamento de dados. A partir de conversas com potenciais usuários, pode-se entender melhor como as pessoas vão interagir com o sistema a ser desenvolvido. As entrevistas podem ser de três tipos:
Estruturadas: seguem uma estrutura rigida e sequencial, com pouco espaço para comentários.
Semiestruturadas: seguem uma estrutura básica, mas permitem questões ou observações extras a partir do usuário.
Não estruturadas: seguem de acordo com a motivação do entrevistado
Brainstorming
Trata-se de reuniões para gerar ideias a partir da discussão coletiva. Pode envolver especialistas, usuários e outros profissionais relevantes ao projeto. Essa técnica pode ser vantajosa no início de um projeto em que pouco se sabe sobre suas necessidades ou ideias para soluções são escassas.
Prototipação
Prototipação consiste em criar um modelo similar ao definido no projeto ou desenvolver parte do projeto para teste com usuários; é utilizada em momentos de incerteza quanto aos requisitos ou para obter um retorno inicial dos usuários.
Diferenças entre wireframe, mockup e prototipagem
Usabilidade na prática
ISO 9126
A ISO tem como objetivo criar normas que facilitem o comércio e promovam boas práticas de gestão e o avanço tecnológico, além de disseminar conhecimentos.
A expressão ISO 9001 designa um grupo de normas técnicas que estabelecem um modelo de gestão da qualidade para organizações em geral, qualquer que seja o seu tipo ou dimensão.
A ISO 9126 descreve um modelo de qualidade do produto de software
ISO 9126 e a usabilidade
Funcionalidade
Confiabilidade
Usabilidade
Eficiência
Manutebilidade
Portabilidade
Inteligibilidade: atributos do software que evidenciam o esforço do usuário para reconhecer os conceitos lógicos de uma interface
Apreensibilidade: atributos do software que evidenciam o esforço do usuário para aprender as funcionalidades do sistema
Operacionalidade: atributo do software que evidencia o esforço do usuário para operá-lo
Atratividade: a satisfação subjetiva do usuário durante o uso
Conformidade: atributos do software que fazem com que esteja de acordo com as normas
Definição de usabilidade
O grau em que um produto é usado por usuários específicos para atingir objetivos específicos com eficácia, eficiência e satisfação em um contexto de uso específico.
A usabilidade por Nielsen
Visibilidade e status do sistema
Compatibilidade do sistema com o mundo real
Controle do usuário e liberdade
Consistência e padrões
Ajudar os usuários a reconhecer, diagnosticar e recuperar-se de erros
Prevenção de erros
Reconhecimento em vez de memorização
Flexibilidade e eficiência no uso
Estética e design minimalista
Ajuda e documentação
Visibilidade e status do sistema
O sistema mantém os usuários sempre informados sobre ○ que está acontecendo, fornecendo um feedback adequado, dentro de um tempo razoável.
Quando estamos assistindo/ouvindo uma playlist do Youtube, do lado direito fica bem claro: qual vídeo estamos assistindo; qual é próximo; quais assistimos ou não.
Compatibilidade do sistema com o mundo real
O sistema se comunica pela linguagem do usuário, utilizando palavras, frases e conceitos que lhe são familiares, em vez de termos orientados ao sistema.
É aplicada esta estratégia ao utilizar setas, ícones e a cor vermelha para destacar elementos negativos.
Um software que usa essa abordagem é o Photoshop em sua barra de ferramentas.
Controle do usuário e liberdade
Fornecer maneiras de permitir que os usuários saiam facilmente de lugares inesperados, utilizando “saídas de emergência” claramente identificadas
Por exemplo quando criamos um tweet é bacana poder deletá-lo se estivermos afim. Mas não dá pra editar um tweet após 30 min.
Ajudar os usuários a reconhecer, diagnosticar e recuperar-se de erros
As mensagens de erros tem que ser claras e próximas do conteúdo ou ação que causou o erro.
No formulário de cadastro do Spotify caso você não preencha os dados necessários ele deixa bem claro quais campos estão faltando, com um mensagem clara e objetiva.
Consistência e padrões
Evitar fazer com que o usuário tenha que pensar se palavras, situações ou ações diferentes significam a mesma coisa
O botão de anterior, play e próximo sempre apresentam o mesmo padrão em todos os vídeos do Youtube
Prevenção de erros
Não é uma boa ideia deixar seu usuário errar sem explicar previamente o motivo do erro. Melhor do que isso, tente criar um interface que permite o usuário não errar.
A busca do Google faz isso de uma forma muito inteligente. No momento que começamos escrever nossa busca ele já te entrega algumas sugestões, mesmo se a gente escrever a busca com uma ortografia errada ele realiza a busca e pergunta se estamos procurando outra informação com a ortografia correta.
Reconhecimento em vez de memorização
O usuário não tem obrigação de decorar qual foi o caminho que ele fez pra chegar até a página.
Por exemplo, quando você entra em um produto do site da IBM é disponibilizado o caminho que você fez pra chegar até ele. Nós chamamos isso de breadcrumb.
Flexibilidade e eficiência no uso
Fornecer aceleradores invisíveis ao usuário inexperiente, ao mesmo tempo que proporciona aos mais experientes mais rapidez na realização de tarefas.
Por exemplo, no Excel, quando você está focado em uma planilha, pode usar o mouse para navegar para outras células, e também vários atalhos de teclado.
Estética e design minimalista
Por favor não encha linguiça. Toda informação extra que você deixar pro seu usuário pode na verdade adicionar mais uma dúvida, ou seja, deixe o seu layout e o conteúdo o mais simples e direto possível.
Ajuda e documentação
É uma boa não precisar dessa heurística. Implementar documentação e sistema de ajuda sempre é chato e muitos usuários têm o costume de ignorar ambos mas, se for realmente necessário, deixe a documentação próxima do usuário e do elemento ou ação que tenha necessidade de uma explicação mais detalhada.
Por exemplo, no Google Pay tem um campo pra preencher o código de segurança do cartão. Como não é algo muito óbvio, tem uma imagem próxima ao campo mostrando onde fica o código de segurança do cartão.
Modelos e paradigmas de design
Contexto
Memória de trabalho ou de curta duração
Memória de curta duração também guardam as saídas do sistema sensorial
O processador cognitivo irá trabalhar com a informação que foi codificada na memória de curta duração de forma simbólica
Forma simbólica = atribuiu significado
Um exemplo de memória de curta duração é quando você pede a um garçom um refrigerante. Ele armazena aquela informação até levar a bebida a você, depois aquilo é descartado
Sistema Cognitivo
O sistema cognitivo humano cria modelos mentais ou representações da informação recebida para interpretar as informações de forma simbólica (com os significados que foram atribuidos)
Modelos mentais são as imagens que as pessoas têm dos objetos com os quais interagem, de si próprias, dos outros, do ambiente
Modelos mentais
Pessoas formam modelos mentais por meio de experiência, treinamento e instrução usando representações com base na estrutura do seu raciocínio e no tratamento da informação.
Como os usuários criam modelos mentais? Eles usam o que já sabem do mundo. Segundo a lei de Jakob, usuários passam mais tempo em outros sites do que no seu. Por isso, esperam que seu site funcione como os outros.1
Modelos mentais
Estudos e teorias cognitivas descrevem dois tipos básicos de modelos mentais: Modelo mental estrutural e Modelo mental funcional
“Um modelo estrutural é aquele em que se assume que o usuário internalizou a estrutura de funcionamento do dispositivo ou sistema na memória, enquanto um modelo funcional assume que o usuário internalizou o conhecimento procedural sobre como usar o dispositivo ou sistema.” 1
Modelo mental estrutural
Esse modelo demonstra que o usuário internalizou em sua memória a estrutura de como um sistema funciona
Modelo usado para descrever a mecânica interna da máquina ou o sistema com seus componentes. Atua como substituto do objeto real.
Quando você dirige um carro, com o tempo você já internalizou como um carro funciona
Modelo mental funcional
Usa conhecimento armazenado para o usuário recuperar a informação de como um sistema funciona (modelo mental estrutural) e criar um modelo de como fazer para interagir
Projetistas e usuários se diferenciam em extensão, níveis de detalhes e natureza (modelo conceitual)
Usuários iniciantes e avançados se diferenciam em nível de detalhamento
Tipos diferentes de usuários (e.g. operação e gestão) se diferenciam em termos de tarefas (modelo conceitual)
Modelo conceitual
É uma coleção de associações na mente do usuário ou do desenvolvedor, que serão utilizadas para facilitar o entendimento no desenvolvimento e na utilização de interfaces interativa
Como fazer? Colocar conceitos de cada um no papel para estabelecer funções e conexões
Paradigmas (padrões), estilos e metáforas (exemplos)
Área de trabalho (desktop)
Paradigmas, estilos e metáforas (Exemplos)
Manipulação direta
Paradigmas, estilos e metáforas (exemplos)
Estante de livros
Paradigmas, estilos e metáforas (exemplos)
Carrinho de compras
Cuidados com a metafora
Levar a metáfora ao pé da letra
Levar a caminhos errados
Acessibilidade
Durante a interação
Um usuário emprega:
Habilidade motora
Seus sentidos e percepção
Capacidade cognitiva, de interpretação e raciocínio
Se houver barreira na interface, um ou vários elementos podem ficar comprometidos.
Acessibilidade
“É a possibilidade e condição de alcance para utilização com segurança e autonomia, de espaços, mobiliários equipamentos urbanos, edificações, transportes informação e comunicação, inclusive seus sistemas e tecnologias, bem como de outros serviços e instalações abertos ao público, de uso público ou privados de uso coletivo, tanto na zona urbana como na rural, por pessoa com deficiência ou com mobilidade reduzida” 1
Barreiras para acessibilidade
Barreiras: qualquer entrave, obstáculo, atitude ou comportamento que limite ou impeça a participação social da pessoa, bem como o gozo, a fruição e o exercício de seus direitos à acessibilidade, à liberdade de movimento e de expressão, à comunicação, ao acesso à informação, à compreensão, à circulação com segurança 1
Barreiras tecnológicas: as que dificultam ou impedem o acesso da pessoa com deficiência às tecnologias;
Objetivo em IHC
Oferecer meios para que o usuário acesse o sistema e interaja com ele, sem que a interface imponha obstáculos.
Exemplo
A tag aria-label torna o componente acessível para deficiêntes visuais
W3C (World Wide Web Consortium) hospeda a WAI (Web Accessibility Initiative) que:
Patrocinada por governos, indústrias, centros de pesquisa em acessibilidade, escolas e universidades, etc
Tem desenvolvimento de soluções para acessibilidade em consenso com W3C
WCAG
Pretende auxiliar com recomendações que tornem o conteúdo mais acessível as pessoas com deficiências visuais, auditivas, motoras, fonológicas, intelectuais etc
São organizados em princípios, diretrizes, critérios de sucesso e técnicas
Exemplos de diretrizes
1.1 Textos Alternativos,
1.3 Adaptabilidade,
2.1 Teclado Acessível
Tem níveis de conformidade (grau de sucesso A, AA e AAA)
Tem técnicas para atender aos critérios de sucesso
Nível A: Acessibilidade mínima
Por exemplo, o Critério de Sucesso 1.4.1 aborda o Uso de Cores e está incluído no critério de Nível A, estipulando que as cores não devem ser “usadas como o único meio visual de transmitir informações, indicar uma ação, induzir uma resposta ou distinguir um elemento visual”.
Exemplo: Considere um site que usa preto para texto normal e distingue o texto com hiperlinks tornando-o azul (sem sublinhado). Como a cor azul é o único fator que distingue os hiperlinks do texto ao redor, esta página da web não estaria em conformidade com o Critério de Sucesso 1.4.1. Uma solução para tornar a página em conformidade com esta diretriz seria adicionar outro fator de distinção, como sublinhar todos os hiperlinks
Nível AA: Mais acessível
Exemplo: Considere uma página da web que usa azul para o texto do hiperlink. A título de exemplo, digamos que esta página da web tenha um fundo azul claro. Se o contraste entre esses dois tons de azul não for de pelo menos 4,5 para 1, a página da web não atenderá ao Critério de Sucesso 1.4.3. A página não atenderá aos requisitos WCAG Nível AA para uso de cores, pois o baixo contraste entre o texto do hiperlink e o fundo pode impedir que alguns usuários consigam lê-la.
Nível AAA: Ainda mais acessível
Exemplo: De acordo com o critério de Nível AAA, Critério de Sucesso 1.4.6, Contraste (Aprimorado), as organizações devem ir além no que diz respeito ao contraste de cores em seus sites. Este critério de sucesso eleva o contraste mínimo entre o texto principal e seu fundo para 7 para 1 (isso também abrange imagens de texto). A justificativa para essa proporção, em oposição ao requisito de Nível AA da WCAG de 4,5 para 1, é que alguns usuários com baixa visão (visão 20/80 ou inferior) precisam de tecnologia assistiva com aprimoramento de contraste para perceber diferenças de cor, mesmo com um contraste de 4,5 para 1.
A vs AA vs AAA
A decisão entre o nível WCAG AA e o nível AAA geralmente se resume ao tamanho ou tipo de organização em questão, bem como ao tipo e à finalidade do conteúdo web e seus usuários típicos. Algumas organizações e tipos de conteúdo web serão submetidos a padrões mais elevados do que outros. Por exemplo, espera-se que grandes sites governamentais para o público em geral atendam aos mais altos padrões de acessibilidade, em conformidade com o Nível AAA, especialmente em páginas que incluem informações ou funções essenciais.1
Avaliação de acessibilidade
A realização de análise de acessibilidade, a fim de desenvolver sistemas interativos acessíveis pode exigir:
Uma vasta leitura de documentos extensos
Que hajam especialistas que conheçam tais diretrizes
Access Monitor valida a acessibilidade de uma página web utilizando as WCAG mais recente
Scanner da Google possui o intuito de conceder sugestões de melhorias de acessibilidade para aplicações móveis
Scanner da Google aborda os seguintes componentes:
Rótulos de conteúdo
Tamanho da área de toque
Itens clicáveis
Contraste de texto e imagem
Avaliação de acessibilidade
O scanner possui a limitação de não abranger características suficientes para atender uma grande parcela do público com necessidades especiais
Os componentes do scanner parecem ser mais voltados à melhoria de acessibilidade para pessoas com deficiências visuais ou motoras
Acessibilidade
“O poder da Web está na sua universalidade. Acesso para todos, independente de deficiência é um aspecto essencial.”
Tim Berners-Lee, W3C Director and inventor of the World Wide Web
Revisão
Questão 1
Uma interface é uma superfície de contato que reflete as propriedades físicas das partes que interagem, as funções a serem executadas e o balanço entre poder e controle
#| '!! shinylive warning !!': |#| shinylive does not work in self-contained HTML documents.#| Please set `embed-resources: false` in your metadata.#| standalone: true#| components: viewer#| viewerHeight: 320from shiny.express import input, render, uiquestions = {"1": "Uma torneira padrão é uma interface", "2": "Uma torneira com sensor de proximidade é uma interface", "3": "Alternativas a e b estão corretas", "4": "Nenhuma das alternativas estão corretas, pois uma interface apenas se refere a tela de computadores"}ui.input_radio_buttons( id = "quest01", label = " ", choices = questions, selected = "", width = "100%") correta = "3"@render.uidef value(): if input.quest01() == correta: return f"Correto: {questions.get(correta)}" elif input.quest01() is None: return "Escolha uma alternativa" else: return "Incorreto"
Questão 2
A interface é composta por dois componentes. O (1) é aquele que deseja que uma ação seja executada e, assim, aciona a interface, que recebe a interação e responde a ela No caso o (2) é a torneira que é acionada pela ação do (1). Os componentes 1 e 2 são respectivamente
#| '!! shinylive warning !!': |#| shinylive does not work in self-contained HTML documents.#| Please set `embed-resources: false` in your metadata.#| standalone: true#| components: viewer#| viewerHeight: 320from shiny.express import input, render, uiquestions = {"1": "agente e paciente", "2": "paciente e agente", "3": "executor e agente", "4": "nenhuma das anteriores"}ui.input_radio_buttons( id = "quest02", label = " ", choices = questions, selected = "", width = "100%") CORRETA = "1"@render.uidef value(): if input.quest02() == CORRETA: return f"Correto: {questions.get(CORRETA)}" elif input.quest02() is None: return "Escolha uma alternativa" else: return "Incorreto"
Questão 3
Qual o principal motivo que explica o sucesso do ChatGPT
#| '!! shinylive warning !!': |#| shinylive does not work in self-contained HTML documents.#| Please set `embed-resources: false` in your metadata.#| standalone: true#| components: viewer#| viewerHeight: 320from shiny.express import input, render, uiquestions = {"1": "Ele fala com você em diálogo, sua interface é um bate-papo de fácil acesso", "2": "Velocidade com que ele entrega a resposta ao que foi perguntado", "3": "A complexidade dos modelos utilizados na interação com o usuário", "4": "Por ser uma tecnologia extremamente nova"}ui.input_radio_buttons( id = "quest03", label = " ", choices = questions, selected = "", width = "100%") CORRETA = "1"@render.uidef value(): if input.quest03() == CORRETA: return f"Correto: {questions.get(CORRETA)}" elif input.quest03() is None: return "Escolha uma alternativa" else: return "Incorreto"
Questão 4
O principal objetivo do IHC é produzir sistemas:
#| '!! shinylive warning !!': |#| shinylive does not work in self-contained HTML documents.#| Please set `embed-resources: false` in your metadata.#| standalone: true#| components: viewer#| viewerHeight: 320from shiny.express import input, render, uiquestions = {"1": "Monetizáveis, funcionais e complexos", "2": "Usáveis, seguros e funcionais", "3": "Seguros, complexos e ergonômicos", "4": "Usáveis, criativos e monetizáveis"}ui.input_radio_buttons( id = "quest04", label = " ", choices = questions, selected = "", width = "100%") CORRETA = "2"@render.uidef value(): if input.quest04() == CORRETA: return f"Correto: {questions.get(CORRETA)}" elif input.quest04() is None: return "Escolha uma alternativa" else: return "Incorreto"
Questão 5
A ergonomia deve pensar na melhor maneira do usuário se adaptar ao sistema, e que o ser humano precise se adaptar a esse algo:
#| '!! shinylive warning !!': |#| shinylive does not work in self-contained HTML documents.#| Please set `embed-resources: false` in your metadata.#| standalone: true#| components: viewer#| viewerHeight: 320from shiny.express import input, render, uiquestions = {"1": "Verdadeiro", "2": "Falso"}ui.input_radio_buttons( id = "quest05", label = " ", choices = questions, selected = "", width = "100%") CORRETA = "2"@render.uidef value(): if input.quest05() == CORRETA: return f"Correto: {questions.get(CORRETA)}" elif input.quest05() is None: return "Escolha uma alternativa" else: return "Incorreto"
Questão 7
Eu perguntando qual a temperatura atual para a Alexa, que tipo de interação foi executada?
#| '!! shinylive warning !!': |#| shinylive does not work in self-contained HTML documents.#| Please set `embed-resources: false` in your metadata.#| standalone: true#| components: viewer#| viewerHeight: 320from shiny.express import input, render, uiquestions = {"1": "Linguagens de comando", "2": "Linguagem natural", "3": "Manipulação direta", "4": "Menus"}ui.input_radio_buttons( id = "quest07", label = " ", choices = questions, selected = "", width = "100%") CORRETA = "2"@render.uidef value(): if input.quest07() == CORRETA: return f"Correto: {questions.get(CORRETA)}" elif input.quest07() is None: return "Escolha uma alternativa" else: return "Incorreto"
Questão 8
O comando ls -h é digitado no terminal de um computador Linux, que tipo de interação foi executada aqui?
#| '!! shinylive warning !!': |#| shinylive does not work in self-contained HTML documents.#| Please set `embed-resources: false` in your metadata.#| standalone: true#| components: viewer#| viewerHeight: 320from shiny.express import input, render, uiquestions = {"1": "Linguagem natural", "2": "Manipulação direta", "3": "Linguagem de comando", "4": "Menus"}ui.input_radio_buttons( id = "quest08", label = " ", choices = questions, selected = "", width = "100%") CORRETA = "3"@render.uidef value(): if input.quest08() == CORRETA: return f"Correto: {questions.get(CORRETA)}" elif input.quest08() is None: return "Escolha uma alternativa" else: return "Incorreto"
Questão 9
Qual a principal vantagem na utilização de Menus?
#| '!! shinylive warning !!': |#| shinylive does not work in self-contained HTML documents.#| Please set `embed-resources: false` in your metadata.#| standalone: true#| components: viewer#| viewerHeight: 320from shiny.express import input, render, uiquestions = {"1": "Eles são mais bonitos", "2": "São mais rápidos de serem executados", "3": "Eles são autoexplicativos", "4": "Não existem vantagens"}ui.input_radio_buttons( id = "quest09", label = " ", choices = questions, selected = "", width = "100%") CORRETA = "3"@render.uidef value(): if input.quest09() == CORRETA: return f"Correto: {questions.get(CORRETA)}" elif input.quest09() is None: return "Escolha uma alternativa" else: return "Incorreto"
Questão 10
Qual interação se mostra mais flexível para o usuário, ou seja, esta interação permite que usuários consigam desde fazer manipulação direta com o mouse a utilizar atalhos.
#| '!! shinylive warning !!': |#| shinylive does not work in self-contained HTML documents.#| Please set `embed-resources: false` in your metadata.#| standalone: true#| components: viewer#| viewerHeight: 320from shiny.express import input, render, uiquestions = {"1": "Manipulação direta", "2": "Linguagem de comando", "3": "Menus", "4": "WIMP"}ui.input_radio_buttons( id = "quest10", label = " ", choices = questions, selected = "", width = "100%") CORRETA = "4"@render.uidef value(): if input.quest10() == CORRETA: return f"Correto: {questions.get(CORRETA)}" elif input.quest10() is None: return "Escolha uma alternativa" else: return "Incorreto"
Questão 11
Considerando as atividades de um projeto de interação, qual a ordem das fases para a conclusão de um projeto.
#| '!! shinylive warning !!': |#| shinylive does not work in self-contained HTML documents.#| Please set `embed-resources: false` in your metadata.#| standalone: true#| components: viewer#| viewerHeight: 320from shiny.express import input, render, uiquestions = {"1": "Estabelecer requisitos, Construir versões interativas, Desenvolver projetos alternativos e Avaliar o projeto", "2": "Desenvolver projetos alternativos, Construir versões interativas, Avaliar o projeto e Estabelecer requisitos", "3": "Estabelecer requisitos, Desenvolver projetos alternativos, Construir versões interativas e Avaliar o projeto", "4": "Desenvolver projetos alternativos, Estabelecer requisitos, Avaliar o projeto e Construir versões interativas"}ui.input_radio_buttons( id = "quest11", label = " ", choices = questions, selected = "", width = "100%") CORRETA = "1"@render.uidef value(): if input.quest11() == CORRETA: return f"Correto: {questions.get(CORRETA)}" elif input.quest11() is None: return "Escolha uma alternativa" else: return "Incorreto"
Questão 12
Quais são as questões chave para estabelecer os requisitos de forma eficaz e centrada no usuário. Marque todas as opções que se aplicam:
#| '!! shinylive warning !!': |#| shinylive does not work in self-contained HTML documents.#| Please set `embed-resources: false` in your metadata.#| standalone: true#| components: viewer#| viewerHeight: 320from shiny.express import input, render, uiquestions = {"1": "Devemos conhecer quem são os usuários-alvo", "2": "De que forma o produto interativo poderia ser útil", "3": "Quais cores, sons e imagens deveriam ser aplicados", "4": "Como o usuário deseja que determinada janela se comporte"}ui.input_checkbox_group( id = "quest12", label = " ", choices = questions, selected = "", width = "100%") CORRETA = "12"@render.uidef value(): if "".join(input.quest12()) == CORRETA: return "Correto" else: return "Incorreto"
Questão 13
Quando estamos assistindo/ouvindo uma playlist do Youtube, do lado direito fica bem claro: qual vídeo estamos assistindo; qual é próximo; quais assistimos ou não. Este recurso cumpre qual diretriz de Nielsen?
#| '!! shinylive warning !!': |#| shinylive does not work in self-contained HTML documents.#| Please set `embed-resources: false` in your metadata.#| standalone: true#| components: viewer#| viewerHeight: 320from shiny.express import input, render, uiquestions = {"1": "Ajudar os usuários a reconhecer, diagnosticar e recuperar-se de erros", "2": "Flexibilidade e eficiência no uso", "3": "Controle do usuário e liberdade", "4": "Visibilidade e status do sistema"}ui.input_radio_buttons( id = "quest13", label = " ", choices = questions, selected = "", width = "100%") CORRETA = "4"@render.uidef value(): if input.quest13() == CORRETA: return f"Correto: {questions.get(CORRETA)}" elif input.quest13() is None: return "Escolha uma alternativa" else: return "Incorreto"
Questão 14
Marque as informações verdadeiras sobre Metáforas
#| '!! shinylive warning !!': |#| shinylive does not work in self-contained HTML documents.#| Please set `embed-resources: false` in your metadata.#| standalone: true#| components: viewer#| viewerHeight: 320from shiny.express import input, render, uiquestions = {"1": "Pode ajudar na formulação de um modelo conceitual consistente para interação", "2": "Qualquer metáfora é apropriada em qualquer contexto", "3": "Metáfora é uma figura de linguagem, utilizada para melhorar a expressividade de uma informação", "4": "Metáforas são sempre compreendidas da mesma forma por todos"}ui.input_checkbox_group( id = "quest14", label = " ", choices = questions, selected = "", width = "100%") CORRETA = "13"@render.uidef value(): if "".join(input.quest14()) == CORRETA: return "Correto" else: return "Incorreto"
Questão 15
Quais são os principais pontos que a acessibilidade pretende atender ao usuário, marque todas as opções corretas:
#| '!! shinylive warning !!': |#| shinylive does not work in self-contained HTML documents.#| Please set `embed-resources: false` in your metadata.#| standalone: true#| components: viewer#| viewerHeight: 320from shiny.express import input, render, uiquestions = {"1": "Estética", "2": "Autonomia", "3": "Estímulo", "4": "Segurança"}ui.input_checkbox_group( id = "quest15", label = " ", choices = questions, selected = "", width = "100%") CORRETA = "24"@render.uidef value(): if "".join(input.quest15()) == CORRETA: return "Correto" else: return "Incorreto"
