0
Euripedes magalhães - @euripedesmDesign 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             ...
Euripedes magalhães - @euripedesmUsabilidade
usabilidadePresente na Arquitetura de Informação, UXD e emqualquer lugar que uma pessoa use algo, usabilidadeajuda a deixa...
memória computacional vs humana          indiscriminada    seletiva               estável     evolutiva               disc...
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 ...
CrianDo a experiência de uso                         Arquitetura de                          Informação        Indicadores...
arquitetura de informação - wireframe
arquitetura de informação - wireframe
Euripedes magalhães - @euripedesmNavegabilidade
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...
Euripedes magalhães - @euripedesmEncontrabilidade
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...
encontrabilidade / conteúdoO conteúdo é extremamente importante nesseprocesso, o design da página deve ser construídopensa...
Euripedes magalhães - @euripedesmComprabilidade
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...
Euripedes magalhães - @euripedesmConfiabilidade
confiabilidade e credibilidadeRobson Tavarone cita em um artigo para o site E-commerceNews um case de um cliente que tinha...
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...
Euripedes magalhães - @euripedesmIdentidade 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?• 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
marcas no meio digitalO design de marcas na era contemporânea deve pensar que ospixels são por vezes o suporte complementa...
internet
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 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...
design thinking“Design Thinking, ou pensamento de Design, é uma abstraçãodo modelo mental utilizado há anos pelos designer...
processo ideoDISCOVERY   INTERPRETATION   IDEATION   EXPERIMENTATION   EVOLUTION
processo stanford
processo criativo por bruno munari           DF            CD           criatividade                                      ...
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...
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...
Euripedes magalhães - @euripedesmLayout
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...
equilíbrioAproveita-se desses elementos e outros como Alinhamentoe Balanço dos elementos para criar relacionamentos visuai...
layouts interessantes
layouts interessantes
layouts interessantes
Euripedes magalhães - @euripedesmConteú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...
Euripedes magalhães - @euripedesmTestes
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...
html - design responsivo
concluindo...Em linhas gerais, sabemos que independente da técnicautilizada, o olhar deve ser voltado para o ser humano qu...
@euripedesmLinks úteis e bibliografia• Design Thinking - Tim Brown• Design de Navegação Web - James Kalbach• Design para a...
@euripedesmLinks úteis e bibliografia• http://www.designthinkingforeducators.com/• http://www.uxnet.org/• http://mitworld....
@euripedesmLinks úteis e bibliografia• http://typekit.com• http://typeface.neocracy.org/examples.html• http://www.logodesi...
@euripedesmLinks úteis e bibliografia•http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effec-tive-web-desi...
@euripedesmObrigadoweb: www.euripedes.com.brmail: euripedes@euripedes.com.brtwitter: @euripedesmmais:http://posmktdigital....
Design e usabilidade- Curso Intensivo
Design e usabilidade- Curso Intensivo
Design e usabilidade- Curso Intensivo
Design e usabilidade- Curso Intensivo
Design e usabilidade- Curso Intensivo
Design e usabilidade- Curso Intensivo
Design e usabilidade- Curso Intensivo
Design e usabilidade- Curso Intensivo
Design e usabilidade- Curso Intensivo
Design e usabilidade- Curso Intensivo
Design e usabilidade- Curso Intensivo
Upcoming SlideShare
Loading in...5
×

Design e usabilidade- Curso Intensivo

861

Published on

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

Published in: Education

