SlideShare uma empresa Scribd logo
1 de 42
Baixar para ler offline
5 – Modulo: Design e Usabilidade
UTILIZAÇÃO DE CORES
USO DE CORES CHAMATIVAS
- Chama a atenção em um primeiro
momento, porém usado
exaustivamente pode incomodar.
- Menus e banners animados
podem tirar a atenção no
momento da compra.

USO DE CORES PASTÉIS
- Maior atenção ao produto
- Navegação mais harmoniosa
- Usuários navegam sem perder o
foco
CORES + IDENTIDADE VISUAL




AS CORES DEVEM SEGUIR
A IDENTIDADE VISUAL
DA EMPRESA
CORES + IDENTIDADE VISUAL




AS CORES DEVEM SEGUIR
A IDENTIDADE VISUAL
dA EMPRESA
DESIGN E SEMIÓTICA
05 design e usabilidade
05 design e usabilidade
05 design e usabilidade
LEITURA EM Z
05 design e usabilidade
HEADER - CABEÇALHO
- Mais estreito possível
- Logo + Slogan + Serviços + Contatos
05 design e usabilidade
05 design e usabilidade
05 design e usabilidade
05 design e usabilidade
HEADER - CABEÇALHO


- Home
- Login
- Meu Carrinho
- Meus Pedidos
- Tele Atendimento
- Busca Rápida
HEADER - CABEÇALHO
RODAPÉ – LINKS PRINCIPAIS
PRODUTOS DA HOME




- Produtos matadores – Melhores preços e parcelamento
- Produtos “boi de piranha”
PÁGINA DA CATEGORIA




  - Banner da categoria
  - Paginação: até 3 pág
  -URL c/ nome da categoria
  Ex:
  www.minhaloja.com/computadores
PÁGINA DO PRODUTO

- Sem banner
- Página simples
- Informações fáceis
de preços, pagamentos
e entrega
- Descrição completa
- Texto original
- Long Tails – Key words
- Fotos matadoras
- Zoom apenas com boas
fotos e se necessário
- Uso de vídeo
PÁGINA DO PRODUTO
PÁGINA DO PRODUTO



- Disponibilidade
- Entrega
- Cálculo do frete
PÁGINA DO PRODUTO
05 design e usabilidade
05 design e usabilidade
05 design e usabilidade
05 design e usabilidade
USABILIDADE




     X
05 design e usabilidade
FORMULÁRIO SIMPLES
05 design e usabilidade
05 design e usabilidade
05 design e usabilidade
05 design e usabilidade
05 design e usabilidade
05 design e usabilidade
05 design e usabilidade
05 design e usabilidade
05 design e usabilidade
05 design e usabilidade
SEMPRE TESTE A NAVEGABILIDADE

- Em navegadores diferentes          http://www.testeusabilidade.com.br
- Em resoluções diferentes           http://www.mercedessanchez.com.br
- Com pessoas de vários níveis



 - Pesquise o cliente que repetiu a compra
 - Pesquise o cliente que não concluiu a compra
 - Pesquise quando o volume de vendas alterar
 - Pós venda: muito importante!

Mais conteúdo relacionado

Mais procurados

Web seminário - otimizando a experiência do usuário (U.X.)
Web seminário - otimizando a experiência do usuário (U.X.)Web seminário - otimizando a experiência do usuário (U.X.)
Web seminário - otimizando a experiência do usuário (U.X.)luizballas
 
Rafael Damasceno - RD Summit 2015 - Otimização de Conversão
Rafael Damasceno - RD Summit 2015 - Otimização de ConversãoRafael Damasceno - RD Summit 2015 - Otimização de Conversão
Rafael Damasceno - RD Summit 2015 - Otimização de ConversãoRafael Damasceno
 
Super banner no site conjur 12.11
Super banner no site conjur 12.11Super banner no site conjur 12.11
Super banner no site conjur 12.11Meio & Mensagem
 
Vendendo (com) WordPress
Vendendo (com) WordPressVendendo (com) WordPress
Vendendo (com) WordPressAnyssa Ferreira
 
Projeto de Navegação e Interação (Ponto Frio)
Projeto de Navegação e Interação (Ponto Frio)Projeto de Navegação e Interação (Ponto Frio)
Projeto de Navegação e Interação (Ponto Frio)Ana Cristina Aparecida
 
Apresentação BISOUX
Apresentação BISOUXApresentação BISOUX
Apresentação BISOUXBisoux Biz
 

Mais procurados (8)

