A Importância do Design no E-commerce

31.198 visualizações

Publicada em

Publicada em: Design
6 comentários
103 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
31.198
No SlideShare
0
A partir de incorporações
0
Número de incorporações
18.330
Ações
Compartilhamentos
0
Downloads
0
Comentários
6
Gostaram
103
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

A Importância do Design no E-commerce

  1. 1. Ricardo Panini AD.BRAZIL Sócio e Diretor de Criação Pro ssional com 12 anos de experiência com internet, Publicitário, Diretor de Arte / Criação, Apaixonado por Design de Interface e Branding. Trabalha com Internet desde o início do marketing digital no Brasil, passando por diversas agências. Criação e coordenação para clientes como Amil, Aché, BankBoston, Banco Nossa Caixa, Banco Real, Banco Votorantim, Ga sa, IBI, iG, Lilly, Microsoft , PanAmericano, Panasonic, Philips, Telefônica, Sano -Aventis, Senac, TVA, Universidade Anhembi Morumbi e Wal-Mart.
  2. 2. DA me rce AGEN ncia no e- com ortâ ai mp e su sa? sign .D e 01 mo o usuá rio p en uR OI? 0 2 . Co se sse nci ais ent ar o se dic a aum .1 0 ode 0 3 od esig np mo 0 4 . Co es uce sso es d 0 5. Cas
  3. 3. m e rce e -c om cia no por tân ua im gn es . esi 0 1 D
  4. 4. Denomina-se design qualquer processo técnico e criativo relacionado à con guração, concepção, elaboração e especi cação de um artefato. Esse processo normalmente é orientado por uma intenção ou objetivo, ou para a solução de um problema. Atualmente as mais comuns são o design de produto, Designer: Arne Jacobsen Peça: Poltrona The Egg design visual, design de moda e o design de interiores. Wikipédia
  5. 5. "Na Sony, supomos que todos os produtos de nossos concorrentes terão basicamente a mesma tecnologia, o mesmo preço, o mesmo desempenho e as mesmas características. O design é a única coisa que diferencia um produto do outro no mercado." Norio Ohga, presidente e CEO, Sony
  6. 6. O designer que tornou isto realidade... Jonathan Ive, nascido em 1967 na cidade de Londres, mudou-se para San Francisco em 1992 para ser integrante da equipe de designers da Apple Computers Inc. No ano de 1996, Ive foi promovido a líder do departamento de design industrial da empresa onde comandou a criação de uma série de produtos de sucesso que iniciou com o lançamento do primeiro iMac translúcido em 1998.
  7. 7. Em nosso caso... pessoas usabilidade criação design layout tecnologia arquitetura de informação
  8. 8. E por que é importante? Crédibilidade dos usuários norte americanos admitem fazer julgamento 75% sobre a credibilidade de uma empresa baseado no design do seu site. Fonte: Fogg, B.J., Stanford Guidelines for Web Credibility, Persuasive Technology Lab. Stanford University, 2002 (revised November 2003)
  9. 9. E por que é importante? Con ança dos compradores norte americanos concordam 68% que descon am de uma loja que não tenha um design pro ssional. Fonte: eMarketer, 2006
  10. 10. en sa? ári op ou su o 0 2 . Com http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  11. 11. Basicamente, os hábitos dos usuários da Web não são assim tão diferentes dos hábitos dos clientes em uma loja. Eles entram em sua loja, olham por todos os lados, clicam no primeiro link que detém seu interesse ou coisa que lembre o que procura. Na verdade, grande parte da sua loja passa desapercebido pelo usuário.
  12. 12. Usuários não lêem, eles escaneiam. Analisando uma página da web, o usuário xa alguns pontos na página que vão guiá-lo durante sua navegação. Observe os pontos "quentes" no meio das frases. Isso é típico para o processo de escaneamento.
  13. 13. Menos é mais Muito simples: Se uma loja não é capaz de atender às expectativas do usuário, então designer não fez seu trabalho bem feito e a empresa perde dinheiro. Quanto mais difícil de chegar a informação ou confusa a navegação maior a possibilidade do usuário deixar a loja.
  14. 14. Usuários não fazem as melhores escolhas. Eles escolhem a primeira opção que julgam correta e há boa chance de não encontrar exatamente o que busca. Filtros e navegação alternativa (cross selling, content, etc) é uma boa solução para facilitar a navegação do usuário. Figuras ilustram que leitura linear não funciona bem na web
  15. 15. n ciais se sse ica 0 3 . 1 0d http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  16. 16. 1. Não faça o usuário pensar De acordo com a primeira lei de Krug, de usabilidade, a página da web deve ser óbvia e auto-explicativa. Quando você está criando um site, seu trabalho é se livrar os usuários de dúvidas - eles precisam fazer as decisões de forma consciente, considerando prós, os contras e as alternativas.
  17. 17. 2. Não esbanjar paciência dos usuários Seu objetivo é fazer com que o usuário encontre o que ele busca da maneira mais rápida possível. Facilitar a navegação, contar com ferramentas de busca e ltros, entrada de dados simpli cada e nalização de pedidos rápida e e ciente pode melhorar muito a conversão de sua loja.
  18. 18. 3. Gerir e guiar a navegação Centrando a atenção dos usuários para as áreas especí cas do site, com um uso moderado de elementos visuais podem ajudar os visitantes a ir do ponto A ao ponto B. Em outras palavras: quanto menos o usuário pensar no que precisa acontecer, melhor é a experiência, que é o objetivo da usabilidade em primeiro lugar.
  19. 19. 4. Deixe claro seu objetivo Designs modernos são efetivos por sua abordagem de orientar visualmente com 1-2-3-feito- passos, grandes botões com efeitos visuais etc. Essas orientações são extremamente e cazes, pois conduzem os visitantes através do conteúdo do site de uma maneira muito simples e user-friendly.
  20. 20. 5. Faça uso da escrita e caz A Web é diferente de impressão e é necessário ajustar o estilo de escrita com as preferências dos usuários e os hábitos de navegação. Escrita promocional não será lida. Longos blocos de texto sem imagens e palavras em negrito ou itálico serão ignorados. Linguagem exagerada será ignorada.
  21. 21. 6. Seja simples "Keep it simple" princípio (KIS) deve ser o objetivo principal do design do site. Os usuários raramente entram em um site para desfrutar do design, além disso, na maioria dos casos eles estão procurando a informação, apesar do design. Esforce-se pela simplicidade, em vez de complexidade.
  22. 22. 7. Não tenha medo de respiros Não só ajudam a reduzir a carga visual para os visitantes, mas torna possível perceber as informações apresentadas na tela. Quando um visitante se aproxima de um novo layout, a primeira coisa que ele tenta fazer é uma varredura da página e dividir a área de conteúdo em pedaços de informação.
  23. 23. 8. Comunicação E caz Em seus trabalhos sobre a comunicação visual e caz, Aaron Marcus a rma três princípios fundamentais: Organizar: Economize: Comunique-se: proporcionar ao fazer mais com a interface deve usuário uma menos elementos manter equilíbrio em estrutura clara e visuais. Três pontos legibilidade, tipogra a, consistente. importantes a serem e simbologia. Use max. Coerência, layout, considerados: 3 tipos de letra, no relacionamentos e simplicidade, clareza máximo de 3 navegabilidade são e ênfase. tamanhos de ponto - importantes no máximo de 18 conceitos de palavras ou 50-80 organização. As caracteres por linha de mesmas convenções texto. e regras devem ser aplicadas em todos os elementos. http://www.amanda.com
  24. 24. 9. As convenções são nossos amigos Um site tradicional nem sempre é chato. Na verdade, as convenções são muito úteis, já que diminuem a curva de aprendizagem e a necessidade de descobrir como as coisas funcionam. Um bom exemplo é a tela da Amazon traduzida para russo ao lado.
  25. 25. 10. Faça testes de usabilidade Usabilidade é um termo usado para de nir a facilidade com que as pessoas podem utilizar uma ferramenta ou objeto a m de realizar uma tarefa especí ca e importante. A usabilidade pode também se referir aos métodos de mensuração e ao estudo dos princípios por trás da e ciência percebida de um objeto.
  26. 26. uR OI? o se en tar ea um np od e sig o od 0 4 . Com
  27. 27. In uência no Varejo das vendas devem ser in uenciadas ou 43% feitas através da internet até 2012 Forrester: “The Web’s Impact on In-Store Sales: US Cross-Channel Sales Forecast, 2006 to 2012” and U.S. Dept. of Commerce
  28. 28. In uência no B2B de possíveis compradores usam a internet para 83% pesquisar e encontrar potenciais vendedores * Enquiro: “Business to Business Survey 2007.”
  29. 29. m a is t ur am es fa res sit el ho M
  30. 30. Como o design ...é projetado 0 25 50 75 100 Home Page Categória SKU CheckOut Landing Page
  31. 31. Como o design ...deveria ser (ROI) 0 25 50 75 100 CheckOut Landing Page SKU Categória Home Page
  32. 32. Utilize Landing Pages A primeira impressão é a que ca
  33. 33. Orientações para produção de landing pages • Separe do site para ter mais destaque • Ampliação da mídia • Menos texto e mais imagens • Call to action forte e claro (botões, formulários, telefones, etc) • Personalize quando possível • Utilize segmentação
  34. 34. Aparência e imagem coerentes Banner AD ad: Banner Landing Page
  35. 35. Ofereça o que você promete em sua mensagem Banner AD Landing Page Landing Page (onde está a oferta?)
  36. 36. Otimize o seu carrinho de compras Qual o número médio de abandono de carrinho? A. 28% B. 59% C. 46% D. 34%
  37. 37. Otimize o seu carrinho de compras Qual o número médio de abandono de carrinho? A. 28% B. 59% C. 46% D. 34% MarketingSherpa E-Commerce study, 2006
  38. 38. Por que este alto número de abandonos? 0 7,5 15 22,5 30 Comparação Frete está muito alto 30 Não tem tempo de terminar a compra 27 Produto fora de estoque 27 16 Não compreende o processo de compra 8 Shopping com problemas 8 Outro 7 Preço muito alto 7 Produto não é o esperado 3 Falta de meio de pagamentos 2 MarketingSherpa E-Commerce study, 2006
  39. 39. Mais algumas dicas Carrinho Sinalize bem os passos e evite o uso de botões todos iguais.
  40. 40. Mais algumas dicas Carrinho Procure deixar claro os passos que o usuário terá de percorrer para nalizar sua compra e informações importantes como preço e fechar pedido.
  41. 41. Mais algumas dicas Carrinho Trabalhe grupos lógicos claros e informações importantes em destaque.
  42. 42. Mais algumas dicas Carrinho Utilize respiros e fontes grandes para facilitar o entendimento das informações.
  43. 43. Mais algumas dicas Checkout único O checkout único, aumenta a chance de fechamento de pedido sem dispersão ou abandono.
  44. 44. Mais algumas dicas Checkout único You Know Single-Page Checkout Works When… Você sabe que funciona quando...
  45. 45. Orientações para produção do checkout de sua loja • Indicador de Progresso • Imagens em miniatura dos produtos no carrinho • Formatação automática dos campos • Mensagens de erro “web 2.0” • Botões priorizados e com redação clara • Fornecer todas as informações sobre compra - transporte, informação de retorno, etc • Checkout único
  46. 46. caso de tudo Es
  47. 47. Antes Depois
  48. 48. Antes Depois
  49. 49. e After Antes Depois
  50. 50. e After Antes Depois
  51. 51. Resultados por uma simples atualização de design er redução de 20% de abandono no processo de checkout
  52. 52. ce sso de su es 0 5 . Cas
  53. 53. Diesel home apenas um destaque relacionado a campanha
  54. 54. Diesel página de categoria com destaque interativo
  55. 55. Diesel lista de produtos horizontal, com quick view
  56. 56. Diesel página do produto simples e clara
  57. 57. Diesel produto adicionado aparece através de modal
  58. 58. Diesel carrinho objetivo
  59. 59. SonyStyle destaque claro, menu principal e menu emocional
  60. 60. SonyStyle página de categoria simples e bem organizada
  61. 61. SonyStyle página do produto vendedora
  62. 62. SonyStyle carrinho diferenciado, porém claro
  63. 63. AppleStore home com grupos lógicos claros e de nidos
  64. 64. AppleStore a apple trabalha sua loja com objetivo claro de vendas, caso queira conhecer com detalhes o produto visite o site institucional da marca
  65. 65. AppleStore carrinho diferenciado, parecido com Sony Style
  66. 66. AppleStore resumo do carrinho sempre a mão
  67. 67. AD O BR IG O ni ni Pa .br o com i ca rd azil. r R br om.b n/rpan ad il.c ni@ raz /i ini ini p ani db in. com /rpan a w. .linked er.com ww //br witt tp: ht //ww w.t ht tp:
  68. 68. Referências: http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Designing Effective User Interfaces by Suzanne Martin Summary on Web Design UID presentation (Flash) Research-Based Web Design & Usability Guidelines “The psychology of computer programming” by Gerald Weinberg “Designing Web Usability” by Jakob Nielsen [JN / DWU] “Prioritizing Web Usability” by Jakob Nielsen “Don’t Make Me Think” by Steve Krug “Usability for the Web: Designing Web Sites that Work” by Tom Brinck, Darren Gergle, Scott Wood A Summary of Principles for User-Interface Design http://www.sobresites.com/design/artigos/valordodesign.htm A importância do design para as empresas e indústrias... o valor do design. http://webdesignforroi.com Web design for ROI

×