1. O documento descreve o projeto de criar uma interface acessível para educação à distância em 5 dias para uma aluna cega.
2. Os desafios incluíam uma plataforma antiga com problemas de acessibilidade e pouca flexibilidade para melhorias.
3. A equipe usou práticas de design como personas, análise de tarefas e protótipos para criar uma nova interface focada na experiência do usuário cego.
Apresentação de Introdução as práticas de Desenvolvimento Web com Design Responsivo utilizada no 4° Meditec - Medianeira In Technology, realizado em Medianeira - PR.
Autores:
Anderson Rodrigo Davi - andersonrdavi@gmail.com;
Régis Eduardo Weizenmann Gregol - regiseduardogregol@gmail.com.
Código fonte disponível no Github: http://github.com/bicoco/agenda-meditec
Exemplo layout fixo: http://agendameditec.herokuapp.com/index.html
Exemplo layout responsivo: http://agendameditec.herokuapp.com/responsivo.html
Apresentação de Introdução as práticas de Desenvolvimento Web com Design Responsivo utilizada no 4° Meditec - Medianeira In Technology, realizado em Medianeira - PR.
Autores:
Anderson Rodrigo Davi - andersonrdavi@gmail.com;
Régis Eduardo Weizenmann Gregol - regiseduardogregol@gmail.com.
Código fonte disponível no Github: http://github.com/bicoco/agenda-meditec
Exemplo layout fixo: http://agendameditec.herokuapp.com/index.html
Exemplo layout responsivo: http://agendameditec.herokuapp.com/responsivo.html
O que é, como funciona, media types (media queries), design, recomendações e frameworks, bootstrap.
Material de estudos elaborado por Marcos César // www.marcoscesar.com
Todo o conteúdo é livre e pode ser copiado, consultado sempre e divulgado em toda internet desde que citados os créditos.
cc 2013 Construsite Brasil - Desenvolvimento web.
Uma palestra sobre a chamada "Web 2.0", Novos Conteúdos e afins, apresentada no III Encontro Estadual de Estudantes de Design de Pernambuco, em Recife.
Esta apresentação insere-se no 3º ano da licenciatura em Ciências e Tecnologias da Documentação e Informação, na ESEIG, na UC de Projeto de Biblioteca.
04/2019 - Ministrei palestra com o tema: “Conhecendo os benefícios do VueJS e seu ecossistema.”, durante a 2° TALK - TECNOLOGIA & OPORTUNIDADES, realizado na Universidade Estadual de Ciências e Saúde de Alagoas - UNCISAL;
Baseada em diversos profissionais.
Elaborada por André Rossiter.
download vídeo aulas e tutoriais exclusivos em http://www.midiasbr.com
me siga no twitter http://www.twitter.com/arbf
me acompanhe no facebook http://www.facebook.com/tutorbrasil
assine meu perfil oficial do facebook http://www.facebook.com/andrerossiter
meu canal oficial no youtube http://www.youtube.com/user/tedboy1977
meu canal oficial no slide share http://www.slideshare.net/arbf
google plus https://plus.google.com/i/z7KAIyYhR3k:Nuwo4Axptbk
Sala de aula virtual URL: http://connectnow.acrobat.com/webrossiter (apenas com agendamento)
Por que usar o WordPress - Conceitos e AplicaçõesGuga Alves
Saiba da evolução histórica do sistema, melhorias de usabilidade e evolução técnica da ferramenta, mostrando o porque de todo este crescimento, e mostrando ao vivo como desenvolver uma aplicação simples em WordPress em pouco tempo, um ecommerce com o plugin woocomerce, utilizando as melhores práticas de desenvolvimento WordPress, muita criatividade e explicando passo a passo cada decisão tomada.
Comida da Gente: catalogação para pequenos produtoresHuge
A designer Ana Tarrisse e Nilton Lessa, fundador da Moleque de Ideias, apresentam o processo de desenvolvimento da ferramenta de catálogo da plataforma Comida da Gente, desde sua criação até os planos futuros.
O que é, como funciona, media types (media queries), design, recomendações e frameworks, bootstrap.
Material de estudos elaborado por Marcos César // www.marcoscesar.com
Todo o conteúdo é livre e pode ser copiado, consultado sempre e divulgado em toda internet desde que citados os créditos.
cc 2013 Construsite Brasil - Desenvolvimento web.
Uma palestra sobre a chamada "Web 2.0", Novos Conteúdos e afins, apresentada no III Encontro Estadual de Estudantes de Design de Pernambuco, em Recife.
Esta apresentação insere-se no 3º ano da licenciatura em Ciências e Tecnologias da Documentação e Informação, na ESEIG, na UC de Projeto de Biblioteca.
04/2019 - Ministrei palestra com o tema: “Conhecendo os benefícios do VueJS e seu ecossistema.”, durante a 2° TALK - TECNOLOGIA & OPORTUNIDADES, realizado na Universidade Estadual de Ciências e Saúde de Alagoas - UNCISAL;
Baseada em diversos profissionais.
Elaborada por André Rossiter.
download vídeo aulas e tutoriais exclusivos em http://www.midiasbr.com
me siga no twitter http://www.twitter.com/arbf
me acompanhe no facebook http://www.facebook.com/tutorbrasil
assine meu perfil oficial do facebook http://www.facebook.com/andrerossiter
meu canal oficial no youtube http://www.youtube.com/user/tedboy1977
meu canal oficial no slide share http://www.slideshare.net/arbf
google plus https://plus.google.com/i/z7KAIyYhR3k:Nuwo4Axptbk
Sala de aula virtual URL: http://connectnow.acrobat.com/webrossiter (apenas com agendamento)
Por que usar o WordPress - Conceitos e AplicaçõesGuga Alves
Saiba da evolução histórica do sistema, melhorias de usabilidade e evolução técnica da ferramenta, mostrando o porque de todo este crescimento, e mostrando ao vivo como desenvolver uma aplicação simples em WordPress em pouco tempo, um ecommerce com o plugin woocomerce, utilizando as melhores práticas de desenvolvimento WordPress, muita criatividade e explicando passo a passo cada decisão tomada.
Comida da Gente: catalogação para pequenos produtoresHuge
A designer Ana Tarrisse e Nilton Lessa, fundador da Moleque de Ideias, apresentam o processo de desenvolvimento da ferramenta de catálogo da plataforma Comida da Gente, desde sua criação até os planos futuros.
Como o TCU vem transformando informação em inovaçãoHuge
Como o governo pode alavancar soluções inovadoras para a sociedade? Como ele pode usar dados para melhorar seus serviços? Neste bate-papo, Fabiana Ruas, diretora do Centro de Pesquisa e Inovação do TCU, responde essas questões e mostra como o Tribunal de Contas da União (TCU) tem usado a informação como um instrumento de inovação dentro das instituições governamentais.
Esta apresentação busca conhecer um pouco sobre o que são ambientes virtuais de aprendizagem dando ênfase na sua importância e contribuição no ensino aprendizagem. Podemos destacar o uso de algumas ferramentas que auxiliam no processo de comunicação (interação) entre professor e cursistas. Para finalizar foi apresentado exemplos de customização realizadas em instituições de ensino.
Artificial Intelligence has the potential to change human work and productivity at a magnitude comparable to the industrialisation. This change is incremental rather than revolutionary.
Até pouco tempo, a estruturação da informação em companhias de segmentos diversos era feita de forma manual. No entanto, desenvolvedores e arquitetos de informação vêm ganhando um novo aliado nessa tarefa: a inteligência computacional. Nesta palestra, a UX Lead Anna Raquel Serra e a Web Engineer Isabella Silviera, ambas da Huge, falam sobre o impacto dessa revolução a partir de exemplos práticos de reconhecimento de imagens por padrões.
Alexa, the voice service that powers Amazon Echo and Amazon Fire TV, provides a set of built-in abilities, or skills, that enable customers to interact with devices in a more intuitive way using voice. Application developers are also able to create custom applications and skills that can be published in the Alexa App Store for consumers to use. Some examples of these today include Uber, Spotify and Domino’s Pizza.This session will advise on why voice is a relevant additional user engagement model for businesses, what a good VUI (Voice User Interface) sounds like, and also demonstrate how simple it is to build custom Alexa applications by utilising the hosted Alexa Voice service and the AWS cloud.
by Benedict Evans. Please see this link for full description, slides, AND version with talk track: http://a16z.com/2016/12/09/mobile-is-eating-the-world-outlook-2017/
AI for IA's: Machine Learning Demystified at IA Summit 2017 - IAS17Carol Smith
What is machine learning? Is IA relevant in the age of AI? How can I take advantage of cognitive computing? Learn the basics of these concepts and the implications for your work in this presentation. Carol Smith provides examples of machine learning use and will discuss the challenges inherent in in AI.
The Chatbots Are Coming: A Guide to Chatbots, AI and Conversational InterfacesTWG
2016 is the year of all things conversational. Chatbots, suddenly, are everywhere. Driven by the explosion in popularity of messaging apps like Kik, Slack and Facebook Messenger, chatbots are quickly becoming a core part of the software product mix.
So does your business need a chatbot? This deck will help you understand the massive opportunity for companies who are bold enough to start building chatbots of their own.
(Already au fait with chatbots and looking for a software team to help you with yours? Skip to slide 47 to see some of the chatbots we've built at TWG for our clients and ourselves.)
Looking to scale something up? Depending on how you're going after your market/ acquiring users, you may need to build a sales organization that's optimized for a top-down or bottom-up sales process (or perhaps both).
Watch the video overview at http://a16z.com/2015/03/06/go-to-market-bootcamp/ and then check out this slide deck, which shares some concrete tips and tools for accelerating time to market -- from the go-to-market experts at a16z, led by 'sales savant' Mark Cranney.
Because selling to enterprises is a lot like getting a bill passed through Congress: it can get stuck. And getting stuck -- or going down the wrong path -- can mean death to startups in a competitive market. Here's how to avoid that.
There is no point in drawing a distinction between the future of technology and the future of mobile. They are the same. In other words, technology is now outgrowing the tech industry.
Wiad interface-acessivel-educacao-distancia-5diasJonathas Scott
Interface acessível para educação à distância em 5 dias.
Apresentação realizada no WIADRIO 2017.
O Desafio:
Aluna 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 QUE "SER" ACESSIBILIDADE WEB ?
Apresentação sobre usabilidade no 12° Encontro de WebDesign. A partir de cases de sucesso e insucesso, abordamos os principais fundamentos da disciplina.
Jornalismo para tablets: o aplicativo da revista Veja e avaliação de comunica...
AI e UX como solução de educação à distância em 5 dias
1. AI/ UX/ DEV/
Interface acessível para
educação à distância
em 5 dias
DIOGO GALVÃO
JONATHAS SCOTT
WIADRIO 2017
2. WIAD 2017 - Interface acessível para educação à distância em 5 diasQUEM SOMOS - ONDE SOMOS
3. 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
4. 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
5. WIAD 2017 - Interface acessível para educação à distância em 5 diasO QUE FAZER?
O QUE SER
ACESSIBILIDADE WEB ?
para deficientes visuais
6. WIAD 2017 - Interface acessível para educação à distância em 5 diasACESSIBILIDADE
● Designers
Daltônicos
● Deficientes
Visuais (óculos)
● Deficientes
motores
● etc
7. 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
8. 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.
9. 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
10. 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 Web
SITUAÇÃO:
Deficiente visual total
COMO:
Utiliza NVDA
HÁBITOS:
Navega sozinha em sites de notícias,
redes sociais e estuda pela internet.
11. WIAD 2017 - Interface acessível para educação à distância em 5 diasBENCHMARK
12. 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
13. 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
14. WIAD 2017 - Interface acessível para educação à distância em 5 diasFLUXO
DIAGRAMA/NINJA
15. 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!
16. WIAD 2017 - Interface acessível para educação à distância em 5 diasCOMO ?
● Wireframe?
● Inventário de
Conteúdo ?
ESTRATÉGIA TORNA-SE VAZIA
SEM CLAREZA DO OBJETIVO
17. WIAD 2017 - Interface acessível para educação à distância em 5 diasOS PASSOS
18. 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
19. 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)
“
”
20. WIAD 2017 - Interface acessível para educação à distância em 5 dias
COMO PERMITIR O
“ESCANEAR” NA
AUDIÇÃO?
22. 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.
23. 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.
24. 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.
26. Mural
Títulos começam com a
data, pois percebemos
como informação
determinante para
continuar ouvindo ou
pular para o próximo.
27. 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.
28. 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.
30. 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.
35. Respondendo um
Fó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.
38. 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.
39. Modificando
Mensagem no
Fó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.
40. Modificando
Mensagem no
Fó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.
46. Modificando
Comentário de
Mensagem
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.
47. 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 inclusiva
e democrática.
48. 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.
49. 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)
50. E é isso...
Obrigado aos responsáveis pelo WIADRIO pela
oportunidade, e por todos vocês que aguentaram até aqui!
JONATHAS SCOTT + DIOGO GALVÃO
Notas do Editor
Que tal substituir “educação à distância” por acessibilidade? Acho que foi isso que solucionamos.
Tecnologias antigas: frames, tabelas e popups.
Componentes com falhas: campos de entrada impedindo o uso do TAB.
Além da tecnologia, pouca flexibilidade também porque não queríamos modificar o ambiente para outros alunos.
Os problemas que impediam o uso do AVA poderiam ser corrigidos com algum esforço, mas a experiência de algumas ferramentas deixaria a desejar para usuários de leitores de tela.