Your SlideShare is downloading. ×
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerce
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Evento Comportamento do Consumidor e Estratégias Digitais para E-commerce

410
views

Published on

Palestra "Design com Focos em Vendas" - Eurípedes Magalhães

Palestra "Design com Focos em Vendas" - Eurípedes Magalhães

Published in: Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
410
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. EURIPEDES MAGALHÃES - @EURIPEDESMDesign e Usabilidade
  • 2. DESIGN PARA NEGÓCIOS DIGITAISO design atua como ferramenta importante dentrodos projetos digitais, mas sua função não é somente“embelezar” produtos ou “chamar atenção”.O design é reponsável por auxiliar e direcionar umacomunicação mais assertiva, pois trabalha comobjetivos claros e com forte estudo nos usuários.
  • 3. CONCEITOS DO DESIGN PARA E-COMMERCEComo deve ser: Emocional + Objetivo + UsualO design pode ajudar a criar credibilidade e confiança, fatoresprimordiais 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 categoriahttp://www.consumerwebwatch.org/dynamic/web-credibility-report-evaluate.cfm
  • 6. EURIPEDES MAGALHÃES - @EURIPEDESMUsabilidade
  • 7. USABILIDADEPresente na Arquitetura de Informação, UXD e emqualquer lugar que uma pessoa use algo, usabilidadeajuda a deixar tudo melhor, ou pelo menos resolverproblemas sérios que podem gerar situaçõesperigosas.
  • 8. MEMÓRIA HUMANA VS COMPUTACIONAL SELETIVA INDISCRIMINADA EVOLUTIVA ESTÁVEL ASSOCIATIVA DISCRETAFaber Ludens
  • 9. Norman (2006) - Conhecimento na cabeça
  • 10. Conhecimento no mundo
  • 11. Conhecimento no mundo
  • 12. Conhecimento no mundo
  • 13. USABILIDADE - COMPONENTESAprendizagem - O quanto é difícil completar tarefasbásicas no primeiro encontro com a interface?Eficiência - Para os usuários que já tenham algumafamiliaridade com a interface, como podem fazer tarefasmais 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ãopreocupantes esses erros e como eles são corrigidos?Satisfação - O quanto é prazeroso usar essa interface?
  • 14. A IMPORTÂNCIA DO CONTEXTO DE USOCada usuário acessa o e-commerce com um objetivoespecífico, cada usuário tem um perfil de compra quedeve ser analisado para que seja oferecido para eleum conteúdo adequado e também ofertas adequadas.Por isso, pensar no contexto em que o usuário vaiutilizar o site poder dar subsídios interessantes parauma melhor criação.Por exemplo, como um usuário procuraria um celularem uma Loja Própria ou em uma Multiloja?
  • 15. CONSTRUINDO O CONTEXTO DE USO Construir o perfil Construir Construir as dos consumidores ambiente de uso tarefas básicas
  • 16. CRIANDO A EXPERIÊNCIA DE USO Arquitetura de Informação Indicadores de Layout das Telas Performance Avaliar a Usabilidade
  • 17. EURIPEDES MAGALHÃES - @EURIPEDESMNavegabilidade
  • 18. COMO OS USUÁRIOS PENSAM?Steve Krug em seu livro “Não me faça pensar”, afirma quequanto menos o usuário pensa, melhor é o entendimentodo 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 deforma muito diferente de lojas físicas.Os usuários olham as páginas de forma geral, grandeparte do conteúdo passa dispercebido, pois ele clica emalgo do seu interesse ou em algo que relembre o que eleprocura.http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  • 19. COMO OS USUÁRIOS PENSAM?Os usuários costumam “escanear” as páginas emsua navegação procurando pontos para guiá-los nanavegação pela página
  • 20. 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
  • 21. COMO OS USUÁRIOS PENSAM?Usuários não fazem as melhores escolhas porqueescolhem a primeira opção que julgam adequada, masnão exatamente o que buscam. Filtros e navegaçõesintuitivas podem ajudá-lo no processo.
  • 22. 10 DICAS:1. Não faça o usuário pensarAjude o usuário o usuário a fazer decisões de comprasconscientes o livrando de dúvidas.
  • 23. 10 DICAS:2. Não abuse da paciência do usuárioFacilite a navegação,com filtros, ferramentasde buscas e facilitea finalização dospedidos.
  • 24. 10 DICAS:3. Guie a navegação e os focos de atençãoClareza na informação,uso não exageradode elementos,não sobrecarrecara memória dousuário com muitospensamentos do queele precisa fazer.
  • 25. 10 DICAS:4. Deixe claro o objetivo da páginaGuie o usuário pelo percurso da página, sites efetivosagradam pelos bons passo-a-passo e pelos botõesgrandes são “user friendly” e ajudam no processo.
  • 26. 10 DICAS:5. Escreva de forma eficazDiferente da impressão,o texto da internet éentendido de formadiferente, por exemplo,textos longos nãosão lidos e linguagempromocional tambémnão, além dosproblemas com palavrasem bold ou itálico quesão ignoradas.
  • 27. 10 DICAS:5. Escreva de forma eficazDicas:• 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
  • 28. 10 DICAS:6. Opte por simplicidadeUsuários raramente entram em um site para desfrutardo seu design, embora ele seja importante e faça comque o usuário sinta-se imerso no contexto, “keep itsimple”-principle (KIS), pense na informação que vaiajudar o usuário.
  • 29. 10 DICAS:7. Trabalhe bem os respiros das páginasEspaços em branco ajudam o usuário a dividirconteúdos e áreas diminuindo sua carga visual.Trabalhe hierarquia deinformação para reduzir acomplexidade de leitura doselementos da página.
  • 30. 10 DICAS:8. Comunique eficazmenteAaron Marcus lista três princípios fundamentais quepodemos chamar de “linguagem visual”• OrganizeConsistência, coerência, navegabilidade.• EconomizeSimplicidade, clareza e ênfase no objeto• ComuniqueLegibilidade, simbologia, tipografia, 3 tipos de fonte nomáximo, 3 corpos de fonte no máximo
  • 31. 10 DICAS:9. Aproveite-se das convençõesSer tradicional não significa ser chato. Aproveitar-se dade alguns itens convencionais ajuda na diminuição dacurva de aprendizagem.Convenções ajudam a página a ganhar confiança,segurança econsequentementecredibilidade.
  • 32. 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 sitepelos 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 testarnenhum;• Testes são processos interativos onde podem se perceber erros, consertá-los e testar novamente• Testes de usabilidade produzem resultados usuais, que devem ser usadospara resolver os problemas de design do projeto • Segundo Weinberg, o desenvolvedor é a pessoa inadequada para testar ofuncionamento do site
  • 33. EURIPEDES MAGALHÃES - @EURIPEDESMEncontrabilidade
  • 34. A estratégia da encontrabilidade pode ser resumida em uma frase: “A melhor maneira deencontrar o seu usuário é ser encontrado por ele” Felipe Morais
  • 35. ENCONTRABILIDADENo livro lançado recentemente o Google discursa sobreo novo momento da verdade na decisão de compras. Ainternet é fator fundamental nesse ponto.Modelo mental tradicional:www.zeromomentoftruth.com/
  • 36. ENCONTRABILIDADENesse novo pensamento, o usuário se utiliza da internetnão só para conhecer sobre o produto, mas paraaprender sobre o assunto e obviamente encontrá-lopara compra.Novo modelomental:www.zeromomentoftruth.com/
  • 37. ENCONTRABILIDADEA construção da página deve levar em consideraçãoessa nova situação, um bom trabalho de SEO éfundamental na encontrabilidade da página. Aconstrução do conteúdo deve ser pautada nessepensamento.A tecnologia utilizada também vai influenciar aencontrabilidade do site. Códigos criptografados sãomais difíceis de serem indexados.É importante pensar que a encontrabilidade vai alémdos mecanismos de busca, tem relação direta com a aconstrução de conteúdo voltada para o usuário.
  • 38. ENCONTRABILIDADEFlashÉ possível indexar aplicações em flash a partir dacriação de um conteúdo estático que duplica oconteúdo compilado, utilizando o SWFobject é possíveldeixar o conteúdo na mesma URL.Ajax, Javascript e outros conteúdos criptografadosPor ser uma tecnologia assíncrona, onde é possívelapresentar conteúdo sem página, o ajax é um impecíliopara os mecanismos de busca. Para resolver isso oconteúdo deve ser pré-carregado na página, senão esseconteúdo pode ficar invisível
  • 39. ENCONTRABILIDADE VS CMSO Sistemas de Gerenciamento de Conteúdo sãosistemas criados para auxiliar o administrador dosite a organizar o conteúdo, porém alguns sistemasde gerenciamento dificultam a leitura dos sistemas.Vejamos alguns problemas que podem ser evitados:URLs DinâmicasOs buscadores não entendem uma página de conteúdo,eles entendem uma mudança de caminho, isso fazcom que o buscador copie acidentalmente o conteúdovárias vezes, isso prejudica a performance de busca.
  • 40. ENCONTRABILIDADE VS CMSVários caminhos de URLEm e-commerce, um problema típico é a progressãodo ciclo de vida do produto, que vai acumulando váriasURLs, é importante se certificar que por mais queexistam vários links para aquela URL, é importante queela seja única. Ex.: Quando o produto aparece em umalista de presentes e também na sua categoria.Obs.: Mais exemplos no livro “O Guia para Projetar UX”.
  • 41. ENCONTRABILIDADE / CONTEÚDOO conteúdo é extremamente importante nesseprocesso, o design da página deve ser construídopensando no conteúdo e conteúdo construído nopensamento da página.Palavras-chaves no conteúdo são muito importantes, osprofissionais de SEO devem participar do processo deconstrução de conteúdo para que possam ser definidasuma lista de palavras para serem utilizadas no texto.Os sites de busca costumam procurar palavrasem vários lugares dos sites para a indexação, comconteúdos interligados e complementares
  • 42. ENCONTRABILIDADE / CONTEÚDODicas:Use Mapas do SiteÉ comum atualmente esconder essas páginasna criação de sites, porém eles ajudam não noposicionamento da página, mas ajudam o buscadora entender a estrutura do diretório e a encontrarconteúdo novo e atualizado.Mantenha o conteúdo AtualizadoO crescimento de conteúdo do site ajuda-o a manteruma boa colocação nos resultados de busca. Nãosignifica que o conteúdo deva ser modificado, mas quenovos conteúdos possam ser acrescentados.
  • 43. EURIPEDES MAGALHÃES - @EURIPEDESMComprabilidade
  • 44. COMPRABILIDADEÉ muito importante que o processo de finalização decompra de um site seja simples.Econtrar um produto, escolher formas de pagamentoe frete, e finalizar a compra facilmente são muitoimportantes.Otimizar o carrinho de compras é uma das tarefas maisimportantes 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
  • 45. COMPRABILIDADEAbandono do carrinho*MarketSherpa E-Commerce study, 2006 - Gráfico por Ricardo Panini
  • 46. COMPRABILIDADEAlguma 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 únicohttp://www.slideshare.net/rpanini/a-importncia-do-design-no-ecommerce
  • 47. COMPRABILIDADEExemplo de Checkout único:Mais exemplos em: http://www.1stwebdesigner.com/inspiration/excellent-shopping-cart-designs-showcase-and-best-practices/
  • 48. COMPRABILIDADECafepress:• Opção de salvar o carrinho de compras• Integração com PayPal• Atualização de quantidade• Múltiplos métodos de envio
  • 49. COMPRABILIDADEAmerican 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
  • 50. COMPRABILIDADEBlueNile:• 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
  • 51. EURIPEDES MAGALHÃES - @EURIPEDESMConfiabilidade
  • 52. CONFIABILIDADE E CREDIBILIDADECom o crescimento das lojas virtuais prontas, cresce tambéma dúvida dos consumidores sobre a segurança e qualidadedo serviço, o medo de clonagem de cartões, problemas comentrega podem gerar um abandono na compra.Em um artigo para o site E-commerce Brasil, Mateus Toledodá 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 visibilidadepraticamente nula e sugere:• No campo de finalização da compra, deixe um campo para que o usuáriotenha que dar um aceite nos termos e condições;• Tenha um sistema de avaliação da loja e não tenha medo de deixarisso aberto nas redes sociais, isso ajudará a mostrar o quanto sua loja étransparente e também ajudará você a melhorá-la;
  • 53. CONFIABILIDADE E CREDIBILIDADE• Utilize um SSL (Secure Socket Layer) próprio, pois é comum hoje quebancos façam propaganda grande para que as pessoas se preocupemcom a segurança dos dados. Um SSL compartilhado pode gerar umadesconfiança a respeito;• Utilize um sistema de verificação de segurança, utilizar o selo de SiteBlindado, Site Forte, ou algum outro;• Para ajudar na confiança dos desconfiados, no rodapé do site, além decolocar informações sobre direitos reservados, colocar o CNPJ ajuda naconversão dos desconfiados;• Não fuja das reclamações e responda os questionamentos feitos em sitescomo Reclame Aqui, Confiômetro, etc.http://www.ecommercebrasil.com.br/artigos/credibilidade-e-confiabilidade-um-problema-no-e-commerce/
  • 54. CONFIABILIDADE E CREDIBILIDADERobson Tavarone cita em um artigo para o site E-commerceNews um case de um cliente que tinha 800 acessos únicosdiários mas nenhuma conversão. Na análise do site do clienteo 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
  • 55. EURIPEDES MAGALHÃES - @EURIPEDESMIdentidade Visual
  • 56. CRIAÇÃO DE MARCA E IDENTIDADE VISUALO que define umaidentidade visual?
  • 57. IDENTIDADE“Conjunto de características e circunstâncias quedistinguem uma pessoa ou uma coisa* e graças àsquais é possível individualizá-la”Dicionário Houaiss da Língua Portuguesa
  • 58. PRA QUE SERVE IDENTIDADE VISUAL? IDENTIDADE VISUAL identificação interna identificação externa redução de custos incrementar vendas ATINGIR OBJETIVOS DO NEGÓCIOMarks of Excellence, 1997.
  • 59. 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 consumidorJair Alves
  • 60. QUANDO PENSAR EM IDENTIDADE VISUAL?• Nova Empresa, novo produto, novo serviço.• Aquisição, Fusão• Reposicionamento• Novo mercado• Troca de nome• RevitalizaçãoJair Alves
  • 61. ANTES - DEPOIS
  • 62. INTERNET
  • 63. EM QUAIS MATERIAIS CONSISTEM A ID?• Símbolo• Logotipo• Cor• Tipografia• Aplicações (papelaria, catálogos, produtos, embalagens, frota, uniformes, etc....)Jair Alves
  • 64. ...E MAIS DO QUE NUNCA:
  • 65. MARCAS NO MEIO DIGITALO design de marcas na era contemporânea deve pensar que ospixels são por vezes o suporte complementar da identidade epor vezes o suporte principal de apresentação da marca.E o meio digital não se resume obviamente à uma página web.
  • 66. DESIGN LÍQUIDONo livro “DNA Empresarial”, a Profa. Dra. Lígia Fascione falasobre a identidade líquida. Aqui podemos citar as “marcaslíquidas”.Líquidos, fluidos se adequam ao espaço onde são inseridos, seadequando as formas do espaço e adentrando profundamenteem todas as reentrâncias existentes.
  • 67. DESIGN LÍQUIDOTanto como nascer “offline” e se tornar “online”, a marca podesair do digital e partir para o físico, em expansões praticamenteinfinitas.Isso deve ser levado em consideração no design de marcas.Não é possível mais desassociar uma situação da outra.
  • 68. INTERFACEO design de marcas não é só o design para um símbolo gráficoque vai estar em algum site, mas também design para sistemasintegrados digitais e gráficos, onde essa marca tem que seexpandir coerentemente e integralmente.
  • 69. CULTURA DE CONSUMO DE DESIGNCulturalmente, o Brasil ainda não é um país acostumado aconsumir design de qualidade (não estou falando de designde carros).É papel do designer “educar” o cliente para que essa culturacresça e se solidifique.
  • 70. O PROCESSO CRIATIVOMuitos profissionais divergem sobre a forma mais correta dedefinir uma estratégia, metodologia ou sequência de trabalhopara se definir o design de uma marca.
  • 71. EXPERIMENTAÇÃO “Não sei se existe a inspiração, mas se ela vier, vai me encontrar trabalhando”. Pablo PicassoRafic Farah
  • 72. CONCEITUAÇÃOO símbolo e o logotipo devem ter algum conceito relacionadoao tipo de negócio da empresa, deve refletir o que a marcaquer 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.
  • 73. “O norte do designer é a cultura” Claudio Ferlauto
  • 74. COMO SER CRIATIVOSegunda a Profa. Msc. e artista Martha Gabriel a criatividadeestá vinculada a bloqueios e preconceitos que fazem parte danossa formação cultural.Alguns fatores que inibem a criatividade segundo Martha.Gabriel, além da preguiça:• Rótulos• Riscos• Ego• Dinheiro• Ambiente
  • 75. 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)
  • 76. CAMINHOS“A solução mora no problema”Rico LinsDados, dados, dados, pesquisa, pesquisa, pesquisa. Todas asinformações que forem encontradas são importantes, entendera IDENTIDADE CORPORATIVA vai ajudar no design da marca.Dados de planejamento, objetivos de branding, pesquisa decomportamento do consumidor, tendências do seguimento...
  • 77. PARA ANALISAR• Concorrentes• Mercado semelhante• Problemas da marca existente• Qualidades da marca existente• Objetivos primários e secundários
  • 78. DESIGN THINKING“Design Thinking, ou pensamento de Design, é uma abstraçãodo modelo mental utilizado há anos pelos designers para darvida a idéias. Esse modelo mental e seus poderosos conceitospodem ser aprendidos e utilizados por qualquer pessoa eaplicados em qualquer cenário de negócio ou social.”Tim Brown
  • 79. PROCESSO IDEODISCOVERY INTERPRETATION IDEATION EXPERIMENTATION EVOLUTION
  • 80. PROCESSO STANFORD
  • 81. 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
  • 82. PAINEL SEMÂNTICOSemântica é o estudo do significado da linguagem.O painel semântico é um guia de referências rápido, elepode ser formatado de diversas maneiras de acordo com anecessidade 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
  • 83. PAINEL SEMÂNTICO - EXEMPLOSFonte: http://fernandasegolin.wordpress.com
  • 84. CORESNão é necessário citar a importância das cores, que envolveestudos longos e importantes, mas também ela é fatordeterminante na apresentação coerente dos conceitosaplicados na marca.Existem significados psicológicos para cores, Modesto Farinaem seu livro cita essas sensações e possíveis aplicações emdiversos 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
  • 85. 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/
  • 86. CORES
  • 87. OUTRAS INFLUÊNCIAS
  • 88. OUTRAS INFLUÊNCIAS
  • 89. OUTRAS INFLUÊNCIAS
  • 90. CORESCom aplicações simples dos símbolos da marca e com umfoco grande nas cores, conseguimos identificar facilmente umaempresa.Marcelo Trevisani defende: “Marca é a cultura e as experiênciasque residem na mente de cada consumidor a respeito de umproduto ou serviço de uma empresa.”.E as cores ajudam nesse processo.
  • 91. CORESO designer Alexandre Wollner defende o uso de poucascores na criação de marcas, para que seja facilmenteidentificada e para que seja mais prática e barata nosprocessos de impressão.
  • 92. A TIPOGRAFIA NAS MARCASTipografia 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 fortepensamento em linguagem visual.
  • 93. “A tipografia é acara da linguagem” Ellen Lupton
  • 94. TIPOGRAFIACom tipografia é possível trazer situações visuais queenglobem as sensações desejadas.Trabalhe pesos e formas de acordo com a necessidade.
  • 95. A TIPOGRAFIA NAS MARCAS Existem muitas marcas que são criadas somente com tipos.Marcas sempre presentes no ranking da Interbrand.
  • 96. Simplicidade!!!
  • 97. A TIPOGRAFIA NAS MARCASHoje já é possível embedar fontes no html ou hospedara fonte em servidores específicos, que pode facilitar ouaté mesmo acabar com a necessidade de utilizar fontessubstitutas no html.
  • 98. TIPOGRAFIAUse famílias e suas variações na identidade visual.Se a fonte da marca for uma fonte específica, procure umafonte de apoio. Pode ser definida também uma fonte “display”para títulos e uma fonte mais voltada para leitura, texto.
  • 99. EURIPEDES MAGALHÃES - @EURIPEDESMLayout
  • 100. PRIORIDADES NO DESIGN DE PÁGINASCriar para e-commerce requer uma preocupação grandecom 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 napágina, a categorização dos elementos dentro do menu epossíveis customizações de layout.
  • 101. ORGANIZAÇÃO DOS PRODUTOSOrganize de forma clara e relacione os produtos por tipo oufuncionalidade, levando em consideração o contexto de uso dousuário.
  • 102. GESTALTGestalt é um fenômeno estudado pela psicologia mas que seaplica muito ao design, por vezes é esquecido e abandonado.É relacionado como o olho humano entende os elementosvisuais, como imagens são formadas e completadasinstitivamente e intuitivamente.
  • 103. GESTALT - LEISProximidade:Objetos próximos tendem a formar uma figura de grupo.
  • 104. GESTALT - LEISFechamento:O olho humano cria elementos faltantes para completar umaforma ou imagem.
  • 105. GESTALT - LEISContinuidadeUm padrão se estende visualmente mesmo após a sua parada.
  • 106. GESTALT - LEISSimilaridadeElementos com propriedades similares automaticamente sãoassociados.
  • 107. IMPORTANTE - GESTALTAproveita-se desses elementos e outros como Alinhamentoe Balanço dos elementos para criar relacionamentos visuais edefinir a importância dos elementos e organização dos menus.
  • 108. ARQUITETURA DE INFORMAÇÃO - WIREFRAME
  • 109. ARQUITETURA DE INFORMAÇÃO - WIREFRAME
  • 110. LAYOUTS INTERESSANTES
  • 111. LAYOUTS INTERESSANTES
  • 112. LAYOUTS INTERESSANTES
  • 113. CATEGORIZAÇÃOCrie categorias com taxonomia adequada ao usuário, um testede cardsorting traz resultados efetivos para essa construção.
  • 114. 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/
  • 115. EURIPEDES MAGALHÃES - @EURIPEDESMConteúdos e Vendas
  • 116. 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
  • 117. 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
  • 118. 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
  • 119. PIPELINE - FUNIL DE VENDASPensando em conteúdo, o que se pode analisar segundo o siteTo The Web:Quais conteúdos conduzirão seus prospectspelo funil de vendas?QUEMQuem você está tentando atrair para oseu 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
  • 120. PIPELINE - FUNIL DE VENDASO QUÊQual conteúdo é específico para cada usuário desse site?• crie conteúdos que atendam pelo menostrês grupos importantes , trace um planoque aborde os problemas que cada grupopretende resolver acessando o site e suasobjeções• considere qual é a mensagem maisimportante que a página deve transmitir
  • 121. PIPELINE - FUNIL DE VENDASCOMOComo você pode incentivar os visitantesa interagirem com a sua empresa?• entenda e refine o processo de vendaque os visitantes seguirão em seu site• defina as métricas-chave do negóciopara poder medir o sucesso alcançado
  • 122. PIPELINE - FUNIL DE VENDAS http://totheweb.com/ learning_center/attracting- sales-prospects.html
  • 123. EURIPEDES MAGALHÃES - @EURIPEDESMTestes
  • 124. UXD - TRABALHANDO MELHORIASProjeto - Planeta Verde TangO que é - Uma “rede social” para criançasObjetivo - Melhorar o uso do siteAprendizados - A partir de testes, foi identificada a dúvidasobre a dificuldade das crianças fazerem scroll no site
  • 125. Click Tale
  • 126. Depois
  • 127. Antes - Recorde
  • 128. Depois - Recorde
  • 129. UXD - TRABALHANDO MELHORIASDepois de quase 22 dias de teste A/B, foi gerada massacritica suficiente para encerraramento do teste.Visitas - 3.220 (Que tiveram suas impressões divididas em50% para cada versão)Conversões - 70 (Que 40% gerado pela página original e60% pela versão B)E o resultado foi:53% de incremento no volume de envio de vídeos naversã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.
  • 130. HEURÍSTICAS - JAKOB NIELSENAs heurísticas são uma série de “dicas”ou “regras” que ajudam no entendimentode situações comuns que acontecemdiariamente e que podem atrapalhar anavegação pelos usuários.
  • 131. HEURÍSTICAS - JAKOB NIELSEN1) 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
  • 132. HEURÍSTICAS - JAKOB NIELSEN4) 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
  • 133. HEURÍSTICAS - JAKOB NIELSEN7) 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
  • 134. HEURÍSTICAS - JAKOB NIELSEN9) 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
  • 135. HTMLNo código HTML se inserem as informções de tagueamentos etambém de códigos para SEO.Hoje dia existe o HTML 5 e os sites que contém animações via essescódigos e também os sites que chamamos de “design responsivo”.
  • 136. HTML - DESIGN RESPONSIVO
  • 137. ADMINISTRAÇÃO DO SITEAo gerar conteúdo para o um blog por exemplo, é importante pensarque o texto a ser publicado, pode conter palavras que ajudam nabusca do Google além das tags relacionadas ao post.Quanto mais citações,mais relevância aoassunto, quanto maisrelação com outrosconteúdos online, maisrelevância também.O Wordpress permiteainda a instalação dediversos widgets eplug-ins que ajudamna divulgação doconteúdo.
  • 138. CONCLUINDO...Em linhas gerais, sabemos que independente da técnicautilizada, o olhar deve ser voltado para o ser humano quevai utilizar essa criação.Partindo deste ponto, fica mais fácil perceber caminhosinteligentes para o desenvolvimento.Sair do senso comum e ir em busca de algo novo einteressante verdadeiramente.
  • 139. @EURIPEDESMLinks ú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
  • 140. @EURIPEDESMLinks ú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
  • 141. @EURIPEDESMLinks ú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
  • 142. @EURIPEDESMLinks ú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.htmlhttp://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/
  • 143. @EURIPEDESMObrigadoweb: www.euripedes.com.brmail: euripedes@euripedes.com.brtwitter: @euripedesmMAIS:http://posmktdigital.wordpress.com/www.twitter.com/mktdigimpacta