Web seminário - otimizando a experiência do usuário (U.X.)
Web seminário - otimizando a experiência do usuário (U.X.)Web seminário - otimizando a experiência do usuário (U.X.)
Web seminário - otimizando a experiência do usuário (U.X.)
 
Rafael Damasceno - RD Summit 2015 - Otimização de Conversão
Rafael Damasceno - RD Summit 2015 - Otimização de ConversãoRafael Damasceno - RD Summit 2015 - Otimização de Conversão
Rafael Damasceno - RD Summit 2015 - Otimização de Conversão
 
Super banner no site conjur 12.11
Super banner no site conjur 12.11Super banner no site conjur 12.11
Super banner no site conjur 12.11
 
Vendendo (com) WordPress
Vendendo (com) WordPressVendendo (com) WordPress
Vendendo (com) WordPress
 
Trabalho de e-merchandising por lorena palombini
Trabalho de e-merchandising por lorena palombiniTrabalho de e-merchandising por lorena palombini
Trabalho de e-merchandising por lorena palombini
 
Em busca da experiência perfeita - Usabilidade e velocidade da sua loja const...
Em busca da experiência perfeita - Usabilidade e velocidade da sua loja const...Em busca da experiência perfeita - Usabilidade e velocidade da sua loja const...
Em busca da experiência perfeita - Usabilidade e velocidade da sua loja const...
 
Projeto de Navegação e Interação (Ponto Frio)
Projeto de Navegação e Interação (Ponto Frio)Projeto de Navegação e Interação (Ponto Frio)
Projeto de Navegação e Interação (Ponto Frio)
 
Apresentação BISOUX
Apresentação BISOUXApresentação BISOUX
Apresentação BISOUX
 

Semelhante a 05 design e usabilidade

Conteúdo que Vende! Dicas de Criação de Conteúdo para E-commerce
Conteúdo que Vende! Dicas de Criação de Conteúdo para E-commerceConteúdo que Vende! Dicas de Criação de Conteúdo para E-commerce
Conteúdo que Vende! Dicas de Criação de Conteúdo para E-commercesemrush_webinars
 
10 práticas para vender mais através do Google - Leonardo Rocha e Will Trannin
10 práticas para vender mais através do Google - Leonardo Rocha e Will Trannin10 práticas para vender mais através do Google - Leonardo Rocha e Will Trannin
10 práticas para vender mais através do Google - Leonardo Rocha e Will TranninE-Commerce Brasil
 
Guia de criação de layout de lojas EZ Commerce
Guia de criação de layout de lojas EZ CommerceGuia de criação de layout de lojas EZ Commerce
Guia de criação de layout de lojas EZ CommerceRafael Berto
 
Projeto de Planejamento Estratégico para E-Commerce - Super Case - Limits
Projeto de Planejamento Estratégico para E-Commerce - Super Case - LimitsProjeto de Planejamento Estratégico para E-Commerce - Super Case - Limits
Projeto de Planejamento Estratégico para E-Commerce - Super Case - LimitsAlex Ogushi
 
Webdesign: Programação, Website e Redes Sociais
Webdesign: Programação, Website e Redes SociaisWebdesign: Programação, Website e Redes Sociais
Webdesign: Programação, Website e Redes SociaisRenato Melo
 
Business marketing nas redes sociais update
Business marketing nas redes sociais updateBusiness marketing nas redes sociais update
Business marketing nas redes sociais updateth2
 
Porque utilizar vídeos nos negócios ONDE e COMO divulgar no Youtube. Palestr...
Porque utilizar vídeos nos negócios ONDE e COMO divulgar no  Youtube. Palestr...Porque utilizar vídeos nos negócios ONDE e COMO divulgar no  Youtube. Palestr...
Porque utilizar vídeos nos negócios ONDE e COMO divulgar no Youtube. Palestr...Norma David
 
Apresentação emge prospecção de clientes - pré vendas
Apresentação emge   prospecção de clientes - pré vendasApresentação emge   prospecção de clientes - pré vendas
Apresentação emge prospecção de clientes - pré vendasEmerson Morais
 
Apresentação emge prospecção de clientes - pré vendas
Apresentação emge   prospecção de clientes - pré vendasApresentação emge   prospecção de clientes - pré vendas
Apresentação emge prospecção de clientes - pré vendasEmerson Morais
 
Apresentação emge prospecção de clientes - pré vendas
Apresentação emge   prospecção de clientes - pré vendasApresentação emge   prospecção de clientes - pré vendas
Apresentação emge prospecção de clientes - pré vendasEmerson Morais
 
Exemplos da Técnica Business Model Generation
Exemplos da Técnica Business Model GenerationExemplos da Técnica Business Model Generation
Exemplos da Técnica Business Model Generationauspin
 

