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

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

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

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

6. "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

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

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

9. 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)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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%

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

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

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

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

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

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

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

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

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

47. caso
de
tudo
Es

48. Antes Depois

49. Antes Depois

50. e After
Antes Depois

51. e After
Antes Depois

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

53. ce sso
de su
es
0 5 . Cas

54. Diesel
home apenas um destaque relacionado a campanha

55. Diesel
página de categoria com destaque interativo

56. Diesel
lista de produtos horizontal, com quick view

57. Diesel
página do produto simples e clara

58. Diesel
produto adicionado aparece através de modal

59. Diesel
carrinho objetivo

60. SonyStyle
destaque claro, menu principal e menu emocional

61. SonyStyle
página de categoria simples e bem organizada

62. SonyStyle
página do produto vendedora

63. SonyStyle
carrinho diferenciado, porém claro

64. AppleStore
home com grupos lógicos claros e de nidos

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

66. AppleStore
carrinho diferenciado, parecido com Sony Style

67. AppleStore
resumo do carrinho sempre a mão

68. 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:

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