123
EURIPEDES MAGALHãES - @EURIPEDESM Design e Usabilidade

Design e usabilidade- Curso Intensivo

Embed Size (px)

DESCRIPTION

Design e usabilidade- Curso Intensivo PROFESSOR: Eurípedes Magalhães

Citation preview

Page 1: Design e usabilidade- Curso Intensivo

EuripEdEs magalhãEs - @EuripEdEsm

Design e Usabilidade

Page 2: Design e usabilidade- Curso Intensivo

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.

Page 3: Design e usabilidade- Curso Intensivo

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.

pesquisa

público

interface

Page 4: Design e usabilidade- Curso Intensivo

como as pEssoas avaliam a crEdibilidadE?

http://www.consumerwebwatch.org/dynamic/web-credibility-report-evaluate.cfm

os participantes comentaram sobre vários assuntos ao avaliar a credibilidade de sites.

15 de abril de 2012

Page 5: Design e usabilidade- Curso Intensivo

percentagem de comentários relativos a aparência de design, por categoria

http://www.consumerwebwatch.org/dynamic/web-credibility-report-evaluate.cfm

como as pEssoas avaliam a crEdibilidadE?

Page 6: Design e usabilidade- Curso Intensivo

EuripEdEs magalhãEs - @EuripEdEsm

Usabilidade

Page 7: Design e usabilidade- Curso Intensivo

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.

Page 8: Design e usabilidade- Curso Intensivo

mEmória computacional vs humana

Faber ludens

sElEtiva

EvOlUtiva

assOciativa

inDiscriminaDa

EstávEl

DiscrEta

Page 9: Design e usabilidade- Curso Intensivo

norman (2006) - conhecimento na cabeça

Page 10: Design e usabilidade- Curso Intensivo

conhecimento no mundo

Page 11: Design e usabilidade- Curso Intensivo

conhecimento no mundo

Page 12: Design e usabilidade- Curso Intensivo

conhecimento no mundo

Page 13: Design e usabilidade- Curso Intensivo

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?

Page 14: Design e usabilidade- Curso Intensivo

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?

Page 15: Design e usabilidade- Curso Intensivo
Page 16: Design e usabilidade- Curso Intensivo

criando a EXpEriência dE uso

indicadores de performance

arquitetura de informação

avaliar a usabilidade

layout das telas

Page 17: Design e usabilidade- Curso Intensivo

arQuitEtura dE inFormação - wirEFramE

Page 18: Design e usabilidade- Curso Intensivo

arQuitEtura dE inFormação - wirEFramE

Page 19: Design e usabilidade- Curso Intensivo

EuripEdEs magalhãEs - @EuripEdEsm

navegabilidade

Page 20: Design e usabilidade- Curso Intensivo

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/

Page 21: Design e usabilidade- Curso Intensivo

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

Page 22: Design e usabilidade- Curso Intensivo

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

Page 23: Design e usabilidade- Curso Intensivo

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.

Page 24: Design e usabilidade- Curso Intensivo

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.

Page 25: Design e usabilidade- Curso Intensivo

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.

Page 26: Design e usabilidade- Curso Intensivo

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.

Page 27: Design e usabilidade- Curso Intensivo

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.

Page 28: Design e usabilidade- Curso Intensivo

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.

Page 29: Design e usabilidade- Curso Intensivo

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

Page 30: Design e usabilidade- Curso Intensivo

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.

Page 31: Design e usabilidade- Curso Intensivo

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.

Page 32: Design e usabilidade- Curso Intensivo

10 dicas:

8. Comunique eficazmente

aaron marcus lista três princípios fundamentais que podemos chamar de “linguagem visual”

• OrganizeConsistência, coerência, navegabilidade.

• EconomizeSimplicidade, clareza e ênfase no objeto

• ComuniqueLegibilidade, simbologia, tipografia, 3 tipos de fonte no máximo, 3 corpos de fonte no máximo

Page 33: Design e usabilidade- Curso Intensivo

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.

Page 34: Design e usabilidade- Curso Intensivo

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

Page 35: Design e usabilidade- Curso Intensivo

EuripEdEs magalhãEs - @EuripEdEsm

Encontrabilidade

