Igor Magrini - @igormmDesign e Usabilidade
design para negócios digitaisO design atua como ferramenta importante dentrodos projetos digitais, mas sua função não é so...
conceitos do design para e-commerceComo deve ser:            Emocional         + Objetivo + UsualO design pode ajudar a cr...
como as pessoas avaliam a credibilidade?                        15 de abril de 2012                        Os participante...
como as pessoas avaliam a credibilidade?                                                       Percentagem de             ...
Igor Magrini - @igormmUsabilidade
usabilidadePresente na Arquitetura de Informação, UXD e emqualquer lugar que uma pessoa use algo, usabilidadeajuda a deixa...
memória humana vs computacional                seletiva     indiscriminada               evolutiva        estável         ...
Norman (2006) - Conhecimento na cabeça
Conhecimento no mundo
Conhecimento no mundo
Conhecimento no mundo
usabilidade - componentesAprendizagem - O quanto é difícil completar tarefasbásicas no primeiro encontro com a interface?E...
a importância do contexto de usoCada usuário acessa o e-commerce com um objetivoespecífico, cada usuário tem um perfil de ...
construindo o contexto de uso Construir o perfil     Construir         Construir as dos consumidores     ambiente de uso  ...
CrianDo a experiência de uso                         Arquitetura de                          Informação        Indicadores...
Igor Magrini - @igormmNavegabilidade
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 e...
como os usuários pensam?Os usuários costumam “escanear” as páginas emsua navegação procurando pontos para guiá-los nanaveg...
como os usuários pensam?Basicamente:• Usuários apreciam qualidade e credibilidade• Usuários não leêm, eles escaneiam a pág...
como os usuários pensam?Usuários não fazem as melhores escolhas porqueescolhem a primeira opção que julgam adequada, masnã...
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.
10 dicas:2. Não abuse da paciência do usuárioFacilite a navegação,com filtros, ferramentasde buscas e facilitea finalizaçã...
10 dicas:3. Guie a navegação e os focos de atençãoClareza na informação,uso não exageradode elementos,não sobrecarrecara m...
10 dicas:4. Deixe claro o objetivo da páginaGuie o usuário pelo percurso da página, sites efetivosagradam pelos bons passo...
10 dicas:5. Escreva de forma eficazDiferente da impressão,o texto da internet éentendido de formadiferente, por exemplo,te...
10 dicas:5. Escreva de forma eficazDicas:• Use frases curtas e concisas (direto ao ponto)• Pense que os usuários irão esca...
10 dicas:6. Opte por simplicidadeUsuários raramente entram em um site para desfrutardo seu design, embora ele seja importa...
10 dicas:7. Trabalhe bem os respiros das páginasEspaços em branco ajudam o usuário a dividirconteúdos e áreas diminuindo s...
10 dicas:8. Comunique eficazmenteAaron Marcus lista três princípios fundamentais quepodemos chamar de “linguagem visual”• ...
10 dicas:9. Aproveite-se das convençõesSer tradicional não significa ser chato. Aproveitar-se dade alguns itens convencion...
10 dicas:10. Faça testes de usabilidade“If you want a great site, you’ve got to test.”Os testes podem ajudar no entendimen...
Igor Magrini - @igormmEncontrabilidade
A estratégia da encontrabilidade pode ser resumida em uma frase:  “A melhor maneira deencontrar o seu usuário é ser encont...
encontrabilidadeNo livro lançado recentemente o Google discursa sobreo novo momento da verdade na decisão de compras. Aint...
encontrabilidadeNesse novo pensamento, o usuário se utiliza da internetnão só para conhecer sobre o produto, mas paraapren...
encontrabilidadeA construção da página deve levar em consideraçãoessa nova situação, um bom trabalho de SEO éfundamental n...
encontrabilidadeFlashÉ possível indexar aplicações em flash a partir dacriação de um conteúdo estático que duplica oconteú...
encontrabilidade VS CMSO Sistemas de Gerenciamento de Conteúdo sãosistemas criados para auxiliar o administrador dosite a ...
encontrabilidade VS CMSVários caminhos de URLEm e-commerce, um problema típico é a progressãodo ciclo de vida do produto, ...
encontrabilidade / conteúdoO conteúdo é extremamente importante nesseprocesso, o design da página deve ser construídopensa...
encontrabilidade / conteúdoDicas:Use Mapas do SiteÉ comum atualmente esconder essas páginasna criação de sites, porém eles...
Igor Magrini - @igormmComprabilidade
comprabilidadeÉ muito importante que o processo de finalização decompra de um site seja simples.Econtrar um produto, escol...
comprabilidadeAbandono do carrinho*MarketSherpa E-Commerce study, 2006 - Gráfico por Ricardo Panini
comprabilidadeAlguma dicas segundo Ricardo Panini:• Sinalizar bem os passos e evitar botões iguais;• Deixar claro todos os...
comprabilidadeExemplo de Checkout único:Mais exemplos em: http://www.1stwebdesigner.com/inspiration/excellent-shopping-car...
comprabilidadeCafepress:• Opção de salvar  o carrinho de  compras• Integração com  PayPal• Atualização de  quantidade• Múl...
comprabilidadeAmerican Eagle:• Call to Action  de frete gratuito  a partir de um  valor específico• Sumário  de compra  in...
comprabilidadeBlueNile:• Processo de compra visual• Opção de continuar comprando ou finalizar a compra• Apresentação  do n...
Igor Magrini - @igormmConfiabilidade
confiabilidade e credibilidadeCom o crescimento das lojas virtuais prontas, cresce tambéma dúvida dos consumidores sobre a...
confiabilidade e credibilidade• Utilize um SSL (Secure Socket Layer) próprio, pois é comum hoje quebancos façam propaganda...
confiabilidade e credibilidadeRobson Tavarone cita em um artigo para o site E-commerceNews um case de um cliente que tinha...
Igor Magrini - @igormmIdentidade Visual
criação de marca e identidade visualO que define umaidentidade visual?
identidade“Conjunto de características e circunstâncias quedistinguem uma pessoa ou uma coisa* e graças àsquais é possível...
pra que serve identidade visual?                             identidade visual               identificação interna   ident...
pra que serve identidade visual?• Individualidade da marca - diferenciação.• Expressar visualmente que tipo de organização...
QUANDO PENSAR EM IDENTIDADE VISUAL?• Nova Empresa, novo produto, novo serviço.• Aquisição, Fusão• Reposicionamento• Novo m...
antes - depois
internet
em quais materiais consistem a id?• Símbolo• Logotipo• Cor• Tipografia• Aplicações (papelaria, catálogos, produtos, embala...
...e mais do que nunca:
marcas no meio digitalO design de marcas na era contemporânea deve pensar que ospixels são por vezes o suporte complementa...
design líquidoNo livro “DNA Empresarial”, a Profa. Dra. Lígia Fascione falasobre a identidade líquida. Aqui podemos citar ...
design líquidoTanto como nascer “offline” e se tornar “online”, a marca podesair do digital e partir para o físico, em exp...
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 s...
cultura de consumo de designCulturalmente, o Brasil ainda não é um país acostumado aconsumir design de qualidade (não esto...
o processo criativoMuitos profissionais divergem sobre a forma mais correta dedefinir uma estratégia, metodologia ou sequê...
experimentação    “Não sei se existe a inspiração, mas se ela vier, vai    me encontrar trabalhando”.    Pablo PicassoRafi...
conceituaçãoO símbolo e o logotipo devem ter algum conceito relacionadoao tipo de negócio da empresa, deve refletir o que ...
“O norte do designer    é a cultura”     Claudio Ferlauto
como ser criativoSegunda a Profa. Msc. e artista Martha Gabriel a criatividadeestá vinculada a bloqueios e preconceitos qu...
como ser criativo• Veja muitas referências• Conheça o que o mercado está fazendo• Seja entusiasta• Pratique alguma ativida...
caminhos“A solução mora no problema”Rico LinsDados, dados, dados, pesquisa, pesquisa, pesquisa. Todas asinformações que fo...
para analisar• Concorrentes• Mercado semelhante• Problemas da marca existente• Qualidades da marca existente• Objetivos pr...
processo criativo por bruno munari           definição do problema           • Qual a funcionalidade             do produt...
processo criativo por bruno munari          DF     coleta e análise                 • Existe algo no mercado?             ...
processo criativo por bruno munari         DF    CD    criatividade                     • Painel semântico                ...
painel semânticoSemântica é o estudo do significado da linguagem.O painel semântico é um guia de referências rápido, elepo...
painel semântico - exemplosFonte: http://fernandasegolin.wordpress.com
coresNão é necessário citar a importância das cores, que envolveestudos longos e importantes, mas também ela é fatordeterm...
cores  A KISSmetrics criou um infográfico que mostra como as cores  trabalham no processo de persuação das compras.http://...
cores
outras influências
outras influências
outras influências
coresCom aplicações simples dos símbolos da marca e com umfoco grande nas cores, conseguimos identificar facilmente umaemp...
coresO designer Alexandre Wollner defende o uso de poucascores na criação de marcas, para que seja facilmenteidentificada ...
a tipografia nas marcasTipografia vai além do simples desenho da fonte (caracteres).A tipografia tem relação com a forma c...
“A tipografia é acara da linguagem”     Ellen Lupton
tipografiaCom tipografia é possível trazer situações visuais queenglobem as sensações desejadas.Trabalhe pesos e formas de...
a tipografia nas marcas    Existem muitas marcas que são criadas somente com tipos.Marcas sempre presentes no ranking da I...
Simplicidade!!!
a tipografia nas marcasHoje já é possível embedar fontes no html ou hospedara fonte em servidores específicos, que pode fa...
tipografiaUse famílias e suas variações na identidade visual.Se a fonte da marca for uma fonte específica, procure umafont...
Igor Magrini - @igormmLayout
prioridades no design de páginasCriar para e-commerce requer uma preocupação grandecom o contexto de uso dos usuários, os ...
organização dos produtosOrganize de forma clara e relacione os produtos por tipo oufuncionalidade, levando em consideração...
gestaltGestalt é um fenômeno estudado pela psicologia mas que seaplica muito ao design, por vezes é esquecido e abandonado...
gestalt - leisProximidade:Objetos próximos tendem a formar uma figura de grupo.
gestalt - leisFechamento:O olho humano cria elementos faltantes para completar umaforma ou imagem.
gestalt - leisContinuidadeUm padrão se estende visualmente mesmo após a sua parada.
gestalt - leisSimilaridadeElementos com propriedades similares automaticamente sãoassociados.
importante - gestaltAproveita-se desses elementos e outros como Alinhamentoe Balanço dos elementos para criar relacionamen...
arquitetura de informação - wireframe
arquitetura de informação - wireframe
layouts interessantes
layouts interessantes
layouts interessantes
categorizaçãoCrie categorias com taxonomia adequada ao usuário, um testede cardsorting traz resultados efetivos para essa ...
categorização - card sorting    Nessa técnica o usuário relaciona os elementos e diz em como    o conteúdo poderia ser org...
Igor Magrini - @igormmConteúdos e Vendas
pipeline - funil de vendas    Trabalhar o funil de vendas é analisar o processo de compra    total realizado pelo consumid...
pipeline - funil de vendas    • Um bom funil de vendas permite que se desenvolva um    processo de vendas, para deixar cla...
pipeline - funil de vendas    Perguntas para ajudar a criar um perfil de vendas:    • Quais os marcos importantes ao longo...
pipeline - funil de vendasPensando em conteúdo, o que se pode analisar segundo o siteTo The Web:Quais conteúdos conduzirão...
pipeline - funil de vendasO QUÊQual conteúdo é específico para cada usuário desse site?• crie conteúdos que atendam pelo m...
pipeline - funil de vendasCOMOComo você pode incentivar os visitantesa interagirem com a sua empresa?• entenda e refine o ...
pipeline - funil de vendas                             http://totheweb.com/                             learning_center/at...
Igor Magrini - @igormmTestes
uXD - Trabalhando melhoriasProjeto - Planeta Verde TangO que é - Uma “rede social” para criançasObjetivo - Melhorar o uso ...
Click Tale
Depois
Antes - Recorde
Depois - Recorde
UXD - TRABALHANDO MELHORIASDepois de quase 22 dias de teste A/B, foi gerada massacritica suficiente para encerraramento do...
heurísticas - jakob nielsenAs heurísticas são uma série de “dicas”ou “regras” que ajudam no entendimentode situações comun...
heurísticas - jakob nielsen1) Feedback  O sistema deve informar continuamente ao usuário sobre  o que ele está fazendo. 10...
heurísticas - jakob nielsen4) Consistência Um mesmo comando ou ação deve ter sempre o mesmo efeito. A mesma operação deve ...
heurísticas - jakob nielsen7) Atalhos Para usuários experientes executarem as operações mais rapidamente. Abreviações, tec...
heurísticas - jakob nielsen9) Boas mensagens de erro Linguagem clara e sem códigos. Devem ajudar o usuário a entender e re...
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 site...
html - design responsivo
administração do siteAo gerar conteúdo para o um blog por exemplo, é importante pensarque o texto a ser publicado, pode co...
concluindo...Em linhas gerais, sabemos que independente da técnicautilizada, o olhar deve ser voltado para o ser humano qu...
@igormmLinks úteis e bibliografia• Design Thinking - Tim Brown• Design de Navegação Web - James Kalbach• Design para a Int...
@igormmLinks úteis e bibliografia• http://www.designthinkingforeducators.com/• http://www.uxnet.org/• http://mitworld.mit....
@igormmLinks úteis e bibliografia• http://typekit.com• http://typeface.neocracy.org/examples.html• http://www.logodesignlo...
@igormmLinks úteis e bibliografia•http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effec-tive-web-design/•...
@igormmObrigadoweb: www.igormagrini.com.brmail: contato@igormagrini.com.brtwitter: @igormm
Design e usabilidade- E-Commerce (Intensivo)
Design e usabilidade- E-Commerce (Intensivo)
Design e usabilidade- E-Commerce (Intensivo)
Design e usabilidade- E-Commerce (Intensivo)
Design e usabilidade- E-Commerce (Intensivo)
Design e usabilidade- E-Commerce (Intensivo)
Design e usabilidade- E-Commerce (Intensivo)
Design e usabilidade- E-Commerce (Intensivo)
Design e usabilidade- E-Commerce (Intensivo)
Design e usabilidade- E-Commerce (Intensivo)
Design e usabilidade- E-Commerce (Intensivo)
Design e usabilidade- E-Commerce (Intensivo)
Upcoming SlideShare
Loading in...5
×

