Navegabilidade em Dispositivos Móveis

2.343 visualizações

Publicada em

Publicada em: Tecnologia
2 comentários
4 gostaram
Estatísticas
Notas
  • @luiznando Olá Luiz Fernando, você pode fazer citação do conteúdo sim, inclusive os slides estão disponíveis para download em PDF no slideshare :)
    As referências ao final da apresentação também podem lhe ser úteis.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Olá, estou fazendo um trabalho sobre navegabilidade em dispositivos móveis e gostei muito desta apresentação, gostaria de saber se posso utilizar algumas informações, claro que informando a fonte, ok!
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
Sem downloads
Visualizações
Visualizações totais
2.343
No SlideShare
0
A partir de incorporações
0
Número de incorporações
29
Ações
Compartilhamentos
0
Downloads
54
Comentários
2
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Navegabilidade em Dispositivos Móveis

  1. 1. Talita Pagani @talitapaganiUniversidade Federal de São Carlos (UFSCar)Dezembro/2011 10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 1
  2. 2. • Apresentação• Pra começo de conversa• O paradigma “mobile”• Melhores práticas de design e front-end• Amarrando as ideias10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 2
  3. 3. • Mestranda em Ciência da Computação (UFSCar) – Bolsista do instituto Microsoft Research / FAPESP – Tutora Virtual da EaD • Tableless – Editora (CSS, HTML, Usabilidade, Internet Móvel) • GarotasCPBr – Colunista sobre Carreira – Membro do Conselho GestorDesigner de interface efront-end developer hámais de 6 anos • WebDesign Experience – Tentando mantê-lo atualizado 10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 3
  4. 4. 10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 4
  5. 5. Ao longo da última década, os dispositivos móveis sofreram inúmeras modificações, de celulares a smartphones, de teclado convencional a touch screen e teclado QWERTY10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 5
  6. 6. Esta evolução modificou a forma com que as pessoas interagem com estes dispositivos10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 6
  7. 7. • Em 2008, segundo o IBGE – 794 usuários para cada 100 mil habitantes – telefonia fixa correspondia a 306 usuários para cada 100 mil• Em 2009, segundo a pesquisa TIC Domicílios – 35% da população que possui celular, tem acesso à internet no dispositivo10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 7
  8. 8. 10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 8
  9. 9. • Interfaces de desktop e mobile – Mais homogêneas entre si, se assemelhando cada vez mais• Interação de desktop e mobile – Distintas• “As interfaces criadas para cada dispositivo nos ajudam a distinguir os ambientes e também a forma com que o usuário interage.” (Eis, 2011)10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 9
  10. 10. http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 10
  11. 11. • Dispositivos como os smartphones, estão em crescente substituição aos dispositivos convencionais• Touch screens – Popularização de smartphones com tela sensível ao toque – “ Criar interfaces touch é algo relativamente novo. Nós trouxemos ideias da interação com mouse para os dispositivos touch, mas grande parte das interações precisaram ser reinventadas” (Eis, 2011) “Lembre agora na forma de como você gira uma imagem em um dispositivo touch e como você gira essa mesma imagem utilizando um mouse. A interface muda, o seu comportamento muda.”10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 11
  12. 12. Variação de Hardware Convenções de interface e interação Ambiente10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 12
  13. 13. 10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 13
  14. 14. • Navegação e menus• Ícones• Tarefas a serem desempenhadas (Apple, 2011; Android, 2011) – Ao utilizar um dispositivo, os usuários começam a realizar tarefas uma após a outra, alheios ao comportamento subjacente – Experiência deve ser contínua, atividade após atividade, tarefa após tarefa10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 14
  15. 15. • Qual a necessidade de seus usuários ao acessar o seu site através de um dispositivos móvel?• Que recursos ele utilizam?• Quais recursos são cruciais para eles quando estão acessando via mobile?• Quais as frustrações?• Quais dispositivos são utilizados para este acesso?Fonte: http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 15
  16. 16. • Foco em tarefas primárias• Eleve o conteúdo com o qual as pessoas se importam – Liste as funcionalidades que os usuários possam gostar – Determine a audiência• Dar ao usuário um caminho lógico a seguir• Utilização simples e óbvia• Terminologia “centrada no usuário”10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 16
  17. 17. • Teclas de atalho para executar ações – Ações importantes expostas na interface• Controle da área de toque• Concisão – Conteúdo minimizado: ações, textos, links, imagens e controles de formulários que sejam mais relevantes• Minimizar input – Pré-seleção para valores em campos de formulário – Utilizar listas de seleção, radio buttons e outros controles que não requerem digitação10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 17
  18. 18. Design adequado ao contexto Websites mobile de companhias aéreas. A Sephora adequou o design ao contexto mobile. Fonte: http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 18
  19. 19. American Airlines, CNN and Southwest Navegação simplificada e adequada para seleção na Southwest Fonte: http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 19
  20. 20. Amazon Website mobile da Amazon é sucinto no momento de apresentar informações Fonte: http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 20
  21. 21. Aplicação Funcionalidades Versão Mobile10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 21
  22. 22. Identificar as intenções de uso O seu website não precisa conter todas as funcionalidades na versão mobile http://www.smashingmagazine.com/2011/07/18/seven-guidelines-for-designing- high-performance-mobile-user-experiences/10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 22
  23. 23. Transit: you’re doing it right Minimizar o uso de recursos que requerem digitação através de selectbox e outros controles. Além disso, a opção “Use my current location” permite que o usuário não tenha o esforço para digitar o endereço de sua localização atual. Fonte: http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 23
  24. 24. Volkswagen: you’re doing it wrongFonte: http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 24
  25. 25. • Labels acima do campo• Espaçamento adequado dos campos• Cuidado com a área de clique do botão submit – Envio involuntário dos dados• Utilizar o input type adequado (alô HTML5!)Fonte: http://www.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 25
  26. 26. Fonte: http://mobile-patterns.com/10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 26
  27. 27. Fonte: http://mobile-patterns.com/10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 27
  28. 28. Fonte: http://mobile-patterns.com/10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 28
  29. 29. Fonte: http://mobile-patterns.com/10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 29
  30. 30. 10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 30
  31. 31. 10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 31
  32. 32. IBGE. Indicadores de Desenvolvimento Sustentável. Disponível emhttp://www.ibge.gov.br/home/geociencias/recursosnaturais/ids/ids2010.pdf, 2010.NIC.br. 5ª Pesquisa Sobre Uso das Tecnologias da Informação e da Comunicação no Brasil — TIC Domicílios2009. Disponível em http://www.cetic.br/usuarios/tic/2009/analises.htm.Pagani, T. 17 nov. 2011. “Navegabilidade em Dispositivos Móveis”. Disponível em:http://tableless.com.br/navegabilidade-em-dispositivos-moveis/Android. The Developer’s Guide. Disponível em http://developer.android.com/guide/index.html.Apple. iOS Human Interface Guidelines. Disponível emhttp://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf.Eis, D. Especificação para touch screens. 22 jun. 2011. Disponível em: http://tableless.com.br/especificacao-para-touch-screens/Marcus, A. “Mobile User Interface Design: For Work, Home, and On the Way”. In ACM SIGCHI 2004. ACM, Viena,Austria, 2004.10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 32
  33. 33. 10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 33
  34. 34. Talita Pagani @talitapaganitalita.cpb@gmail.com 10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 34

×