SlideShare a Scribd company logo
1 of 103
Circuito 4x1 Rio - Abril 2011 Horácio Soares O que a Acess ibilidade  e a   Usabil idade podem fazer  pelo seu e-Com merce?
Horácio Soares [email_address] @horaciosoares   (21) 9925-5404 Circuito 4x1 Rio - Abril 2011
Qual é o momento  atual do  e-Commerce?
Quais são os objetivos do e-Commerce?
O que o usuário espera quando compra algo eletronicamente?
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Existe algum público que não é atendido?
Acessi bilidade? O que é
Usabi lidade? O que é
[object Object],[object Object],[object Object]
 
[object Object]
objetivo do design universal:  uma solução para todos
 
 
 
 
[object Object],[object Object],[object Object]
Imagem da página inicial do Google Simples e intuitivo (princípio da DU)
[object Object]
 
Acessib ilidade e usabi lidade  para  quem?
Juca, sem visão.
Mandy, sem visão e braços.
Lucas, com baixa visão utilizando o software ampliador de tela.
Para o Isaias,  designer e descobriu apenas no início de 2009 que é daltônico.  Isaias à esquerda, conduzindo o Januário para um chopinho  após curso de acessibilidade Web.
João Henriques   deficiente motor utiliza o mouse  com dificuldade.  (  www.euroacessibilidade.com  )
João,  tetraplégico João (foto de  Maíra Soares   )
Tião tem grandes dificuldades motoras e interage com teclado com o dedo mindinho…
Eric interagindo através de  teclado expandido  - Funlar – Rio (nov/2006).
Deficientes auditivos não oralizados têm dificuldades com o português.  Chapeuzinho Vermelho em português e na língua de sinais (prof. Goulão)
Gabriel, linguagem em desenvolvimento...  Gabriel compenetrado, olhando para o  monitor e clicando com o mouse.  Agora ele está olhando e  brincando como teclado.
Calvin, pouca experiência e  medo do computador Homem com muito medo olhando por  cima de um notebook.
Marta e suas amigas…
[object Object],[object Object],[object Object],[object Object],[object Object],Our globally aging population Copyright © 2009. World Wide Web Foundation. All rights reserved
Max, com tendinite, usando o mouse com a mão trocada. Homem com expressão de desespero, usando o mouse com a mão esquerda
Analfabeto funcional Um em cada cinco brasileiros (20,3%) é analfabeto funcional, de acordo com a Pnad (Pesquisa Nacional por Amostra de Domicílios) 2009, divulgada pelo IBGE. Homem sentado de frente para um quadro branco sem nada escrito.
Pedro e Laura com dispositivos móveis com acesso a Internet. Pedro olhando para seu smartphone e Laura com uma cara desesperada pera seu celular.
Todos nós na primeira experiência. Um criança com camisa social e gravata em frente a um notebook
E finalmente,  o bilionário cego!!! Cifrão desenhado com  moedas douradas
Google, o bilionário cego!!! É apenas um robô que indexa conteúdo em texto. Dilbert fazendo parte do logotipo do Google e falando  “eu não posso ver”.
SEO pode e deve ajudar, mas cuidado, seu uso pode ser prejudicial…
Quais os benefícios da Acessibilidade e  Usabilidade?
Possibilidade de atingir 100% do público alvo.
Atender melhor todas as pessoas
Homem de terno comemorando Fidelizar clientes
Mais fácil de usar e aprender
Proteção contra processos pela falta da acessibilidade
#inacessibilidadenaTam Trending Topics e possível processo no Ministério Público
Uma mão com laço  no dedo indicador Decreto de lei  nº 5.296   (dez/04) e o decreto de lei  nº  6.949  (ago/09), onde a convenção da ONU ganhou força de lei.
Visualizar os benefícios  da acessibilidade Manutenção mais rápida e barata, melhor performance…
Valorização da  Diversidade e Responsabilidade Social. Mãos entrelaçadas
Maior visibilidade pelos  sistemas de busca;
Mulher com notebook  em sinal de ok Vantagem competitiva
Melhoria da qualidade. Mãe e filha felizes na praia dando uma estrela
Na busca por soluções para os problemas, o que maioria dos sites de e-Commerce faz?
Copia e cola quase tudo...
Mas por que?  Porque não temos tempo, porque somos reativos e dá muito trabalho…
Divida o quadrado em 4 partes iguais !!! Dinâmica Livro: O Tiro e o Alvo
Os participantes do teste, em sua maioria, vão chegar facilmente às 4 respostas seguintes: Dinâmica Do livro “O Tiro e o Alvo”  Na Livraria da Travessa -  http://migre.me/105T7  Editora  http://www.caispharoux.com.br/
A partir destas, passam a ter dificuldades para encontrar outras formas de dividir o quadrado. Alguns chegam a afirmar não haver mais soluções possíveis e desistem. Dinâmica Do livro “O Tiro e o Alvo”  Na Livraria da Travessa -  http://migre.me/105T7  Editora  http://www.caispharoux.com.br/
Poder-se-ia ainda dividir o quadrado com retas quebradas, como são os casos [i], [j], [k] e [l]  Dinâmica Do livro “O Tiro e o Alvo”  Na Livraria da Travessa -  http://migre.me/105T7  Editora  http://www.caispharoux.com.br/
No pensamento lateral vai-se quebrando barreiras autoimpostas e descobrindo alternativas que jamais seriam consideradas no pensamento vertical.  O pensamento lateral é a base da técnica de  “ brain storming ”  para geração de idéias. Dinâmica Do livro “O Tiro e o Alvo”  Na Livraria da Travessa -  http://migre.me/105T7  Editora  http://www.caispharoux.com.br/
Na busca por novas opções podemos encontrar saídas criativas, inovadoras e mais acessíveis… Inovar é preciso, mas é necessário avaliar:  custo x benefício
O que você pensa ao dirigir seu carro de casa pro trabalho?
 
