O documento discute conceitos importantes para o design de negócios digitais como design, usabilidade, navegabilidade, encontrabilidade e comprabilidade. Ele também aborda como as pessoas avaliam a credibilidade de sites e como a confiabilidade influencia as decisões de compra dos usuários.

1. EURIPEDES MAGALHÃES - @EURIPEDESM
Design e Usabilidade

2. DESIGN PARA NEGÓCIOS DIGITAIS
O design atua como ferramenta importante dentro
dos projetos digitais, mas sua função não é somente
“embelezar” produtos ou “chamar atenção”.
O design é reponsável por auxiliar e direcionar uma
comunicação mais assertiva, pois trabalha com
objetivos claros e com forte estudo nos usuários.

3. CONCEITOS DO DESIGN PARA E-COMMERCE
Como deve ser:
Emocional + Objetivo + Usual
O design pode ajudar a criar credibilidade e confiança, fatores
primordiais para o sucesso das vendas.
Público
Pesquisa Interface

4. COMO AS PESSOAS AVALIAM A CREDIBILIDADE?
15 de abril de 2012
Os participantes
comentaram sobre
vários assuntos ao
avaliar a credibilidade
de sites.
http://www.consumerwebwatch.org/dynamic/
web-credibility-report-evaluate.cfm

5. COMO AS PESSOAS AVALIAM A CREDIBILIDADE?
Percentagem de
comentários relativos a
aparência de design, por
categoria
http://www.consumerwebwatch.org/dynamic/web-credibility-report-evaluate.cfm

6. EURIPEDES MAGALHÃES - @EURIPEDESM
Usabilidade

7. USABILIDADE
Presente na Arquitetura de Informação, UXD e em
qualquer lugar que uma pessoa use algo, usabilidade
ajuda a deixar tudo melhor, ou pelo menos resolver
problemas sérios que podem gerar situações
perigosas.

8. MEMÓRIA HUMANA VS COMPUTACIONAL
SELETIVA INDISCRIMINADA
EVOLUTIVA ESTÁVEL
ASSOCIATIVA DISCRETA
Faber Ludens

9. Norman (2006) - Conhecimento na cabeça

10. Conhecimento no mundo

11. Conhecimento no mundo

12. Conhecimento no mundo

13. USABILIDADE - COMPONENTES
Aprendizagem - O quanto é difícil completar tarefas
básicas no primeiro encontro com a interface?
Eficiência - Para os usuários que já tenham alguma
familiaridade com a interface, como podem fazer tarefas
mais rápido?
Lembrança - Depois de um tempo sem acessar a interface,
o quanto será difícil para alcançar proeficiência no uso?
Erros - Quantos erros os usuários fazem, o quanto são
preocupantes esses erros e como eles são corrigidos?
Satisfação - O quanto é prazeroso usar essa interface?

14. A IMPORTÂNCIA DO CONTEXTO DE USO
Cada usuário acessa o e-commerce com um objetivo
específico, cada usuário tem um perfil de compra que
deve ser analisado para que seja oferecido para ele
um conteúdo adequado e também ofertas adequadas.
Por isso, pensar no contexto em que o usuário vai
utilizar o site poder dar subsídios interessantes para
uma melhor criação.
Por exemplo, como um usuário procuraria um celular
em uma Loja Própria ou em uma Multiloja?

16. CONSTRUINDO O CONTEXTO DE USO
Construir o perfil Construir Construir as
dos consumidores ambiente de uso tarefas básicas

17. CRIANDO A EXPERIÊNCIA DE USO
Arquitetura de
Informação
Indicadores de
Layout das Telas
Performance
Avaliar a
Usabilidade

18. EURIPEDES MAGALHÃES - @EURIPEDESM
Navegabilidade

19. COMO OS USUÁRIOS PENSAM?
Steve Krug em seu livro “Não me faça pensar”, afirma que
quanto menos o usuário pensa, melhor é o entendimento
do conteúdo na página.
No artigo de Vitaly Friedman no site Smashing Magazine,
ele cita que os usuários não usam as lojas digitais de
forma muito diferente de lojas físicas.
Os usuários olham as páginas de forma geral, grande
parte do conteúdo passa dispercebido, pois ele clica em
algo do seu interesse ou em algo que relembre o que ele
procura.
http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/

20. COMO OS USUÁRIOS PENSAM?
Os usuários costumam “escanear” as páginas em
sua navegação procurando pontos para guiá-los na
navegação pela página

21. COMO OS USUÁRIOS PENSAM?
Basicamente:
• Usuários apreciam qualidade e credibilidade
• Usuários não leêm, eles escaneiam a página
• Usuários são impacientes e insistem em ganhar uma
gratificação instantânea (expectativa/entrega)
• Usuários não fazem as melhores escolhas

