Interface acessível para educação à distância em 5 dias. Apresentação realizada no WIADRIO 2017. O Desafio: Aluna deficiente visual total com dificuldade para acessar o Ambiente Virtual de Aprendizagem. Plataforma com tecnologias antigas. Componentes com falhas de acessibilidade. Pouca flexibilidade para melhorias de acessibilidade e arquitetura da informação. Prazo: 5 dias. O QUE "SER" ACESSIBILIDADE WEB ?

1. AI/ UX/ DEV/
Interface acessível para
educação à distância
em 5 dias
DIOGO GALVÃO
JONATHAS SCOTT
WIADRIO 2017

2. WIAD 2017 - Interface acessível para educação à distância em 5 diasQUEM SOMOS - ONDE SOMOS

3. WIAD 2017 - Interface acessível para educação à distância em 5 dias
● Aluno deficiente visual total com
dificuldade para acessar o
Ambiente Virtual de Aprendizagem.
● Plataforma com tecnologias antigas.
● Componentes com falhas de
acessibilidade.
● Pouca flexibilidade para melhorias de
acessibilidade e arquitetura da
informação.
● Prazo: 5 dias.
O DESAFIO

4. WIAD 2017 - Interface acessível para educação à distância em 5 dias
COMO UM DEFICIENTE VISUAL USA A
INTERNET?
Lucas Radaelli (NINJA) demonstrando NVDA
Fonte: https://www.youtube.com/watch?v=ujHTn6Cuc5E
Horácio, Lêda, Maq - Acesso Digital
47 cliques no (*tab) Áudio velocidade incomum
Fonte: https://www.youtube.com/watch?v=zNVrNo7MxsA

5. WIAD 2017 - Interface acessível para educação à distância em 5 diasO QUE FAZER?
O QUE SER
ACESSIBILIDADE WEB ?
para deficientes visuais

6. WIAD 2017 - Interface acessível para educação à distância em 5 diasACESSIBILIDADE
● Designers
Daltônicos
● Deficientes
Visuais (óculos)
● Deficientes
motores
● etc

7. WIAD 2017 - Interface acessível para educação à distância em 5 diasO QUE FAZER?
Corrigir os bugs e conformidade
E-MAG e WCAG
ou
Projetar a Experiência
repensando a Arquitetura

8. WIAD 2017 - Interface acessível para educação à distância em 5 diasNORTEADORES
● Desenvolver uma interface
alternativa para Mural e Fórum.
● Foco na experiência por meio de
leitores de tela.
● Reorganização das
informações.
● Níveis de navegação reduzidos.
● Interações humanizadas.
● Design sem identidade visual.

9. WIAD 2017 - Interface acessível para educação à distância em 5 diasCOMO ?
CONCEITOS:
Goal-driven design, Responsive
design, Progressive
Enhancement, Iterações e
Entregas Constantes (lean),
Usabilidade e UX.
PRÁTICAS:
● Grupo de foco interno,
● Persona (usuário real),
● Benchmark,
● Desconstrução do fórum para
chegar a um modelo conceitual,
● Análise de tarefa em par,
● Rascunho-o-grama,
● Protótipos navegáveis em HTML,
● Análise de acessibilidade,
● Avaliação qualitativa.
HEURÍSTICAS:
controle, consistência,
correspondência com o modelo
mental, reconhecimento

10. WIAD 2017 - Interface acessível para educação à distância em 5 diasGRUPO DE FOCO + PERSONA (real)
Grupo de foco:
(desenvolvedor, designer,
acompanhamento pedagógico, gestor)
Persona:
NOME:
Acessilinda da Web
SITUAÇÃO:
Deficiente visual total
COMO:
Utiliza NVDA
HÁBITOS:
Navega sozinha em sites de notícias,
redes sociais e estuda pela internet.

11. WIAD 2017 - Interface acessível para educação à distância em 5 diasBENCHMARK

