ai e ux como solução de educação à distância em 5 dias
TRANSCRIPT
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 diasQUEM SOMOS - ONDE SOMOS
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 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
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 dias
GRUPO 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 diasBENCHMARK
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 meioFÓRUM OUVIR, ESCOLHER,
COMENTAR, RESPONDER,
EDITAR/MODIFICAR
OUVIR AVISOS, CRIAR AVISOMURAL / AVISOS
WIAD 2017 - Interface acessível para educação à distância em 5 diasFLUXO
DIAGRAMA/NINJA
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 diasOS PASSOS
WIAD 2017 - Interface acessível para educação à distância em 5 dias
O 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 entradaNome do sistema é o
prefixo do título de todas as páginas.
Página de entradaTí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 entrarEstrutura 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 entrarMensagem 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.
MuralMuitos <TABs> até
chegar ao conteúdo.
MuralTítulos começam com a
data, pois percebemos como informação determinante para continuar ouvindo ou pular para o próximo.
Postagem no MuralA 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 MuralAo 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 MuralBotão de ação com
rótulo específico.
Postagem no MuralFoco direto na nova
postagem.
Primeira frase a ser lida é a mensagem de sucesso.
Humanização temporal, relevância cronológica.
Leitura sequencial.
FórunsRelação de fóruns em
tabela.
FórunsO título de cada fórum
começa com a data de atualização.
Lendo umFórumHierarquia:
Fórum
Mensagens
Comentários
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órumFormulá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órumAo salvar, usuário não
recebe confirmação.Usuário retorna para
início do fórum.
Respondendo umFórumFormulário junto ao
contexto do fórum.Botão de ação com
rótulo específico.
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órumA 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 umaMensagemJanela 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 umaMensagemAo salvar, usuário não
recebe confirmação.Usuário retorna para
início do fórum.
Comentando umaMensagemA partir do link
contextual “Comentar nª mensagem”.
Botão de ação com rótulo contextual.
Comentando umaMensagemFoco direto no novo
comentário postado.
Primeira frase a ser lida é a mensagem de sucesso.
Modificando Comentário deMensagemEdição realizada em
janela separada.Aviso de sucesso exige
confirmação.Usuário retorna para
início do fórum.
Modificando Comentário deMensagemA 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)
E é isso...Obrigado aos responsáveis pelo WIADRIO pela oportunidade, e por todos vocês que aguentaram até aqui!JONATHAS SCOTT + DIOGO GALVÃO