22. COMO OS USUÁRIOS PENSAM?
Usuários não fazem as melhores escolhas porque
escolhem a primeira opção que julgam adequada, mas
não exatamente o que buscam. Filtros e navegações
intuitivas podem ajudá-lo no processo.

23. 10 DICAS:
1. Não faça o usuário pensar
Ajude o usuário o usuário a fazer decisões de compras
conscientes o livrando de dúvidas.

24. 10 DICAS:
2. Não abuse da paciência do usuário
Facilite a navegação,
com filtros, ferramentas
de buscas e facilite
a finalização dos
pedidos.

25. 10 DICAS:
3. Guie a navegação e os focos de atenção
Clareza na informação,
uso não exagerado
de elementos,
não sobrecarrecar
a memória do
usuário com muitos
pensamentos do que
ele precisa fazer.

26. 10 DICAS:
4. Deixe claro o objetivo da página
Guie o usuário pelo percurso da página, sites efetivos
agradam pelos bons passo-a-passo e pelos botões
grandes são “user friendly” e ajudam no processo.

27. 10 DICAS:
5. Escreva de forma eficaz
Diferente da impressão,
o texto da internet é
entendido de forma
diferente, por exemplo,
textos longos não
são lidos e linguagem
promocional também
não, além dos
problemas com palavras
em bold ou itálico que
são ignoradas.

28. 10 DICAS:
5. Escreva de forma eficaz
Dicas:
• Use frases curtas e concisas (direto ao ponto)
• Pense que os usuários irão escanear o layout e se
aproveite disso usando elementos visuais, listas com
bullets, mostre o que o usuário precisa e quer ver
• Uma promoção não precisa soar como um anúncio,
mostre para o usuário razões e objetivos para que ele
use aquele serviço ou para que ele continue no seu site

29. 10 DICAS:
6. Opte por simplicidade
Usuários raramente entram em um site para desfrutar
do seu design, embora ele seja importante e faça com
que o usuário sinta-se imerso no contexto, “keep it
simple”-principle (KIS), pense na informação que vai
ajudar o usuário.

30. 10 DICAS:
7. Trabalhe bem os respiros das páginas
Espaços em branco ajudam o usuário a dividir
conteúdos e áreas diminuindo sua carga visual.
Trabalhe hierarquia de
informação para reduzir a
complexidade de leitura dos
elementos da página.

31. 10 DICAS:
8. Comunique eficazmente
Aaron Marcus lista três princípios fundamentais que
podemos chamar de “linguagem visual”
• Organize
Consistência, coerência, navegabilidade.
• Economize
Simplicidade, clareza e ênfase no objeto
• Comunique
Legibilidade, simbologia, tipografia, 3 tipos de fonte no
máximo, 3 corpos de fonte no máximo

32. 10 DICAS:
9. Aproveite-se das convenções
Ser tradicional não significa ser chato. Aproveitar-se da
de alguns itens convencionais ajuda na diminuição da
curva de aprendizagem.
Convenções ajudam a página a ganhar confiança,
segurança e
consequentemente
credibilidade.

33. 10 DICAS:
10. Faça testes de usabilidade
“If you want a great site, you’ve got to test.”
Os testes podem ajudar no entendimento do uso do site
pelos seus usuários, na confirmação da eficiência do site.
Alguns pontos importantes:
• Segundo Steve Krug, testar um usuário é 100% melhor que não testar
nenhum;
• Testes são processos interativos onde podem se perceber erros, consertá-
los e testar novamente
• Testes de usabilidade produzem resultados usuais, que devem ser usados
para resolver os problemas de design do projeto
• Segundo Weinberg, o desenvolvedor é a pessoa inadequada para testar o
funcionamento do site

34. EURIPEDES MAGALHÃES - @EURIPEDESM
Encontrabilidade

35. A estratégia da encontrabilidade
pode ser resumida em uma frase:
“A melhor maneira de
encontrar o seu usuário é
ser encontrado por ele”
Felipe Morais

36. ENCONTRABILIDADE
No livro lançado recentemente o Google discursa sobre
o novo momento da verdade na decisão de compras. A
internet é fator fundamental nesse ponto.
Modelo mental tradicional:
www.zeromomentoftruth.com/

37. ENCONTRABILIDADE
Nesse novo pensamento, o usuário se utiliza da internet
não só para conhecer sobre o produto, mas para
aprender sobre o assunto e obviamente encontrá-lo
para compra.
Novo modelo
mental:
www.zeromomentoftruth.com/

38. ENCONTRABILIDADE
A construção da página deve levar em consideração
essa nova situação, um bom trabalho de SEO é
fundamental na encontrabilidade da página. A
construção do conteúdo deve ser pautada nesse
pensamento.
A tecnologia utilizada também vai influenciar a
encontrabilidade do site. Códigos criptografados são
mais difíceis de serem indexados.
É importante pensar que a encontrabilidade vai além
dos mecanismos de busca, tem relação direta com a a
construção de conteúdo voltada para o usuário.