12. WIAD 2017 - Interface acessível para educação à distância em 5 diasCOMO ?
STAKEHOLDERS (os que fazem + os que querem feito) + USUÁRIOS
GOAL DRIVEN DESIGN

13. WIAD 2017 - Interface acessível para educação à distância em 5 diasCOMO ?
GOAL DRIVEN/
TAREFA do usuário.
objetivos requisitos atividades meio
FÓRUM OUVIR, ESCOLHER,
COMENTAR, RESPONDER,
EDITAR/MODIFICAR
OUVIR AVISOS, CRIAR
AVISO
MURAL / AVISOS

14. WIAD 2017 - Interface acessível para educação à distância em 5 diasFLUXO
DIAGRAMA/NINJA

15. WIAD 2017 - Interface acessível para educação à distância em 5 dias
Muitas decisões de ux, arquitetura e
acessibilidade foram definidas nas
conversas em par, com protótipos HTML
para testes em par e grupo de foco.
*Tudo isso na mesa do desenvolvedor, claro!

16. WIAD 2017 - Interface acessível para educação à distância em 5 diasCOMO ?
● Wireframe?
● Inventário de
Conteúdo ?
ESTRATÉGIA TORNA-SE VAZIA
SEM CLAREZA DO OBJETIVO

17. WIAD 2017 - Interface acessível para educação à distância em 5 diasOS PASSOS

18. WIAD 2017 - Interface acessível para educação à distância em 5 diasO RESULTADO
ETHAN MARCOTTE - 2010
FORM
FOLLOWS
FUNCTION
“
BAUHAUS - 1919
”
SCOTT JEHL - 2008

19. Humanizar o processo e maximizar a
sensação de controle, através de
clareza/eficiência nas tarefas, para o
cumprimento do objetivo da aluna.
Melhorar o Design Visceral (satisfação) e Comportamental (eficiência + eficácia)
“
”

20. WIAD 2017 - Interface acessível para educação à distância em 5 dias
COMO PERMITIR O
“ESCANEAR” NA
AUDIÇÃO?

21. Página de entrada
● Nome do sistema é o
prefixo do título de
todas as páginas.

22. Página de entrada
● Título da página atual
tem prioridade no título
da aba.
● O número da versão é o que
acontece quando deixam o
programador escrever na
interface.

23. Ao entrar
● Estrutura de frames e
ferramentas abrindo em
janelas separadas são
inconveniências para
leitores de tela.
● Além do aumento na
carga cognitiva e
dificuldades
comportamentais. Mais
ainda para deficientes
visuais.

24. Ao entrar
● Mensagem de êxito no
acesso é a primeira
informação a ser lida.
● Itens do menu têm
teclas de atalho.
● O uso do <TAB> foca
um link oculto para
pular direto para o
conteúdo principal e
também tem uma tecla
de atalho.
● Mural é o conteúdo
inicial.

25. Mural
● Muitos <TABs> até
chegar ao conteúdo.

26. Mural
● Títulos começam com
a data, pois
percebemos como
informação
determinante para
continuar ouvindo ou
pular para o próximo.

27. Postagem no
Mural
● A ferramenta Mural
precisa ser acessada
pelo menu principal.
● Uma janela do Mural é
aberta, separada da
página inicial.
● Botões de ação com
rótulos genéricos.

28. Postagem no
Mural
● Ao salvar, usuário não
recebe confirmação.
● Usuário retorna para
tabela com as
postagens no mural.
● A visualização das
postagens exige
interação para acionar
e fechar cada uma
delas.

29. Postagem no
Mural
● Botão de ação com
rótulo específico.

30. Postagem no
Mural
● Foco direto na nova
postagem.
● Primeira frase a ser lida
é a mensagem de
sucesso.
● Humanização temporal,
relevância cronológica.
● Leitura sequencial.

31. Fóruns
● Relação de fóruns em
tabela.

32. Fóruns
● O título de cada fórum
começa com a data de
atualização.

