INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da...
Transcript of INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da...
![Page 1: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/1.jpg)
INTERFACE HOMEM-
MÁQUINADESENHO DE INTERFACES E ACESSIBILIDADE
![Page 2: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/2.jpg)
Tarefa 1
Explicar em que consistem os objetivos de usabilidade
secundários.
![Page 3: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/3.jpg)
Preece, J. 2002,
Interaction design:
beyond human-
computer
Primários
Secundários
![Page 4: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/4.jpg)
Tarefa 2
Caracterizar os métodos de avaliação da usabilidade.
Bibliografia: site MPlu+a
http://www.grihotools.udl.cat/mpiua/
![Page 5: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/5.jpg)
Avaliação da usabilidade. Métodos
1. Avaliação heurística
2. Caminho cognitivo
3. Inspecção de regulares
4. Observação de campo
5. Focus group
6. Entrevistas
7. Questionários
8. Gravação de uso
(Logging)
9. Card sorting
10. Medida de prestações
11. Pensando em voz alta
(Thinking aloud)
![Page 6: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/6.jpg)
Objectivo da aula
Caracterizar os elementos principais da acessibilidade como
propriedade de uma aplicativo informático.
![Page 7: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/7.jpg)
Conteúdo
Definição de acessibilidade
Características da acessibilidade
Design Universal (DU)
Princípios da WCAG 2.0
Benefícios da acessibilidade
Metodologias que ajudam a avaliar a acessibilidade
![Page 8: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/8.jpg)
Usabilidade e acessibilidade são dois conceitos iguais?
![Page 9: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/9.jpg)
Definições.
Usabilidade
Medida na que um produto
se pode usar por
determinados usuários para
conseguir objetivos
específicos com
efectividade, eficiência e
satisfação num contexto de
uso especificado.
ISO 9241-11
≠
Acessibilidade
Permitir que as pessoas
possam utilizar o seu sistema
sem se preocupar com a
dificuldade que elas
possuem.
![Page 10: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/10.jpg)
Definições.
A usabilidade procura que o aplicativo se possa usar
facilmente por um conjunto de usuários específico, a
acessibilidade procura que o aplicativo se possam usar por
todas as pessoas.
acessível = que se possa acessar a isso
usável = que seja fácil de usar
![Page 11: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/11.jpg)
Definições.
A acessibilidade é usada para delinear problemas de
usabilidade enfrentados por pessoas com deficiências. No
entanto, ela abrange um público muito maior, pois o que é
utilizável por pessoas com deficiências é igualmente usável
por quem não as tem.
![Page 12: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/12.jpg)
Definições.
Acessibilidade significa fornecer flexibilidade para
acomodar as necessidades de cada usuário e suas
preferências e/ou limitações, visando sua adaptação e
locomoção, eliminando as barreiras.
![Page 13: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/13.jpg)
Características da acessibilidade
A acessibilidade proporciona-se mediante uma
combinação de hardware e software:
O primeiro proporciona os mecanismos físicos que permitem
salvar certas discapacidades,
O segundo proporciona a maneira eficaz de aceder às
funcionalidades e informações para estes dispositivos e
outros programas (por exemplo, um navegador web).
![Page 14: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/14.jpg)
Características da acessibilidade
A acessibilidade divide-se em física e cognitiva e está
relacionada com os aspectos ergonómicos vistos antes nas
aulas.
![Page 15: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/15.jpg)
Design Universal (DU)
“Design Universal é o design de productos e de ambientes
para serem usados por todas as pessoas, na maior extensão
possível, sem a necessidade de adaptação ou design
especializado”.
![Page 16: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/16.jpg)
Princípios do Design Universal (DU)
Equiparação nas possibilidades de uso.
O design é útil e comercializável ás pessoas com habilidades
diferenciadas.
Flexibilidade no uso.
O design atende a uma ampla gama de indivíduos, preferências e
habilidades.
Uso simple e intuitivo.
O uso do design é de fácil comprensão, independientemente de
experiência, nível de formação, conhecimento do idioma ou da
capacidade de concentração do usuário.
![Page 17: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/17.jpg)
Princípios do Design Universal (DU)
Captação da informação.
O design comunica eficazmente ao usuário as informações
necessárias, independientemente de sua capacidade sensorial ou
de condições ambientais.
Tolerância ao erro.
O design minimiza o risco e as consequências adversas de acções
involuntárias ou imprevistas.
Mínimo esforço físico.
O design pode ser utilizado com um mínimo de esforço, de forma
eficiente e confortável.
![Page 18: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/18.jpg)
Princípios do Design Universal (DU)
Dimensão e espaço para uso e interacção
O design oferece espaços e dimensões apropriados para
interacção, manipulação e uso, independentemente de tamanho,
postura ou mobilidade do usuário.
![Page 19: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/19.jpg)
Acessibilidade envolve...
Deficiências definitivas ou temporárias
Visual, auditiva, motora, cognitiva, etc...
Habilidade motora(Ambidestro, destro, canhoto)
Diversidade de dispositivos
Acesso via celular ou smartphone, PC, Smartwatch, TV...
Diferentes públicos (Idosos, crianças)
Letramento (Analfabetismo funcional)
![Page 20: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/20.jpg)
Deficiência visual. Cor
Protanopia:
Ausência de cor vermelha
Deuteranopia:
Ausência de cor verde
Tritanopia:
Ausência de cor azul
![Page 21: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/21.jpg)
Deficiência visual. Cor
ProblemaAvisoSucesso
Sem azul
Sem vermelho
Sem verde
![Page 22: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/22.jpg)
Ferramentas para validar a
combinação de cores
http://paletton.com/
http://www.coloradd.net/
http://color.method.ac/
![Page 23: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/23.jpg)
![Page 24: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/24.jpg)
![Page 25: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/25.jpg)
Tritanopia:
Ausência de cor azul
![Page 26: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/26.jpg)
Deficiência visual. Cor. Dicas
1. Não codifique nenhum comportamento importante apenas
por cores.
2. Use cores perfeitamente distinguíveis.
3. Verifique a exibição em diferentes condições.
![Page 27: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/27.jpg)
WCAG 2.1(Updated 05/06/2018)
Web Content Accessibility Guidelines 2.0
É a última versão das pautas de acessibilidade do conteúdo
na Web do World Wide Web Consortium (W3C).
Esta guia permite ao desenvolvedor desenhar o conteúdo
para que seja acessível a uma faixa mais ampla de pessoas
com discapacidades, incluindo cegueira e baixa visão,
surdez e perda de audição, dificuldades de aprendizagem,
limitações cognitivas, movimento limitado, discapacidade
do fala, fotosensibilidad e combinações destas.
![Page 28: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/28.jpg)
Princípios da WCAG 2.0
Princípio 1: Perceptível: a informação e os componentes da
interface de usuário devem ser mostrados aos usuários em formas
que eles possam entender.
Pauta 1.1: Texto alternativo: fornecer texto alternativo para conteúdo que não étextual, podendo ser transformado em outros formatos de que as pessoas precisam,
como caracteres grandes, linguagem braille (braille não está correta), linguagem
oral, símbolos ou linguagem mais simples..
Pauta 1.2: Conteúdo multimídia dependente do tempo
Pauta 1.3: Adaptável: crie conteúdo que possa ser apresentado de diferentes
maneiras sem perder informações ou estrutura.
Pauta 1.4: Distinguível: facilite aos usuários ver e ouvir o conteúdo, incluindo adistinção entre o mais importante e o menos importante.
![Page 29: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/29.jpg)
Princípios da WCAG 2.0
Princípio 2: Operável: Os componentes da interface de usuário e a
navegação deve ser manejável.
Pauta 2.1: Teclado acessível: controlar todas as funções do teclado.
Pauta 2.2 Tempo suficiente: fornecer tempo suficiente para os usuários lerem e
usarem o conteúdo.
Pauta 2.3: Ataques epilépticos: Não crie conteúdo que possa causar ataquesepilépticos.
Pauta 2.4: Navegação: fornecer maneiras de ajudar os usuários a navegar, pesquisarconteúdo e determinar onde eles estão.
Pauta 2.5: Modos de entrada: facilitar aos usuários a operar a funcionalidade através
de vários métodos de entrada além do teclado.
![Page 30: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/30.jpg)
Princípios da WCAG 2.0
Princípio 3: Compreensível. A informação e as operações de
usuários devem ser compreensíveis.
Pauta 3.1: Legível: Torne o conteúdo de texto legível e compreensível.
Pauta 3.2 Previsível: faça a aparência e a maneira de usar as páginas Web
previsíveis.
Pauta 3.3 Assistência para entrada de dados: ajude os usuários a evitar e
corrigir erros.
![Page 31: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/31.jpg)
Princípios da WCAG 2.0
Principio 4: Robustez: o conteúdo dever ser suficientemente
robusto para que possa ser bem interpretado por uma grande
variedade de usuários. Também o sistema deve executar vários
processos simultaneamente sem gerar falhas ou bloqueios.
![Page 32: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/32.jpg)
Benefícios da acessibilidade
Social EconómicoTecnológico
![Page 33: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/33.jpg)
Metodologias que ajudam a avaliar a
acessibilidade
Metodologia de Avaliação de Conformidade com a
Acessibilidade em website. (Website Accessibility
Conformance Evaluation Methodology, WCAG-EM 2.1)
Utiliza-se para fazer uma
avaliação exhaustiva de um
Website de acordo com as
pautas WCAG 2.1 e combina a
validação automática,
semiautomática e manual.
![Page 34: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/34.jpg)
https://www.w3.org/WAI/test-evaluate/preliminary/
![Page 35: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/35.jpg)
Metodologias que ajudam a avaliar a
acessibilidade
Caminho por barreiras de acessibilidade (Barrier
Walkthrough)
![Page 36: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/36.jpg)
Tarefa
Caracterizar as metodologias de avaliação da
acessibilidade mencionadas.
Bb. MPlu+
http://www.grihotools.udl.cat/mpiua/accessibilidad/metodo
logias-que-ayudan-a-evaluar-la-accesibilidad/
https://link.springer.com/chapter/10.1007%2F11788713_24
https://www.w3.org/WAI/test-evaluate/preliminary/
![Page 37: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/37.jpg)
Conclusões...
Que se entende por acessibilidade?
Quais são os princípios da acessibilidade web?
Quais são os benefícios da acessibilidade?
Que metodologias existem para avaliar a acessibilidade?
![Page 38: INTERFACE HOMEM- MÁQUINA · 2018-10-14 · Princípios do Design Universal (DU) Captação da informação. O design comunica eficazmente ao usuário as informações necessárias,](https://reader033.fdocument.pub/reader033/viewer/2022060304/5f08f6d47e708231d42493dd/html5/thumbnails/38.jpg)
INTERFACE HOMEM-
MÁQUINADESENHO DE INTERFACES E ACESSIBILIDADE