39. ENCONTRABILIDADE
Flash
É possível indexar aplicações em flash a partir da
criação de um conteúdo estático que duplica o
conteúdo compilado, utilizando o SWFobject é possível
deixar o conteúdo na mesma URL.
Ajax, Javascript e outros conteúdos criptografados
Por ser uma tecnologia assíncrona, onde é possível
apresentar conteúdo sem página, o ajax é um impecílio
para os mecanismos de busca. Para resolver isso o
conteúdo deve ser pré-carregado na página, senão esse
conteúdo pode ficar invisível

40. ENCONTRABILIDADE VS CMS
O Sistemas de Gerenciamento de Conteúdo são
sistemas criados para auxiliar o administrador do
site a organizar o conteúdo, porém alguns sistemas
de gerenciamento dificultam a leitura dos sistemas.
Vejamos alguns problemas que podem ser evitados:
URLs Dinâmicas
Os buscadores não entendem uma página de conteúdo,
eles entendem uma mudança de caminho, isso faz
com que o buscador copie acidentalmente o conteúdo
várias vezes, isso prejudica a performance de busca.

41. ENCONTRABILIDADE VS CMS
Vários caminhos de URL
Em e-commerce, um problema típico é a progressão
do ciclo de vida do produto, que vai acumulando várias
URLs, é importante se certificar que por mais que
existam vários links para aquela URL, é importante que
ela seja única. Ex.: Quando o produto aparece em uma
lista de presentes e também na sua categoria.
Obs.: Mais exemplos no livro “O Guia para Projetar UX”.

42. ENCONTRABILIDADE / CONTEÚDO
O conteúdo é extremamente importante nesse
processo, o design da página deve ser construído
pensando no conteúdo e conteúdo construído no
pensamento da página.
Palavras-chaves no conteúdo são muito importantes, os
profissionais de SEO devem participar do processo de
construção de conteúdo para que possam ser definidas
uma lista de palavras para serem utilizadas no texto.
Os sites de busca costumam procurar palavras
em vários lugares dos sites para a indexação, com
conteúdos interligados e complementares

43. ENCONTRABILIDADE / CONTEÚDO
Dicas:
Use Mapas do Site
É comum atualmente esconder essas páginas
na criação de sites, porém eles ajudam não no
posicionamento da página, mas ajudam o buscador
a entender a estrutura do diretório e a encontrar
conteúdo novo e atualizado.
Mantenha o conteúdo Atualizado
O crescimento de conteúdo do site ajuda-o a manter
uma boa colocação nos resultados de busca. Não
significa que o conteúdo deva ser modificado, mas que
novos conteúdos possam ser acrescentados.

44. EURIPEDES MAGALHÃES - @EURIPEDESM
Comprabilidade

45. COMPRABILIDADE
É muito importante que o processo de finalização de
compra de um site seja simples.
Econtrar um produto, escolher formas de pagamento
e frete, e finalizar a compra facilmente são muito
importantes.
Otimizar o carrinho de compras é uma das tarefas mais
importantes no design e estratégicas das lojas online.
59% é o número médio de abandono nessa área do site*
*MarketSherpa E-Commerce study, 2006

46. COMPRABILIDADE
Abandono do carrinho
*MarketSherpa E-Commerce study, 2006 - Gráfico por Ricardo Panini

47. COMPRABILIDADE
Alguma dicas segundo Ricardo Panini:
• Sinalizar bem os passos e evitar botões iguais;
• Deixar claro todos os passos que o usuário percorrerá
até a finalização da compra;
• Informações importantes devem ter destaque
• Respiros visuais e fontes grandes e espaços corretos
facilitam o entendimento das informações
• Utilize um checkout único
http://www.slideshare.net/rpanini/a-importncia-do-design-no-ecommerce

48. COMPRABILIDADE
Exemplo de Checkout único:
Mais exemplos em: http://www.1stwebdesigner.com/inspiration/excellent-shopping-cart-
designs-showcase-and-best-practices/

49. COMPRABILIDADE
Cafepress:
• Opção de salvar
o carrinho de
compras
• Integração com
PayPal
• Atualização de
quantidade
• Múltiplos métodos
de envio

50. COMPRABILIDADE
American Eagle:
• Call to Action
de frete gratuito
a partir de um
valor específico
• Sumário
de compra
interessante
• Recomendações
de produtos
antes da
finalização da
compra

51. COMPRABILIDADE
BlueNile:
• Processo de compra visual
• Opção de continuar comprando ou finalizar a compra
• Apresentação
do número
da ordem de
compra
• Informações de
contatos
• Frete grátis via
FedEx
• Data aproximada
da entrega

