FrontinBH - Os dasafios do Design Mobile
Transferir como PPTX, PDF6 gostaram1,133 visualizações
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.
FrontinBH - Os dasafios do Design Mobile
- 1. front<in>bh Belo Horizonte Julho 2012
- 2. Horácio Soares horacio@digitalacesso.com horacio.soares@internativa.com.br facebook.com/internativabrasil (21) 9925-5404 - @horaciosoares
- 8. Estamos falando de pessoas, não de dispositivos...
- 9. “design for mobile people,... ...not for mobile device” Foto: Rosenfield Media
- 11. O que as pessoas esperam em uma experiência MOBILE?
- 12. felicidade
- 13. felicidade
- 15. felicidade
- 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, principalmente em Mobile, vem da busca pelas melhores IDADES
- 19. IDADES?
- 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. ESPN Brasil– abril 2010
- 30. ESPN Brasil– abril 2010
- 32. 10 princípios de UX do Google Princípio 3. O simples é poderoso.
- 34. Em uma interface perfeita 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 de UX 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 de UX 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 de UX do Google Princípio 1 – foque nas pessoas: suas vidas, trabalho, sonhos.
- 61. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
- 62. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
- 63. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
- 64. Observação e identificação de um problema...
- 65. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
- 66. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
- 68. Acessibil Usabil Simplic Interativ Veloc IDADE Encontrabil Atrativ Util Facil
- 71. Acessibil Usabil Simplic Interativ Veloc IDADE Encontrabil Atrativ Util Facil Portabil …
- 73. A melhor idade vem da: Investigação Observação Colaboração Análise Avaliação Validação
- 74. By Erico Fileno
- 75. Como o Luli disse no Digitalks no Rio: “Nesse mundo Mobile, somos todos daltónicos e sofremos do Mal de Parkinson”
- 76. Por isso, em projetos mobile, precisamos estratégia, IDADE (n)(e design de verdade
- 77. E o que as empresas esperam?
- 79. Mulher com notebook em sinal de ok o melhor osso…
- 80. mas como
- 81. com qualidade...
- 82. acertando o tiro certo no alvo certo
- 83. com estratégia
- 84. “uma conspiração para o sucesso”
- 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. De sinuca?
- 90. Ping-pong?
- 92. Carteado?
- 93. Ou seria uma mesa para computador?
- 94. Reunião?
- 95. Escritório?
- 96. Mesa de centro?
- 97. Jantar?
- 98. Ou seria uma mesa de cirurgia?
- 99. De autópsia?
- 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 com o 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. Equilíbrio?
- 109. empresa Objetivos e metas do projeto Necessidades dos usuários usuários
- 110. Um caminho: modelagem participativa
- 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 Visual para 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. Prototipação
- 116. Por que Mobile?
- 118. no Brasil
- 120. 1 Os smartphones são indispensáveis no cotidiano
- 123. 2 Os smartphones transformaram o comportamento do consumidor
- 127. 3 Os smartphones ajudam os usuários a navegar pelo mundo
- 128. 4 Os smartphones mudam o modo como os consumidores fazem compras
- 132. 5 Os smartphones ajudam os anunciantes a entrarem em contato com os clientes
- 135. GIF animado...
- 137. TIC Domicílios 2011 outubro de 2011 – janeiro 2012 http://cetic.br/usuarios/tic/2011-total-brasil/
- 144. No mundo
- 146. O ecosistema do Mobile. http://econsultancy.com/us/reports/mobile-ecosystem
- 147. capacidades/va ntagens do mobile
- 148. GPS
- 149. Acelerômetro
- 150. Giroscópio
- 151. Bluetooth
- 152. Áudio, vídeo e imagem
- 153. NFC
- 154. Sensores multitoque
- 155. Em qualquer hora e local.
- 156. Novas maneiras de interação e apresentação
- 157. Boa compatibilidade entre navegadores Mobile e HTML5
- 160. limitações/restrições do mobile
- 161. 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...
- 163. @lukew
- 164. „Desktop is like “diving” while mobile is “snorkling.”‟ by Rachel Hinman at Nokia
- 165. desktop @lukew
- 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. mobile @lukew
- 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. @lukew
- 175. Pode parecer uma tragédia, mas isso pode ser ótimo para o negócio... @lukew
- 176. te força a priorizar... te força a manter o foco… @lukew
- 177. Alguém conhece algum site 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. @lukew
- 180. Flickr mobile 7 opções de menu... @lukew
- 181. Less is more...
- 182. @lukew
- 183. restrições são boas para o design, pois te forçam a priorizar, a manter o foco
- 187. Elimine da interface itens que não sejam extremamente necessários...
- 188. Paradoxo da escolha
- 190. mundo Mobile...
- 191. Qual contexto? By Thais @tsouzamobile
- 193. É sobre pessoas e não plataformas…
- 196. aiva
- 197. alegria
- 198. frustração
- 199. Otimização de tempo
- 200. Útil para esportes…. By Thais @tsouzamobile
- 202. Para comprar… By Thais @tsouzamobile
- 203. Inovador
- 205. Para novos gênios…. By Thais @tsouzamobile
- 206. Para todos…. By Thais @tsouzamobile
- 208. mitos
- 209. as pessoas não vão se registrar via mobile
- 210. não vão comprar via mobile
- 211. não vão criar conteúdo, fazer reviews, dar opinião, etc.
- 212. sempre seremos surpreendidos pelo que as pessoas fazem na experiência mobile
- 214. se as perguntas fizerem sentido e a interface tiver um bom design, as pessoas vão responder...
- 216. - INPUTS (entrada de dados)
- 217. 1- LABELS no topo
- 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ção de dados
- 230. Confirmação de senha?
- 231. Confirmação de e-mail?
- 232. 3 – Opção de senha sem mascara.
- 234. 4 – Cadastro obrigatório
- 235. Será que é mesmo necessário me cadastrar em um site de e-commerce para fazer uma compra?
- 236. - Navegação
- 237. Content First
- 250. - Botões de voltar...
- 251. By @lukew
- 253. - Espaços em branco...
- 254. - Web Standards
- 255. Toque...
- 256. Se o dispositivo é pequeno, por que não tornar toda área interativa?
- 257. Toque seguro...
- 258. Recomendação Apple Deixe espaço suficiente para toque acidentais By Thais @tsouzamobile
- 259. Mas…a Microsoft pede 34px e a Nokia 28px? By Thais @tsouzamobile
- 260. Mas…o dedo de um 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
- 274. How To Conduct A Usability Test On A Mobile Device http://www.measuringusability.com/blo g/mobile-usability-test.php
- 277. -Como testar aqui?
- 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 Design Mobile facebook.com/internativabrasil (21) 9925-5404 - @horaciosoares