Ou rever antigos processos na busca no melhores resultados…
Desktop first! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
Mobile First! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
Less is more...
Elimine da interface itens que não sejam extremamente necessários...
Design de Epicentro Comece do núcleo da página e construa para fora. http://gettingreal.37signals.com/ch09_Epicenter_Design.php   Design de epicentro foca na verdadeira essência da página — o epicentro — e então constrói para fora. Isso significa que, no começo, você ignora as extremidades: a navegação/menus, rodapé, cores, barra lateral, logotipo, etc. Em vez disso, você começa o epicentro e faz o design das peças de conteúdo mais importantes primeiro.
Um mito…
 
Uma importante recomendação:
Um bom sistema de  e-Commerce é uma interface bem testada… Não faça como a acessibilidade na maioria dos sites brasileiros
 
 
 
 
 
 
Resultado: acessibilidade para inglês ver.
Um bom site, é um site bem testado… http://www.youtube.com/watch?v=xDnNrBPh1KU
Outras recomendações:
[object Object],[object Object]
[object Object]
[object Object]
[object Object],[object Object]
[object Object]
[object Object]
[object Object]
[object Object],[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object],[object Object],[object Object]
[object Object]
iPhone, iPad, and iPod touch: Getting started with VoiceOver for accessibility
 
A ccessible  R ich  I nternet  A pplications ARIA NOW HTML 4 + ARIA HTML5 + ARIA http://www.abilitynet.org.uk/accessibility2/wp-content/uploads/2009/09/HTML5_Accessibility_faulkner.ppt
Horácio Soares [email_address] @horaciosoares   (21) 9925-5404 Obrig ado!

More Related Content

Similar to Acessibilidade e usabilidade para todos no e-commerce

FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design MobileFrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design MobileHorácio Soares
 
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03Horácio Soares
 
Acessibilidade e Design Mobile - TablelessConf 2013 - SP
Acessibilidade e Design Mobile - TablelessConf 2013 - SPAcessibilidade e Design Mobile - TablelessConf 2013 - SP
Acessibilidade e Design Mobile - TablelessConf 2013 - SPHorácio Soares
 
Os Desafios do Design Mobile - Jun/2012
Os Desafios do Design Mobile - Jun/2012Os Desafios do Design Mobile - Jun/2012
Os Desafios do Design Mobile - Jun/2012Horácio Soares
 
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedoresWebinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedoresHorácio Soares
 
WAIU - Workshop AI, Acessibilidade e Usabilidade
WAIU - Workshop AI, Acessibilidade e UsabilidadeWAIU - Workshop AI, Acessibilidade e Usabilidade
WAIU - Workshop AI, Acessibilidade e UsabilidadeHorácio Soares
 
Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...
Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...
Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...Lumis
 
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012Horácio Soares
 
Mobile first - W3C WEB.BR 2012
Mobile first - W3C WEB.BR 2012Mobile first - W3C WEB.BR 2012
Mobile first - W3C WEB.BR 2012Horácio Soares
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Jane Vita
 
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Horácio Soares
 
Webinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerceWebinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerceHorácio Soares
 
EDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na WebEDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na WebHorácio Soares
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)maumoreira
 
Teorias e Prática aplicadas ao mercado digital
Teorias e Prática aplicadas ao mercado digitalTeorias e Prática aplicadas ao mercado digital
Teorias e Prática aplicadas ao mercado digitalRoberto Gaspar
 
WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06Leandro Alves
 