52. EURIPEDES MAGALHÃES - @EURIPEDESM
Confiabilidade

53. CONFIABILIDADE E CREDIBILIDADE
Com o crescimento das lojas virtuais prontas, cresce também
a dúvida dos consumidores sobre a segurança e qualidade
do serviço, o medo de clonagem de cartões, problemas com
entrega podem gerar um abandono na compra.
Em um artigo para o site E-commerce Brasil, Mateus Toledo
dá algumas dicas que ajudam além de deixar informações na
área de “Políticas de Privacidade e pagamento”.
Com o entendimento de que essa área tem uma visibilidade
praticamente nula e sugere:
• No campo de finalização da compra, deixe um campo para que o usuário
tenha que dar um aceite nos termos e condições;
• Tenha um sistema de avaliação da loja e não tenha medo de deixar
isso aberto nas redes sociais, isso ajudará a mostrar o quanto sua loja é
transparente e também ajudará você a melhorá-la;

54. CONFIABILIDADE E CREDIBILIDADE
• Utilize um SSL (Secure Socket Layer) próprio, pois é comum hoje que
bancos façam propaganda grande para que as pessoas se preocupem
com a segurança dos dados. Um SSL compartilhado pode gerar uma
desconfiança a respeito;
• Utilize um sistema de verificação de segurança, utilizar o selo de Site
Blindado, Site Forte, ou algum outro;
• Para ajudar na confiança dos desconfiados, no rodapé do site, além de
colocar informações sobre direitos reservados, colocar o CNPJ ajuda na
conversão dos desconfiados;
• Não fuja das reclamações e responda os questionamentos feitos em sites
como Reclame Aqui, Confiômetro, etc.
http://www.ecommercebrasil.com.br/artigos/credibilidade-e-confiabilidade-um-problema-
no-e-commerce/

55. CONFIABILIDADE E CREDIBILIDADE
Robson Tavarone cita em um artigo para o site E-commerce
News um case de um cliente que tinha 800 acessos únicos
diários mas nenhuma conversão. Na análise do site do cliente
o que foi encontrado:
• Não havia nenhum selo de segurança a qual a loja pertencia;
• Não aparecia o Cadeado de Segurança – SSL (Security Socket Layer)
quando o cliente entrava com seus dados;
• No navegador, não apareceria antes do domínio o HTTPS;
• A Loja somente vendia por depósito bancário e SEDEX a Cobrar;
• Não havia sistema de rastreamento de mercadorias;
• Não eram visíveis as políticas de Troca & Devolução, Formas de
Pagamento e Envio;
http://ecommercenews.com.br/artigos/tutoriais/e-commerce-confianca-ou-confiabilidade

56. EURIPEDES MAGALHÃES - @EURIPEDESM
Identidade Visual

57. CRIAÇÃO DE MARCA E IDENTIDADE VISUAL
O que define uma
identidade visual?

58. IDENTIDADE
“Conjunto de características e circunstâncias que
distinguem uma pessoa ou uma coisa* e graças às
quais é possível individualizá-la”
Dicionário Houaiss da Língua Portuguesa

59. PRA QUE SERVE IDENTIDADE VISUAL?
IDENTIDADE VISUAL
identificação interna identificação externa
redução de custos incrementar vendas
ATINGIR OBJETIVOS DO NEGÓCIO
Marks of Excellence, 1997.

60. PRA QUE SERVE IDENTIDADE VISUAL?
• Individualidade da marca - diferenciação.
• Expressar visualmente que tipo de organização
o cliente é. (ex. formal x informal)
• Transmite atributos da marca. (segurança, confiança, etc)
• Conecta o cliente a imagens e ideias.
(apple= cool! - Harley=potência - Volvo=segurança)
• Consistência nos canais de comunicação (sistematização)
• Torna a compra / memorização mais fácil para o consumidor
Jair Alves

61. QUANDO PENSAR EM IDENTIDADE VISUAL?
• Nova Empresa, novo produto, novo serviço.
• Aquisição, Fusão
• Reposicionamento
• Novo mercado
• Troca de nome
• Revitalização
Jair Alves

62. ANTES - DEPOIS

63. INTERNET

64. EM QUAIS MATERIAIS CONSISTEM A ID?
• Símbolo
• Logotipo
• Cor
• Tipografia
• Aplicações (papelaria, catálogos, produtos, embalagens,
frota, uniformes, etc....)
Jair Alves

65. ...E MAIS DO QUE NUNCA:

66. MARCAS NO MEIO DIGITAL
O design de marcas na era contemporânea deve pensar que os
pixels são por vezes o suporte complementar da identidade e
por vezes o suporte principal de apresentação da marca.
E o meio digital não se resume obviamente à uma página web.

