Baixado 30 vezes
Carregado porVítor Teixeira
Mobile UX - Princípios Básicos
O documento discute princípios para o desenvolvimento de experiências móveis (mobile). Apresenta três desafios principais: organizar a informação de forma alinhada com os comportamentos dos usuários, possibilitar ações intuitivas através de boa usabilidade, e facilitar o input de dados aproveitando as capacidades dos dispositivos móveis.
Mais conteúdo relacionado
![[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)
Mobile UX - Princípios Básicos
- 1.
- 2.
- 3. A empresa GUMtem um negócio de produção e venda de pastilhas elásticas Gourmet e quer um site móvel para o seu Produto PrimeGum. O site deve permitir: 1. Conhecer o produto 2. Obter informação sobre os pontos de venda 3. Registar para entrar no programa de fidelização Desenhe no máximo 4 ecrãs para contemplar este caso. 3
- 4.
- 5. Experiência MOBILE deveser pensada e desenhada primeiro 5
- 6. IDEIAS CHAVE Crescimento =OPORTUNIDADES Limitações = FOCO Capacidades = INOVAÇÃO 6
- 7.
- 8. NÚMEROS 2013 “25% dosPortugueses que acedem à internet fazem-no através de Smartphone” “10% dos mesmos acedem utilizando um Tablet” Em relação a 2012: Crescimento de 47% e 170%, respetivamente. MARKTEST, Bareme Internet 2013 8
- 9.
- 10. CURIOSIDADES “Portugueses preferem ficarsem carro e sem TV do que sem Smartphone” “62% não prescinde de ter o equipamento à mão enquanto janta e 19% leva-o para a cama” Venda de smartphones cresce 25% em relação a 2012 http://tek.sapo.pt http://www.apdc.pt/ 10
- 11. CASO FixeAds Entre Out2012 e Mar 2013 aumento de 70% no tráfego através de Smartphones ou Tablets 7,3M de visitas através de dispositivos móveis em 6 meses http://www.dinheirovivo.pt/Buzz/Artigo/CIECO138459.html 11
- 12. (…) estamos acaminho de um novo paradigma da utilização da Internet em Portugal. O crescente número de smartphones e tablets que permitem uma experiência de navegação mais simples e divertida, abrem novas oportunidades ao mercado (…) — Miguel Mascarenhas, CEO da FixeAds 12
- 13.
- 14. EM SUMA Crescimento =OPORTUNIDADES 14
- 15.
- 16. TAMANHO DE ECRÃ 1024x768vs. 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Ã Énecessário chegar a um compromisso entre objetivos de utilizador e necessidades do negócio Será que todos aqueles links são mesmo úteis? …para saber, temos de conhecer os nossos utilizadores! 17
- 18.
- 19.
- 20. PERFORMANCE Velocidade das ligaçõesé uma preocupação em Mobile Se a experiência Mobile for “rápida e leve”, a experiência Desktop ganha com isso “Reduzir Requests e tamanhos de ficheiro” “Aproveitar as oportunidades oferecidas pelo HTML5, CSS3, etc.” https://developers.google.com/speed/articles/mobile 20
- 21. PERFORMANCE - GOOGLE SEARCH Em2009 decidiram introduzir atrasos propositados Atraso de 500ms causou perda de 20% do tráfego 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 benefit of the feature is unproven. http://googleresearch.blogspot.pt/2009/06/speed-matters.html 21
- 22. CONTEXTO DE UTILIZAÇÃO Utilizaçãotípica em rajadas curtas Partilhar algo, consultar email, novos Tweets, etc. Em qualquer lugar, a qualquer hora 84% em casa, 74% em filas, 64% no trabalho, etc. e.g., Consultar o email enquanto cozinho 22
- 23. * CONTEXTO DE UTILIZAÇÃO Maiorparte do tempo temos: 1 Olho 1 Polegar Temos de criar interações rápidas e simples § Eliminar elementos de GUI* desnecessários Abraçar as NUI** *Graphical User Interfaces ** Natural User Interfaces 23
- 24.
- 25.
- 26. TOQUE /MULTITOQUE O toqueintroduz uma série de possíveis combinações que permitem inovar e simplificar a UI Pull para atualizar § § Swipe para mais opções 26
- 27. Orientação do dispositivo/ Acelerómetro § § Permite detetar o posicionamento do equipamento 27
- 28. Orientação do dispositivo/ Acelerómetro Giroscópio Também permite detetar alterações na taxa de movimento dos dispositivos Tilt scrolling Gesto “Shake” Navegar em panoramas com 360 graus de movimento (Giroscópio) 28
- 29. Orientação do dispositivo/ Acelerómetro Giroscópio Saiba sempre para que lado fica o Norte Possibilidade: Gravar localização de algo e usar a bússola para apontar nessa direção § 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. LOCALIZAÇÃO Deteção da localizaçãopermite situar-nos num mapa rapidamente e com elevada precisão Sugestões de locais baseados na localização atual § § Pesquisar “algo” perto de mim 30
- 31. CAPTURA DE IMAGEM, VÍDEOSE ÁUDIO Acesso às câmaras e micro para upload de imagem ou vídeo capturados no momento HTML Media Capture - Suportado em iOS e Android (6.0+ e 3.0+) Partilhar Fotos ou Áudio e/ou Vídeo Submeter ficheiro áudio http://mobilehtml5.org/ 31
- 32. OUTRAS CAPACIDADES Ligações entredisposivos por Bluetooth Proximidade dos dispositivos a objetos físicos Deteção do nível de luz ambiente NFC: Near Field Communication 32
- 33.
- 34. A SEGUIR… ORGANIZAR INFORMAÇÃO POSSIBILITARAÇÕES FACILITAR O INPUT PLANEAR O LAYOUT 34
- 35. MOBILE UX PRINCÍPIOS PARA DESENVOLVIMENTOMOBILE @vsdteixeira vteixeira@primeit.pt
- 36.
- 37. ALINHAR COM USECASES MOBILE Pesquisar/ Descobrir Preciso da resposta a algo agora Explorar/ Jogar Quero uma distração para matar tempo Check-in/ Status Quero manter-me informado sobre algo que muda regularmente Editar/ Criar Preciso de concluir uma tarefa agora, não pode esperar 37
- 38. ALINHAR COM USECASES MOBILE http://xkcd.com/773/ 38
- 39. CONTEÚDO ANTES DA NAVEGAÇÃO Normalmenteos utilizadores querem ver conteúdo imediatamente e não o sitemap Usar header simples com identificação do site e eventual link para Menu § 39
- 40. NAVEGAÇÃO RELEVANTE E BEMPOSICIONADA Um menu no footer é importante para “encaminhar os utilizadores” Não repetir o menu de topo; Usar uma âncora para o menu do footer e um botão para “voltar ao topo” Usar opções de navegação contextual se aplicável e quando necessário (e.g.,Ver mais…) 40
- 41. NAVEGAÇÃO RELEVANTE E BEMPOSICIONADA No fim da página temos para onde ir § § Ir mais fundo neste tema 41
- 42. REDUZIR NAVEGAÇÃO AO MÍNIMONECESSÁRIO Evitar barras de menu fixas. Especialmente no fundo do ecrã Ocupam o espaço ad eternum Causam erros se pressionarmos botões do browser por engano § Não precisamos de botão “Back” em websites mobile 42
- 43. MANTER O FOCO REMINDER:Maior parte do tempo temos: 1 Olho 1 Polegar Temos apenas a atenção parcial do utilizador Designs claros e focados nos objetivos do utilizador ajudam a completar ações 43
- 44. MANTER O FOCO Sóo que interessa para fazer o post § § Prevêem espaço ocupado pelo teclado 44
- 45. EM SUMA Alinhar comcomportamentos dos utilizadores Enfatizar conteúdo antes da navegação Providenciar opções relevantes para explorar e descobrir Manter o foco nos objetivos dos utilizadores 45
- 46.
- 47. ALVOS ADEQUADOS Os dedossão apontadores imprecisos Pontas dos dedos: 8-10mm Existem guidelines sobre tamanhos adequados* * http://www.lukew.com/ff/entry.asp?1085 47
- 48. ALVOS ADEQUADOS Alvos bemposicionados, espaçados, e dimensionados ajudam a tocar com confiança Bad § Better Good § § 48
- 49. POSICIONAMENTO DE AÇÕES Regrageral smartphones: Optimizar para Destros que utilizam o polegar para interagir Ações comuns nas áreas acessíveis Ações destrutivas nas áreas mais difíceis de aceder Mais info em: http://www.lukew.com/ff/entry.asp?1649 49
- 50. LINGUAGEM DO TOQUE Conheceros gestos comuns ajudam a optimizar a interface para NUI * Tap Press Drag Flick Spread Pinch http://www.lukew.com/ff/entry.asp?1071 50
- 51. LINGUAGEM DO TOQUE Aindahá espaço para inovação http://www.lukew.com/ff/entry.asp?1071 51
- 52. NÃO ESQUECER “OS OUTROS” Osdispositivos híbridos ou sem capacidade de toque ainda existem É preciso definir estados :focus e :hover em todos os nossos botões, links e menus 52
- 53. EM SUMA Assegurar tamanhoe posições adequadas dos alvos Estar familiarizado com gestos comuns em mobile e como se alinham com os objetivos dos utilizadores Não esquecer dispositivos sem toque e híbridos 53
- 54.
- 55. ENCORAJAR INPUT As pessoasquerem usar os seus dispositivos para introdução Dispositivos modernos fornecem uma oportunidade para obter input diverso dos utilizadores REMINDER: Podemos simplificar a introdução de informação recorrendo à Localização, Orientação do dispositivo, Microfone, Câmaras, etc. 55
- 56. LABELS EM MOBILE Labelsno topo funcionam melhor em Mobile Leitura e input sequenciais § Permitem usar toda a largura do ecrã 56
- 57. LABELS EM MOBILE Labelsdentro dos campos de input podem poupar espaço… mas existem mais riscos e cuidados a ter Não podem tornar-se parte das resposta § Não podem ser confundidos com a resposta Estão ausentes depois de se ter introduzido a resposta 57
- 58. TIPOS DE INPUTE MÁSCARAS Tipos de input standard podem ajudar bastante. input type=“” checkbox radio password file submit text selectoption… 58
- 59. TIPOS DE INPUTE MÁSCARAS Novos tipos de input HTML5 podem ajudar ainda mais em mobile input type = “” url email number Fornece teclados com defaults para o tipo de dados a ser introduzidos 59
- 60. TIPOS DE INPUTE MÁSCARAS As várias máscaras dos nossos campos de input Mascarar inputs com caracteres especias pode ser útil e evitar erros É preciso corresponder às expectativas que introduzimos 60
- 61. CONTROLOS CUSTOM Defaults inteligentese controlos menos “tap intensive” e mais próximos das mecânicas naturais dos utilizadores Spinners, Date-pickers, etc. Não esquecer o :focus e :hover para estes controlos 61
- 62. CONTROLOS CUSTOM Default inteligente.Encomendar 1 item é o mais convencional Em vez de ter de introduzir um número basta pressionar a seta correspondente 62
- 63.
- 64. LAYOUTS PARA TIPOSDE INTRODUÇÃO Considerar 3 possíveis cenários para introdução Sequência de questões relacionadas Atualizações não-lineares Introdução contextualizada (comentários, etc) 64
- 65. LAYOUTS PARA TIPOSDE INTRODUÇÃO Sequência de questões relacionadas Ser eficiente nestes casos e cortar o dispensável § 65
- 66. LAYOUTS PARA TIPOSDE INTRODUÇÃO Atualizações não-lineares Nem sempre queremos editar todos os campos § Interface mais limpa e intuitiva 66
- 67. LAYOUTS PARA TIPOSDE INTRODUÇÃO Introdução contextualizada § Manter o contexto ajuda a não ter de recordar 67
- 68. USAR AS CAPACIDADES DISPONÍVEIS Localização,Orientação do dispositivo, Microfone, Câmaras, etc Cada vez mais destas capacidades ficam disponíveis para utilizar na Web 68
- 69. EM SUMA Não limitarpossibilidade de contribuir em Mobile Usar labels optimizadas para mobile em forms Simplificar o input em mobile com input types adequados e máscaras Escolher o layout certo dependendo do tipo de contributo esperado Aproveitar oportunidades para utilizar as capacidades Mobile para obter input 69
- 70.
- 71. ACEITAR A MUDANÇA Omundo mobile muda um pouco todos os dias Devemos abraçar a perspectiva de mudança e adaptar os nossos designs o melhor que soubermos 71
- 72. META VIEWPORT Esta simpleslinha é o primeiro passo para layouts mobile eficientes meta name=“viewport” content=“width=device-width” A largura do nosso site fica automaticamente optimizada para o dispositivo em que está a ser vista Com esta linha asseguramos consistência entre diversos dispositivos com densidades de ecrã diferentes 72
- 73. DIFERENTES DENSIDADES DE ECRÃ Densidadede ecrã: Número total de pixels disponíveis dentro de dimensões físicas específicas Usar CSS3 sempre que possível em vez de imagens Servir imagens com o dobro da resolução para dispositivo com maior densidade de ecrã Tip: Usar media-queries para servir imagens diferentes para dispositivos diferentes 73
- 74. LAYOUTS FLUÍDOS E RESPONSIVE Fluídos- Que permitem alterar as suas dimensões mínimas e máximas Responsive - Adaptar o design aos dispositivos criando experiências diferentes Reposicionar elementos, alterar dimensões de imagens, remover ou adicionar elementos 74
- 75.
- 76.
- 77.
- 78. DIFERENTES DISPOSITIVOS, EXPERIÊNCIAS DIFERENTES Característicasúnicas de cada tipo de dispositivos Postura do utilizador Método primário de input Tamanho médio dos ecrãs 78
- 79. REDUZIR COMPLEXIDADE REMINDER: Reduziré a melhor aproximação para desenho de layouts em Mobile Reduzir complexidade é bom para toda a gente 79
- 80. EM SUMA Aceitar oritmo de mudança Deixar os browsers Mobile saber que pensámos neles Criar designs flexíveis, fluídos e responsive Saber onde traçar a linha entre experiências em diferentes dispositivos Cortar o que é supérfluo 80
- 81.
- 82. Aproveitar o crescimentoMobile Abraçar limitações para focar e prioritizar os serviços Usar capacidades Mobile para inovar na experiência Pegar no que sabemos sobre Web Design e pensar de forma diferente acerca de Organização em Mobile, Ações, Input, e Layout 82
- 83. DICAS DO LUKE Testaros serviços em dispositivos reais em vez de simuladores Criar protótipos o mais cedo possível Peguem no que sabem e ponham as mãos na massa! Não precisam saber tudo para começar… 83
- 84. EM DISCUSSÃO… Nativos vs.soluções Web Mobile Sites separados ou Responsive? 84
- 85.
- 86. A empresa GUMtem um negócio de produção e venda de pastilhas elásticas Gourmet e quer um site móvel para o seu Produto PrimeGum. O site deve permitir: 1. Conhecer o produto 2. Obter informação sobre os pontos de venda 3. Registar para entrar no programa de fidelização Desenhe no máximo 4 ecrãs para contemplar este caso. 86
- 87.