UX Mobile por Richard Renato

Apresentação feita por Richard Renato De Jesus (@richardrx).

Apresentada no 3º Encontro do CocoaHeads Campinas
http://www.meetup.com/CocoaHeadsCPS/events/218787276/

Transcript

1. I
2. UX ≥ UI
3. PRODUTO
4. UI
5. UX
6. ref: Usability Professionals’ Association - Gilb, 1988 1:100 É a razão de consertar um problema no wireframe ou consertá-la depois de lançado.
7. 68% dos usuários deixa um site por má experiência de uso.
8. E as vezes pensar de ponta cabeça.
9. VS DESENHANDO O PRODUTO DESENHANDO A EXPERIÊNCIA
10. SUPERFÍCIE DESIGN VISUAL ESQUELETO WIREFRAMES ESTRUTURA SITEMAP / FLUXOGRAMA ESCOPO REQUERIMENTOS / CONTEÚDO ESTRATÉGIA CONCEITO / PESQUISA O ICEBERG DE UX
11. E PORQUE MOBILE?
12. 400 800 1200 1600 2000 2007 2015 PROJEÇÃO DE USO MOBILE VS DESKTOP, 2007-2015 ref: Morgan Stanley Resarch USUÁRIOS DE INTERNET (MILHÕES)
13. 19% COMPRAS EM 2014 NO VAREJO NOS EUA, JÁ VEM DE DISPOSITIVOS MÓVEIS ref: US Retail MCommerce, 2012-2018 eMarketer
14. REPRESENTANDO HOJE USD57 BI EM VENDAS, E IRÁ ULTRAPASSAR USD100 BILHÕES ATÉ 2017 ref: US Retail MCommerce, 2012-2018 eMarketer
15. Continua no PC 60% Continua no tablet 4% 58% 5% 4% 61% Começa no Smartphone 65% 63% 65% O dispositivo mais comum de início para várias atividades ref: Google: The New Multi-Screen World - August 2012
16. ISSO SEM CONSIDERAR PAGAMENTOS VIA SMARTPHONES COM O USO DE NFC.
17. CONTEXTO USUÁRIO CONTEÚDO UX depende de...
18. CONTEXTO
19. SPAM PROPAGANDA INFORMAÇÃO menos contexto mais contexto Contexto muda informação para SPAM
20. Sistema operacional limitado Tamanho de tela Processador limitado Conectividade reduzida Aquilo que chamamos de mobile compreende mais que apenas celulares e smartphones, mas também tablets, jogos portáteis. MOBILE
21. Navegação por tamanho de tela (Maio 2013 - Maio 2014) ≤ 4 polegadas > 4 polegadas 65% 15% Telefones com telas maiores estão gerando mais tráfego do que nunca antes TELAS CADA VEZ MAIORES ref: Adobe Digital Index 2014: US Mobile Benchmark Report
22. Botões Acessíveis A localização dos elementos deve ser levada em conta na criação de soluções onde o uso mobile seja foco da ação. FÁCIL DIFÍCIL
23. Movimentos Fáceis Interfaces que utilizam gestos para desencadear ações devem levar em conta a usabilidade para o público em dispositivos conhecidos. FÁCIL DIFÍCIL
24. Contextualmente conscientes Ativado por voz Sem costuras Mobile First Design PRINCÍPIOS DE VESTÍVEIS DO GOOGLE
25. Tempo de Carregamento Demorou muito, perdeu o usuário
26. do tempo de carregamento de página reduz A cada 100 milissegundos das vendas no Amazon 1% Kohavi and Longbotham 2007
27. Comprima Use .SVG Use CSS Carregamento relâmpago Reduzindo o tamanho dos arquivos
28. Carregamento progressivo Lidando com a ansiedade do usuário
29. Conteúdo fictício Lidando com a ansiedade do usuário
30. Share to FOLLOWERS DIRECT SHARE Write a caption… Tag People Add to Photo Map Name This Location FILTERS NEXT NORMAL AMARO MAYFAIR RISE Instagram User O upload começa aqui A maioria começa aqui Operando em segundo plano O rápido carregamento do Instagram
31. Não é novidade, é necessidade, mas isso não interessa para seus usuários
32. 85% dos problemas de UX podem ser resolvidas com 5 usuários. ref: Why You Only Need to Test with 5 Users - Jakob Nielsen
33. David Karp, CEO, Tumblr For every new feature we add, we take an old one out. A lot of big sites don’t do that, and it’s a problem.
34. O que é possível num cachorro-quente?
35. O que é necessário? Pão e Salsicha Mostarda Ketchup Purê Batata Palha Vinagrete
36. Pão e Salsicha O que é opcional?
37. Um camelo é um cavalo desenhado por um comitê.
38. Protótipo em papel Wireframe navegável Wireframes em Motion Protótipo HTML
39. Protótipo em papel Rápidos e simples Feedback rápido Inclusivos Pouco estéticos Difíceis de compartilhar Não são auto-explicativos Wireframe navegável Wireframes em Motion Protótipo HTML
40. Protótipo em papel Detalhados Define conteúdo Explica comportamentos Difíceis para testes reais Exigem cultura digital Não é reaproveitado Wireframe navegável Wireframes em Motion Protótipo HTML
41. Protótipo em papel Emocionais Feedback de qualidade Comportamento dinâmico Tempo de produção Conhecimento em software Necessita estágio avançado Wireframe navegável Wireframes em Motion Protótipo HTML
42. Protótipo em papel Testa interação Perfeito para fluxos Experiência quase real Conhecimento específico Tempo de desenvolvimento Limita o processo de design Wireframe navegável Wireframes em Motion Protótipo HTML
43. APRENDA CONSTRUA MEÇA DADOS CODIFICA IDEIAS
44. Perguntas?