68. DESIGN LÍQUIDO
No livro “DNA Empresarial”, a Profa. Dra. Lígia Fascione fala
sobre a identidade líquida. Aqui podemos citar as “marcas
líquidas”.
Líquidos, fluidos se adequam ao espaço onde são inseridos, se
adequando as formas do espaço e adentrando profundamente
em todas as reentrâncias existentes.

70. DESIGN LÍQUIDO
Tanto como nascer “offline” e se tornar “online”, a marca pode
sair do digital e partir para o físico, em expansões praticamente
infinitas.
Isso deve ser levado em consideração no design de marcas.
Não é possível mais desassociar uma situação da outra.

72. INTERFACE
O design de marcas não é só o design para um símbolo gráfico
que vai estar em algum site, mas também design para sistemas
integrados digitais e gráficos, onde essa marca tem que se
expandir coerentemente e integralmente.

75. CULTURA DE CONSUMO DE DESIGN
Culturalmente, o Brasil ainda não é um país acostumado a
consumir design de qualidade (não estou falando de design
de carros).
É papel do designer “educar” o cliente para que essa cultura
cresça e se solidifique.

76. O PROCESSO CRIATIVO
Muitos profissionais divergem sobre a forma mais correta de
definir uma estratégia, metodologia ou sequência de trabalho
para se definir o design de uma marca.

77. EXPERIMENTAÇÃO
“Não sei se existe a inspiração, mas se ela vier, vai
me encontrar trabalhando”.
Pablo Picasso
Rafic Farah

78. CONCEITUAÇÃO
O símbolo e o logotipo devem ter algum conceito relacionado
ao tipo de negócio da empresa, deve refletir o que a marca
quer passar.
Nike deusa grega da vitória.
O símbolo desenhado por
Carolyn Davidson, representa
a abstração da asa de uma
estátua desta deusa.

79. “O norte do designer
é a cultura”
Claudio Ferlauto

80. COMO SER CRIATIVO
Segunda a Profa. Msc. e artista Martha Gabriel a criatividade
está vinculada a bloqueios e preconceitos que fazem parte da
nossa formação cultural.
Alguns fatores que inibem a criatividade segundo Martha.
Gabriel, além da preguiça:
• Rótulos
• Riscos
• Ego
• Dinheiro
• Ambiente

81. COMO SER CRIATIVO
• Veja muitas referências
• Conheça o que o mercado está fazendo
• Seja entusiasta
• Pratique alguma atividade relacionada artes ou diversão
(música, leitura, dança, teatro, cinema)

82. CAMINHOS
“A solução mora no problema”
Rico Lins
Dados, dados, dados, pesquisa, pesquisa, pesquisa. Todas as
informações que forem encontradas são importantes, entender
a IDENTIDADE CORPORATIVA vai ajudar no design da marca.
Dados de planejamento, objetivos de branding, pesquisa de
comportamento do consumidor, tendências do seguimento...

83. PARA ANALISAR
• Concorrentes
• Mercado semelhante
• Problemas da marca existente
• Qualidades da marca existente
• Objetivos primários e secundários

84. DESIGN THINKING
“Design Thinking, ou pensamento de Design, é uma abstração
do modelo mental utilizado há anos pelos designers para dar
vida a idéias. Esse modelo mental e seus poderosos conceitos
podem ser aprendidos e utilizados por qualquer pessoa e
aplicados em qualquer cenário de negócio ou social.”
Tim Brown

85. PROCESSO IDEO
DISCOVERY INTERPRETATION IDEATION EXPERIMENTATION EVOLUTION

86. PROCESSO STANFORD

87. PROCESSO CRIATIVO POR BRUNO MUNARI
DF CD CRIATIVIDADE
• PAINEL SEMÂNTICO
CONHECIMENTO COLETA E
E DEFINIÇÃO DO ANÁLISE DE • RELAÇÕES VISUAIS
PROBLEMA DADOS • CONCEITOS DE DESIGN

88. PAINEL SEMÂNTICO
Semântica é o estudo do significado da linguagem.
O painel semântico é um guia de referências rápido, ele
pode ser formatado de diversas maneiras de acordo com a
necessidade do projeto ou área de atuação.
Ele pode conter:
• Somente imagens (referências visuais)
• Somente textos (conceitos e palavras-chave)
• Imagens e textos interrelacionados

89. PAINEL SEMÂNTICO - EXEMPLOS
Fonte: http://fernandasegolin.wordpress.com

90. CORES
Não é necessário citar a importância das cores, que envolve
estudos longos e importantes, mas também ela é fator
determinante na apresentação coerente dos conceitos
aplicados na marca.
Existem significados psicológicos para cores, Modesto Farina
em seu livro cita essas sensações e possíveis aplicações em
diversos meios.
Exemplo do azul:
• associação material: montanhas longínquas, frio, mar, céu,
gelo, feminilidade, águas tranquilas
• associação afetiva: espaço, viagem, verdade, sentido, afeto,
infinito, sentimento profundo, meditação

