Wiad interface-acessivel-educacao-distancia-5dias

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 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

http://www.youtube.com/watch?v=TSpgVbkIZbE

http://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 diasBENCHMARK


STAKEHOLDERS (os que fazem + os que querem feito) + USUÁRIOS

GOAL DRIVEN DESIGN


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 diasFLUXO

DIAGRAMA/NINJA


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!


● 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 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)

“

”


COMO PERMITIR O “ESCANEAR” NA AUDIÇÃO?

Página de entrada

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

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

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

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

● Botão de ação com rótulo específico.

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.

Fóruns

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

Fóruns

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

Lendo umFórum

Hierarquia:

● 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ó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


● Usuário retorna para início do fórum.

Respondendo umFórum

● Formulá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.


● 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.


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.





● A partir do link contextual “Comentar nª mensagem”.

● Botão de ação com rótulo contextual.


● Foco direto no novo comentário postado.


Modificando Comentário deMensagem

● Edição realizada em janela separada.

● Aviso de sucesso exige confirmação.


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)

E é isso...Obrigado aos responsáveis pelo WIADRIO pela oportunidade, e por todos vocês que aguentaram até aqui!

JONATHAS SCOTT + DIOGO GALVÃO