Mobile UX - Princ­pios Bsicos

  • View
    776

  • Download
    0

Embed Size (px)

DESCRIPTION

Princípios de Usabilidade para Desenvolvimento de Websites Móveis

Text of Mobile UX - Princ­pios Bsicos

  • 1. MOBILE UX Porqu Mobile? @vsdteixeira vteixeira@primeit.pt
  • 2. DESAFIO I 2
  • 3. A empresa GUM tem um negcio de produo e venda de pastilhas elsticas Gourmet e quer um site mvel para o seu Produto PrimeGum. O site deve permitir: 1. Conhecer o produto 2. Obter informao sobre os pontos de venda 3. Registar para entrar no programa de delizao Desenhe no mximo 4 ecrs para contemplar este caso. 3
  • 4. BIBLIOGRAFIA MOBILE FIRST Luke Wroblewsky http://www.abookapart.com/products/mobile-rst 4
  • 5. Experincia MOBILE deve ser pensada e desenhada primeiro 5
  • 6. IDEIAS CHAVE Crescimento = OPORTUNIDADES Limitaes = FOCO Capacidades = INOVAO 6
  • 7. CRESCIMENTO 7
  • 8. NMEROS 2013 25% dos Portugueses que acedem internet fazem-no atravs de Smartphone 10% dos mesmos acedem utilizando um Tablet Em relao a 2012: Crescimento de 47% e 170%, respetivamente. MARKTEST, Bareme Internet 2013 8
  • 9. EM TABELA ACESSO 2012 2013 VARIAO Computador 62.6 62.7 0% Smartphone 17.0 25.0 47% Tablet 3.7 10.0 170% MARKTEST, Bareme Internet 2013 9
  • 10. CURIOSIDADES Portugueses preferem car sem carro e sem TV do que sem Smartphone 62% no prescinde de ter o equipamento mo enquanto janta e 19% leva-o para a cama Venda de smartphones cresce 25% em relao a 2012 http://tek.sapo.pt & http://www.apdc.pt/ 10
  • 11. CASO FixeAds Entre Out 2012 e Mar 2013 aumento de 70% no trfego atravs de Smartphones ou Tablets 7,3M de visitas atravs de dispositivos mveis em 6 meses http://www.dinheirovivo.pt/Buzz/Artigo/CIECO138459.html 11
  • 12. () estamos a caminho de um novo paradigma da utilizao da Internet em Portugal. O crescente nmero de smartphones e tablets que permitem uma experincia de navegao mais simples e divertida, abrem novas oportunidades ao mercado () Miguel Mascarenhas, CEO da FixeAds 12
  • 13. CASO FixeAds 13
  • 14. EM SUMA Crescimento = OPORTUNIDADES 14
  • 15. LIMITAES 15
  • 16. TAMANHO DE ECR 1024x768 vs. 320x480 = - 80%! We can always choose to perceive things differently.You can focus on what's wrong in your life, or you can focus on what's right. Marianne Williamson 16
  • 17. TAMANHO DE ECR necessrio chegar a um compromisso entre objetivos de utilizador e necessidades do negcio Ser que todos aqueles links so mesmo teis? para saber, temos de conhecer os nossos utilizadores! 17
  • 18. EXEMPLO FlyTAP 18
  • 19. EXEMPLO FlyTAP 19
  • 20. PERFORMANCE Velocidade das ligaes uma preocupao em Mobile Se a experincia Mobile for rpida e leve, a experincia Desktop ganha com isso Reduzir Requests e tamanhos de cheiro Aproveitar as oportunidades oferecidas pelo HTML5, CSS3, etc. https://developers.google.com/speed/articles/mobile 20
  • 21. PERFORMANCE - GOOGLE SEARCH Em 2009 decidiram introduzir atrasos propositados Atraso de 500ms causou perda de 20% do trfego e fez com que utilizadores demorassem a voltar, mesmo depois de reposto o estado normal. Because the cost of slower performance increases over time and persists, we encourage site designers to think twice about adding a feature that hurts performance if the benet of the feature is unproven. http://googleresearch.blogspot.pt/2009/06/speed-matters.html 21
  • 22. CONTEXTO DE UTILIZAO Utilizao tpica em rajadas curtas Partilhar algo, consultar email, novos Tweets, etc. Em qualquer lugar, a qualquer hora 84% em casa, 74% em las, 64% no trabalho, etc. e.g., Consultar o email enquanto cozinho 22
  • 23. * CONTEXTO DE UTILIZAO Maior parte do tempo temos: 1 Olho & 1 Polegar Temos de criar interaes rpidas e simples Eliminar elementos de GUI* desnecessrios Abraar as NUI** *Graphical User Interfaces ** Natural User Interfaces 23
  • 24. EM SUMA Limitaes = FOCO 24
  • 25. CAPACIDADES 25
  • 26. TOQUE /MULTITOQUE O toque introduz uma srie de possveis combinaes que permitem inovar e simplicar a UI Pull para atualizar Swipe para mais opes 26
  • 27. Orientao do dispositivo / Acelermetro Permite detetar o posicionamento do equipamento 27
  • 28. Orientao do dispositivo / Acelermetro & Giroscpio Tambm permite detetar alteraes na taxa de movimento dos dispositivos Tilt scrolling Gesto Shake Navegar em panoramas com 360 graus de movimento (Giroscpio) 28
  • 29. Orientao do dispositivo / Acelermetro & Giroscpio Saiba sempre para que lado ca o Norte Possibilidade: Gravar localizao de algo e usar a bssola para apontar nessa direo First world Problem: Onde que deixei o meu carro? http://blogs.adobe.com/cantrell/archives/2012/03/accessing-the-accelerometer-and-gyroscope-in-javascript.html 29
  • 30. LOCALIZAO Deteo da localizao permite situar-nos num mapa rapidamente e com elevada preciso Sugestes de locais baseados na localizao atual Pesquisar algo perto de mim 30
  • 31. CAPTURA DE IMAGEM, VDEOS E UDIO Acesso s cmaras e micro para upload de imagem ou vdeo capturados no momento HTML Media Capture - Suportado em iOS e Android (6.0+ e 3.0+) Partilhar Fotos ou udio e/ou Vdeo Submeter cheiro udio http://mobilehtml5.org/ 31
  • 32. OUTRAS CAPACIDADES Ligaes entre disposivos por Bluetooth Proximidade dos dispositivos a objetos fsicos Deteo do nvel de luz ambiente NFC: Near Field Communication 32
  • 33. EM SUMA Capacidades =