1. O documento descreve o projeto de criar uma interface acessível para educação à distância em 5 dias para uma aluna cega. 2. Os desafios incluíam uma plataforma antiga com problemas de acessibilidade e pouca flexibilidade para melhorias. 3. A equipe usou práticas de design como personas, análise de tarefas e protótipos para criar uma nova interface focada na experiência do usuário cego.

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.

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

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