Baixado 33 vezes
Carregado porHorácio Soares
FrontinBH - Os dasafios do Design Mobile
O documento discute princípios e boas práticas de design para experiências mobile, como acessibilidade, usabilidade, simplicidade, interatividade e velocidade. Também aborda desafios como equilibrar objetivos da empresa com necessidades dos usuários e como testar interfaces mobile. Recomenda seguir abordagens como "mobile first" e focar na experiência do usuário.
![[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?](https://cdn.slidesharecdn.com/ss_thumbnails/gdgspandroidmeetup67-atech-realmenteprecisodeuxnoprojetomobile-190318131917-thumbnail.jpg?width=640&height=640&fit=bounds)
FrontinBH - Os dasafios do Design Mobile
- 1. front<in>bh Belo Horizonte Julho 2012
- 2.
- 4.
- 5.
- 6.
- 7.
- 8. Estamos falando depessoas, não de dispositivos...
- 9. “design for mobilepeople,... ...not for mobile device” Foto: Rosenfield Media
- 11. O que aspessoas esperam em uma experiência MOBILE?
- 12.
- 13.
- 14.
- 15.
- 16. Entretanto, a experiência pertence as pessoas. O designer/desenvolvedor não projeta a experiência… Projeta para a experiência do usuário.
- 17. Experiência do “ Usuário(UX) é a qualidade da experiência que uma pessoa tem ao interagir com algo projetado. uxnet.org ”
- 18. Um caminho, principalmenteem Mobile, vem da busca pelas melhores IDADES
- 19.
- 20. Acessibil IDADE
- 24. Acessibil Usabil IDADE
- 27. Comercial Mercado Livre “Eu compro o que quiser, 2011 senão quiser, não compro” Comercial do Mercado Livre 2011
- 28. Acessibil Usabil Simplic IDADE
- 29.
- 30.
- 32. 10 princípios deUX do Google Princípio 3. O simples é poderoso.
- 34. Em uma interfaceperfeita para as pessoas, elas nunca deveriam errar, principalmente no mundo mobile…
- 35. Acessibil Usabil Simplic Interativ IDADE
- 39. Acessibil Usabil Simplic Interativ Veloc IDADE
- 49. 10 princípios deUX do Google Princípio 2 - cada milisegundo importa. Melhor definição de milisegundo?
- 50. Um caminho: seguir as dicas de otimização indicadas na apresentação do Sérgio, mas cuidado com acessibilidade… sergiolopes.org
- 52. Acessibil Usabil Simplic Interativ Veloc IDADE Encontrabil
- 55. Acessibil Usabil Simplic Interativ Veloc IDADE Encontrabil Atrativ
- 58. 10 princípios deUX do Google Princípio 8 – agrade aos olhos sem distrair a mente
- 59. Acessibil Usabil Simplic Interativ Veloc IDADE Encontrabil Atrativ Util
- 60. 10 princípios deUX do Google Princípio 1 – foque nas pessoas: suas vidas, trabalho, sonhos.
- 61. Case apresentado porRodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
- 62. Case apresentado porRodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
- 63. Case apresentado porRodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
- 64. Observação e identificação de um problema...
- 65. Case apresentado porRodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
- 66. Case apresentado porRodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
- 68. Acessibil Usabil Simplic Interativ Veloc IDADE Encontrabil Atrativ Util Facil
- 69.
- 71. Acessibil Usabil Simplic Interativ Veloc IDADE Encontrabil Atrativ Util Facil Portabil …
- 73. A melhor idadevem da: Investigação Observação Colaboração Análise Avaliação Validação
- 74.
- 75. Como o Lulidisse no Digitalks no Rio: “Nesse mundo Mobile, somos todos daltónicos e sofremos do Mal de Parkinson”
- 76. Por isso, emprojetos mobile, precisamos estratégia, IDADE (n)(e design de verdade
- 77. E o queas empresas esperam?
- 79. Mulher com notebookem sinal de ok o melhor osso…
- 80.
- 81.
- 82. acertando o tiro certo noalvo certo
- 83.
- 84. “uma conspiração para o sucesso”
- 85.
- 86.
- 87. Causo 1 Precisamos Construir uma mesa. Liv O Tiro e o A
- 88. CAUSO 1 - A propósito, que mesa? Livro: O Tiro e o Alvo
- 89.
- 90.
- 91.
- 92.
- 93. Ou seria umamesa para computador?
- 94.
- 95.
- 96.
- 97.
- 98. Ou seria umamesa de cirurgia?
- 99.
- 100. 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
- 101. CAUSO 1 (continuação) Para uma mesa pode parecer exagero, mas não para sistemas e sites... Livro: O Tiro e o Alvo
- 102. Conclusão? Retrabalho, desgaste como cliente e diminuição do lucro.
- 104. Desafio: Como atender ao mesmo tempo os objetivos e as necessidades? Marte Vênus Objetivos e metas da empresa Necessidades dos usuários
- 105. Objetivos Reais e metas necessidades do projeto dos usuários
- 107.
- 108.
- 109. empresa Objetivos e metasdo projeto Necessidades dos usuários usuários
- 110. Um caminho: modelagemparticipativa
- 111. Sitemap Antes 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.
- 112. Um Vocabulário Visualpara AI e Design de Interação http://iainstitute.org/pt/translations/000332.html http://migre.me/wI0X
- 113. Protótipos Depois, crie “coletivamente" protótipos em papel, em computador...
- 114.
- 116.
- 117.
- 118.
- 119.
- 120. 1 Os smartphones são indispensáveis no cotidiano
- 123. 2 Os smartphones transformaram o comportamento do consumidor
- 127. 3 Os smartphones ajudam osusuários a navegar pelo mundo
- 128. 4 Os smartphones mudamo modo como os consumidores fazem compras
- 132. 5 Os smartphones ajudam os anunciantes a entrarem em contato com os clientes
- 134.
- 135.
- 136.
- 137. TIC Domicílios 2011 outubrode 2011 – janeiro 2012 http://cetic.br/usuarios/tic/2011-total-brasil/
- 141.
- 142.
- 143.
- 144.
- 145.
- 146. O ecosistema doMobile. http://econsultancy.com/us/reports/mobile-ecosystem
- 147. capacidades/va ntagens do mobile
- 148.
- 149.
- 150.
- 151.
- 152. Áudio, vídeo eimagem
- 153.
- 154.
- 155. Em qualquer horae local.
- 156. Novas maneiras deinteração e apresentação
- 157. Boa compatibilidade entre navegadoresMobile e HTML5
- 158.
- 160. limitações/restrições do mobile
- 161. Muitas vezes, aointeragir com mobile, as pessoas estão em modo: “fritando o peixe e olhando o gato” e com apenas um dos dedos...
- 163.
- 164. „Desktop is like“diving” while mobile is “snorkling.”‟ by Rachel Hinman at Nokia
- 165.
- 166. tela grande energia rede consistente teclado mouse cadeira mesa @lukew
- 167. tela grande energia rede consistente teclado mouse cadeira caneca de café mesa @lukew
- 169.
- 170. tela pequena bateria rede inconsistente dedo gordo sensores @lukew
- 172. 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
- 173. perda de 80%do espaço
- 174.
- 175. Pode parecer umatragédia, mas isso pode ser ótimo para o negócio... @lukew
- 176. te força apriorizar... te força a manter o foco… @lukew
- 177. Alguém conhece algumsite que gostaria que 80% do seu conteúdo/itens/elementos fosse retirado da interface? @lukew
- 178. Flickr desktop 60 opções de menu... @lukew
- 179.
- 180. Flickr mobile 7 opções de menu... @lukew
- 181.
- 182.
- 183. restrições são boaspara o design, pois te forçam a priorizar, a manter o foco
- 184.
- 185.
- 186.
- 187. Elimine da interfaceitens que não sejam extremamente necessários...
- 188.
- 190.
- 191. Qual contexto? By Thais@tsouzamobile
- 192.
- 193. É sobre pessoase não plataformas…
- 194.
- 195.
- 196.
- 197.
- 198.
- 199.
- 200. Útil para esportes…. ByThais @tsouzamobile
- 201.
- 202. Para comprar… By Thais@tsouzamobile
- 203.
- 204.
- 205. Para novos gênios…. ByThais @tsouzamobile
- 206. Para todos…. By Thais@tsouzamobile
- 208.
- 209. as pessoas nãovão se registrar via mobile
- 210. não vão comprarvia mobile
- 211. não vão criarconteúdo, fazer reviews, dar opinião, etc.
- 212. sempre seremos surpreendidos pelo que as pessoas fazem na experiência mobile
- 213.
- 214. se as perguntasfizerem sentido e a interface tiver um bom design, as pessoas vão responder...
- 215.
- 216. - INPUTS (entrada dedados)
- 217. 1- LABELS notopo
- 226. 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
- 229. 2 – Confirmaçãode dados
- 230. Confirmação desenha?
- 231. Confirmação dee-mail?
- 232. 3 – Opçãode senha sem mascara.
- 234. 4 – Cadastroobrigatório
- 235. Será que émesmo necessário me cadastrar em um site de e-commerce para fazer uma compra?
- 236.
- 237.
- 250. - Botões devoltar...
- 251.
- 253. - Espaços embranco...
- 254.
- 255.
- 256. Se o dispositivoé pequeno, por que não tornar toda área interativa?
- 257.
- 258. Recomendação Apple Deixe espaço suficientepara toque acidentais By Thais @tsouzamobile
- 259. Mas…a Microsoft pede34px e a Nokia 28px? By Thais @tsouzamobile
- 260. Mas…o dedo deum adulto vai de 45 a 57px E o dedão pode chegar até 72px By Thais @tsouzamobile
- 261. Quantos dedos vocêusa em um smartphone? By Thais @tsouzamobile
- 263.
- 273.
- 274. How To Conduct AUsability Test On A Mobile Device http://www.measuringusability.com/blo g/mobile-usability-test.php
- 277.
- 278.
- 279. 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
- 280. Obrigado! Horácio Soares Workshop DesignMobile facebook.com/internativabrasil (21) 9925-5404 - @horaciosoares