92. CORES
A KISSmetrics criou um infográfico que mostra como as cores
trabalham no processo de persuação das compras.
http://www.agni.art.br/como-as-cores-afetam-as-compras/

93. CORES

94. OUTRAS INFLUÊNCIAS

95. OUTRAS INFLUÊNCIAS

96. OUTRAS INFLUÊNCIAS

97. CORES
Com aplicações simples dos símbolos da marca e com um
foco grande nas cores, conseguimos identificar facilmente uma
empresa.
Marcelo Trevisani defende: “Marca é a cultura e as experiências
que residem na mente de cada consumidor a respeito de um
produto ou serviço de uma empresa.”.
E as cores ajudam nesse processo.

99. CORES
O designer Alexandre Wollner defende o uso de poucas
cores na criação de marcas, para que seja facilmente
identificada e para que seja mais prática e barata nos
processos de impressão.

100. A TIPOGRAFIA NAS MARCAS
Tipografia vai além do simples desenho da fonte (caracteres).
A tipografia tem relação com a forma com que a LETRA É
USADA, isso engloba diagramação, uso das cores e um forte
pensamento em linguagem visual.

101. “A tipografia é a
cara da linguagem”
Ellen Lupton

102. TIPOGRAFIA
Com tipografia é possível trazer situações visuais que
englobem as sensações desejadas.
Trabalhe pesos e formas de acordo com a necessidade.

103. A TIPOGRAFIA NAS MARCAS
Existem muitas marcas que são criadas somente com tipos.
Marcas sempre presentes no ranking da Interbrand.

104. Simplicidade!!!

105. A TIPOGRAFIA NAS MARCAS
Hoje já é possível embedar fontes no html ou hospedar
a fonte em servidores específicos, que pode facilitar ou
até mesmo acabar com a necessidade de utilizar fontes
substitutas no html.

106. TIPOGRAFIA
Use famílias e suas variações na identidade visual.
Se a fonte da marca for uma fonte específica, procure uma
fonte de apoio. Pode ser definida também uma fonte “display”
para títulos e uma fonte mais voltada para leitura, texto.

108. EURIPEDES MAGALHÃES - @EURIPEDESM
Layout

109. PRIORIDADES NO DESIGN DE PÁGINAS
Criar para e-commerce requer uma preocupação grande
com o contexto de uso dos usuários, os objetivos da página,
padrões web e identidade de marca.
A análise dos usuários se faz importante nesse processo.
Isso ajudará na melhor escolha da posição dos elementos na
página, a categorização dos elementos dentro do menu e
possíveis customizações de layout.

110. ORGANIZAÇÃO DOS PRODUTOS
Organize de forma clara e relacione os produtos por tipo ou
funcionalidade, levando em consideração o contexto de uso do
usuário.

111. GESTALT
Gestalt é um fenômeno estudado pela psicologia mas que se
aplica muito ao design, por vezes é esquecido e abandonado.
É relacionado como o olho humano entende os elementos
visuais, como imagens são formadas e completadas
institivamente e intuitivamente.

112. GESTALT - LEIS
Proximidade:
Objetos próximos tendem a formar uma figura de grupo.

113. GESTALT - LEIS
Fechamento:
O olho humano cria elementos faltantes para completar uma
forma ou imagem.

114. GESTALT - LEIS
Continuidade
Um padrão se estende visualmente mesmo após a sua parada.

115. GESTALT - LEIS
Similaridade
Elementos com propriedades similares automaticamente são
associados.

116. IMPORTANTE - GESTALT
Aproveita-se desses elementos e outros como Alinhamento
e Balanço dos elementos para criar relacionamentos visuais e
definir a importância dos elementos e organização dos menus.

117. ARQUITETURA DE INFORMAÇÃO - WIREFRAME

118. ARQUITETURA DE INFORMAÇÃO - WIREFRAME

119. LAYOUTS INTERESSANTES

120. LAYOUTS INTERESSANTES

121. LAYOUTS INTERESSANTES

122. CATEGORIZAÇÃO
Crie categorias com taxonomia adequada ao usuário, um teste
de cardsorting traz resultados efetivos para essa construção.

123. CATEGORIZAÇÃO - CARD SORTING
Nessa técnica o usuário relaciona os elementos e diz em como
o conteúdo poderia ser organizado.
http://ciid.dk/education/portfolio/py/courses/service-design-new-library-experiences/projects/knowledge-
consultancy-services-in-libraries/

124. EURIPEDES MAGALHÃES - @EURIPEDESM
Conteúdos e Vendas

