Download - Navegabilidade em Dispositivos Móveis
Talita Pagani @talitapagani
Universidade Federal de São Carlos (UFSCar)
Dezembro/2011
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 1
• Apresentação
• Pra começo de conversa
• O paradigma “mobile”
• Melhores práticas de design e front-end
• Amarrando as ideias
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 2
• 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 Gestor
• WebDesign Experience – Tentando mantê-lo atualizado
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 3
Designer de interface e
front-end developer há
mais de 6 anos
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 4
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 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 QWERTY
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 6
Esta evolução modificou a forma com que as pessoas interagem
com estes dispositivos
• 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
dispositivo
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 7
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 8
• 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
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
• 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)
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 11
“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 12
Variação de Hardware
Convenções de interface e interação
Ambiente
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 13
• 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 tarefa
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 14
• 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
• 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
• 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ção
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 17
Design adequado ao contexto
Websites mobile de companhias aéreas. A Sephora adequou o design ao
contexto mobile.
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 18
Fonte: http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/
American Airlines, CNN and Southwest
Navegação simplificada e adequada para seleção na Southwest
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 19
Fonte: http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/
Amazon
Website mobile da Amazon é sucinto no momento de apresentar informações
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 20
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 21
Aplicação
Versão Mobile
Funcionalidades
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
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.
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 23
Fonte: http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/
Volkswagen: you’re doing it wrong
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 24
Fonte: http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/
• 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
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 26
Fonte: http://mobile-patterns.com/
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 27
Fonte: http://mobile-patterns.com/
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 28
Fonte: http://mobile-patterns.com/
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 29
Fonte: http://mobile-patterns.com/
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 30
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 31
IBGE. Indicadores de Desenvolvimento Sustentável. Disponível em http://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ílios 2009. 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 em http://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
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 33
Talita Pagani @talitapagani
10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 34