Page 36: Design e usabilidade- Curso Intensivo

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

Page 37: Design e usabilidade- Curso Intensivo

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/

Page 38: Design e usabilidade- Curso Intensivo

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/

Page 39: Design e usabilidade- Curso Intensivo

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.

Page 40: Design e usabilidade- Curso Intensivo

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

Page 41: Design e usabilidade- Curso Intensivo

EuripEdEs magalhãEs - @EuripEdEsm

comprabilidade

Page 42: Design e usabilidade- Curso Intensivo

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

Page 43: Design e usabilidade- Curso Intensivo

comprabilidadE

abandono do carrinho

*marketsherpa E-commerce study, 2006 - gráfico por ricardo panini

Page 44: Design e usabilidade- Curso Intensivo

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

Page 45: Design e usabilidade- Curso Intensivo

comprabilidadE

Exemplo de checkout único:

mais exemplos em: http://www.1stwebdesigner.com/inspiration/excellent-shopping-cart-designs-showcase-and-best-practices/

Page 46: Design e usabilidade- Curso Intensivo

comprabilidadE

cafepress:

• Opção de salvar o carrinho de compras

• Integração com PayPal

• Atualização de quantidade

• Múltiplos métodos de envio

Page 47: Design e usabilidade- Curso Intensivo

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

Page 48: Design e usabilidade- Curso Intensivo

EuripEdEs magalhãEs - @EuripEdEsm

confiabilidade

Page 49: Design e usabilidade- Curso Intensivo

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

Page 50: Design e usabilidade- Curso Intensivo

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;

Page 51: Design e usabilidade- Curso Intensivo

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/

Page 52: Design e usabilidade- Curso Intensivo

EuripEdEs magalhãEs - @EuripEdEsm

identidade visual

Page 53: Design e usabilidade- Curso Intensivo

criação dE marca E idEntidadE visual

O que define uma identidade visual?

Page 54: Design e usabilidade- Curso Intensivo

idEntidadE

“Conjunto de características e circunstâncias que distinguem uma pessoa ou uma coisa* e graças àsquais é possível individualizá-la”

dicionário houaiss da língua portuguesa

Page 55: Design e usabilidade- Curso Intensivo

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

Page 56: Design e usabilidade- Curso Intensivo

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

Page 57: Design e usabilidade- Curso Intensivo

antEs - dEpois

Page 58: Design e usabilidade- Curso Intensivo

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.

marcas no mEio digital

Page 59: Design e usabilidade- Curso Intensivo

intErnEt

Page 60: Design e usabilidade- Curso Intensivo
Page 61: Design e usabilidade- Curso Intensivo

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.

intErFacE

Page 62: Design e usabilidade- Curso Intensivo
Page 63: Design e usabilidade- Curso Intensivo

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.

cultura dE consumo dE dEsign

Page 64: Design e usabilidade- Curso Intensivo

“O norte do designer é a cultura”

claudio Ferlauto

Page 65: Design e usabilidade- Curso Intensivo

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

como sEr criativo

Page 66: Design e usabilidade- Curso Intensivo

• 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)

como sEr criativo

Page 67: Design e usabilidade- Curso Intensivo

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

Page 68: Design e usabilidade- Curso Intensivo

DISCOVERY INTERPRETATION IDEATION EXPERIMENTATION EVOLUTION

procEsso idEo

Page 69: Design e usabilidade- Curso Intensivo

procEsso stanFord

Page 70: Design e usabilidade- Curso Intensivo

DF

conhecimento e definição do

problema

coleta e análise de

dados

cD criativiDaDE

• PAINEL SEmâNTICo

• RELAçõES VISUAIS

• CoNCEIToS DE DESIgN

procEsso criativo por bruno munari

Page 71: Design e usabilidade- Curso Intensivo

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

Page 72: Design e usabilidade- Curso Intensivo

painEl sEmântico - EXEmplos

Fonte: http://fernandasegolin.wordpress.com

Page 73: Design e usabilidade- Curso Intensivo

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

Page 74: Design e usabilidade- Curso Intensivo
Page 75: Design e usabilidade- Curso Intensivo

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/

Page 76: Design e usabilidade- Curso Intensivo

corEs