Semelhante a 05 design e usabilidade (20)

Conteúdo que Vende! Dicas de Criação de Conteúdo para E-commerce
Conteúdo que Vende! Dicas de Criação de Conteúdo para E-commerceConteúdo que Vende! Dicas de Criação de Conteúdo para E-commerce
Conteúdo que Vende! Dicas de Criação de Conteúdo para E-commerce
 
10 práticas para vender mais através do Google - Leonardo Rocha e Will Trannin
10 práticas para vender mais através do Google - Leonardo Rocha e Will Trannin10 práticas para vender mais através do Google - Leonardo Rocha e Will Trannin
10 práticas para vender mais através do Google - Leonardo Rocha e Will Trannin
 
Oportunidades no e-commerce B2B
Oportunidades no e-commerce B2BOportunidades no e-commerce B2B
Oportunidades no e-commerce B2B
 
Guia de criação de layout de lojas EZ Commerce
Guia de criação de layout de lojas EZ CommerceGuia de criação de layout de lojas EZ Commerce
Guia de criação de layout de lojas EZ Commerce
 
Super case limists
Super case   limistsSuper case   limists
Super case limists
 
Projeto de Planejamento Estratégico para E-Commerce - Super Case - Limits
Projeto de Planejamento Estratégico para E-Commerce - Super Case - LimitsProjeto de Planejamento Estratégico para E-Commerce - Super Case - Limits
Projeto de Planejamento Estratégico para E-Commerce - Super Case - Limits
 
Guia Ecommerce para Empresas de Moda
Guia Ecommerce para Empresas de ModaGuia Ecommerce para Empresas de Moda
Guia Ecommerce para Empresas de Moda
 
LinkaWeb
LinkaWebLinkaWeb
LinkaWeb
 
Fatiando o bolo
Fatiando o boloFatiando o bolo
Fatiando o bolo
 
Como montar um projeto de usabilidade
Como montar um projeto de usabilidadeComo montar um projeto de usabilidade
Como montar um projeto de usabilidade
 
Webdesign: Programação, Website e Redes Sociais
Webdesign: Programação, Website e Redes SociaisWebdesign: Programação, Website e Redes Sociais
Webdesign: Programação, Website e Redes Sociais
 
Como criar conteudo para sites de ecommerce
Como criar conteudo para sites de ecommerceComo criar conteudo para sites de ecommerce
Como criar conteudo para sites de ecommerce
 
Business marketing nas redes sociais update
Business marketing nas redes sociais updateBusiness marketing nas redes sociais update
Business marketing nas redes sociais update
 
Porque utilizar vídeos nos negócios ONDE e COMO divulgar no Youtube. Palestr...
Porque utilizar vídeos nos negócios ONDE e COMO divulgar no  Youtube. Palestr...Porque utilizar vídeos nos negócios ONDE e COMO divulgar no  Youtube. Palestr...
Porque utilizar vídeos nos negócios ONDE e COMO divulgar no Youtube. Palestr...
 
Apresentação emge prospecção de clientes - pré vendas
Apresentação emge   prospecção de clientes - pré vendasApresentação emge   prospecção de clientes - pré vendas
Apresentação emge prospecção de clientes - pré vendas
 
Apresentação emge prospecção de clientes - pré vendas
Apresentação emge   prospecção de clientes - pré vendasApresentação emge   prospecção de clientes - pré vendas
Apresentação emge prospecção de clientes - pré vendas
 
Apresentação emge prospecção de clientes - pré vendas
Apresentação emge   prospecção de clientes - pré vendasApresentação emge   prospecção de clientes - pré vendas
Apresentação emge prospecção de clientes - pré vendas
 
Exemplos da Técnica Business Model Generation
Exemplos da Técnica Business Model GenerationExemplos da Técnica Business Model Generation
Exemplos da Técnica Business Model Generation
 
Aula e commerce
Aula e commerceAula e commerce
Aula e commerce
 
Aula e commerce
Aula e commerceAula e commerce
Aula e commerce
 

Mais de conteudoecommerce

Gestor de Mídias Sociais - Mai 2019
Gestor de Mídias Sociais - Mai 2019Gestor de Mídias Sociais - Mai 2019
Gestor de Mídias Sociais - Mai 2019conteudoecommerce
 
Master class instagram-facebook
Master class instagram-facebookMaster class instagram-facebook
Master class instagram-facebookconteudoecommerce
 
Digital fashion week bh set-2018
Digital fashion week bh   set-2018Digital fashion week bh   set-2018
Digital fashion week bh set-2018conteudoecommerce
 
