34
Talita Pagani @talitapagani Universidade Federal de São Carlos (UFSCar) Dezembro/2011 10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 1

Navegabilidade em Dispositivos Móveis

Embed Size (px)

Citation preview

Page 1: 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

Page 2: Navegabilidade em Dispositivos Móveis

• 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

Page 3: Navegabilidade em Dispositivos Móveis

• 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

Page 4: Navegabilidade em Dispositivos Móveis

10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 4

Page 5: Navegabilidade em Dispositivos Móveis

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

Page 6: Navegabilidade em Dispositivos Móveis

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

Page 7: Navegabilidade em Dispositivos Móveis

• 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

Page 8: Navegabilidade em Dispositivos Móveis

10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 8

Page 9: Navegabilidade em Dispositivos Móveis

• 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

Page 11: Navegabilidade em Dispositivos Móveis

• 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.”

Page 12: Navegabilidade em Dispositivos Móveis

10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 12

Variação de Hardware

Convenções de interface e interação

Ambiente

Page 13: Navegabilidade em Dispositivos Móveis

10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 13

Page 14: Navegabilidade em Dispositivos Móveis

• 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

Page 15: Navegabilidade em Dispositivos Móveis

• 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

Page 16: Navegabilidade em Dispositivos Móveis

• 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

Page 17: Navegabilidade em Dispositivos Móveis

• 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

Page 21: Navegabilidade em Dispositivos Móveis

10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 21

Aplicação

Versão Mobile

Funcionalidades

Page 22: Navegabilidade em Dispositivos Móveis

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

Page 23: Navegabilidade em Dispositivos Móveis

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/

Page 26: Navegabilidade em Dispositivos Móveis

10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 26

Fonte: http://mobile-patterns.com/

Page 27: Navegabilidade em Dispositivos Móveis

10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 27

Fonte: http://mobile-patterns.com/

Page 28: Navegabilidade em Dispositivos Móveis

10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 28

Fonte: http://mobile-patterns.com/

Page 29: Navegabilidade em Dispositivos Móveis

10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 29

Fonte: http://mobile-patterns.com/

Page 30: Navegabilidade em Dispositivos Móveis

10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 30

Page 31: Navegabilidade em Dispositivos Móveis

10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 31

Page 32: Navegabilidade em Dispositivos Móveis

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

Page 33: Navegabilidade em Dispositivos Móveis

10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 33

Page 34: Navegabilidade em Dispositivos Móveis

Talita Pagani @talitapagani

[email protected]

10/12/2011 Navegabilidade em Dispositivos Móveis - Talita Pagani 34