ai e ux como solução de educação à distância em 5 dias

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