A Importância do Design no E-commerce

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.

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

m e rce e -c om cia no por tân ua im gn es . esi 0 1 D

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

"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

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.

Em nosso caso... pessoas usabilidade criação design layout tecnologia arquitetura de informação

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)

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

en sa? ári op ou su o 0 2 . Com http://www.smashingmagazine.com/2008/01/31/10-principles-of-eﬀective-web-design/

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.

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.

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.

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

n ciais se sse ica 0 3 . 1 0d http://www.smashingmagazine.com/2008/01/31/10-principles-of-eﬀective-web-design/

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

uR OI? o se en tar ea um np od e sig o od 0 4 . Com

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

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.”

m a is t ur am es fa res sit el ho M

Como o design ...é projetado 0 25 50 75 100 Home Page Categória SKU CheckOut Landing Page

Como o design ...deveria ser (ROI) 0 25 50 75 100 CheckOut Landing Page SKU Categória Home Page

Utilize Landing Pages A primeira impressão é a que ca

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

Aparência e imagem coerentes Banner AD ad: Banner Landing Page

Ofereça o que você promete em sua mensagem Banner AD Landing Page Landing Page (onde está a oferta?)

Otimize o seu carrinho de compras Qual o número médio de abandono de carrinho? A. 28% B. 59% C. 46% D. 34%

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

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

Mais algumas dicas Carrinho Sinalize bem os passos e evite o uso de botões todos iguais.

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.

Mais algumas dicas Carrinho Trabalhe grupos lógicos claros e informações importantes em destaque.

Mais algumas dicas Carrinho Utilize respiros e fontes grandes para facilitar o entendimento das informações.

Mais algumas dicas Checkout único O checkout único, aumenta a chance de fechamento de pedido sem dispersão ou abandono.

Mais algumas dicas Checkout único You Know Single-Page Checkout Works When… Você sabe que funciona quando...

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

caso de tudo Es

Antes Depois

e After Antes Depois

Resultados por uma simples atualização de design er redução de 20% de abandono no processo de checkout

ce sso de su es 0 5 . Cas

Diesel home apenas um destaque relacionado a campanha

Diesel página de categoria com destaque interativo

Diesel lista de produtos horizontal, com quick view

Diesel página do produto simples e clara

Diesel produto adicionado aparece através de modal

Diesel carrinho objetivo

SonyStyle destaque claro, menu principal e menu emocional

SonyStyle página de categoria simples e bem organizada

SonyStyle página do produto vendedora

SonyStyle carrinho diferenciado, porém claro

AppleStore home com grupos lógicos claros e de nidos

AppleStore a apple trabalha sua loja com objetivo claro de vendas, caso queira conhecer com detalhes o produto visite o site institucional da marca

AppleStore carrinho diferenciado, parecido com Sony Style

AppleStore resumo do carrinho sempre a mão

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:

Referências: http://www.smashingmagazine.com/2008/01/31/10-principles-of-eﬀective-web-design/ Designing Eﬀective 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

http://www.cerebrum.com.br	2988
http://aulasjoaorafael.blogspot.com.br	638
http://blog.ikeda.com.br	387
http://www.comunidademagento.com.br	311
http://blog.adbrazil.com.br	246
http://aulasjoaorafael.blogspot.com	208
http://www.blogusblog.com.br	154
http://alexbarbosa.com	149
http://www.aulasjoaorafael.blogspot.com.br	121
http://www.slideshare.net	101
http://bloglojavirtual.ikeda.com.br	94
http://www.ecoopertecce.com.br	66
http://www.marketclick.com.br	42
http://www.empreendejovem.com.br	26
http://tarikferreira.blogspot.com	25
http://murylojuliani.wordpress.com	22
http://jorgeflauzino.com.br	19
http://blog.rakuten.com.br	16
http://arthurbonora.blogspot.com	14
http://empreendejovem.blogspot.com	12
http://www.aulasjoaorafael.blogspot.com	12
http://us-w1.rockmelt.com	10
http://tarikferreira.blogspot.com.br	9
http://local.spacoweb.com:81	7
http://blogdosales.wordpress.com	7
http://aulasjoaorafael.blogspot.de	6
http://www.spacoweb.com	6
http://marketclick.com.br	5
http://fabiosteffen.tumblr.com	5
http://localhost:81	4
http://aulasjoaorafael.blogspot.pt	4
http://www.arthurbonora.com.br	4
http://dmaisstore.blogspot.com	4
http://www.evolueweb.com.br	3
http://www.empreendejovem.com	3
http://comunidademagento.com.br	3
http://www.empreendejovem.blogspot.com	2
http://static.slidesharecdn.com	2
http://midia.prodix.com.br	2
http://paper.li	2
http://local.spacoweb.com	2
http://ikedarevolution.typepad.com	2
http://www.marlonlemes.com.br	2
https://twimg0-a.akamaihd.net	1
http://renatocarvalho.com	1
http://www.midia.prodix.com.br	1
http://www.lmodules.com	1
http://a0.twimg.com	1
http://o-tiago.com.br	1
http://webcache.googleusercontent.com	1
http://twitter.com	1

A Importância do Design no E-commerce

by Ricardo Panini on Apr 08, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

52 Embeds 5,754

Statistics

A Importância do Design no E-commerce — Presentation Transcript