125. PIPELINE - FUNIL DE VENDAS
Trabalhar o funil de vendas é analisar o processo de compra
total realizado pelo consumidor, é avaliar quais são os pontos
de saída e como otimizar a experiência.
Resumindo, o número de vendas é menor
que o número de usuários que acessam o
site, por isso a analogia com o funil.
Daniel Pereira, da LUZ Consultoria,
traz pontos importantes para serem
observados:
http://www.slideshare.net/masterluz/palestra-funil-de-vendas-luz-loja-de-
consultoria

126. PIPELINE - FUNIL DE VENDAS
• Um bom funil de vendas permite que se desenvolva um
processo de vendas, para deixar claros os passos para o cliente
atingir a compra de forma eficaz.
• Permite a criação de estratégias de longo
prazo, pois a cada estágio de venda pede
uma estratégia e abordagem diferente
• Permite mensuração dos resultados e a
observação de onde ocorrem as maiores
perdas e as maiores taxas de conversão.
http://www.slideshare.net/masterluz/palestra-funil-de-vendas-luz-loja-de-
consultoria

127. PIPELINE - FUNIL DE VENDAS
Perguntas para ajudar a criar um perfil de vendas:
• Quais os marcos importantes ao longo da venda?
• Quais informações podem ser oferecidas ao cliente para
maior segurança na tomada de decisão?
• Quais os pontos de estrangulamento no processo de vendas?
• Onde estão as oportunidades de intervir e aumentar as
chances de venda?
• Onde se pode criar métricas para verificar a taxa de sucesso
do funil?
http://www.slideshare.net/masterluz/palestra-funil-de-vendas-luz-loja-de-consultoria

128. PIPELINE - FUNIL DE VENDAS
Pensando em conteúdo, o que se pode analisar segundo o site
To The Web:
Quais conteúdos conduzirão seus prospects
pelo funil de vendas?
QUEM
Quem você está tentando atrair para o
seu site? Descreva um vistante típico
• defina o grupo primário de usuários
• defina o grupo secundário de usuários
• defina o grupo terciário de usuários

129. PIPELINE - FUNIL DE VENDAS
O QUÊ
Qual conteúdo é específico para cada usuário desse site?
• crie conteúdos que atendam pelo menos
três grupos importantes , trace um plano
que aborde os problemas que cada grupo
pretende resolver acessando o site e suas
objeções
• considere qual é a mensagem mais
importante que a página deve transmitir

130. PIPELINE - FUNIL DE VENDAS
COMO
Como você pode incentivar os visitantes
a interagirem com a sua empresa?
• entenda e refine o processo de venda
que os visitantes seguirão em seu site
• defina as métricas-chave do negócio
para poder medir o sucesso alcançado

131. PIPELINE - FUNIL DE VENDAS
http://totheweb.com/
learning_center/attracting-
sales-prospects.html

132. EURIPEDES MAGALHÃES - @EURIPEDESM
Testes

133. UXD - TRABALHANDO MELHORIAS
Projeto - Planeta Verde Tang
O que é - Uma “rede social” para crianças
Objetivo - Melhorar o uso do site
Aprendizados - A partir de testes, foi identificada a dúvida
sobre a dificuldade das crianças fazerem scroll no site

135. Click Tale

136. Depois

141. Antes - Recorde

142. Depois - Recorde

143. UXD - TRABALHANDO MELHORIAS
Depois de quase 22 dias de teste A/B, foi gerada massa
critica suficiente para encerraramento do teste.
Visitas - 3.220 (Que tiveram suas impressões divididas em
50% para cada versão)
Conversões - 70 (Que 40% gerado pela página original e
60% pela versão B)
E o resultado foi:
53% de incremento no volume de envio de vídeos na
versão B (botão abaixo do passo) sobre a versão A.
69% superior à taxa de conversão da versão A no dia 13/09.

144. HEURÍSTICAS - JAKOB NIELSEN
As heurísticas são uma série de “dicas”
ou “regras” que ajudam no entendimento
de situações comuns que acontecem
diariamente e que podem atrapalhar a
navegação pelos usuários.

145. HEURÍSTICAS - JAKOB NIELSEN
1) Feedback
O sistema deve informar continuamente ao usuário sobre
o que ele está fazendo. 10 segundos é o limite para
manter a atenção do usuário focalizada no diálogo.
2) Falar a linguagem do usuário
A terminologia deve ser baseada na linguagem do usuário
e não orientada ao sistema. As informações devem ser
organizadas conforme o modelo mental do usuário.
3) Saídas claramente demarcadas
O usuário controla o sistema, ele pode, a qualquer
momento, abortar uma tarefa, ou desfazer uma operação
e retornar ao estado anterior.
Usabilidoido

