Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design - UX

646 views

Published on

Aula lecionada sobre Responsive Web Design - UX para nível técnico no SENAC por Renato Bongiorno.

Published in: Internet
  • Login to see the comments

Responsive Web Design - UX

  1. 1. mobile - user experience Renato Bongiorno
  2. 2. usabilidade e padrões de design mobile Atividades e conceitos da aula: - UI Guidelines - Lei de Fitts
  3. 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. 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. 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. 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. 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. 8. usabilidade e padrões de design mobile Elementos necessários para usuários mobile Componentes chaves para construir uma boa experiencia mobile:
  9. 9. usabilidade e padrões de design mobile
  10. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 26. usabilidade e padrões de design mobile Elementos necessários para usuários mobile Design A arte de encantar ou (des)encantar!
  27. 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. 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. 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. 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. 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. 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. 33. usabilidade e padrões de design mobile Elementos necessários para usuários mobile User Inputs - Guidelines
  34. 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. 35. usabilidade e padrões de design mobile
  36. 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. 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. 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. 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. 40. usabilidade e padrões de design mobile Elementos necessários para usuários mobile Usabilidade - Guidelines
  41. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 51. usabilidade e padrões de design mobile Elementos necessários para usuários mobile http://vimeo.com/35873217
  52. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 64. usabilidade e padrões de design mobile Elementos necessários para usuários mobile Guidelines - Marketing Guia SEO Google
  65. 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

×