33. Lendo um
Fórum
Hierarquia:
● Fórum
○ Mensagens
■ Comentários

34. Lendo um Fórum
Hierarquia:
● Fórum
○ Mensagens
■ Comentários
Entendemos que as
mensagens se beneficiaram
de um identificador
numérico antes do título
para indexá-las no fórum.
Já os comentários de cada
mensagem eram melhor
categorizados apenas pelo
autor.

35. Respondendo um
Fórum
● Formulário em outra
janela.
● Desconectado do
contexto.
● Bug: usuário de teclado
fica preso no campo de
texto, sem conseguir
dar TAB.
● Botão de ação com
rótulo genérico.

36. Respondendo um
Fórum
● Ao salvar, usuário não
recebe confirmação.
● Usuário retorna para
início do fórum.

37. Respondendo um
Fórum
● Formulário junto ao
contexto do fórum.
● Botão de ação com
rótulo específico.

38. Respondendo um
Fórum
● Foco direto na resposta
postada.
● Primeira frase a ser lida
é a mensagem de
sucesso.
● Links para comentar
remetem ao número da
mensagem a que se
referem.

39. Modificando
Mensagem no
Fórum
● Janela aberta a partir
de botão genérico:
“Editar”.
● Aviso de sucesso exige
confirmação.
● Usuário retorna para
início do fórum.

40. Modificando
Mensagem no
Fórum
● A partir do link
contextual “Editar
minha mensagem”.
● Disponível apenas por
15 minutos após o
envio.
● Ao confirmar, foco
retorna para a própria
mensagem editada e
um aviso de sucesso é
lido.

41. Comentando uma
Mensagem
● Janela aberta a partir
de botão genérico:
“Editar”.
● Formulário
desconectado do
contexto.
● Botão de ação com
rótulo genérico.

42. Comentando uma
Mensagem
● Ao salvar, usuário não
recebe confirmação.
● Usuário retorna para
início do fórum.

43. Comentando uma
Mensagem
● A partir do link
contextual “Comentar
nª mensagem”.
● Botão de ação com
rótulo contextual.

44. Comentando uma
Mensagem
● Foco direto no novo
comentário postado.
● Primeira frase a ser lida
é a mensagem de
sucesso.

45. Modificando
Comentário de
Mensagem
● Edição realizada em
janela separada.
● Aviso de sucesso exige
confirmação.
● Usuário retorna para
início do fórum.

46. Modificando
Comentário de
Mensagem
● A partir do link
contextual “Editar meu
comentário”, disponível
apenas por 15 minutos
após o envio.
● Ao confirmar, foco
retorna para
comentário editado e
um aviso de sucesso é
lido.

47. WIAD 2017 - Interface acessível para educação à distância em 5 diasE SE ? RESULTADO
A nova interface, com fluxos e
hierarquia/estruturação da
informação repensada para a aluna
deficiente visual, gerou uma interface
melhor para todos os usuários.
Uma interface inclusiva
e democrática.

48. WIAD 2017 - Interface acessível para educação à distância em 5 diasQUAL ERA O NOSSO GOAL ?
Melhorar o Design Visceral (satisfação)
e Comportamental (eficiência + eficácia)
para nosso persona.

49. WIAD 2017 - Interface acessível para educação à distância em 5 diasRESULTADO
“Fiquei bastante feliz, pois agora consigo compreender
melhor a plataforma e ter acesso aos avisos disponíveis no
mural e aos fóruns que penso ser o fundamental para minha
participação no curso...”
“Super fácil. Acho que a plataforma ficou bastante
intuitiva...”
“Bom, até o momento não senti falta de nada. A navegação
está bastante simplificada, o que facilita o acesso do
deficiente visual...”
Acessilinda da Web
(deficiente visual total)

50. E é isso...
Obrigado aos responsáveis pelo WIADRIO pela
oportunidade, e por todos vocês que aguentaram até aqui!
JONATHAS SCOTT + DIOGO GALVÃO