Page 77: Design e usabilidade- Curso Intensivo

outras inFluências

Page 78: Design e usabilidade- Curso Intensivo

outras inFluências

Page 79: Design e usabilidade- Curso Intensivo

outras inFluências

Page 80: Design e usabilidade- Curso Intensivo

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.

Page 81: Design e usabilidade- Curso Intensivo
Page 82: Design e usabilidade- Curso Intensivo

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.

Page 83: Design e usabilidade- Curso Intensivo

“a tipografia é acara da linguagem”

Ellen lupton

Page 84: Design e usabilidade- Curso Intensivo

tipograFia

com tipografia é possível trazer situações visuais que englobem as sensações desejadas.

trabalhe pesos e formas de acordo com a necessidade.

Page 85: Design e usabilidade- Curso Intensivo

a tipograFia nas marcas

Existem muitas marcas que são criadas somente com tipos.

marcas sempre presentes no ranking da interbrand.

Page 86: Design e usabilidade- Curso Intensivo

simplicidade!!!

Page 87: Design e usabilidade- Curso Intensivo

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.

Page 88: Design e usabilidade- Curso Intensivo

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.

Page 89: Design e usabilidade- Curso Intensivo
Page 90: Design e usabilidade- Curso Intensivo

EuripEdEs magalhãEs - @EuripEdEsm

layout

Page 91: Design e usabilidade- Curso Intensivo

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.

Page 92: Design e usabilidade- Curso Intensivo

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.

Page 93: Design e usabilidade- Curso Intensivo

EQuilíbrio

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.

Page 94: Design e usabilidade- Curso Intensivo

layouts intErEssantEs

Page 95: Design e usabilidade- Curso Intensivo

layouts intErEssantEs

Page 96: Design e usabilidade- Curso Intensivo

layouts intErEssantEs

Page 97: Design e usabilidade- Curso Intensivo

EuripEdEs magalhãEs - @EuripEdEsm

conteúdos e vendas

Page 98: Design e usabilidade- Curso Intensivo

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

Page 99: Design e usabilidade- Curso Intensivo

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

Page 100: Design e usabilidade- Curso Intensivo

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

Page 101: Design e usabilidade- Curso Intensivo

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

Page 102: Design e usabilidade- Curso Intensivo

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

Page 103: Design e usabilidade- Curso Intensivo

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

Page 104: Design e usabilidade- Curso Intensivo

http://totheweb.com/learning_center/attracting-sales-prospects.html

pipElinE - Funil dE vEndas

Page 105: Design e usabilidade- Curso Intensivo

EuripEdEs magalhãEs - @EuripEdEsm

testes

Page 106: Design e usabilidade- Curso Intensivo

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

Page 107: Design e usabilidade- Curso Intensivo
Page 108: Design e usabilidade- Curso Intensivo

click tale

Page 109: Design e usabilidade- Curso Intensivo

depois

Page 110: Design e usabilidade- Curso Intensivo
Page 111: Design e usabilidade- Curso Intensivo
Page 112: Design e usabilidade- Curso Intensivo
Page 113: Design e usabilidade- Curso Intensivo

antes - recorde

Page 114: Design e usabilidade- Curso Intensivo

depois - recorde

Page 115: Design e usabilidade- Curso Intensivo

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.

Page 116: Design e usabilidade- Curso Intensivo

html - dEsign rEsponsivo

Page 117: Design e usabilidade- Curso Intensivo
Page 118: Design e usabilidade- Curso Intensivo

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.

Page 119: Design e usabilidade- Curso Intensivo

@EuripEdEsm

• 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

links úteis e bibliografia

Page 120: Design e usabilidade- Curso Intensivo

@EuripEdEsm

• 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

links úteis e bibliografia

Page 121: Design e usabilidade- Curso Intensivo

@EuripEdEsm

• 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

links úteis e bibliografia

Page 122: Design e usabilidade- Curso Intensivo

@EuripEdEsm

•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/

links úteis e bibliografia

Page 123: Design e usabilidade- Curso Intensivo

@EuripEdEsm

web: www.euripedes.com.brmail: [email protected]: @euripedesm

mais:http://posmktdigital.wordpress.com/www.twitter.com/mktdigimpacta

Obrigado