146. HEURÍSTICAS - JAKOB NIELSEN
4) Consistência
Um mesmo comando ou ação deve ter sempre o mesmo efeito.
A mesma operação deve ser apresentada na mesma
localização e deve ser formatada/apresentada da mesma
maneira para facilitar o reconhecimento.
5) Prevenir erros
Evitar situações de erro.
Conhecer as situações que mais provocam erros e
modificar a interface para que estes erros não ocorram.
6) Minimizar a sobrecarga de memória do usuário
O sistema deve mostrar os elementos de diálogo
e permitir que o usuário faça suas escolhas, sem a
necessidade de lembrar um comando específico.
Usabilidoido

147. HEURÍSTICAS - JAKOB NIELSEN
7) Atalhos
Para usuários experientes executarem as operações mais
rapidamente.
Abreviações, teclas de função, duplo clique no mouse,
função de volta em sistemas hipertexto.
Atalhos também servem para recuperar informações que
estão numa profundidade na árvore navegacional a partir
da interface principal.
8) Diálogos simples e naturais
Deve-se apresentar exatamente a informação que o
usuário precisa no momento, nem mais nem menos.
A seqüência da interação e o acesso aos objetos e
operações devem ser compatíveis com o modo pelo qual
o usuário realiza suas tarefas.
Usabilidoido

148. HEURÍSTICAS - JAKOB NIELSEN
9) Boas mensagens de erro
Linguagem clara e sem códigos.
Devem ajudar o usuário a entender e resolver o problema.
Não devem culpar ou intimidar o usuário.
10) Ajuda e documentação
O ideal é que um software seja tão fácil de usar (intuitivo)
que não necessite de ajuda ou documentação.
Se for necessária a ajuda deve estar facilmente acessível
on-line.
Usabilidoido

149. HTML
No código HTML se inserem as informções de tagueamentos e
também de códigos para SEO.
Hoje dia existe o HTML 5 e os sites que contém animações via esses
códigos e também os sites que chamamos de “design responsivo”.

150. HTML - DESIGN RESPONSIVO

152. ADMINISTRAÇÃO DO SITE
Ao gerar conteúdo para o um blog por exemplo, é importante pensar
que o texto a ser publicado, pode conter palavras que ajudam na
busca do Google além das tags relacionadas ao post.
Quanto mais citações,
mais relevância ao
assunto, quanto mais
relação com outros
conteúdos online, mais
relevância também.
O Wordpress permite
ainda a instalação de
diversos widgets e
plug-ins que ajudam
na divulgação do
conteúdo.

153. CONCLUINDO...
Em linhas gerais, sabemos que independente da técnica
utilizada, o olhar deve ser voltado para o ser humano que
vai utilizar essa criação.
Partindo deste ponto, fica mais fácil perceber caminhos
inteligentes para o desenvolvimento.
Sair do senso comum e ir em busca de algo novo e
interessante verdadeiramente.

154. @EURIPEDESM
Links úteis e bibliografia
• Design Thinking - Tim Brown
• Design de Navegação Web - James Kalbach
• Design para a Internet - Felipe Memória
• Não me faça Pensar - Steve Krug
• Ergodesign e Arquitetura de Informação - Luiz Anger
• O Guia para Projetar UX - Russ Unger
• Zero Moment of Truth - Jim Lecinski
• Psicodinâmica das Cores em Comunicação - Modesto Farina
• E-Commerce Usability - David Travis

155. @EURIPEDESM
Links úteis e bibliografia
• http://www.designthinkingforeducators.com/
• http://www.uxnet.org/
• http://mitworld.mit.edu/video/357/
• http://designthinking.ideo.com/
• http://arquiteturadeinformacao.com/
• http://www.usabilitycounts.com/
• http://www.intuitionhq.com/
• http://nform.com/tradingcards/affinity-diagram

156. @EURIPEDESM
Links úteis e bibliografia
• http://typekit.com
• http://typeface.neocracy.org/examples.html
• http://www.logodesignlove.com
• http://logofaves.com
• http://www.logomoose.com
• http://logooftheday.com
• http://www.logopond.com
• http://38one.com/cleverblog

157. @EURIPEDESM
Links úteis e bibliografia
•http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effec-
tive-web-design/
•http://www.slideshare.net/rpanini/a-importncia-do-design-no-ecommerce
•http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html
http://webinsider.uol.com.br/2010/03/02/a-estrategia-da-encontrabilidade-
e-ocupar-espacos/
•http://www.1stwebdesigner.com/inspiration/excellent-shopping-cart-de-
signs-showcase-and-best-practices/

158. @EURIPEDESM
Obrigado
web: www.euripedes.com.br
mail: euripedes@euripedes.com.br
twitter: @euripedesm
MAIS:
http://posmktdigital.wordpress.com/
www.twitter.com/mktdigimpacta