O documento discute os principais elementos necessários para melhorar a experiência do usuário em sites mobile. São eles: funcionalidade, arquitetura da informação, conteúdo, design, inputs do usuário, contexto móvel, usabilidade, confiabilidade, feedbacks e ajuda. Para cada elemento, o documento fornece diretrizes de projeto visando tornar a navegação gratificante em diferentes dispositivos móveis.

1. mobile - user
experience
Renato Bongiorno

2. usabilidade e padrões
de design mobile
Atividades e conceitos da aula:
- UI Guidelines
- Lei de Fitts

3. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
"Usários móveis bem como o uso do mobile está crescendo
de forma exponencial. Com mais usuários utilizando o
mobile, o destaque está em como melhorar a experiencia
individual de cada elemento no site que, juntos, criam a
experiencia de navegação mobile"
Lyndon Cerejo - user experience & usability strategist at Capgemini Allstate, American Express,
Coca-Cola, General Motors, Merrill Lynch, and Walmart

4. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
A experiencia do usuário mobile engloba sua percepção:
- Antes...
- Durante...
- Depois...
...da sua interação com o dispositivo móvel - através da
navegação em browsers ou apps

5. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Fator determinante para sucesso de sua experiencia:
Torne a experiencia de navegação de seu site
gratificante e de forma continua nos mais variados
dispositivos - seja "low-end-feature" ou "high-
definition-feature"

6. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Principal desafio:
Temos que mudar a forma de pensar de
como estamos acostumados - desktop
design.

7. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Fatores complicadores no design mobile:
- Variações de resoluções
- Variação nos recursos de cada dispositivo
- Restrições de conectividade
- Mudança constante no contexto móvel

8. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Componentes chaves para construir uma boa experiencia mobile:

9. usabilidade e padrões
de design mobile

10. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Funcionalidade:
Define as ferramentas e recursos que
possibilita os usuarios a executar
tarefas e objetos no website mobile.

11. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Funcionalidade - GUIDELINES:
Priorizar e apresentar os elementos principais
que definem seu negócio para o ambiente móvel.
Qual informação para o usuário tem
maior relevancia?
Ex.: Companhia aérea - Voos e check-ins

12. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Funcionalidade - GUIDELINES:
Oferecer funcionalidades exclusivas para o
ambiente mobile, aumentando a experiência do
usuário com o objetivo de envolvê-lo e encantá-lo.
O que posso adicionar de recurso no meu website
somente na versão mobile?
Ex: Reconhecimento de imagens - mapeamento de faces

13. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Funcionalidade - GUIDELINES:
Oferecer funcionalidades exclusivas para o
ambiente mobile, aumentando a experiência do
usuário com o objetivo de envolvê-lo e encantá-lo.
O que posso adicionar de recurso no meu website
somente na versão mobile?
Ex: Reconhecimento de imagens - mapeamento de faces

14. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Funcionalidade - GUIDELINES:
Certifique-se de que os elementos fundamentais do
site estão otimizados para o mobile
Um site de uma loja deve apresentar o telefone com a
funcionalidade de ligação automática.
As lojas apresentadas devem se basear na localização
do dispositivo (geolocalização).

15. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Funcionalidade - GUIDELINES:
Inclua características relevantes ao seu negócio:
Em sites de e-commerce:
- Busca de produto
- Status do pedido
- Botão comprar
Ambas as opções devem oferecer fácil acesso!

16. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Arquitetura da Informação
Estruture as informações, funcionalidades e
conteúdos em uma estrutura lógica e ajude
usuários a encontrar informações e realizar as
principais tarefas.
Isso inclui navegação, busca
e sistema de rotulação.

17. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Arquitetura da Informação - Guidelines
Apresente os links e o conteúdo principal em sua
landing page, priorizando as necessidades dos
usuários.
Possibilite aos usuários mobile navegarem nos
conteúdos e funcionalidades mais importantes do
site em poucos "taps" ou "key presses"

18. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Arquitetura da Informação - Guidelines
Coloque os link adequados para navegação touch e
para navegações não touch (navegação realizada
somente por teclados).
Ao desenvolver um menu para navegação touch,
certifique-se que a altura do botão tenha ao menos
30 pixels de altura.

19. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Arquitetura da Informação - Guidelines
Especifique teclas de atalho para navegação por
teclado (0 - 9) para acesso rápidos para os links.

20. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Arquitetura da Informação - Guidelines
Fornecer pistas de navegação para que os usuários
saibam onde eles estão, como voltar e como voltar
para o início.
Breadcrumbs móveis são freqüentemente
implementados, substituindo o botão "Voltar", com
um rótulo que mostra aos usuários a seção ou
categoria que vieram.

21. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Arquitetura da Informação - Guidelines
Para sites móveis use convenções padrão, como um
ícone de casa linkando para home especialmente
quando a navegação não é repetida em todas as
telas.
Use rótulos claros, concisos, consistentes e
descritivos para itens de navegação e links.

22. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Conteúdo
O conteudo do site é uma mistura de
formas diferentes de comunicação -
textos, imagens e vídeos.

23. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Conteúdo - Guidelines
Apresente um conteúdo apropriado e balanceado:
- Informações de produtos
- Conteudo social
- Institucionais
- Suporte
- Marketing

24. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Conteúdo - Guidelines
Use recursos multimidias desde que o conteúdo
apresentado necessite deste recurso.
Caso utilize recursos multimídia,
dê o controle ao usuário - evite auto start

25. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Conteúdo - Guidelines
Assegure que o conteúdo é adaptável para
dispositivos móveis - otimize imagens e vídeos.
Assegure-se de oferecer um conteúdo em um
formato suportado - evite conteúdo de propriedade
privada - ex.: flash.

26. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Design
A arte de encantar ou (des)encantar!

27. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Design - Guidelines
“Mobilize, don’t miniaturize” (Barbara Ballard)
“Don’t shrink, rethink” (of Nokia).

28. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Design - Guidelines
Utilize um design objetivo e rápido para localização das
informações.
Utilize um visual consistente com outras formas de mídia
(mobile, app, impresso e mundo real) através do uso de
cores, tipografias e personalidade.
Ex.: Amazon

29. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Design - Guidelines
Defina um fluxo visual do elemento principal para os demais
elementos
Considere ambas as orientações - portrait and landscape -
mantenha a localização e as informaçãoes principais ao
usuário caso mude de visualização.
Adicione mais funcionalidades em formato landscape,
mas não remova informações importantes!

30. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
User Inputs - Guidelines
Evite esforços do usuário ao preencher um formulário
Evite campos excessivos de cadastro - usuários já não tem
paciencia de preencher cadastros longos no desktop -
imagine no mobile.
Exemplo - Ao inves de cidade e estado - adicione somente o
CEP

31. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
User Inputs - Guidelines
Exibir as informações de maior relevancia primeiro - ex.:
Se você faz um site de controle aere e sabe que sua maior
conversão é a ponte aére Rio - SP - já deixe pré selecionado
no formulário
Use o mecanismo de entrada apropriado e exiba o teclado de
toque apropriada para evitar a troca de telas de teclado para
inserir dados.

32. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
User Inputs - Guidelines
Desative recursos como CAPTCHA onde não é apropriado.
Ofereça preenchimento automático e sugestões (omininbox,
etc), correção norotgrafica - evite que o usuário precise
digitar novamente uma informação

33. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
User Inputs - Guidelines

34. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Contexto móvel
Um dispositivo móvel pode ser usado a qualquer hora, em
qualquer lugar.
O contexto móvel é sobre o meio ambiente e as
circunstâncias de uso - qualquer coisa que afeta a interação
entre o usuário ea interface,

35. usabilidade e padrões
de design mobile

36. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Usabilidade - Guidelines
Esta é a medida geral de como a arquitetura da
informação, design, conteúdo e outros elementos
trabalham em conjunto para permitir que os
usuários possam realizar seus objetivos

37. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Usabilidade - Guidelines
Deixe claro para o usuário o que pode ser - selected, tapped
or swiped em dispositivos touchscreen
Uma das descobertas de grandes estudos Nielsen Norman
Group usabilidade do iPad era que os usuários não sabiam o
que era ser touchable or tappable.

38. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Usabilidade - Guidelines
Problemas foram apontados também quando ao arrastar um
item em diferentes páginas o mesmo tinha funcionalidades
diferentes
O ideal é garantir que a "touchability" fique de forma clara e
que os itens como links icones e botões fiquem visivelmente
"tappable"

39. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Usabilidade - Guidelines
Para dispositivos touchscreen, assegurar que as metas de
toque são de tamanho adequado e bem espaçados, para
evitar erros de seleção.
Adicione as funcionalidades dentro das zonas de toques
adequadas, como por exemplo, itens para cancelamento de
ações, saida de sistemas, exlusão adicione na "Reach zone"
como ilustra Luke Wroblewski

40. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Usabilidade - Guidelines

41. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Usabilidade - Guidelines
Reduza a curva de aprendizagem do usuario para tornar a
experiencia mais intuitiva
Garanta a usabilidade em condições variáveis, inclusive para
o brilho luz do dia, mudança no ângulo de visão e orientação,
atenção ao projetar elementos como - tamanho, contraste,
cor, tipografia e fonte.

42. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Usabilidade - Guidelines
Não confie em tecnologia que não são
universalmente suportadas por dispositivos,
exemplos Java, Flash, frames, pop-ups.

43. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Confiabilidade - Guidelines
Significa - Segurança, confiança e conforto passado ao
usuário ao utilizar um dispositivo móvel
De acordo com um estudo de 2011 por Truste e Harris
Interactive , privacidade e segurança são as duas principais
preocupações entre os usuários de smartphones

44. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Confiabilidade - Guidelines
Não colete ou utilize informações pessoais a partir de
dispositivos móveis sem a permissão explícita do usuário.
Permite os usuários controlar a forma de como as
informações pessoais são compartilhadas em um
aplicativo móvel

45. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Confiabilidade - Guidelines
Pergunte antes de coletar dados de sua localização e
permitindo-lhes optar por sair de publicidade
direcionada.
Exiba links para a sua privacidade e as políticas de
segurança na tela de registro, deixando clara suas
práticas de negócio

46. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Confiabilidade - Guidelines
Em caso de ecommerce, exiba o certificado digital
Apresente as suas políticas de forma adequada em
dispositivos móveis, oferecendo um resumo conciso
e uma opção para enviar e-mail toda a política.

47. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Feedbacks
Métodos para atrair a atenção do
usuário e exibir informações
importantes.

48. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Guidelines - Apps
Minimizar o número de alertas as telas de
aplicativos, e garantir que cada alerta oferece
informações críticas e opções úteis
Manter indicações breves e claras, explicar o que
causou o alerta e o que o usuário pode fazer, junto
com botões claramente identificados.

49. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Guidelines - Apps
As notificações devem ser breves e em informativos
Não deve interferir com qualquer coisa que o usuário estava
fazendo
Ser fácil de - act on / dismiss

50. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Guidelines - Apps
Explicar o que causou o alerta e o que o usuário
pode fazer, junto com botões claramente
identificados.

51. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
http://vimeo.com/35873217

52. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Ajuda
Opções disponíveis para ajudar na
navegação do usuário

53. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Guidelines - Ajuda
Tornar mais fácil para os usuários a acessar a
ajuda e opções de suporte. Usuários geralmente
procuram ajuda no rodapé de um site

54. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Guidelines - Ajuda
Oferecer múltiplas formas de obter apoio, incluindo opções
relevantes em um contexto móvel, tais como auto-
atendimento, FAQs, call ao vivo via click-to-call, e DM Tweets.
Duas empresas de serviços financeiros que ativamente
oferecem suporte via Twitter são American Express e
Citibank.

55. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Guidelines - Ajuda
Ao introduzir novas funcionalidades oferecer ajuda
contextual e dicas para orientar os usuários a primeira vez
Oferecer ajuda vídeos quando apropriado

56. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Social
Isto diz respeito ao conteúdo e aos recursos que
criam uma sensação de participação social, que
permitem a interação do usuário e que facilitam
o compartilhamento em redes sociais
estabelecidas.

57. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Guidelines - Social
Criar e manter uma presença nas redes sociais (por exemplo,
uma página no Facebook) e serviços locais (por exemplo, uma
página de perfil em serviços como o Google Places, Bing e
Yahoo portal de negócios local).

58. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Guidelines - Social
Estes serão destaque nos resultados de pesquisa e em
serviços baseados em localização de redes sociais.
Além do nome de sua empresa, incluir seu endereço físico,
número de telefone, URL e horário de funcionamento.

59. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Guidelines - Social
Incorporar a sua presença social e atividade em experiência
móvel do seu site, mostrando sua atividade recente e
oferecer uma maneira fácil de seguir você nessas redes.
Integrar recursos de redes sociais com a experiência móvel
do seu site para tornar mais fácil para os usuários se
conctarem com suas próprias redes sociais - APIS Facebook

60. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Guidelines - Social
Convide os usuários a gerar conteúdo que caracteriza sua
marca, produto ou serviço a partir de seus dispositivos
móveis, oferecendo algum incentivo em troca.
Por exemplo, a cadeia de lanchonetes Red Robin ao convidar
o usuário a compartilhar uma foto de seu filho a ler um livro
escolar em um dos seus locais permitia ganhar um milkshake.

61. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Guidelines - Social
Fornecer ofertas móveis que podem ser compartilhados de
forma viral.
American Express oferece atualmente vantagens e descontos
para usuários que sincronizar seus perfis em redes como
Facebook, Twitter e Foursquare para o seu cartão de crédito.

62. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Marketing
Métodos pelos quais um usuário
encontra um site ou aplicativo e os
fatores que incentivam o uso repetido.

63. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Guidelines - Marketing
Garantir encontrabilidade, otimizando
para SEO móvel!

64. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Guidelines - Marketing
Guia SEO Google

65. usabilidade e padrões
de design mobile
Elementos necessários para
usuários mobile
Guidelines - Marketing
Direcione o usuário para um site adaptado para
mobile em buscas atraves do GoogleBot Mobile
Pense em uma ferramenta social, que torne sua
aplicaçao interativa no mobile + desktop