Transcript of "Design e usabilidade- Curso Intensivo"

  1. 1. Euripedes magalhães - @euripedesmDesign 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. Euripedes magalhães - @euripedesmUsabilidade
  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 computacional vs humana indiscriminada seletiva estável evolutiva discreta associativaFaber 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. CrianDo a experiência de uso Arquitetura de Informação Indicadores de Layout das Telas Performance Avaliar a Usabilidade
  16. 16. arquitetura de informação - wireframe
  17. 17. arquitetura de informação - wireframe
  18. 18. Euripedes magalhães - @euripedesmNavegabilidade
  19. 19. 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/
  20. 20. 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
  21. 21. como os usuários pensam?Basicamente:• Usuários apreciam qualidade e credibilidade• Usuários não leêm, eles escaneiam a página• Usuários são impacientes e insistem em ganhar uma gratificação instantânea (expectativa/entrega)• Usuários não fazem as melhores escolhas
  22. 22. 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.
  23. 23. 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.
  24. 24. 10 dicas:2. Não abuse da paciência do usuárioFacilite a navegação,com filtros, ferramentasde buscas e facilitea finalização dospedidos.
  25. 25. 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.
  26. 26. 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.
  27. 27. 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.
  28. 28. 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
  29. 29. 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.
  30. 30. 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.
  31. 31. 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
  32. 32. 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.
  33. 33. 10 dicas:10. Faça testes de usabilidade“If you want a great site, you’ve got to test.”Os testes podem ajudar no entendimento do uso do 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
  34. 34. Euripedes magalhães - @euripedesmEncontrabilidade
  35. 35. 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
  36. 36. 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/
  37. 37. 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/
  38. 38. 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.
  39. 39. 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
  40. 40. Euripedes magalhães - @euripedesmComprabilidade
  41. 41. 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
  42. 42. comprabilidadeAbandono do carrinho*MarketSherpa E-Commerce study, 2006 - Gráfico por Ricardo Panini
  43. 43. 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
  44. 44. comprabilidadeExemplo de Checkout único:Mais exemplos em: http://www.1stwebdesigner.com/inspiration/excellent-shopping-cart-designs-showcase-and-best-practices/
  45. 45. comprabilidadeCafepress:• Opção de salvar o carrinho de compras• Integração com PayPal• Atualização de quantidade• Múltiplos métodos de envio
  46. 46. 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
  47. 47. Euripedes magalhães - @euripedesmConfiabilidade
  48. 48. 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
  49. 49. 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;
  50. 50. 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/
  51. 51. Euripedes magalhães - @euripedesmIdentidade Visual
  52. 52. criação de marca e identidade visualO que define umaidentidade visual?
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. antes - depois
  57. 57. 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.
  58. 58. internet
  59. 59. 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.
  60. 60. 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.
  61. 61. “O norte do designer é a cultura” Claudio Ferlauto
  62. 62. 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
  63. 63. 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)
  64. 64. 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
  65. 65. processo ideoDISCOVERY INTERPRETATION IDEATION EXPERIMENTATION EVOLUTION
  66. 66. processo stanford
  67. 67. 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
  68. 68. 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
  69. 69. painel semântico - exemplosFonte: http://fernandasegolin.wordpress.com
  70. 70. 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
  71. 71. 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/
  72. 72. cores
  73. 73. outras influências
  74. 74. outras influências
  75. 75. outras influências
  76. 76. 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.
  77. 77. 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.
  78. 78. “A tipografia é acara da linguagem” Ellen Lupton
  79. 79. tipografiaCom tipografia é possível trazer situações visuais queenglobem as sensações desejadas.Trabalhe pesos e formas de acordo com a necessidade.
  80. 80. a tipografia nas marcas Existem muitas marcas que são criadas somente com tipos.Marcas sempre presentes no ranking da Interbrand.
  81. 81. Simplicidade!!!
  82. 82. 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.
  83. 83. 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.
  84. 84. Euripedes magalhães - @euripedesmLayout
  85. 85. 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.
  86. 86. organização dos produtosOrganize de forma clara e relacione os produtos por tipo oufuncionalidade, levando em consideração o contexto de uso dousuário.
  87. 87. equilíbrioAproveita-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.
  88. 88. layouts interessantes
  89. 89. layouts interessantes
  90. 90. layouts interessantes
  91. 91. Euripedes magalhães - @euripedesmConteúdos e Vendas
  92. 92. 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
  93. 93. 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
  94. 94. 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
  95. 95. 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
  96. 96. 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
  97. 97. 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
  98. 98. pipeline - funil de vendas http://totheweb.com/ learning_center/attracting- sales-prospects.html
  99. 99. Euripedes magalhães - @euripedesmTestes
  100. 100. 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
  101. 101. Click Tale
  102. 102. Depois
  103. 103. Antes - Recorde
  104. 104. Depois - Recorde
  105. 105. 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.
  106. 106. html - design responsivo
  107. 107. 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.
  108. 108. @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
  109. 109. @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
  110. 110. @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
  111. 111. @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/
  112. 112. @euripedesmObrigadoweb: www.euripedes.com.brmail: euripedes@euripedes.com.brtwitter: @euripedesmmais:http://posmktdigital.wordpress.com/www.twitter.com/mktdigimpacta
  1. A particular slide catching your eye?

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

×