Curso de e commerce - jul - 2018
Curso de e commerce - jul - 2018Curso de e commerce - jul - 2018
Curso de e commerce - jul - 2018conteudoecommerce
 
Digital Fashion Week BH - Jun/18
Digital Fashion Week BH - Jun/18Digital Fashion Week BH - Jun/18
Digital Fashion Week BH - Jun/18conteudoecommerce
 
Gestor de midias sociais (online)
Gestor de midias sociais (online)Gestor de midias sociais (online)
Gestor de midias sociais (online)conteudoecommerce
 
Marketing Digital para o Mercado Fitness e Academias
Marketing Digital para o Mercado Fitness e AcademiasMarketing Digital para o Mercado Fitness e Academias
Marketing Digital para o Mercado Fitness e Academiasconteudoecommerce
 
Digital Fashion Week BH - Abril 2018
Digital Fashion Week BH - Abril 2018Digital Fashion Week BH - Abril 2018
Digital Fashion Week BH - Abril 2018conteudoecommerce
 
Como bombar as vendas através das Mídias Sociais
Como bombar as vendas através das Mídias SociaisComo bombar as vendas através das Mídias Sociais
Como bombar as vendas através das Mídias Sociaisconteudoecommerce
 
Digital Fashion Week - Dia 03 (Mídias Sociais)
Digital Fashion Week - Dia 03 (Mídias Sociais)Digital Fashion Week - Dia 03 (Mídias Sociais)
Digital Fashion Week - Dia 03 (Mídias Sociais)conteudoecommerce
 
Palestra - Fotografia para Moda (Henrique Gualtieri)
Palestra - Fotografia para Moda (Henrique Gualtieri)Palestra - Fotografia para Moda (Henrique Gualtieri)
Palestra - Fotografia para Moda (Henrique Gualtieri)conteudoecommerce
 
Digital Fashion Week - Dia 02
Digital Fashion Week - Dia 02Digital Fashion Week - Dia 02
Digital Fashion Week - Dia 02conteudoecommerce
 
Digital Fashion Week - Dia 01
Digital Fashion Week - Dia 01Digital Fashion Week - Dia 01
Digital Fashion Week - Dia 01conteudoecommerce
 
Gestor de Mídias Sociais em Belo Horizonte
Gestor de Mídias Sociais em Belo HorizonteGestor de Mídias Sociais em Belo Horizonte
Gestor de Mídias Sociais em Belo Horizonteconteudoecommerce
 
Gestor de mídias sociais - Campo Grande
Gestor de mídias sociais  - Campo GrandeGestor de mídias sociais  - Campo Grande
Gestor de mídias sociais - Campo Grandeconteudoecommerce
 
Curso InstaMarketing - Agosto 2016
Curso InstaMarketing - Agosto 2016Curso InstaMarketing - Agosto 2016
Curso InstaMarketing - Agosto 2016conteudoecommerce
 
Curso de Mídias Sociais - Mercado E-commerce
Curso de Mídias Sociais - Mercado E-commerceCurso de Mídias Sociais - Mercado E-commerce
Curso de Mídias Sociais - Mercado E-commerceconteudoecommerce
 

Mais de conteudoecommerce (20)

101 modelos-de-anuncios
101 modelos-de-anuncios101 modelos-de-anuncios
101 modelos-de-anuncios
 
Gestor de Mídias Sociais - Mai 2019
Gestor de Mídias Sociais - Mai 2019Gestor de Mídias Sociais - Mai 2019
Gestor de Mídias Sociais - Mai 2019
 
Fashion digital-fev-19
Fashion digital-fev-19Fashion digital-fev-19
Fashion digital-fev-19
 
Gestor jan-19-pocket
Gestor jan-19-pocketGestor jan-19-pocket
Gestor jan-19-pocket
 
Master class instagram-facebook
Master class instagram-facebookMaster class instagram-facebook
Master class instagram-facebook
 
Digital fashion week bh set-2018
Digital fashion week bh   set-2018Digital fashion week bh   set-2018
Digital fashion week bh set-2018
 
Curso de e commerce - jul - 2018
Curso de e commerce - jul - 2018Curso de e commerce - jul - 2018
Curso de e commerce - jul - 2018
 
Digital Fashion Week BH - Jun/18
Digital Fashion Week BH - Jun/18Digital Fashion Week BH - Jun/18
Digital Fashion Week BH - Jun/18
 
Gestor de midias sociais (online)
Gestor de midias sociais (online)Gestor de midias sociais (online)
Gestor de midias sociais (online)
 
