AI/ UX/ DEV/ Interface acessível para educação à distância em 5 dias DIOGO GALVÃO JONATHAS SCOTT WIADRIO 2017
AI/ UX/ DEV/Interface acessível para educação à distância em 5 diasDIOGO GALVÃOJONATHAS SCOTT
WIADRIO 2017
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
WIAD 2017 - Interface acessível para educação à distância em 5 diasCOMO 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
WIAD 2017 - Interface acessível para educação à distância em 5 diasO QUE FAZER?
O QUE SER ACESSIBILIDADE WEB ?
para deficientes visuais
WIAD 2017 - Interface acessível para educação à distância em 5 diasACESSIBILIDADE
● Designers Daltônicos
● Deficientes Visuais (óculos)
● Deficientes motores
● etc
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
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.
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
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 WebSITUAÇÃO:
Deficiente visual totalCOMO:
Utiliza NVDAHÁBITOS:
Navega sozinha em sites de notícias, redes sociais e estuda pela internet.
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
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
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!
WIAD 2017 - Interface acessível para educação à distância em 5 diasCOMO ?
● Wireframe? ● Inventário de
Conteúdo ?
ESTRATÉGIA TORNA-SE VAZIASEM CLAREZA DO OBJETIVO
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
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)
“
”
WIAD 2017 - Interface acessível para educação à distância em 5 dias
COMO PERMITIR O “ESCANEAR” NA AUDIÇÃO?
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.
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.
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.
Mural
● Títulos começam com a data, pois percebemos como informação determinante para continuar ouvindo ou pular para o próximo.
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.
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.
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.
Lendo um FórumHierarquia:
● 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.
Respondendo umFó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.
Respondendo um Fórum
● Ao salvar, usuário não recebe confirmação.
● Usuário retorna para início do fórum.
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.
ModificandoMensagem noFó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.
ModificandoMensagem noFó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.
Comentando umaMensagem
● 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.
Comentando umaMensagem
● Ao salvar, usuário não recebe confirmação.
● Usuário retorna para início do fórum.
Comentando umaMensagem
● A partir do link contextual “Comentar nª mensagem”.
● Botão de ação com rótulo contextual.
Comentando umaMensagem
● Foco direto no novo comentário postado.
● Primeira frase a ser lida é a mensagem de sucesso.
Modificando Comentário deMensagem
● Edição realizada em janela separada.
● Aviso de sucesso exige confirmação.
● Usuário retorna para início do fórum.
Modificando Comentário deMensagem
● 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.
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 inclusivae democrática.
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.
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)