Como atrair a atenção do usuário da sua interface?

1.699 visualizações

Publicada em

Aula do curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da PUC-Rio. Mais informações em http://www.eduardobrandao.com/aulas/design-telas/como-atrair-a-atencao-do-usuario-da-sua-interface/

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.699
No SlideShare
0
A partir de incorporações
0
Número de incorporações
161
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Como atrair a atenção do usuário da sua interface?

  1. 1. como atrair aatenção do usuárioda sua interface?Eduardo Rangel Brandão, M.Sc.A reprodução, total ou parcial, dos textos e imagens deste documento só é permitida para fins não comerciais,sendo obrigatória a citação da fonte.
  2. 2. O conteúdo desta aula foi ministrado no Curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da Pontifícia Universidade Católica do Rio de Janeiro
  3. 3. como atrair a atenção?Pelo fato da atenção do usuário ser umrecurso finito e, além disso, existir umamensagem clara a ser comunicada,qualquer coisa que distraia esse usuárioé um risco potencial para o sucesso dainterface (pois impede que ele completerapidamente a sua tarefa).
  4. 4. como atrair a atenção?Para atrair a atenção do seu usuário, guieseus olhos através de poucos (e bemselecionados) elementos visuais.•  Layouts com um visual mais simples.•  Layouts com menos “ornamentação”•  (menos detalhes).
  5. 5. como atrair a atenção?•  Layouts centralizados.•  Layouts com áreas bem definidas e•  poucas colunas.•  Layouts com topos separados.•  Layouts com espaços mais vazios.
  6. 6. como atrair a atenção?•  Layouts que utilizem (com moderação)•  efeitos como reflexos, sombras,•  gradientes.•  Layouts com ícones.•  Layouts com textos grandes.•  Layouts com cores fortes.
  7. 7. * Fonte: artigo “Current style in graphic design for the web”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/current-style/>“ O foco é fazer com que a interface pareça boa, ao invés de fazer com que o designer pareça bom. ”
  8. 8. como atrair a atenção do usuário da sua interface? simplicidade
  9. 9. simplicidadeA tecnologia que, supostamente, servepara tornar a vida mais fácil, tomou umrumo errado.A nova visão do futuro pode serconceituada através de uma únicapalavra: simplicidade.
  10. 10. simplicidadeAtualmente, a simplicidade é umaqualidade em vias de extinção no mundodigital.É hora de romper com a complexidade eintimidar a tecnologia.
  11. 11. * Fonte: livro “Designing interactions”, de Bill Moggridge - <http://www.designinginteractions.com/book> as 10 leis da simplicidade John Maeda é professor de “Media Arts & Sciences” do MIT, fundador do “Simplicity Consortium” no laboratório de Mídia do próprio MIT e designer premiado mundialmente. Ele critica o desconforto que os usuários sentem devido ao excesso de informação e funcionalidades nas interfaces atuais. Maeda defende que simplicidade significa sanidade, é racional e transmite segurança.
  12. 12. as 10 leis da simplicidade 1. Reduzir: A maneira mais simples de alcançar a simplicidade é por meio de uma redução conscienciosa. 2. Organizar: A organização faz com que um sistema de muitos pareça de poucos. 3. Tempo: Economia de tempo transmite simplicidade. 4. Aprender: O conhecimento torna tudo mais simples. 5. Diferenças: Simplicidade e complexidade necessitam uma da outra.
  13. 13. as 10 leis da simplicidade 6. Contexto: O que reside na periferia da simplicidade é definitivamente não periférico. 7. Emoção: Mais emoções é melhor que menos. 8. Confiança: Na simplicidade nós confiamos. 9. Fracasso: Algumas coisas nunca podem ser simples. 10. A única: A simplicidade consiste em subtrair o óbvio e acrescentar o significativo.
  14. 14. simplicidadeMuitos designers ainda cometem o errode dar grande destaque ao impactográfico da tela, em detrimento de todos osoutros possíveis atributos do design.
  15. 15. simplicidadeA maioria dos usuários se cansarapidamente dos gráficos animados ebarulhentos, dos longos downloads, dasirritações da compatibilidade de plug-ins edos estímulos perturbadores quecomplicam interfaces construídas nesteestilo.
  16. 16. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton impacto visual x simplicidade Até mesmos os usuários com conexões de alta velocidade gostam de uma página que carrega rapidamente. O sucesso de telas baseadas em gráficos depende das expectativas do visitante.
  17. 17. simplicidadeSimplicidade é o recurso fundamental dasinterfaces hoje em dia.•  Pixels devem ser usados•  cuidadosamente, para atrair a atenção•  do usuário.•  Cada elemento em cada tela deve•  justificar a sua existência, caso•  contrário, deve ser removido.
  18. 18. simplicidadeO fato do design da interface ser focado,limpo e simples, não significa que tenhaque ser minimalista.Significa que devem ser utilizadas poucascaracterísticas e funcionalidades: apenasaquelas necessárias para se alcançar opropósito da interface.
  19. 19. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/>“ Use a menor quantidade necessária de características e funcionalidades para alcançar o que você precisa. ”
  20. 20. * Fonte: artigo "Cor e seu emprego em interfaces homem-computador na web", de Vanessa Tavares de Oliveira Barros, Gabriela Mager, Rosane Fonseca de Freitas Martins eCristiane Affonso de Almeida Zerbetto“ A interface deve devevista como uma embalagem. Ela ser conter certas características como facilidade de aprendizagem, simplicidade de uso e emitir clareza. Caso contrário, certamente ocorrerão problemas. ”
  21. 21. por quê a simplicidade é boa?•  Porque toda interface tem um objetivo a•  cumprir.•  Porque a atenção do usuário é um•  recurso finito.•  Porque o trabalho do designer é ajudar•  os usuários a encontrarem o que•  procuram (ou notarem o que a interface•  quer que eles percebam).
  22. 22. por quê a simplicidade é boa?•  Porque os objetos na tela atraem os•  olhos. Quanto mais coisas diferentes,•  menor será a chance do usuário•  perceber o que é mais importante.•  Porque é preciso permitir a•  comunicação e reduzir os “ruídos”, ou•  seja, encontrar uma solução que•  faz mais coisas com o mínimo•  possível. Isso é economia/simplicidade.
  23. 23. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/>“ Dadas 2 soluçõessimples é apara um possíveis problema, a mais melhor. ”
  24. 24. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> interfaces simples Elementos desnecessários foram removidos das interfaces acima.
  25. 25. * Fonte: artigo “Simplicity”, de Eric Burke - <http://stuffthathappens.com/blog/2008/03/05/simplicity/> interfaces simples Um produto da Apple... Um produto da Google... O aplicativo da sua empresa.
  26. 26. * Fonte: livro "Designing interactions", de Bill Moggridge - <http://www.designinginteractions.com/book> interfaces simples
  27. 27. como atrair a atenção do usuário da sua interface? layouts centralizados
  28. 28. layouts centralizadosHá alguns anos atrás, uma grandequantidade de layouts ocupavam a telainteira do browser (layouts líquidos).O motivo era simples: a tentativa demostrar a maior quantidade possível deinformações sem usar a barra derolagem.
  29. 29. layouts centralizadosHoje em dia, os usuários se sentem maisconfortáveis ao usar a barra de rolagem.Logo, os designers estão mais dispostosa “rolar” o conteúdo em função dosbenefícios do aumento do espaço embranco nas interfaces.
  30. 30. layouts centralizadosPor esse motivo, basicamente, a maioriadas interfaces hoje em dia ocupa aposição central da janela do browser.Quando o conteúdo é colocado no centroda tela, ele fornece uma sensação deequilíbrio e simplicidade, que reflete aevolução no sentido de um design maislimpo.
  31. 31. * Fonte: artigo "Modern web design style, good web 2.0 design“, de Bem Hunt - <http://www.webdesignfromscratch.com/web-design/current-style/> layouts centralizados Layout de largura fixa Layout líquido Layout de largura fixa e alinhado pela (informações acima e alinhado pelo esquerda. da barra de rolagem). centro.
  32. 32. como atrair a atenção do usuário da sua interface? layouts com menos colunas
  33. 33. layouts com menos colunasAs interfaces simples funcionam melhor.Essas interfaces são “lidas” de umamaneira direta desde o topo até o fundo,sem fazer com que o olho escape(tentando compreender para onde olharprimeiro), resultando em uma experiênciade navegação muito mais sólida e calmado que antes.
  34. 34. layouts com menos colunasMenos colunas dão uma sensação desimplicidade: uma menor quantidade deinformação é comunicada de forma maisclara.Além disso, pelo fato da tela não estarmais completamente preenchida, não sãomais necessárias tantas colunas deinformação.
  35. 35. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> layouts com menos colunas O site da empresa 37Signals, por exemplo, utiliza 2 colunas. A interface é simples e entrega rapidamente a sua mensagem, sem acrescentar informações desnecessárias.
  36. 36. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> layouts com menos colunas A Apple é outro exemplo de simplicidade e elegância. O layout mostra que o designer realmente se questionou sobre a quantidade de boxes, colunas e linhas que ele precisava para desenvolver a interface - eliminando os elementos desnecessários.
  37. 37. como atrair a atenção do usuário da sua interface? topo separado
  38. 38. topo separadoTrabalhar com o topo separado significafazer com que a área da marca e danavegação seja distinta do restante datela.Não há nada de novo nisso. Na verdade,é um princípio utilizado há anos.Mas, essa abordagem é cada vez maisusada hoje em dia.
  39. 39. * Fonte: artigo “Web design trends for 2010”, de Jacqueline Thomas - <http://webdesignledger.com/tips/web-design-trends-for-2010> topo separado Para causar uma impressão de impacto sobre o usuário, a aplicação de cabeçalhos com grandes dimensões é uma tendência. Os cabeçalhos podem ocupar a tela inteira e os visitantes não terão que clicar em nada, apenas rolar a tela para baixo. A idéia principal por trás dos cabeçalhos enormes é fazer com que seus usuários se lembrem de você.
  40. 40. topo separadoO topo deve se distinguir visualmente dorestante da interface para indicar queparte da tela possui característicasdistintas em relação ao conteúdoprincipal.A melhor maneira de fazer isso é atravésda aplicação de blocos de cores fortes.
  41. 41. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> topo separado
  42. 42. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> topo separado O topo é separado através de uma linha sólida, ao invés de um bloco de cor forte.
  43. 43. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> topo separado O layout dá a impressão de que o topo está fora da área da coluna principal.
  44. 44. * Fonte: artigo “Web design trends for 2010”, de Jacqueline Thomas - <http://webdesignledger.com/tips/web-design-trends-for-2010> topo separado O uso de imagens grandes é um recurso alternativo à aplicação de blocos de cores fortes. A imagem grande cria um impacto visual que o usuário não vai esquecer tão cedo. A tendência do uso cada vez maior de imagens grandes tem o objetivo de tornar a navegação mais convidativa e garantir que os usuários irão aprofundar a sua navegação.
  45. 45. por quê separar o topo?•  Apesar de óbvio, é bom saber•  claramente onde a interface começa.•  Além disso, é sempre bom iniciar a•  experiência na interface através de uma•  maneira forte e impactante.
  46. 46. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> topo separado
  47. 47. como atrair a atenção do usuário da sua interface? espaço em branco
  48. 48. espaço em brancoO espaço em branco permite queinformações importantes “saltem” na tela.Além disso, promove descanso para osolhos e transmite uma sensação decalma e ordem.
  49. 49. espaço em brancoPosicionar um conteúdo de forma limpa earejada cria uma experiência mais fácil,ajudando o usuário a se sentir maisrelaxado e mais livre para navegar.
  50. 50. * Fonte: artigo “The visual design of Web 2.0”, de Jonathan Nicol - <http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/> espaço em branco
  51. 51. espaço em branco
  52. 52. espaço em branco
  53. 53. * Fonte: artigo “Web design trends for 2010”, de Jacqueline Thomas - <http://webdesignledger.com/tips/web-design-trends-for-2010> espaço em branco Nem todos os designers concordam que o preto e o branco são os únicos elementos capazes de passar uma sensação de simplicidade. Sites continuarão a contar com muito espaço em “branco” (ou seja, vazio), mas com uma tipografia em negrito e esquemas de cores surpreendentes.
  54. 54. espaço em brancoO espaço em “branco” não precisa,necessariamente, ser branco.Mas tem que ser espaçoso!Muitos designers utilizam grandesmargens para separar elementos e ajudarna leitura da tela.
  55. 55. * Fonte: artigo "Modern web design style, good web 2.0 design“, de Bem Hunt - <http://www.webdesignfromscratch.com/web-design/current-style/> espaço em branco
  56. 56. como atrair a atenção do usuário da sua interface? efeitos
  57. 57. efeitosMuitas interfaces utilizam efeitos (comosombras, gradientes e reflexos), de formamoderada, para aumentar a sensação dequalidade e de realidade do layout.
  58. 58. efeitosEsses efeitos ajudam a fazer com que ovisual da tela se pareça mais sólido e“perfeito”, se aproximando de qualidadestácteis ou estéticas como gotas d´água,botões de plástico brilhante e pisos demármore.Criar elementos com uma aparênciasólida e real pode dar a sensação de quesão palpáveis.
  59. 59. efeitosApesar de agradáveis, alguns dessesefeitos são tão prevalescentes hoje emdia, que há o risco de se tornaremmonótonos.Além disso, não se deve utilizar muitosefeitos atrativos na mesma tela(desviando a atenção do usuário).
  60. 60. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> efeitos
  61. 61. efeitos em 3-dOs efeitos em 3-D fazem com que oselementos “saltem” na interface, masapenas quando o restante da tela érelativamente plano.A regra geral determina que estes efeitossejam utilizados com cuidado e semexagero (não se deve aplicar em tudo natela).
  62. 62. gradientesA utilização de gradientes é capaz desuavizar áreas da tela, a partir de efeitosonde uma cor se transforma,gradualmente, em um tom mais claro oumais escuro (removendo a ilusão desuperfície plana).O gradiente ajuda a criar um certodinamismo para a interface.
  63. 63. gradientesAo ser aplicado no fundo da tela, épossível obter a ilusão de distância.Além disso, também é comum aplicar osgradientes no topo da interface, ajudandoa ressaltar as fronteiras entre o fundo e aárea de visualização do conteúdo.
  64. 64. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> efeitos: gradientes
  65. 65. reflexosA ilusão de reflexo é uma das aplicaçõesmais comuns em gradientes.Efeitos realistas de gotas d´água, esferasde vidro, botões de plástico brilhante,etc., foram muito populares ao longo dosanos.
  66. 66. * Fonte: artigo “The visual design of Web 2.0”, de Jonathan Nicol - <http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/> efeitos: reflexos Nas imagens acima, é possível observar alguns exemplos do visual “mesa molhada” (conhecida também como “mesa de vidro”), “estrelas” (conhecidas também como “flashes”) e “botões de vidro”.
  67. 67. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> efeitos: reflexos As clássicas abas com efeito de plástico brilhante da Apple, ainda utilizadas nos dias de hoje. Esta aba tem a aparência de fibra-de-carbono polida. Mais um efeito de plástico brilhante, desta vez criando a ilusão de superfície convexa. Um efeito similar ao anterior, aplicado em uma forma quadrada parecida com um badge. O ângulo inclinado cria um maior dinamismo para o reflexo. Este botão brilhante usa um reflexo arredondado que sugere uma fonte de luz sobre a superfície em curva. A imagem ao lado possui um reflexo mais difuso, sugerindo um acabamento em vidro.
  68. 68. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> efeitos: reflexos Efeito de “mesa de vidro” aplicado Visual padrão da Apple: “fade-out” sobre um fundo colorido. em uma superfície branca. O efeito reflete a cor do objeto “Fade-out” para ambos os lados. sólido.
  69. 69. estrelas (ou flashes)Este efeito é um rótulo no formato deestrela, alertando sobre algo importantena interface.Geralmente, são utilizados para divulgarpreços ou divulgar serviços de graça.É recomendável que este tipo de efeito sóseja aplicado, no máximo, em uma únicatela da interface.
  70. 70. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> efeitos: estrelas (ou flashes)
  71. 71. bordas arredondadasO uso de bordas arredondadas confereum aspecto informal e divertido para ainterface.
  72. 72. * Fonte: artigo “The visual design of Web 2.0”, de Jonathan Nicol - <http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/> efeitos: bordas arredondadas
  73. 73. como atrair a atenção do usuário da sua interface? ícones
  74. 74. * Fonte: artigo “The visual design of Web 2.0”, de Jonathan Nicol - <http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/>“ Por favor, nada de fotografias de catálogos de imagens!”
  75. 75. íconesChega de usar a clássica fotografia defuncionários sorridentes na primeira telada interface, ou a famosa imagem doaperto de mãos entre 2 “mauricinhos”.Ícones simples são a ordem do dia paratransformar layouts “rígidos”, caretas efora de moda em telas mais simpáticas edivertidas.
  76. 76. * Fonte: artigo “The visual design of Web 2.0”, de Jonathan Nicol - <http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/> ícones
  77. 77. íconesHá alguns anos, os ícones eramutilizados em excesso. Dava a impressãode que existia um ícone para cada link oupara cada aba de navegação.Hoje em dia, os designers utilizam textosde forma mais extensiva (muitas vezes,uma simples palavra funciona melhor doque um ícone).
  78. 78. íconesInterfaces simples e mais espaçosasnecessitam de menos recursos parachamar a atenção dos seus usuários.Por isso, são utilizados menos ícones,desenhados de uma forma mais eficaz(transmitem mais significado nas suasmensagens).
  79. 79. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> ícones Ícones simples e claros. Ícones atraentes. Ícones com riqueza de detalhes (claramente inspirados no Mac OSX).
  80. 80. como atrair a atenção do usuário da sua interface? referências bibliográficas
  81. 81. referências bibliográficas: livros
  82. 82. referências bibliográficas: livros •  Guia de estilos da web: princípios básicos de design para a criação de web sites Patrick J. Lynch Sarah Horton
  83. 83. referências bibliográficas: livros •  Designing interactions •  Bill Moggridge •  http://www.designinginteractions. •  com/book
  84. 84. referências bibliográficas: artigos
  85. 85. referências bibliográficas: artigos•  Current style in graphic design for the web•  Ben Hunt•  http://www.webdesignfromscratch.com/web-design/current-style/•  Web 2.0 how-to design style guide•  Ben Hunt•  http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-•  guide/•  Simplicity•  Eric Burke•  http://stuffthathappens.com/blog/2008/03/05/simplicity/•  Modern web design style, good web 2.0 design•  Bem Hunt•  http://www.webdesignfromscratch.com/web-design/current-style/
  86. 86. referências bibliográficas: artigos•  The visual design of Web 2.0•  Jonathan Nicol•  http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/•  Web design trends for 2010•  Jacqueline Thomas•  http://webdesignledger.com/tips/web-design-trends-for-2010•  Cor e seu emprego em interfaces homem-computador na web•  Vanessa Tavares de Oliveira Barros•  Gabriela Mager•  Rosane Fonseca de Freitas Martins•  Cristiane Affonso de Almeida Zerbetto•  6º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design (2004)
  87. 87. como atrair a atenção do usuário da sua interface? sobre o professor
  88. 88. sobre o professor Eduardo Rangel Brandão atua desde 1995 na criação de produtos digitais. É gestor da equipe de UX (User eXperience) na área de novas mídias da Globosat, onde desenvolve projetos de sites e aplicativos (smartphones, tablets, smart-TVs, set-top boxes, consoles de games, etc.) para canais de televisão como GNT, SporTV, Multishow, Viva, Gloob, Telecine, Universal Channel, GloboNews, Canal Brasil, MegaPix, SyFy, Futura, PremiereFC, Combate, Sexy-Hot, Off, Muu, Philos, entre outros. É professor em cursos de pós-graduação, em disciplinas correlatas a arquitetura de informação, design de interfaces, usabilidade, interação humano-computador e metodologia de pesquisa. Participa do comitê organizador e do comitê técnico científico de congressos internacionais nas áreas de ergonomia, usabilidade, design de interfaces e interação humano-computador. Trabalhou como arquiteto de informação na Globo.com e como designer de interfaces nas empresas Agência Click, Starmedia, Cadê?, MTEC Informática e Rio Datacentro. Atuou em projetos para Amil, Banco do Brasil, Brasil Telecom, Oi, Petrobras, White Martins, Fundação Planetário, Museu Villa-Lobos, Projeto Portinari, Plaza Shopping Niterói, Pinto de Almeida Engenharia, Decta Engenharia, Programa das Nações Unidas para o Desenvolvimento e Programa de Despoluição da Baía de Guanabara. Publicou diversos trabalhos (entre capítulos de livros, monografias, dissertações e artigos em congressos), concluiu 7 orientações e 38 co-orientações de monografias de alunos de pós-graduação lato sensu e participou de 44 bancas examinadoras em cursos de pós-graduação lato sensu. TITULAÇÃO: mestre em interação humano-computador, especialista em ergonomia e usabilidade e bacharel em desenho industrial, nas habilitações de comunicação visual e projeto de produto.
  89. 89. fim :-)Eduardo Rangel Brandão, M.Sc.brandaoedu@gmail.comwww.eduardobrandao.com

×