interface homem- mÁquina · 2018-10-14 · princípios do design universal (du) captação da...

38
INTERFACE HOMEM- MÁQUINA DESENHO DE INTERFACES E ACESSIBILIDADE

Upload: others

Post on 19-Jun-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,
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,
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,

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,

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,

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,

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,

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,

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,

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,

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,

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://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,

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,

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,

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,

INTERFACE HOMEM-

MÁQUINADESENHO DE INTERFACES E ACESSIBILIDADE