AI e UX como solução de educação à distância em 5 dias
-
Upload
huge -
Category
Technology
-
view
16 -
download
1
Transcript of AI e UX como solução de educação à distância em 5 dias
![Page 1: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/1.jpg)
AI/ UX/ DEV/Interface acessível para educação à distância em 5 diasDIOGO GALVÃOJONATHAS SCOTT
WIADRIO 2017
![Page 2: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/2.jpg)
WIAD 2017 - Interface acessível para educação à distância em 5 diasQUEM SOMOS - ONDE SOMOS
![Page 3: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/3.jpg)
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
![Page 4: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/4.jpg)
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
![Page 5: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/5.jpg)
WIAD 2017 - Interface acessível para educação à distância em 5 diasO QUE FAZER?
O QUE SER ACESSIBILIDADE WEB ? para deficientes
visuais
![Page 6: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/6.jpg)
WIAD 2017 - Interface acessível para educação à distância em 5 diasACESSIBILIDADE
● Designers Daltônicos
● Deficientes Visuais (óculos)
● Deficientes motores
● etc
![Page 7: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/7.jpg)
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
![Page 8: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/8.jpg)
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.
![Page 9: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/9.jpg)
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
![Page 10: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/10.jpg)
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.
![Page 11: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/11.jpg)
WIAD 2017 - Interface acessível para educação à distância em 5 diasBENCHMARK
![Page 12: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/12.jpg)
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
![Page 13: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/13.jpg)
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
![Page 14: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/14.jpg)
WIAD 2017 - Interface acessível para educação à distância em 5 diasFLUXO
DIAGRAMA/NINJA
![Page 15: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/15.jpg)
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!
![Page 16: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/16.jpg)
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
![Page 17: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/17.jpg)
WIAD 2017 - Interface acessível para educação à distância em 5 diasOS PASSOS
![Page 18: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/18.jpg)
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
![Page 19: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/19.jpg)
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)
“
”
![Page 20: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/20.jpg)
WIAD 2017 - Interface acessível para educação à distância em 5 dias
COMO PERMITIR O “ESCANEAR” NA AUDIÇÃO?
![Page 21: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/21.jpg)
Página de entradaNome do sistema é o
prefixo do título de todas as páginas.
![Page 22: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/22.jpg)
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.
![Page 23: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/23.jpg)
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.
![Page 24: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/24.jpg)
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.
![Page 25: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/25.jpg)
MuralMuitos <TABs> até
chegar ao conteúdo.
![Page 26: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/26.jpg)
MuralTítulos começam com a
data, pois percebemos como informação determinante para continuar ouvindo ou pular para o próximo.
![Page 27: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/27.jpg)
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.
![Page 28: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/28.jpg)
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.
![Page 29: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/29.jpg)
Postagem no MuralBotão de ação com
rótulo específico.
![Page 30: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/30.jpg)
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.
![Page 31: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/31.jpg)
FórunsRelação de fóruns em
tabela.
![Page 32: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/32.jpg)
FórunsO título de cada fórum
começa com a data de atualização.
![Page 33: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/33.jpg)
Lendo umFórumHierarquia:
Fórum
Mensagens
Comentários
![Page 34: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/34.jpg)
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.
![Page 35: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/35.jpg)
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.
![Page 36: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/36.jpg)
Respondendo um FórumAo salvar, usuário não
recebe confirmação.Usuário retorna para
início do fórum.
![Page 37: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/37.jpg)
Respondendo umFórumFormulário junto ao
contexto do fórum.Botão de ação com
rótulo específico.
![Page 38: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/38.jpg)
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.
![Page 39: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/39.jpg)
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.
![Page 40: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/40.jpg)
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.
![Page 41: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/41.jpg)
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.
![Page 42: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/42.jpg)
Comentando umaMensagemAo salvar, usuário não
recebe confirmação.Usuário retorna para
início do fórum.
![Page 43: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/43.jpg)
Comentando umaMensagemA partir do link
contextual “Comentar nª mensagem”.
Botão de ação com rótulo contextual.
![Page 44: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/44.jpg)
Comentando umaMensagemFoco direto no novo
comentário postado.
Primeira frase a ser lida é a mensagem de sucesso.
![Page 45: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/45.jpg)
Modificando Comentário deMensagemEdição realizada em
janela separada.Aviso de sucesso exige
confirmação.Usuário retorna para
início do fórum.
![Page 46: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/46.jpg)
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.
![Page 47: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/47.jpg)
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.
![Page 48: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/48.jpg)
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.
![Page 49: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/49.jpg)
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)
![Page 50: AI e UX como solução de educação à distância em 5 dias](https://reader036.fdocument.pub/reader036/viewer/2022070518/58ebefaa1a28ab9c498b45ed/html5/thumbnails/50.jpg)
E é isso...Obrigado aos responsáveis pelo WIADRIO pela oportunidade, e por todos vocês que aguentaram até aqui!JONATHAS SCOTT + DIOGO GALVÃO