front<in>bh   Belo Horizonte       Julho 2012
Horácio Soareshoracio@digitalacesso.comhoracio.soares@internativa.com.brfacebook.com/internativabrasil(21) 9925-5404 - @ho...
http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
Estamos falando de pessoas,    não de dispositivos...
“design for mobile people,......not for mobile device”        Foto: Rosenfield Media
O que as pessoas esperam em umaexperiência MOBILE?
felicidade
felicidade
experiência perfeita
felicidade
Entretanto, a experiência  pertence as pessoas.O designer/desenvolvedornão projeta a experiência…      Projeta para a  exp...
Experiência do“ Usuário (UX) é a    qualidade daexperiência que uma   pessoa tem ao interagir com algo     projetado.     ...
Um caminho, principalmente em Mobile,vem da busca pelas melhores          IDADES
IDADES?
Acessibil            IDADE
Acessibil Usabil            IDADE
Comercial       Mercado Livre“Eu compro o que quiser, 2011senão quiser,não compro”Comercial do Mercado    Livre 2011
Acessibil  UsabilSimplic            IDADE
ESPN Brasil– abril 2010
ESPN Brasil– abril 2010
10 princípios de UX do GooglePrincípio 3. O simples é poderoso.
Em uma interface perfeita paraas pessoas, elas nunca deveriam errar, principalmente no mundo             mobile…
Acessibil   Usabil  SimplicInterativ             IDADE
Acessibil   Usabil  Simplic Interativ  Veloc      IDADE
10 princípios de UX do GooglePrincípio 2 - cada milisegundo importa.  Melhor definição de milisegundo?
Um caminho:          seguir  as dicas de otimizaçãoindicadas na apresentação  do Sérgio, mas cuidado   com acessibilidade…...
Acessibil       Usabil      Simplic     Interativ        Veloc    IDADEEncontrabil
Acessibil     Usabil    Simplic   Interativ      Veloc    IDADEEncontrabil   Atrativ
10 princípios de UX do GooglePrincípio 8 – agrade aos olhos sem          distrair a mente
Acessibil     Usabil    Simplic   Interativ      Veloc    IDADEEncontrabil     Atrativ       Util
10 princípios de UX do GooglePrincípio 1 – foque nas pessoas: suas       vidas, trabalho, sonhos.
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Observação e identificação    de um problema...
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Acessibil     Usabil    Simplic   Interativ      Veloc    IDADEEncontrabil     Atrativ        Util     Facil
Acessibil  UsabilSimplic
Acessibil     Usabil    Simplic   Interativ      Veloc    IDADEEncontrabil     Atrativ        Util       Facil Portabil   ...
A melhor idade vem da:     Investigação     Observação     Colaboração        Análise       Avaliação       Validação
By Erico Fileno
Como o Luli disse no Digitalks no Rio:“Nesse mundo Mobile, somos todos daltónicos e sofremos    do Mal de Parkinson”
Por isso, em projetos mobile,   precisamos estratégia,IDADE  (n)(e design de verdade
E o que as empresas esperam?
Mulher com notebook em sinal de ok                                     o melhor osso…
mas como
com qualidade...
acertandoo tiro certono alvo certo
com estratégia
“uma conspiração  para o sucesso”
para onde vamos?http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
onde devemos mirar?
Causo 1PrecisamosConstruiruma mesa.                      Liv             O Tiro e o A
CAUSO 1       - A propósito, que mesa?Livro: O Tiro e o Alvo
De sinuca?
Ping-pong?
Futebol de botão?
Carteado?
Ou seria uma mesa para computador?
Reunião?
Escritório?
Mesa de centro?
Jantar?
Ou seria uma mesa de cirurgia?
De autópsia?
CAUSO 1 (continuação)          - Isso não interessa,          meu filho. Depois a          gente vê. Vamos          começa...
CAUSO 1 (continuação)            Para uma mesa pode parecer            exagero, mas não para            sistemas e sites.....
Conclusão?Retrabalho, desgaste com ocliente e diminuição do lucro.
Desafio:           Como atender ao mesmo tempo           os objetivos e as necessidades?          Marte                   ...
Objetivos            Reaise metas      necessidadesdo projeto    dos usuários
Equilíbrio?
a buscado equilíbrio
empresa Objetivose metas do  projeto          Necessidades                       dos                     usuários         ...
Um caminho: modelagem participativa
SitemapAntes de prototipar, crie coletivamente (designers, arquitetos de informação,desenvolvedores front/back, analista d...
Um Vocabulário Visual para AI e Design de Interaçãohttp://iainstitute.org/pt/translations/000332.htmlhttp://migre.me/wI0X
Protótipos        Depois, crie“coletivamente" protótiposem papel, em computador...
Prototipação
Por que Mobile?
crescimento = oportunidade
no Brasil
http://services.google.com/fh/files/blogs/our_mobile_planet_brazil_pt_BR.pdf
1Os smartphones são  indispensáveis no          cotidiano
2Os smartphonestransformaram ocomportamento do consumidor
3Os smartphones ajudamos usuários a navegarpelo mundo
4Os smartphones mudam o modo    como os consumidores       fazem compras
5Os smartphones   ajudam os anunciantes a  entrarem emcontato com os    clientes
Estatísticas no Brasil
GIFanimado...
Maio de 2012http://www.mobiletime.com.br/29/05/2012/brasil-tem-52-milhoes-de-acessos-de-banda-larga-movel-diz-estudo/28071...
TIC Domicílios 2011outubro de 2011 – janeiro 2012         http://cetic.br/usuarios/tic/2011-total-brasil/
http://www1.folha.uol.com.br/tec/1098360-uso-de-internet-no-celular-cresce-340-em-um-ano.shtml
Maio 2012http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html
Maio 2012http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html
No mundo
Vários GIFsanimados...
O ecosistema do Mobile.http://econsultancy.com/us/reports/mobile-ecosystem
capacidades/va   ntagens  do mobile
GPS
Acelerômetro
Giroscópio
Bluetooth
Áudio, vídeo e imagem
NFC
Sensores multitoque
Em qualquer hora e local.
Novas maneiras de interação e apresentação
Boa compatibilidade entrenavegadores Mobile e HTML5
Atualizações frequentes...
limitações/restrições      do mobile
Muitas vezes, ao interagir com mobile, as pessoas estão em   modo: “fritando o peixe e    olhando o gato” e com   apenas u...
@lukew
„Desktop is like “diving”     while mobile is“snorkling.”‟ 
by Rachel         Hinman        at Nokia
desktop@lukew
tela grande         energia         rede consistente         teclado         mouse         cadeira         mesa@lukew
tela grande                     energia                     rede consistente                     teclado                  ...
mobile@lukew
tela pequena         bateria         rede inconsistente         dedo gordo         sensores@lukew
Outras limitações:●   Capacidade de processamento reduzida.●   Uma aplicação em HTML5 para mobile    pode ser até 100 veze...
perda de 80% do espaço
@lukew
Pode parecer uma tragédia, mas isso pode                ser ótimo para o negócio...@lukew
te força a priorizar...         te força a manter o foco…@lukew
Alguém conhece algum site         que gostaria que 80% do seu          conteúdo/itens/elementos         fosse retirado da ...
Flickr desktop         60 opções de menu...@lukew
@lukew
Flickr mobile         7 opções de menu...@lukew
Less is more...
@lukew
restrições são boas para o design, pois te forçam a priorizar, a manter o foco
Desktop first!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
Mobile FirstLuke Wroblewski
Mobile First!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
Elimine da interface itens que não       sejam extremamente          necessários...
Paradoxo da escolha
mundo Mobile...
Qual contexto?By Thais @tsouzamobile
By Thais @tsouzamobile
É sobre pessoas e não plataformas…
PaixãoBy Thais @tsouzamobile
vaidadeBy Thais @tsouzamobile
aiva
alegria
frustração
Otimização de tempo
Útil para esportes….By Thais @tsouzamobile
Funcionais…By Thais @tsouzamobile
Para comprar…By Thais @tsouzamobile
Inovador
Conhecimento….By Thais @tsouzamobile
Para novos gênios….By Thais @tsouzamobile
Para todos….By Thais @tsouzamobile
mitos
as pessoas não vãose registrar via mobile
não vão comprar via mobile
não vão criar conteúdo, fazer  reviews, dar opinião, etc.
sempre seremos surpreendidos pelo que as pessoas fazem na      experiência mobile
http://midiaria.wordpress.com/2012/02/21/10pesquisa-sms-mavam-acision-brasil/
se as perguntas fizerem sentido e a interface tiver um bom design, as    pessoas vão responder...
Algumas recomendações
- INPUTS(entrada de dados)
1- LABELS no topo
LABEL no topo• Miniminiza o tempo para  entrada de dados• Mais fácil de codificar:  sem floats e tabelas• Acessibilidade: ...
2 – Confirmação de dados
Confirmação  de senha?
Confirmação  de e-mail?
3 – Opção de senha sem      mascara.
4 – Cadastro obrigatório
Será que é mesmo necessário me cadastrar em um site dee-commerce para fazer uma         compra?
- Navegação
Content First
- Botões de voltar...
By @lukew
- Espaços em branco...
- Web Standards
Toque...
Se o dispositivo épequeno, por que não  tornar toda área     interativa?
Toque seguro...
Recomendação AppleDeixe espaçosuficiente paratoqueacidentais                   By Thais @tsouzamobile
Mas…a Microsoft pede 34px e a Nokia 28px?By Thais @tsouzamobile
Mas…o dedo de um adulto vai de 45 a 57px                  E o dedão pode chegar até 72pxBy Thais @tsouzamobile
Quantos dedos você usa                         em um smartphone?By Thais @tsouzamobile
-Performance-http://gtmetrix.com
-Avaliação e validação
How To ConductA Usability TestOn A Mobile Devicehttp://www.measuringusability.com/blog/mobile-usability-test.php
-Como testar aqui?
Foto: Rosenfield Media
Momento debate          Qual caminho meu website deve seguir?      Separar URL‟s para mobile e desktop com conteúdos difer...
Obrigado!Horácio SoaresWorkshop Design Mobilefacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
FrontinBH - Os dasafios do Design Mobile
Upcoming SlideShare
Loading in …5
×

FrontinBH - Os dasafios do Design Mobile

1,615 views

Published on

Apresentação realizada no FrontinBH dia 14 de julho de 2012.

Published in: Design

FrontinBH - Os dasafios do Design Mobile

  1. 1. front<in>bh Belo Horizonte Julho 2012
  2. 2. Horácio Soareshoracio@digitalacesso.comhoracio.soares@internativa.com.brfacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares
  3. 3. http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
  4. 4. http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
  5. 5. http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
  6. 6. http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
  7. 7. Estamos falando de pessoas, não de dispositivos...
  8. 8. “design for mobile people,......not for mobile device” Foto: Rosenfield Media
  9. 9. O que as pessoas esperam em umaexperiência MOBILE?
  10. 10. felicidade
  11. 11. felicidade
  12. 12. experiência perfeita
  13. 13. felicidade
  14. 14. Entretanto, a experiência pertence as pessoas.O designer/desenvolvedornão projeta a experiência… Projeta para a experiência do usuário.
  15. 15. Experiência do“ Usuário (UX) é a qualidade daexperiência que uma pessoa tem ao interagir com algo projetado. uxnet.org ”
  16. 16. Um caminho, principalmente em Mobile,vem da busca pelas melhores IDADES
  17. 17. IDADES?
  18. 18. Acessibil IDADE
  19. 19. Acessibil Usabil IDADE
  20. 20. Comercial Mercado Livre“Eu compro o que quiser, 2011senão quiser,não compro”Comercial do Mercado Livre 2011
  21. 21. Acessibil UsabilSimplic IDADE
  22. 22. ESPN Brasil– abril 2010
  23. 23. ESPN Brasil– abril 2010
  24. 24. 10 princípios de UX do GooglePrincípio 3. O simples é poderoso.
  25. 25. Em uma interface perfeita paraas pessoas, elas nunca deveriam errar, principalmente no mundo mobile…
  26. 26. Acessibil Usabil SimplicInterativ IDADE
  27. 27. Acessibil Usabil Simplic Interativ Veloc IDADE
  28. 28. 10 princípios de UX do GooglePrincípio 2 - cada milisegundo importa. Melhor definição de milisegundo?
  29. 29. Um caminho: seguir as dicas de otimizaçãoindicadas na apresentação do Sérgio, mas cuidado com acessibilidade… sergiolopes.org
  30. 30. Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil
  31. 31. Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil Atrativ
  32. 32. 10 princípios de UX do GooglePrincípio 8 – agrade aos olhos sem distrair a mente
  33. 33. Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil Atrativ Util
  34. 34. 10 princípios de UX do GooglePrincípio 1 – foque nas pessoas: suas vidas, trabalho, sonhos.
  35. 35. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  36. 36. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  37. 37. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  38. 38. Observação e identificação de um problema...
  39. 39. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  40. 40. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  41. 41. Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil Atrativ Util Facil
  42. 42. Acessibil UsabilSimplic
  43. 43. Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil Atrativ Util Facil Portabil …
  44. 44. A melhor idade vem da: Investigação Observação Colaboração Análise Avaliação Validação
  45. 45. By Erico Fileno
  46. 46. Como o Luli disse no Digitalks no Rio:“Nesse mundo Mobile, somos todos daltónicos e sofremos do Mal de Parkinson”
  47. 47. Por isso, em projetos mobile, precisamos estratégia,IDADE (n)(e design de verdade
  48. 48. E o que as empresas esperam?
  49. 49. Mulher com notebook em sinal de ok o melhor osso…
  50. 50. mas como
  51. 51. com qualidade...
  52. 52. acertandoo tiro certono alvo certo
  53. 53. com estratégia
  54. 54. “uma conspiração para o sucesso”
  55. 55. para onde vamos?http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
  56. 56. onde devemos mirar?
  57. 57. Causo 1PrecisamosConstruiruma mesa. Liv O Tiro e o A
  58. 58. CAUSO 1 - A propósito, que mesa?Livro: O Tiro e o Alvo
  59. 59. De sinuca?
  60. 60. Ping-pong?
  61. 61. Futebol de botão?
  62. 62. Carteado?
  63. 63. Ou seria uma mesa para computador?
  64. 64. Reunião?
  65. 65. Escritório?
  66. 66. Mesa de centro?
  67. 67. Jantar?
  68. 68. Ou seria uma mesa de cirurgia?
  69. 69. De autópsia?
  70. 70. CAUSO 1 (continuação) - Isso não interessa, meu filho. Depois a gente vê. Vamos começar logo o trabalho. O prazo é Livro: rework 37 Signals curto, então, mãos à obra!Livro: O Tiro e o Alvo
  71. 71. CAUSO 1 (continuação) Para uma mesa pode parecer exagero, mas não para sistemas e sites...Livro: O Tiro e o Alvo
  72. 72. Conclusão?Retrabalho, desgaste com ocliente e diminuição do lucro.
  73. 73. Desafio: Como atender ao mesmo tempo os objetivos e as necessidades? Marte VênusObjetivos e metas da empresa Necessidades dos usuários
  74. 74. Objetivos Reaise metas necessidadesdo projeto dos usuários
  75. 75. Equilíbrio?
  76. 76. a buscado equilíbrio
  77. 77. empresa Objetivose metas do projeto Necessidades dos usuários usuários
  78. 78. Um caminho: modelagem participativa
  79. 79. SitemapAntes de prototipar, crie coletivamente (designers, arquitetos de informação,desenvolvedores front/back, analista de negócios, gerentes, etc.) fluxos com os principais passos dos clientes em seu site/sistema.
  80. 80. Um Vocabulário Visual para AI e Design de Interaçãohttp://iainstitute.org/pt/translations/000332.htmlhttp://migre.me/wI0X
  81. 81. Protótipos Depois, crie“coletivamente" protótiposem papel, em computador...
  82. 82. Prototipação
  83. 83. Por que Mobile?
  84. 84. crescimento = oportunidade
  85. 85. no Brasil
  86. 86. http://services.google.com/fh/files/blogs/our_mobile_planet_brazil_pt_BR.pdf
  87. 87. 1Os smartphones são indispensáveis no cotidiano
  88. 88. 2Os smartphonestransformaram ocomportamento do consumidor
  89. 89. 3Os smartphones ajudamos usuários a navegarpelo mundo
  90. 90. 4Os smartphones mudam o modo como os consumidores fazem compras
  91. 91. 5Os smartphones ajudam os anunciantes a entrarem emcontato com os clientes
  92. 92. Estatísticas no Brasil
  93. 93. GIFanimado...
  94. 94. Maio de 2012http://www.mobiletime.com.br/29/05/2012/brasil-tem-52-milhoes-de-acessos-de-banda-larga-movel-diz-estudo/280718/news.aspx
  95. 95. TIC Domicílios 2011outubro de 2011 – janeiro 2012 http://cetic.br/usuarios/tic/2011-total-brasil/
  96. 96. http://www1.folha.uol.com.br/tec/1098360-uso-de-internet-no-celular-cresce-340-em-um-ano.shtml
  97. 97. Maio 2012http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html
  98. 98. Maio 2012http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html
  99. 99. No mundo
  100. 100. Vários GIFsanimados...
  101. 101. O ecosistema do Mobile.http://econsultancy.com/us/reports/mobile-ecosystem
  102. 102. capacidades/va ntagens do mobile
  103. 103. GPS
  104. 104. Acelerômetro
  105. 105. Giroscópio
  106. 106. Bluetooth
  107. 107. Áudio, vídeo e imagem
  108. 108. NFC
  109. 109. Sensores multitoque
  110. 110. Em qualquer hora e local.
  111. 111. Novas maneiras de interação e apresentação
  112. 112. Boa compatibilidade entrenavegadores Mobile e HTML5
  113. 113. Atualizações frequentes...
  114. 114. limitações/restrições do mobile
  115. 115. Muitas vezes, ao interagir com mobile, as pessoas estão em modo: “fritando o peixe e olhando o gato” e com apenas um dos dedos...
  116. 116. @lukew
  117. 117. „Desktop is like “diving” while mobile is“snorkling.”‟ 
by Rachel Hinman at Nokia
  118. 118. desktop@lukew
  119. 119. tela grande energia rede consistente teclado mouse cadeira mesa@lukew
  120. 120. tela grande energia rede consistente teclado mouse cadeira caneca de café mesa@lukew
  121. 121. mobile@lukew
  122. 122. tela pequena bateria rede inconsistente dedo gordo sensores@lukew
  123. 123. Outras limitações:● Capacidade de processamento reduzida.● Uma aplicação em HTML5 para mobile pode ser até 100 vezes mais lenta que em desktop. http://spaceport.io/spaceport_perfmarks_2_report_2012_5.pdf
  124. 124. perda de 80% do espaço
  125. 125. @lukew
  126. 126. Pode parecer uma tragédia, mas isso pode ser ótimo para o negócio...@lukew
  127. 127. te força a priorizar... te força a manter o foco…@lukew
  128. 128. Alguém conhece algum site que gostaria que 80% do seu conteúdo/itens/elementos fosse retirado da interface?@lukew
  129. 129. Flickr desktop 60 opções de menu...@lukew
  130. 130. @lukew
  131. 131. Flickr mobile 7 opções de menu...@lukew
  132. 132. Less is more...
  133. 133. @lukew
  134. 134. restrições são boas para o design, pois te forçam a priorizar, a manter o foco
  135. 135. Desktop first!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  136. 136. Mobile FirstLuke Wroblewski
  137. 137. Mobile First!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  138. 138. Elimine da interface itens que não sejam extremamente necessários...
  139. 139. Paradoxo da escolha
  140. 140. mundo Mobile...
  141. 141. Qual contexto?By Thais @tsouzamobile
  142. 142. By Thais @tsouzamobile
  143. 143. É sobre pessoas e não plataformas…
  144. 144. PaixãoBy Thais @tsouzamobile
  145. 145. vaidadeBy Thais @tsouzamobile
  146. 146. aiva
  147. 147. alegria
  148. 148. frustração
  149. 149. Otimização de tempo
  150. 150. Útil para esportes….By Thais @tsouzamobile
  151. 151. Funcionais…By Thais @tsouzamobile
  152. 152. Para comprar…By Thais @tsouzamobile
  153. 153. Inovador
  154. 154. Conhecimento….By Thais @tsouzamobile
  155. 155. Para novos gênios….By Thais @tsouzamobile
  156. 156. Para todos….By Thais @tsouzamobile
  157. 157. mitos
  158. 158. as pessoas não vãose registrar via mobile
  159. 159. não vão comprar via mobile
  160. 160. não vão criar conteúdo, fazer reviews, dar opinião, etc.
  161. 161. sempre seremos surpreendidos pelo que as pessoas fazem na experiência mobile
  162. 162. http://midiaria.wordpress.com/2012/02/21/10pesquisa-sms-mavam-acision-brasil/
  163. 163. se as perguntas fizerem sentido e a interface tiver um bom design, as pessoas vão responder...
  164. 164. Algumas recomendações
  165. 165. - INPUTS(entrada de dados)
  166. 166. 1- LABELS no topo
  167. 167. LABEL no topo• Miniminiza o tempo para entrada de dados• Mais fácil de codificar: sem floats e tabelas• Acessibilidade: label, campos na ordem certa• Melhor formato para mobile• Suporte diferentes resoluções• Requer mais espaço vertical
  168. 168. 2 – Confirmação de dados
  169. 169. Confirmação de senha?
  170. 170. Confirmação de e-mail?
  171. 171. 3 – Opção de senha sem mascara.
  172. 172. 4 – Cadastro obrigatório
  173. 173. Será que é mesmo necessário me cadastrar em um site dee-commerce para fazer uma compra?
  174. 174. - Navegação
  175. 175. Content First
  176. 176. - Botões de voltar...
  177. 177. By @lukew
  178. 178. - Espaços em branco...
  179. 179. - Web Standards
  180. 180. Toque...
  181. 181. Se o dispositivo épequeno, por que não tornar toda área interativa?
  182. 182. Toque seguro...
  183. 183. Recomendação AppleDeixe espaçosuficiente paratoqueacidentais By Thais @tsouzamobile
  184. 184. Mas…a Microsoft pede 34px e a Nokia 28px?By Thais @tsouzamobile
  185. 185. Mas…o dedo de um adulto vai de 45 a 57px E o dedão pode chegar até 72pxBy Thais @tsouzamobile
  186. 186. Quantos dedos você usa em um smartphone?By Thais @tsouzamobile
  187. 187. -Performance-http://gtmetrix.com
  188. 188. -Avaliação e validação
  189. 189. How To ConductA Usability TestOn A Mobile Devicehttp://www.measuringusability.com/blog/mobile-usability-test.php
  190. 190. -Como testar aqui?
  191. 191. Foto: Rosenfield Media
  192. 192. Momento debate Qual caminho meu website deve seguir? Separar URL‟s para mobile e desktop com conteúdos diferentes? Separar URL‟s para mobile e desktop copiando o conteúdo? Uma única URL que se adapta a todas as telas?By Thais @tsouzamobile
  193. 193. Obrigado!Horácio SoaresWorkshop Design Mobilefacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares

×