Design e usabilidade- E-Commerce (Intensivo)

2,951

Published on

Design e usabilidade- E-Commerce (Intensivo)
Professor: Igor Magrini

Published in: Education

Design e usabilidade- E-Commerce (Intensivo)

  1. 1. Igor Magrini - @igormmDesign e Usabilidade
  2. 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. 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. 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. 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. 6. Igor Magrini - @igormmUsabilidade
  7. 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. 8. memória humana vs computacional seletiva indiscriminada evolutiva estável associativa discretaFaber Ludens
  9. 9. Norman (2006) - Conhecimento na cabeça
  10. 10. Conhecimento no mundo
  11. 11. Conhecimento no mundo
  12. 12. Conhecimento no mundo
  13. 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. 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. 15. construindo o contexto de uso Construir o perfil Construir Construir as dos consumidores ambiente de uso tarefas básicas
  16. 16. CrianDo a experiência de uso Arquitetura de Informação Indicadores de Layout das Telas Performance Avaliar a Usabilidade
  17. 17. Igor Magrini - @igormmNavegabilidade
  18. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 33. Igor Magrini - @igormmEncontrabilidade
  34. 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. 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. 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. 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. 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. 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. 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. 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. 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. 43. Igor Magrini - @igormmComprabilidade
  44. 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. 45. comprabilidadeAbandono do carrinho*MarketSherpa E-Commerce study, 2006 - Gráfico por Ricardo Panini
  46. 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. 47. comprabilidadeExemplo de Checkout único:Mais exemplos em: http://www.1stwebdesigner.com/inspiration/excellent-shopping-cart-designs-showcase-and-best-practices/
  48. 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. 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. 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. 51. Igor Magrini - @igormmConfiabilidade
  52. 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. 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. 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. 55. Igor Magrini - @igormmIdentidade Visual
  56. 56. criação de marca e identidade visualO que define umaidentidade visual?
  57. 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. 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. 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. 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. 61. antes - depois
  62. 62. internet
  63. 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. 64. ...e mais do que nunca:
  65. 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. 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. 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. 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. 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. 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. 71. experimentação “Não sei se existe a inspiração, mas se ela vier, vai me encontrar trabalhando”. Pablo PicassoRafic Farah
  72. 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. 73. “O norte do designer é a cultura” Claudio Ferlauto
  74. 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. 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. 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. 77. para analisar• Concorrentes• Mercado semelhante• Problemas da marca existente• Qualidades da marca existente• Objetivos primários e secundários
  78. 78. processo criativo por bruno munari definição do problema • Qual a funcionalidade do produto/serviço? • Qual o objetivo final desse produto/serviço?
  79. 79. processo criativo por bruno munari DF coleta e análise • Existe algo no mercado? • Qual o público? • O que já foi feito? • O que obteve sucesso relacionado a isso?
  80. 80. processo criativo por bruno munari DF CD criatividade • Painel semântico • Relações visuais • Relações musicais • Conceitos de design
  81. 81. 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
  82. 82. painel semântico - exemplosFonte: http://fernandasegolin.wordpress.com
  83. 83. 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
  84. 84. 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/
  85. 85. cores
  86. 86. outras influências
  87. 87. outras influências
  88. 88. outras influências
  89. 89. 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.
  90. 90. 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.
  91. 91. 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.
  92. 92. “A tipografia é acara da linguagem” Ellen Lupton
  93. 93. tipografiaCom tipografia é possível trazer situações visuais queenglobem as sensações desejadas.Trabalhe pesos e formas de acordo com a necessidade.
  94. 94. a tipografia nas marcas Existem muitas marcas que são criadas somente com tipos.Marcas sempre presentes no ranking da Interbrand.
  95. 95. Simplicidade!!!
  96. 96. 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.
  97. 97. 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.
  98. 98. Igor Magrini - @igormmLayout
  99. 99. 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.
  100. 100. organização dos produtosOrganize de forma clara e relacione os produtos por tipo oufuncionalidade, levando em consideração o contexto de uso dousuário.
  101. 101. 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.
  102. 102. gestalt - leisProximidade:Objetos próximos tendem a formar uma figura de grupo.
  103. 103. gestalt - leisFechamento:O olho humano cria elementos faltantes para completar umaforma ou imagem.
  104. 104. gestalt - leisContinuidadeUm padrão se estende visualmente mesmo após a sua parada.
  105. 105. gestalt - leisSimilaridadeElementos com propriedades similares automaticamente sãoassociados.
  106. 106. 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.
  107. 107. arquitetura de informação - wireframe
  108. 108. arquitetura de informação - wireframe
  109. 109. layouts interessantes
  110. 110. layouts interessantes
  111. 111. layouts interessantes
  112. 112. categorizaçãoCrie categorias com taxonomia adequada ao usuário, um testede cardsorting traz resultados efetivos para essa construção.
  113. 113. 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/
  114. 114. Igor Magrini - @igormmConteúdos e Vendas
  115. 115. 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
  116. 116. 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
  117. 117. 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
  118. 118. 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
  119. 119. 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
  120. 120. 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
  121. 121. pipeline - funil de vendas http://totheweb.com/ learning_center/attracting- sales-prospects.html
  122. 122. Igor Magrini - @igormmTestes
  123. 123. 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
  124. 124. Click Tale
  125. 125. Depois
  126. 126. Antes - Recorde
  127. 127. Depois - Recorde
  128. 128. 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.
  129. 129. 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.
  130. 130. 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
  131. 131. 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
  132. 132. 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
  133. 133. 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
  134. 134. 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”.
  135. 135. html - design responsivo
  136. 136. 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.
  137. 137. 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.
  138. 138. @igormmLinks ú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
  139. 139. @igormmLinks ú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
  140. 140. @igormmLinks ú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
  141. 141. @igormmLinks ú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/
  142. 142. @igormmObrigadoweb: www.igormagrini.com.brmail: contato@igormagrini.com.brtwitter: @igormm
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×