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.

1. MOBILE UX
Porquê Mobile?
@vsdteixeira
vteixeira@primeit.pt

2. DESAFIO I
2

3. A empresa GUM tem 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. BIBLIOGRAFIA
MOBILE FIRST
Luke Wroblewsky
http://www.abookapart.com/products/mobile-first
4

5. Experiência MOBILE deve ser
pensada e desenhada primeiro
5

6. IDEIAS CHAVE
Crescimento = OPORTUNIDADES
Limitações
= FOCO
Capacidades
= INOVAÇÃO
6

7. CRESCIMENTO
7

8. NÚMEROS 2013
“25% dos Portugueses 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. … EM TABELA
ACESSO
2012
2013
VARIAÇÃO
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 ficar sem 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 Out 2012 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 a caminho 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. CASO FixeAds
§
§
§
13

14. EM SUMA
Crescimento = OPORTUNIDADES
14

15. LIMITAÇÕES
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Ã
É 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. EXEMPLO FlyTAP
18

19. EXEMPLO FlyTAP
§
§
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
Em 2009 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ção tí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
Maior parte 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. EM SUMA
Limitações
=
FOCO
24

25. CAPACIDADES
25

26. TOQUE /MULTITOQUE
O toque introduz 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ção permite 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ÍDEOS E Á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 entre disposivos por Bluetooth
Proximidade dos dispositivos a objetos físicos
Deteção do nível de luz ambiente
NFC: Near Field Communication
32

33. EM SUMA
Capacidades
=
INOVAÇÃO
33

34. A SEGUIR…
ORGANIZAR INFORMAÇÃO
POSSIBILITAR AÇÕES
FACILITAR O INPUT
PLANEAR O LAYOUT
34

35. MOBILE UX
PRINCÍPIOS PARA
DESENVOLVIMENTO MOBILE
@vsdteixeira
vteixeira@primeit.pt

36. ORGANIZAR
INFORMAÇÃO
36

37. ALINHAR COM USE CASES
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 USE CASES
MOBILE
http://xkcd.com/773/
38

39. CONTEÚDO ANTES DA
NAVEGAÇÃO
Normalmente os 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
BEM POSICIONADA
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
BEM POSICIONADA
No fim da página temos
para onde ir
§
§
Ir mais fundo neste
tema
41

42. REDUZIR NAVEGAÇÃO AO
MÍNIMO NECESSÁ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 com comportamentos 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. POSSIBILITAR
AÇÕES
46

47. ALVOS ADEQUADOS
Os dedos sã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 bem posicionados, espaçados, e dimensionados
ajudam a tocar com confiança
Bad
§
Better
Good
§
§
48

49. POSICIONAMENTO DE AÇÕES
Regra geral 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
Conhecer os 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
Ainda há espaço para inovação
http://www.lukew.com/ff/entry.asp?1071
51

52. NÃO ESQUECER “OS
OUTROS”
Os dispositivos 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 tamanho e 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. FACILITAR O
INPUT
54

55. ENCORAJAR INPUT
As pessoas querem 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
Labels no topo funcionam melhor
em Mobile
Leitura e input sequenciais
§
Permitem usar toda a largura do ecrã
56

57. LABELS EM MOBILE
Labels dentro 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 INPUT E MÁSCARAS
Tipos de input standard podem ajudar bastante.
input type=“”
checkbox
radio
password
file
submit
text
selectoption…
58

59. TIPOS DE INPUT E 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 INPUT E 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 inteligentes e 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. CONTROLOS CUSTOM
vs.
§
63

64. LAYOUTS PARA TIPOS DE
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 TIPOS DE
INTRODUÇÃO
Sequência de questões relacionadas
Ser eficiente nestes casos e cortar o
dispensável
§
65

66. LAYOUTS PARA TIPOS DE
INTRODUÇÃO
Atualizações não-lineares
Nem sempre queremos editar todos os
campos
§
Interface mais limpa e intuitiva
66

67. LAYOUTS PARA TIPOS DE
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 limitar possibilidade 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. PLANEAR O
LAYOUT
70

71. ACEITAR A MUDANÇA
O mundo 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 simples linha é 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Ã
Densidade de 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. LAYOUTS FLUÍDOS E
RESPONSIVE
Fluído
http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
75

76. LAYOUTS FLUÍDOS E
RESPONSIVE
Fluído
76

77. LAYOUTS FLUÍDOS E
RESPONSIVE
Responsive
http://www.abookapart.com/products/responsive-web-design
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 o ritmo 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. CONCLUINDO…
81

82. Aproveitar o crescimento Mobile
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
Testar os 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. DESAFIO II
85

86. A empresa GUM tem 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. MOBILE UX
http://www.slideshare.net/vsdteixeira
@vsdteixeira
vteixeira@primeit.pt