Marketing Digital para o Mercado Fitness e Academias
Marketing Digital para o Mercado Fitness e AcademiasMarketing Digital para o Mercado Fitness e Academias
Marketing Digital para o Mercado Fitness e Academias
 
Digital Fashion Week BH - Abril 2018
Digital Fashion Week BH - Abril 2018Digital Fashion Week BH - Abril 2018
Digital Fashion Week BH - Abril 2018
 
Como bombar as vendas através das Mídias Sociais
Como bombar as vendas através das Mídias SociaisComo bombar as vendas através das Mídias Sociais
Como bombar as vendas através das Mídias Sociais
 
Digital Fashion Week - Dia 03 (Mídias Sociais)
Digital Fashion Week - Dia 03 (Mídias Sociais)Digital Fashion Week - Dia 03 (Mídias Sociais)
Digital Fashion Week - Dia 03 (Mídias Sociais)
 
Palestra - Fotografia para Moda (Henrique Gualtieri)
Palestra - Fotografia para Moda (Henrique Gualtieri)Palestra - Fotografia para Moda (Henrique Gualtieri)
Palestra - Fotografia para Moda (Henrique Gualtieri)
 
Digital Fashion Week - Dia 02
Digital Fashion Week - Dia 02Digital Fashion Week - Dia 02
Digital Fashion Week - Dia 02
 
Digital Fashion Week - Dia 01
Digital Fashion Week - Dia 01Digital Fashion Week - Dia 01
Digital Fashion Week - Dia 01
 
Gestor de Mídias Sociais em Belo Horizonte
Gestor de Mídias Sociais em Belo HorizonteGestor de Mídias Sociais em Belo Horizonte
Gestor de Mídias Sociais em Belo Horizonte
 
Gestor de mídias sociais - Campo Grande
Gestor de mídias sociais  - Campo GrandeGestor de mídias sociais  - Campo Grande
Gestor de mídias sociais - Campo Grande
 
Curso InstaMarketing - Agosto 2016
Curso InstaMarketing - Agosto 2016Curso InstaMarketing - Agosto 2016
Curso InstaMarketing - Agosto 2016
 
Curso de Mídias Sociais - Mercado E-commerce
Curso de Mídias Sociais - Mercado E-commerceCurso de Mídias Sociais - Mercado E-commerce
Curso de Mídias Sociais - Mercado E-commerce
 

05 design e usabilidade

  • 1. 5 – Modulo: Design e Usabilidade
  • 2. UTILIZAÇÃO DE CORES USO DE CORES CHAMATIVAS - Chama a atenção em um primeiro momento, porém usado exaustivamente pode incomodar. - Menus e banners animados podem tirar a atenção no momento da compra. USO DE CORES PASTÉIS - Maior atenção ao produto - Navegação mais harmoniosa - Usuários navegam sem perder o foco
  • 3. CORES + IDENTIDADE VISUAL AS CORES DEVEM SEGUIR A IDENTIDADE VISUAL DA EMPRESA
  • 4. CORES + IDENTIDADE VISUAL AS CORES DEVEM SEGUIR A IDENTIDADE VISUAL dA EMPRESA
  • 11. HEADER - CABEÇALHO - Mais estreito possível - Logo + Slogan + Serviços + Contatos
  • 16. HEADER - CABEÇALHO - Home - Login - Meu Carrinho - Meus Pedidos - Tele Atendimento - Busca Rápida
  • 18. RODAPÉ – LINKS PRINCIPAIS
  • 19. PRODUTOS DA HOME - Produtos matadores – Melhores preços e parcelamento - Produtos “boi de piranha”
  • 20. PÁGINA DA CATEGORIA - Banner da categoria - Paginação: até 3 pág -URL c/ nome da categoria Ex: www.minhaloja.com/computadores
  • 21. PÁGINA DO PRODUTO - Sem banner - Página simples - Informações fáceis de preços, pagamentos e entrega - Descrição completa - Texto original - Long Tails – Key words - Fotos matadoras - Zoom apenas com boas fotos e se necessário - Uso de vídeo
  • 23. PÁGINA DO PRODUTO - Disponibilidade - Entrega - Cálculo do frete
  • 42. SEMPRE TESTE A NAVEGABILIDADE - Em navegadores diferentes http://www.testeusabilidade.com.br - Em resoluções diferentes http://www.mercedessanchez.com.br - Com pessoas de vários níveis - Pesquise o cliente que repetiu a compra - Pesquise o cliente que não concluiu a compra - Pesquise quando o volume de vendas alterar - Pós venda: muito importante!