Transferir como PDF, PPTX
Carregado porHorácio Soares
Mobile First - Palestra no MobileConf 2013
A empresa de tecnologia anunciou um novo smartphone com câmera aprimorada, maior tela e melhor desempenho. O dispositivo também possui um preço mais acessível em comparação aos modelos anteriores para atrair mais consumidores. O lançamento ocorrerá no próximo mês e a empresa espera que o novo smartphone ajude a aumentar suas vendas e participação no mercado.
Mais conteúdo relacionado
![[Fapan] criando aplicações mobile híbridas com ionic framework](https://cdn.slidesharecdn.com/ss_thumbnails/fapancriandoaplicaesmobilehbridascomionicframework-151127135603-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
Semelhante a Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
- 1. Horácio Soares @horaciosoares 21 9925-5404 Mobile First Outubro de 2012 – São Paulo!
- 2.
- 3. Mobile First Luke Wroblewski Livro: http://www.abookapart.com/products/mobile-first
- 4.
- 5. Qual é contextodo Mobile?
- 6.
- 9.
- 10. Os smartphones são indispensáveis no cotidiano
- 18. “In 2013, MobilePhone will overtake PC’s as the most common Web access device world wide.” — GARTNER
- 21.
- 22. Como o Lulidisse no Digitalks no Rio: “Nesse mundo Mobile, somos todos daltónicos e sofremos do Mal de Parkinson”
- 26. capacidades/ vantagens do mobile
- 27.
- 28.
- 30.
- 31.
- 33.
- 34. Áudio, vídeo eimagem
- 35.
- 36.
- 37. Em qualquer horae local.
- 38. Novas maneiras deinteração e apresentação
- 39. Boa compatibilidade entre navegadoresMobile e HTML5
- 40.
- 42. limitações/restrições do mobile
- 43. “fritando o peixee olhando o gato”.
- 44.
- 45. ‘Desktop is like“diving”…
- 46. …while mobile islike “snorkling.”’ by Hinman at Nokia http://www.slideshare.net/Rachel_Hinman
- 47. O que todos quando mergulham desejam?
- 49.
- 50.
- 51. tela grande energia @lukew
- 52. tela grande energia rede consistente @lukew
- 53. tela grande energia rede consistente teclado @lukew
- 54. tela grande energia rede consistente teclado mouse @lukew
- 55. tela grande energia rede consistente teclado mouse cadeira @lukew
- 56. tela grande energia rede consistente teclado mouse cadeira mesa @lukew
- 57. tela grande energia rede consistente teclado mouse cadeira caneca de café mesa @lukew
- 59.
- 60.
- 61. tela pequena bateria @lukew
- 62. tela pequena bateria rede inconsistente @lukew
- 63. tela pequena bateria rede inconsistente dedo gordo @lukew
- 64. tela pequena bateria rede inconsistente dedo gordo sensores @lukew
- 65. Outras limitações: ● Capacidade de armazenamento e processamento reduzido. ● 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
- 66. perda de 80%do espaço
- 67.
- 68. e isso podeser ótimo para o negócio...
- 69. te força apriorizar... te força a manter o foco…
- 70. Alguém conhece algumsite que gostaria que 80% do seu conteúdo/itens/elementos fosse retirado da interface?
- 71. Flickr desktop 60 opçõesde menu...
- 72.
- 73. Flickr mobile 7 opçõesde menu...
- 74.
- 75.
- 76. Restrições são boaspara o design, pois te forçam a priorizar, a manter o foco
- 77.
- 78.
- 82. Os detalhes do compradornão podem ser visualizados na versão mobile.
- 87.
- 89.
- 93. Ainda antes defocar no Mobile First, como anda a qualidade dos nossos sites nas versões desktop?
- 95.
- 96. Uma breve avaliação deconhecidos sites de notícias sobre TI
- 110. O Mobile First vemtirar os sites Desktop do CTI
- 112. Mobile First Luke Wroblewski Livro: http://www.abookapart.com/products/mobile-first
- 113.
- 114.
- 115. Elimine da interfaceitens que não sejam extremamente necessários...
- 116. Qual desses Desktopsoferecia a melhor experiência?
- 117. Qual desses Desktopsoferecia a melhor experiência?
- 118. E qual dessescontroles?
- 119. Case Extreme Bookingwith Hotels.com
- 120.
- 121.
- 125.
- 126.
- 127.
- 128.
- 130. Mas antes doMobile First precisamos de estratégia...
- 131. Estratégia: ”conspiração para o sucesso”
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142. Experiência do “ Usuário(UX) é a qualidade da experiência que uma pessoa tem ao interagir com algo projetado. uxnet.org ”
- 143. E o queas empresas esperam?
- 144.
- 145.
- 146.
- 147. acertando o tiro certo noalvo certo
- 148.
- 149.
- 150. Causo 1 Precisamos Construir uma mesa. Liv O Tiro e o A
- 151. CAUSO 1 - A propósito, que mesa? Livro: O Tiro e o Alvo
- 152.
- 153.
- 154.
- 155.
- 156. Ou seria umamesa para computador?
- 157.
- 158.
- 159.
- 160.
- 161. Ou seria umamesa de cirurgia?
- 162.
- 163. 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
- 164. Conclusão? Retrabalho, desgaste como cliente e diminuição do lucro.
- 165. Como são nossas experiências?
- 168. • A maioriadas experiências ruins poderiam ser evitadas com a identificação do alvo certo e com avaliações com usuários...
- 169. By Bernard DeLuna
- 170. 50% É a médiado tempo gasto em refação nos projetos de TI. Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 Via Curso AI Faber Ludens: http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
- 171. 15% Dos projetos sãoabandonados depois de uma primeira entrega inadequada. Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 Via Curso AI Faber Ludens: http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
- 172. 83% É a médiada melhoria dos KPI’s em projetos com 10% do orçamento gasto em pesquisa de usabilidade. Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 Via Curso AI Faber Ludens: http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
- 173. Aumento de KPI’s Conversões- Tráfego no site - Cadastros - Contatos de novos clientes - Vendas - Fatia de mercado - Transações - Taxa de sucesso em tarefas - Retenção - Produtividade - Pageviews - Uso do sistema - Visitas key performance indicator (KPI) http://en.wikipedia.org/wiki/Key_performance_indicator
- 174. Diminuição de KPI’s Custosdo projeto - Tempo de desenvolvimento do projeto - Custo de treinamento - Erros no uso do sistema - Tempo do usuário - Chamadas em help desk - Refações – Manutenção. key performance indicator (KPI) http://en.wikipedia.org/wiki/Key_performance_indicator
- 175. desafio 1: identificar objetivose necessidades…
- 176. Investigação Baseada emPerguntas Precisamos automatizar a Contabilidade Preciso do Balancete dia 5 e não dia 15 como atualmente! Por Quê? Por Quê? Por Quê? Necessito da Conta X do Balancete até o dia 5. Preciso do valor da Conta X para calcular até o dia 7 o valor das Reservas. Precisamos informar o valor das Reservas ao Banco Central até o dia 8! Por que se não informarmos as Reservas seremos multados!!
- 177. Uma proposta debriefing Baseado em perguntas: http://clearleft.s3.amazonaws.com/client- worksheet.doc http://bit.ly/a5tRzF
- 178. Desafio 2: Como atender ao mesmo tempo os objetivos e as necessidades? Marte Vênus Objetivos e metas da empresa Necessidades dos usuários
- 179.
- 180. • Precisa denovos clientes/usuários. • Quer que os clientes atuais visitem seu site com maior frequencia. • Quer aumentar a margem de lucro. • Você precisa aumentar sua audiência, seu público. • Quer diferenciar sua marca. • Gostaria de melhorar o retorno sobre o investimento (ROI). • Quer que seus clientes gastem mais a cada compra. • Está à procura de novos canais de distribuição. • Quer aumentar sua fatia do mercado (market share). • ...
- 181.
- 182. • Qualidade. • Simplicidade. • velocidade. • Utilidade. • Usabilidade. • Acessibilidade. • Portabilidade. • Bom custo x benefício. • Resolver seu problema. • ...
- 183. Objetivos Reais e metas necessidades do projeto dos usuários
- 185.
- 186. empresa Objetivos e metasdo projeto Necessidades dos usuários usuários
- 187. um case emequilíbrio…
- 188. Case apresentado porRodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
- 189.
- 190. Case apresentado porRodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
- 191. Case apresentado porRodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
- 192. Observação e identificação de um problema...
- 193. Case apresentado porRodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
- 194. Case apresentado porRodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
- 196. CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivo Otimizado para Mobile App Nativa Quais os caminhos do App design mobile? Híbrida
- 198. Não fazer nada… oscaminhos do design mobile @horaciosoares – Campus Party 2013
- 199.
- 203. CSS HandHeld Design Não fazer Líquido nada… os caminhos do design mobile @horaciosoares – Campus Party 2013
- 204.
- 206. CSS media HANDHELD Como era em 2004, 2005, 2006...?
- 207. Site Acesso Digital 2007
- 208. Portabilidade - designlíquido (resolução 1024x768)
- 209. Portabilidade - designlíquido ( resolução 640x480)
- 210. Portabilidade – CSS(Display PRINT)
- 211. Portabilidade css para dispositivomóvel MOTO Q Acesso Digital: http://acessodigital.net
- 213. CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivo os caminhos do design mobile @horaciosoares – Campus Party 2013
- 214.
- 221. CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivo Otimizado para Mobile os caminhos do design mobile @horaciosoares – Campus Party 2013
- 222. Otimizado para Mobile
- 225. Otimizado para Mobile 2 v. Desktop e Mobile
- 226.
- 227.
- 228.
- 229. Site otimizado paraMobile A maioria oferece apenas duas versões:
- 230. Site otimizado paraMobile Normalmente a versão Mobile é projetada com foco nas atividades fins.
- 231. Otimizado para Mobile 3 v. Desktop, Tablet e Mobile
- 232. Site otimizado paraMobile Algumas empresas têm três versões diferentes:
- 233. Otimizado para Mobile 3 v. 2 v. Desktop, Desktop Tablet e e Mobile Mobile
- 235. CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivo Otimizado para Mobile App Nativa os caminhos do design mobile @horaciosoares – Campus Party 2013
- 236.
- 239. App Nativa Blackbarry Windows Android IOS Phone
- 241. CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivo Otimizado para Mobile App Nativa os caminhos do design App mobile Híbrida @horaciosoares – Campus Party 2013
- 242.
- 244. Via Thais Souza@tsouzamobile!
- 245.
- 247. Mobile First Luke Wroblewski Livro: http://www.abookapart.com/products/mobile-first