Mobile Marketing Intercon 2009
Mobile Marketing Intercon 2009Mobile Marketing Intercon 2009
Mobile Marketing Intercon 2009Fabiano Coura
 
Design For Simplicity Rio Info 2007
Design For Simplicity Rio Info 2007Design For Simplicity Rio Info 2007
Design For Simplicity Rio Info 2007Horácio Soares
 

Similar to Acessibilidade e usabilidade para todos no e-commerce (20)

FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design MobileFrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
 
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
 
Acessibilidade e Design Mobile - TablelessConf 2013 - SP
Acessibilidade e Design Mobile - TablelessConf 2013 - SPAcessibilidade e Design Mobile - TablelessConf 2013 - SP
Acessibilidade e Design Mobile - TablelessConf 2013 - SP
 
Os Desafios do Design Mobile - Jun/2012
Os Desafios do Design Mobile - Jun/2012Os Desafios do Design Mobile - Jun/2012
Os Desafios do Design Mobile - Jun/2012
 
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedoresWebinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
 
WAIU - Workshop AI, Acessibilidade e Usabilidade
WAIU - Workshop AI, Acessibilidade e UsabilidadeWAIU - Workshop AI, Acessibilidade e Usabilidade
WAIU - Workshop AI, Acessibilidade e Usabilidade
 
Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...
Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...
Desafios da Acessibilidade em Portais Governamentais | Acesso Digital (Horáci...
 
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
 
Mobile first - W3C WEB.BR 2012
Mobile first - W3C WEB.BR 2012Mobile first - W3C WEB.BR 2012
Mobile first - W3C WEB.BR 2012
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.
 
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
 
Webinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerceWebinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerce
 
EDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na WebEDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na Web
 
Prototipação
PrototipaçãoPrototipação
Prototipação
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
 
Publicitário 2.0
Publicitário 2.0Publicitário 2.0
Publicitário 2.0
 
Teorias e Prática aplicadas ao mercado digital
Teorias e Prática aplicadas ao mercado digitalTeorias e Prática aplicadas ao mercado digital
Teorias e Prática aplicadas ao mercado digital
 
WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06
 
Mobile Marketing Intercon 2009
Mobile Marketing Intercon 2009Mobile Marketing Intercon 2009
Mobile Marketing Intercon 2009
 
Design For Simplicity Rio Info 2007
Design For Simplicity Rio Info 2007Design For Simplicity Rio Info 2007
Design For Simplicity Rio Info 2007
 

More from Horácio Soares

UX Mobile - Testando com Usuários
UX Mobile - Testando com UsuáriosUX Mobile - Testando com Usuários
UX Mobile - Testando com UsuáriosHorácio Soares
 
Experiência do Cliente no Varejo Online - E-commerce Brasil
Experiência do Cliente no Varejo Online - E-commerce BrasilExperiência do Cliente no Varejo Online - E-commerce Brasil
Experiência do Cliente no Varejo Online - E-commerce BrasilHorácio Soares
 
UX e testes de usabilidade mobile
UX e testes de usabilidade mobileUX e testes de usabilidade mobile
UX e testes de usabilidade mobileHorácio Soares
 
Mobile UX - MobileConf 2014 - RJ
Mobile UX - MobileConf 2014 - RJMobile UX - MobileConf 2014 - RJ
Mobile UX - MobileConf 2014 - RJHorácio Soares
 
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014Horácio Soares
 
LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014Horácio Soares
 
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013Horácio Soares
 
Ux 7Masters - Estratégia, melhor idade e design de verdade
Ux 7Masters - Estratégia, melhor idade e design de verdadeUx 7Masters - Estratégia, melhor idade e design de verdade
Ux 7Masters - Estratégia, melhor idade e design de verdadeHorácio Soares
 
Interact 2009 Acessibilidade no Cafofo do Luli
Interact 2009 Acessibilidade no Cafofo do LuliInteract 2009 Acessibilidade no Cafofo do Luli
Interact 2009 Acessibilidade no Cafofo do LuliHorácio Soares
 
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e MobilidadeInteract 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e MobilidadeHorácio Soares
 
Monica M Fernandes - Sou+Web 2009 02 13
Monica M Fernandes - Sou+Web 2009 02 13Monica M Fernandes - Sou+Web 2009 02 13
Monica M Fernandes - Sou+Web 2009 02 13Horácio Soares
 
Leda Spelta Sou+Web 2009 02 13
Leda Spelta Sou+Web 2009 02 13Leda Spelta Sou+Web 2009 02 13
Leda Spelta Sou+Web 2009 02 13Horácio Soares
 
Ricardo Nunes - 5o Sou+Web: a união faz a acessibilidade
Ricardo Nunes - 5o Sou+Web: a união faz a acessibilidadeRicardo Nunes - 5o Sou+Web: a união faz a acessibilidade
Ricardo Nunes - 5o Sou+Web: a união faz a acessibilidadeHorácio Soares
 
Portais Corporativos - Mobile, PodCast, WebCast, Design
Portais Corporativos - Mobile, PodCast, WebCast, DesignPortais Corporativos - Mobile, PodCast, WebCast, Design
Portais Corporativos - Mobile, PodCast, WebCast, DesignHorácio Soares
 
Técnicas de Apresentação
Técnicas de ApresentaçãoTécnicas de Apresentação
Técnicas de ApresentaçãoHorácio Soares
 
Como Tornar Seu Site Atraente
Como Tornar Seu Site AtraenteComo Tornar Seu Site Atraente
Como Tornar Seu Site AtraenteHorácio Soares
 

More from Horácio Soares (16)

UX Mobile - Testando com Usuários
UX Mobile - Testando com UsuáriosUX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
 
Experiência do Cliente no Varejo Online - E-commerce Brasil
Experiência do Cliente no Varejo Online - E-commerce BrasilExperiência do Cliente no Varejo Online - E-commerce Brasil
Experiência do Cliente no Varejo Online - E-commerce Brasil
 
UX e testes de usabilidade mobile
UX e testes de usabilidade mobileUX e testes de usabilidade mobile
UX e testes de usabilidade mobile
 
Mobile UX - MobileConf 2014 - RJ
Mobile UX - MobileConf 2014 - RJMobile UX - MobileConf 2014 - RJ
Mobile UX - MobileConf 2014 - RJ
 
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
 
LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014
 
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
 
Ux 7Masters - Estratégia, melhor idade e design de verdade
Ux 7Masters - Estratégia, melhor idade e design de verdadeUx 7Masters - Estratégia, melhor idade e design de verdade
Ux 7Masters - Estratégia, melhor idade e design de verdade
 
Interact 2009 Acessibilidade no Cafofo do Luli
Interact 2009 Acessibilidade no Cafofo do LuliInteract 2009 Acessibilidade no Cafofo do Luli
Interact 2009 Acessibilidade no Cafofo do Luli
 
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e MobilidadeInteract 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
 
Monica M Fernandes - Sou+Web 2009 02 13
Monica M Fernandes - Sou+Web 2009 02 13Monica M Fernandes - Sou+Web 2009 02 13
Monica M Fernandes - Sou+Web 2009 02 13
 
Leda Spelta Sou+Web 2009 02 13
Leda Spelta Sou+Web 2009 02 13Leda Spelta Sou+Web 2009 02 13
Leda Spelta Sou+Web 2009 02 13
 
Ricardo Nunes - 5o Sou+Web: a união faz a acessibilidade
Ricardo Nunes - 5o Sou+Web: a união faz a acessibilidadeRicardo Nunes - 5o Sou+Web: a união faz a acessibilidade
Ricardo Nunes - 5o Sou+Web: a união faz a acessibilidade
 
Portais Corporativos - Mobile, PodCast, WebCast, Design
Portais Corporativos - Mobile, PodCast, WebCast, DesignPortais Corporativos - Mobile, PodCast, WebCast, Design
Portais Corporativos - Mobile, PodCast, WebCast, Design
 
Técnicas de Apresentação
Técnicas de ApresentaçãoTécnicas de Apresentação
Técnicas de Apresentação
 
Como Tornar Seu Site Atraente
Como Tornar Seu Site AtraenteComo Tornar Seu Site Atraente
Como Tornar Seu Site Atraente
 

Acessibilidade e usabilidade para todos no e-commerce

Editor's Notes

  1. design universal: princípios Connell - 1997 Princípio 1: Uso eqüitativo O design é útil e pode ser vendido para pessoas com habilidade diversas. Princípio 2: Flexibilidade no uso O design acomoda uma grande variedade de preferências e habilidades individuais. Ex.: Menu Globo e Esportes Globo Apresentação de Amanda Meincke Melo http://www.todosnos.unicamp.br/acessibilidade/pub/JAI7_SBC2005/
  2. Old age - http://www.un.org/esa/population/publications/worldageing19502050/ Bar chart showing percent of population of world, more developed regions and less developed regions aged 60 or older for 1950, 1975, 2000, 2025, 2050. Percentage increase for all 3 regions. For example, for the world, the percent of people older than 60 goes from about 8% in 1950 to 20% projected fro 2050. Total population of world in 2050 projected to be 9.3 billion.
  3. É garantir que a informação esteja disponível e acessível a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de visitante/usuário, independente de sua capacidade motora, visual, auditiva, mental, computacional, cultural ou social.