Técnica 3D de visualização da informação: design e avaliação da usabilidade
Design usabilidade- Curso Intensivo
description
Transcript of Design usabilidade- Curso Intensivo
![Page 1: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/1.jpg)
EURIPEDES MAGALHÃES - @EURIPEDESM
Design e Usabilidade
![Page 2: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/2.jpg)
DESIGN PARA NEGÓCIOS DIGITAIS
O design atua como ferramenta importante dentro dos projetos digitais, mas sua função não é somente “embelezar” produtos ou “chamar atenção”.
O design é reponsável por auxiliar e direcionar uma comunicação mais assertiva, pois trabalha com objetivos claros e com forte estudo nos usuários.
![Page 3: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/3.jpg)
CONCEITOS DO DESIGN PARA E-COMMERCE
Como deve ser:
Emocional + Objetivo + Usual
O design pode ajudar a criar credibilidade e confiança, fatores primordiais para o sucesso das vendas.
Pesquisa
Público
Interface
![Page 4: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/4.jpg)
COMO AS PESSOAS AVALIAM A CREDIBILIDADE?
http://www.consumerwebwatch.org/dynamic/web-credibility-report-evaluate.cfm
Os participantes comentaram sobre vários assuntos ao avaliar a credibilidade de sites.
15 de abril de 2012
![Page 5: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/5.jpg)
Percentagem de comentários relativos a aparência de design, por categoria
http://www.consumerwebwatch.org/dynamic/web-credibility-report-evaluate.cfm
COMO AS PESSOAS AVALIAM A CREDIBILIDADE?
![Page 6: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/6.jpg)
EURIPEDES MAGALHÃES - @EURIPEDESM
Usabilidade
![Page 7: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/7.jpg)
USABILIDADE
Presente na Arquitetura de Informação, UXD e em qualquer lugar que uma pessoa use algo, usabilidade ajuda a deixar tudo melhor, ou pelo menos resolver problemas sérios que podem gerar situações perigosas.
![Page 8: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/8.jpg)
MEMÓRIA HUMANA VS COMPUTACIONAL
Faber Ludens
SELETIVA INDISCRIMINADA
EVOLUTIVA ESTÁVEL
ASSOCIATIVA DISCRETA
![Page 9: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/9.jpg)
Norman (2006) - Conhecimento na cabeça
![Page 10: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/10.jpg)
Conhecimento no mundo
![Page 11: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/11.jpg)
Conhecimento no mundo
![Page 12: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/12.jpg)
Conhecimento no mundo
![Page 13: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/13.jpg)
USABILIDADE - COMPONENTES
Aprendizagem - O quanto é difícil completar tarefas básicas no primeiro encontro com a interface?
Eficiência - Para os usuários que já tenham alguma familiaridade com a interface, como podem fazer tarefas mais rápido?
Lembrança - Depois de um tempo sem acessar a interface, o quanto será difícil para alcançar proeficiência no uso?
Erros - Quantos erros os usuários fazem, o quanto são preocupantes esses erros e como eles são corrigidos?
Satisfação - O quanto é prazeroso usar essa interface?
![Page 14: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/14.jpg)
A IMPORTÂNCIA DO CONTEXTO DE USO
Cada usuário acessa o e-commerce com um objetivo específico, cada usuário tem um perfil de compra que deve ser analisado para que seja oferecido para ele um conteúdo adequado e também ofertas adequadas.
Por isso, pensar no contexto em que o usuário vai utilizar o site poder dar subsídios interessantes para uma melhor criação.
Por exemplo, como um usuário procuraria um celular em uma Loja Própria ou em uma Multiloja?
![Page 15: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/15.jpg)
![Page 16: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/16.jpg)
CONSTRUINDO O CONTEXTO DE USO
Construir o perfil dos consumidores
Construir ambiente de uso
Construir as tarefas básicas
![Page 17: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/17.jpg)
CRIANDO A EXPERIÊNCIA DE USO
Indicadores de Performance
Arquitetura de Informação
Avaliar a Usabilidade
Layout das Telas
![Page 18: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/18.jpg)
EURIPEDES MAGALHÃES - @EURIPEDESM
Navegabilidade
![Page 19: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/19.jpg)
COMO OS USUÁRIOS PENSAM?
Steve Krug em seu livro “Não me faça pensar”, afirma que quanto menos o usuário pensa, melhor é o entendimento do conteúdo na página.
No artigo de Vitaly Friedman no site Smashing Magazine, ele cita que os usuários não usam as lojas digitais de forma muito diferente de lojas físicas.
Os usuários olham as páginas de forma geral, grande parte do conteúdo passa dispercebido, pois ele clica em algo do seu interesse ou em algo que relembre o que ele procura.
http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
![Page 20: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/20.jpg)
COMO OS USUÁRIOS PENSAM?
Os usuários costumam “escanear” as páginas em sua navegação procurando pontos para guiá-los na navegação pela página
![Page 21: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/21.jpg)
COMO OS USUÁRIOS PENSAM?
Basicamente:
• Usuários apreciam qualidade e credibilidade
• Usuários não leêm, eles escaneiam a página
• Usuários são impacientes e insistem em ganhar uma gratificação instantânea (expectativa/entrega)
• Usuários não fazem as melhores escolhas
![Page 22: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/22.jpg)
COMO OS USUÁRIOS PENSAM?
Usuários não fazem as melhores escolhas porque escolhem a primeira opção que julgam adequada, mas não exatamente o que buscam. Filtros e navegações intuitivas podem ajudá-lo no processo.
![Page 23: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/23.jpg)
10 DICAS:
1. Não faça o usuário pensar
Ajude o usuário o usuário a fazer decisões de compras conscientes o livrando de dúvidas.
![Page 24: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/24.jpg)
10 DICAS:
2. Não abuse da paciência do usuário
Facilite a navegação, com filtros, ferramentas de buscas e facilite a finalização dos pedidos.
![Page 25: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/25.jpg)
10 DICAS:
3. Guie a navegação e os focos de atenção
Clareza na informação, uso não exagerado de elementos, não sobrecarrecar a memória do usuário com muitos pensamentos do que ele precisa fazer.
![Page 26: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/26.jpg)
10 DICAS:
4. Deixe claro o objetivo da página
Guie o usuário pelo percurso da página, sites efetivos agradam pelos bons passo-a-passo e pelos botões grandes são “user friendly” e ajudam no processo.
![Page 27: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/27.jpg)
10 DICAS:
5. Escreva de forma eficaz
Diferente da impressão, o texto da internet é entendido de forma diferente, por exemplo, textos longos não são lidos e linguagem promocional também não, além dos problemas com palavras em bold ou itálico que são ignoradas.
![Page 28: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/28.jpg)
10 DICAS:
5. Escreva de forma eficaz
Dicas:
• Use frases curtas e concisas (direto ao ponto)
• Pense que os usuários irão escanear o layout e se aproveite disso usando elementos visuais, listas com bullets, mostre o que o usuário precisa e quer ver
• Uma promoção não precisa soar como um anúncio, mostre para o usuário razões e objetivos para que ele use aquele serviço ou para que ele continue no seu site
![Page 29: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/29.jpg)
10 DICAS:
6. Opte por simplicidade
Usuários raramente entram em um site para desfrutar do seu design, embora ele seja importante e faça com que o usuário sinta-se imerso no contexto, “keep it simple”-principle (KIS), pense na informação que vai ajudar o usuário.
![Page 30: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/30.jpg)
10 DICAS:
7. Trabalhe bem os respiros das páginas
Espaços em branco ajudam o usuário a dividir conteúdos e áreas diminuindo sua carga visual.
Trabalhe hierarquia de informação para reduzir a complexidade de leitura dos elementos da página.
![Page 31: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/31.jpg)
10 DICAS:
8. Comunique eficazmente
Aaron Marcus lista três princípios fundamentais que podemos chamar de “linguagem visual”
• OrganizeConsistência, coerência, navegabilidade.
• EconomizeSimplicidade, clareza e ênfase no objeto
• ComuniqueLegibilidade, simbologia, tipografia, 3 tipos de fonte no máximo, 3 corpos de fonte no máximo
![Page 32: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/32.jpg)
10 DICAS:
9. Aproveite-se das convenções
Ser tradicional não significa ser chato. Aproveitar-se da de alguns itens convencionais ajuda na diminuição da curva de aprendizagem.
Convenções ajudam a página a ganhar confiança, segurança e consequentemente credibilidade.
![Page 33: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/33.jpg)
10 DICAS:
10. Faça testes de usabilidade
“If you want a great site, you’ve got to test.”
Os testes podem ajudar no entendimento do uso do site pelos seus usuários, na confirmação da eficiência do site. Alguns pontos importantes:
• Segundo Steve Krug, testar um usuário é 100% melhor que não testar nenhum;
• Testes são processos interativos onde podem se perceber erros, consertá-los e testar novamente
• Testes de usabilidade produzem resultados usuais, que devem ser usados para resolver os problemas de design do projeto
• Segundo Weinberg, o desenvolvedor é a pessoa inadequada para testar o funcionamento do site
![Page 34: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/34.jpg)
EURIPEDES MAGALHÃES - @EURIPEDESM
Encontrabilidade
![Page 35: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/35.jpg)
A estratégia da encontrabilidade pode ser resumida em uma frase:
“A melhor maneira de encontrar o seu usuário é ser encontrado por ele”
Felipe Morais
![Page 36: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/36.jpg)
ENCONTRABILIDADE
No livro lançado recentemente o Google discursa sobre o novo momento da verdade na decisão de compras. A internet é fator fundamental nesse ponto.
Modelo mental tradicional:
www.zeromomentoftruth.com/
![Page 37: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/37.jpg)
ENCONTRABILIDADE
Nesse novo pensamento, o usuário se utiliza da internet não só para conhecer sobre o produto, mas para aprender sobre o assunto e obviamente encontrá-lo para compra. Novo modelo mental:
www.zeromomentoftruth.com/
![Page 38: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/38.jpg)
ENCONTRABILIDADE
A construção da página deve levar em consideração essa nova situação, um bom trabalho de SEO é fundamental na encontrabilidade da página. A construção do conteúdo deve ser pautada nesse pensamento.
A tecnologia utilizada também vai influenciar a encontrabilidade do site. Códigos criptografados são mais difíceis de serem indexados.
É importante pensar que a encontrabilidade vai além dos mecanismos de busca, tem relação direta com a a construção de conteúdo voltada para o usuário.
![Page 39: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/39.jpg)
ENCONTRABILIDADE
FlashÉ possível indexar aplicações em flash a partir da criação de um conteúdo estático que duplica o conteúdo compilado, utilizando o SWFobject é possível deixar o conteúdo na mesma URL.
Ajax, Javascript e outros conteúdos criptografadosPor ser uma tecnologia assíncrona, onde é possível apresentar conteúdo sem página, o ajax é um impecílio para os mecanismos de busca. Para resolver isso o conteúdo deve ser pré-carregado na página, senão esse conteúdo pode ficar invisível
![Page 40: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/40.jpg)
ENCONTRABILIDADE VS CMS
O Sistemas de Gerenciamento de Conteúdo são sistemas criados para auxiliar o administrador do site a organizar o conteúdo, porém alguns sistemas de 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 faz com que o buscador copie acidentalmente o conteúdo várias vezes, isso prejudica a performance de busca.
![Page 41: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/41.jpg)
ENCONTRABILIDADE VS CMS
Vários caminhos de URLEm e-commerce, um problema típico é a progressão do ciclo de vida do produto, que vai acumulando várias URLs, é importante se certificar que por mais que existam vários links para aquela URL, é importante que ela seja única. Ex.: Quando o produto aparece em uma lista de presentes e também na sua categoria.
Obs.: Mais exemplos no livro “O Guia para Projetar UX”.
![Page 42: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/42.jpg)
ENCONTRABILIDADE / CONTEÚDO
O conteúdo é extremamente importante nesse processo, o design da página deve ser construído pensando no conteúdo e conteúdo construído no pensamento da página.
Palavras-chaves no conteúdo são muito importantes, os profissionais de SEO devem participar do processo de construção de conteúdo para que possam ser definidas uma lista de palavras para serem utilizadas no texto.
Os sites de busca costumam procurar palavras em vários lugares dos sites para a indexação, com conteúdos interligados e complementares
![Page 43: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/43.jpg)
ENCONTRABILIDADE / CONTEÚDO
Dicas:
Use Mapas do SiteÉ comum atualmente esconder essas páginas na criação de sites, porém eles ajudam não no posicionamento da página, mas ajudam o buscador a entender a estrutura do diretório e a encontrar conteúdo novo e atualizado.
Mantenha o conteúdo AtualizadoO crescimento de conteúdo do site ajuda-o a manter uma boa colocação nos resultados de busca. Não significa que o conteúdo deva ser modificado, mas que novos conteúdos possam ser acrescentados.
![Page 44: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/44.jpg)
EURIPEDES MAGALHÃES - @EURIPEDESM
Comprabilidade
![Page 45: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/45.jpg)
COMPRABILIDADE
É muito importante que o processo de finalização de compra de um site seja simples.
Econtrar um produto, escolher formas de pagamento e frete, e finalizar a compra facilmente são muito importantes.
Otimizar o carrinho de compras é uma das tarefas mais importantes no design e estratégicas das lojas online.
59% é o número médio de abandono nessa área do site*
*MarketSherpa E-Commerce study, 2006
![Page 46: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/46.jpg)
COMPRABILIDADE
Abandono do carrinho
*MarketSherpa E-Commerce study, 2006 - Gráfico por Ricardo Panini
![Page 47: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/47.jpg)
COMPRABILIDADE
Alguma dicas segundo Ricardo Panini:
• Sinalizar bem os passos e evitar botões iguais;
• Deixar claro todos os passos que o usuário percorrerá até a finalização da compra;
• Informações importantes devem ter destaque
• Respiros visuais e fontes grandes e espaços corretos facilitam o entendimento das informações
• Utilize um checkout único
http://www.slideshare.net/rpanini/a-importncia-do-design-no-ecommerce
![Page 48: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/48.jpg)
COMPRABILIDADE
Exemplo de Checkout único:
Mais exemplos em: http://www.1stwebdesigner.com/inspiration/excellent-shopping-cart-designs-showcase-and-best-practices/
![Page 49: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/49.jpg)
COMPRABILIDADE
Cafepress:
• Opção de salvar o carrinho de compras
• Integração com PayPal
• Atualização de quantidade
• Múltiplos métodos de envio
![Page 50: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/50.jpg)
COMPRABILIDADE
American Eagle:
• Call to Action de frete gratuito a partir de um valor específico
• Sumário de compra interessante
• Recomendações de produtos antes da finalização da compra
![Page 51: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/51.jpg)
COMPRABILIDADE
BlueNile:
• 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
![Page 52: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/52.jpg)
EURIPEDES MAGALHÃES - @EURIPEDESM
Confiabilidade
![Page 53: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/53.jpg)
CONFIABILIDADE E CREDIBILIDADE
Com o crescimento das lojas virtuais prontas, cresce também a dúvida dos consumidores sobre a segurança e qualidade do serviço, o medo de clonagem de cartões, problemas com entrega podem gerar um abandono na compra.
Em um artigo para o site E-commerce Brasil, Mateus Toledo dá algumas dicas que ajudam além de deixar informações na área de “Políticas de Privacidade e pagamento”.
Com o entendimento de que essa área tem uma visibilidade praticamente nula e sugere:
• No campo de finalização da compra, deixe um campo para que o usuário tenha que dar um aceite nos termos e condições;
• Tenha um sistema de avaliação da loja e não tenha medo de deixar isso aberto nas redes sociais, isso ajudará a mostrar o quanto sua loja é transparente e também ajudará você a melhorá-la;
![Page 54: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/54.jpg)
CONFIABILIDADE E CREDIBILIDADE
• Utilize um SSL (Secure Socket Layer) próprio, pois é comum hoje que bancos façam propaganda grande para que as pessoas se preocupem com a segurança dos dados. Um SSL compartilhado pode gerar uma desconfiança a respeito;
• Utilize um sistema de verificação de segurança, utilizar o selo de Site Blindado, Site Forte, ou algum outro;
• Para ajudar na confiança dos desconfiados, no rodapé do site, além de colocar informações sobre direitos reservados, colocar o CNPJ ajuda na conversão dos desconfiados;
• Não fuja das reclamações e responda os questionamentos feitos em sites como Reclame Aqui, Confiômetro, etc.
http://www.ecommercebrasil.com.br/artigos/credibilidade-e-confiabilidade-um-problema-no-e-commerce/
![Page 55: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/55.jpg)
CONFIABILIDADE E CREDIBILIDADE
Robson Tavarone cita em um artigo para o site E-commerce News um case de um cliente que tinha 800 acessos únicos diários mas nenhuma conversão. Na análise do site do cliente o que foi encontrado:
• Não havia nenhum selo de segurança a qual a loja pertencia;
• Não aparecia o Cadeado de Segurança – SSL (Security Socket Layer)
quando o cliente entrava com seus dados;
• No navegador, não apareceria antes do domínio o HTTPS;
• A Loja somente vendia por depósito bancário e SEDEX a Cobrar;
• Não havia sistema de rastreamento de mercadorias;
• Não eram visíveis as políticas de Troca & Devolução, Formas de
Pagamento e Envio;
http://ecommercenews.com.br/artigos/tutoriais/e-commerce-confianca-ou-confiabilidade
![Page 56: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/56.jpg)
EURIPEDES MAGALHÃES - @EURIPEDESM
Identidade Visual
![Page 57: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/57.jpg)
CRIAÇÃO DE MARCA E IDENTIDADE VISUAL
O que define uma identidade visual?
![Page 58: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/58.jpg)
IDENTIDADE
“Conjunto de características e circunstâncias que distinguem uma pessoa ou uma coisa* e graças àsquais é possível individualizá-la”
Dicionário Houaiss da Língua Portuguesa
![Page 59: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/59.jpg)
PRA QUE SERVE IDENTIDADE VISUAL?
Marks of Excellence, 1997.
IDENTIDADE VISUAL
ATINGIR OBJETIVOS DO NEGÓCIO
identificação interna
redução de custos
identificação externa
incrementar vendas
![Page 60: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/60.jpg)
PRA QUE SERVE IDENTIDADE VISUAL?
• Individualidade da marca - diferenciação.
• Expressar visualmente que tipo de organização o cliente é. (ex. formal x informal)
• Transmite atributos da marca. (segurança, confiança, etc)
• Conecta o cliente a imagens e ideias. (apple= cool! - Harley=potência - Volvo=segurança)
• Consistência nos canais de comunicação (sistematização)
• Torna a compra / memorização mais fácil para o consumidor
Jair Alves
![Page 61: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/61.jpg)
QUANDO PENSAR EM IDENTIDADE VISUAL?
• Nova Empresa, novo produto, novo serviço.
• Aquisição, Fusão
• Reposicionamento
• Novo mercado
• Troca de nome
• Revitalização
Jair Alves
![Page 62: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/62.jpg)
ANTES - DEPOIS
![Page 63: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/63.jpg)
INTERNET
![Page 64: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/64.jpg)
EM QUAIS MATERIAIS CONSISTEM A ID?
• Símbolo
• Logotipo
• Cor
• Tipografia
• Aplicações (papelaria, catálogos, produtos, embalagens, frota, uniformes, etc....)
Jair Alves
![Page 65: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/65.jpg)
...E MAIS DO QUE NUNCA:
![Page 66: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/66.jpg)
O design de marcas na era contemporânea deve pensar que os pixels são por vezes o suporte complementar da identidade e por vezes o suporte principal de apresentação da marca.
E o meio digital não se resume obviamente à uma página web.
MARCAS NO MEIO DIGITAL
![Page 67: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/67.jpg)
![Page 68: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/68.jpg)
No livro “DNA Empresarial”, a Profa. Dra. Lígia Fascione fala sobre a identidade líquida. Aqui podemos citar as “marcas líquidas”.
Líquidos, fluidos se adequam ao espaço onde são inseridos, se adequando as formas do espaço e adentrando profundamente em todas as reentrâncias existentes.
DESIGN LÍQUIDO
![Page 69: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/69.jpg)
![Page 70: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/70.jpg)
Tanto como nascer “offline” e se tornar “online”, a marca pode sair do digital e partir para o físico, em expansões praticamente infinitas.
Isso deve ser levado em consideração no design de marcas. Não é possível mais desassociar uma situação da outra.
DESIGN LÍQUIDO
![Page 71: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/71.jpg)
![Page 72: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/72.jpg)
O design de marcas não é só o design para um símbolo gráfico que vai estar em algum site, mas também design para sistemas integrados digitais e gráficos, onde essa marca tem que se expandir coerentemente e integralmente.
INTERFACE
![Page 73: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/73.jpg)
![Page 74: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/74.jpg)
![Page 75: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/75.jpg)
Culturalmente, o Brasil ainda não é um país acostumado a consumir design de qualidade (não estou falando de design de carros).
É papel do designer “educar” o cliente para que essa cultura cresça e se solidifique.
CULTURA DE CONSUMO DE DESIGN
![Page 76: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/76.jpg)
Muitos profissionais divergem sobre a forma mais correta de definir uma estratégia, metodologia ou sequência de trabalho para se definir o design de uma marca.
O PROCESSO CRIATIVO
![Page 77: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/77.jpg)
“Não sei se existe a inspiração, mas se ela vier, vaime encontrar trabalhando”.
Pablo Picasso
EXPERIMENTAÇÃO
Rafic Farah
![Page 78: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/78.jpg)
O símbolo e o logotipo devem ter algum conceito relacionado ao tipo de negócio da empresa, deve refletir o que a marca quer passar.
CONCEITUAÇÃO
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.
![Page 79: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/79.jpg)
“O norte do designer é a cultura”
Claudio Ferlauto
![Page 80: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/80.jpg)
Segunda a Profa. Msc. e artista Martha Gabriel a criatividade está vinculada a bloqueios e preconceitos que fazem parte da nossa formação cultural.
Alguns fatores que inibem a criatividade segundo Martha. Gabriel, além da preguiça:
• Rótulos• Riscos• Ego• Dinheiro• Ambiente
COMO SER CRIATIVO
![Page 81: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/81.jpg)
• Veja muitas referências
• Conheça o que o mercado está fazendo
• Seja entusiasta
• Pratique alguma atividade relacionada artes ou diversão (música, leitura, dança, teatro, cinema)
COMO SER CRIATIVO
![Page 82: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/82.jpg)
“A solução mora no problema”
Rico Lins
Dados, dados, dados, pesquisa, pesquisa, pesquisa. Todas as informações que forem encontradas são importantes, entender a IDENTIDADE CORPORATIVA vai ajudar no design da marca.
Dados de planejamento, objetivos de branding, pesquisa de comportamento do consumidor, tendências do seguimento...
CAMINHOS
![Page 83: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/83.jpg)
• Concorrentes
• Mercado semelhante
• Problemas da marca existente
• Qualidades da marca existente
• Objetivos primários e secundários
PARA ANALISAR
![Page 84: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/84.jpg)
DESIGN THINKING
“Design Thinking, ou pensamento de Design, é uma abstração do modelo mental utilizado há anos pelos designers para dar vida a idéias. Esse modelo mental e seus poderosos conceitos podem ser aprendidos e utilizados por qualquer pessoa e aplicados em qualquer cenário de negócio ou social.”
Tim Brown
![Page 85: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/85.jpg)
DISCOVERY INTERPRETATION IDEATION EXPERIMENTATION EVOLUTION
PROCESSO IDEO
![Page 86: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/86.jpg)
PROCESSO STANFORD
![Page 87: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/87.jpg)
DF
CONHECIMENTO E DEFINIÇÃO DO
PROBLEMA
COLETA E ANÁLISE DE
DADOS
CD CRIATIVIDADE
• PAINEL SEMÂNTICO
• RELAÇÕES VISUAIS
• CONCEITOS DE DESIGN
PROCESSO CRIATIVO POR BRUNO MUNARI
![Page 88: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/88.jpg)
PAINEL SEMÂNTICO
Semântica é o estudo do significado da linguagem.
O painel semântico é um guia de referências rápido, ele pode ser formatado de diversas maneiras de acordo com a necessidade do projeto ou área de atuação.
Ele pode conter:
• Somente imagens (referências visuais)
• Somente textos (conceitos e palavras-chave)
• Imagens e textos interrelacionados
![Page 89: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/89.jpg)
PAINEL SEMÂNTICO - EXEMPLOS
Fonte: http://fernandasegolin.wordpress.com
![Page 90: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/90.jpg)
CORES
Não é necessário citar a importância das cores, que envolve estudos longos e importantes, mas também ela é fator determinante na apresentação coerente dos conceitos aplicados na marca.
Existem significados psicológicos para cores, Modesto Farina em seu livro cita essas sensações e possíveis aplicações em diversos meios.
Exemplo do azul:• associação material: montanhas longínquas, frio, mar, céu, gelo, feminilidade, águas tranquilas• associação afetiva: espaço, viagem, verdade, sentido, afeto, infinito, sentimento profundo, meditação
![Page 91: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/91.jpg)
![Page 92: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/92.jpg)
CORES
A KISSmetrics criou um infográfico que mostra como as cores trabalham no processo de persuação das compras.
http://www.agni.art.br/como-as-cores-afetam-as-compras/
![Page 93: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/93.jpg)
CORES
![Page 94: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/94.jpg)
OUTRAS INFLUÊNCIAS
![Page 95: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/95.jpg)
OUTRAS INFLUÊNCIAS
![Page 96: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/96.jpg)
OUTRAS INFLUÊNCIAS
![Page 97: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/97.jpg)
CORES
Com aplicações simples dos símbolos da marca e com um foco grande nas cores, conseguimos identificar facilmente uma empresa.
Marcelo Trevisani defende: “Marca é a cultura e as experiências que residem na mente de cada consumidor a respeito de um produto ou serviço de uma empresa.”.
E as cores ajudam nesse processo.
![Page 98: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/98.jpg)
![Page 99: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/99.jpg)
CORES
O designer Alexandre Wollner defende o uso de poucas cores na criação de marcas, para que seja facilmente identificada e para que seja mais prática e barata nos processos de impressão.
![Page 100: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/100.jpg)
A TIPOGRAFIA NAS MARCAS
Tipografia vai além do simples desenho da fonte (caracteres). A tipografia tem relação com a forma com que a LETRA É USADA, isso engloba diagramação, uso das cores e um forte pensamento em linguagem visual.
![Page 101: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/101.jpg)
“A tipografia é acara da linguagem”
Ellen Lupton
![Page 102: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/102.jpg)
TIPOGRAFIA
Com tipografia é possível trazer situações visuais que englobem as sensações desejadas.
Trabalhe pesos e formas de acordo com a necessidade.
![Page 103: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/103.jpg)
A TIPOGRAFIA NAS MARCAS
Existem muitas marcas que são criadas somente com tipos.
Marcas sempre presentes no ranking da Interbrand.
![Page 104: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/104.jpg)
Simplicidade!!!
![Page 105: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/105.jpg)
A TIPOGRAFIA NAS MARCAS
Hoje já é possível embedar fontes no html ou hospedar a fonte em servidores específicos, que pode facilitar ou até mesmo acabar com a necessidade de utilizar fontes substitutas no html.
![Page 106: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/106.jpg)
TIPOGRAFIA
Use famílias e suas variações na identidade visual.
Se a fonte da marca for uma fonte específica, procure uma fonte de apoio. Pode ser definida também uma fonte “display” para títulos e uma fonte mais voltada para leitura, texto.
![Page 107: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/107.jpg)
![Page 108: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/108.jpg)
EURIPEDES MAGALHÃES - @EURIPEDESM
Layout
![Page 109: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/109.jpg)
PRIORIDADES NO DESIGN DE PÁGINAS
Criar para e-commerce requer uma preocupação grande com o contexto de uso dos usuários, os objetivos da página, padrões web e identidade de marca.
A análise dos usuários se faz importante nesse processo. Isso ajudará na melhor escolha da posição dos elementos na página, a categorização dos elementos dentro do menu e possíveis customizações de layout.
![Page 110: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/110.jpg)
ORGANIZAÇÃO DOS PRODUTOS
Organize de forma clara e relacione os produtos por tipo ou funcionalidade, levando em consideração o contexto de uso do usuário.
![Page 111: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/111.jpg)
GESTALT
Gestalt é um fenômeno estudado pela psicologia mas que se aplica muito ao design, por vezes é esquecido e abandonado.
É relacionado como o olho humano entende os elementos visuais, como imagens são formadas e completadas institivamente e intuitivamente.
![Page 112: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/112.jpg)
GESTALT - LEIS
Proximidade:Objetos próximos tendem a formar uma figura de grupo.
![Page 113: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/113.jpg)
GESTALT - LEIS
Fechamento:O olho humano cria elementos faltantes para completar uma forma ou imagem.
![Page 114: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/114.jpg)
GESTALT - LEIS
ContinuidadeUm padrão se estende visualmente mesmo após a sua parada.
![Page 115: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/115.jpg)
GESTALT - LEIS
SimilaridadeElementos com propriedades similares automaticamente são associados.
![Page 116: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/116.jpg)
IMPORTANTE - GESTALT
Aproveita-se desses elementos e outros como Alinhamento e Balanço dos elementos para criar relacionamentos visuais e definir a importância dos elementos e organização dos menus.
![Page 117: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/117.jpg)
ARQUITETURA DE INFORMAÇÃO - WIREFRAME
![Page 118: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/118.jpg)
ARQUITETURA DE INFORMAÇÃO - WIREFRAME
![Page 119: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/119.jpg)
LAYOUTS INTERESSANTES
![Page 120: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/120.jpg)
LAYOUTS INTERESSANTES
![Page 121: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/121.jpg)
LAYOUTS INTERESSANTES
![Page 122: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/122.jpg)
CATEGORIZAÇÃO
Crie categorias com taxonomia adequada ao usuário, um teste de cardsorting traz resultados efetivos para essa construção.
![Page 123: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/123.jpg)
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/
![Page 124: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/124.jpg)
EURIPEDES MAGALHÃES - @EURIPEDESM
Conteúdos e Vendas
![Page 125: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/125.jpg)
PIPELINE - FUNIL DE VENDAS
Trabalhar o funil de vendas é analisar o processo de compra total realizado pelo consumidor, é avaliar quais são os pontos de saída e como otimizar a experiência.
Resumindo, o número de vendas é menor que o número de usuários que acessam o site, por isso a analogia com o funil. Daniel Pereira, da LUZ Consultoria, traz pontos importantes para serem observados:
http://www.slideshare.net/masterluz/palestra-funil-de-vendas-luz-loja-de-consultoria
![Page 126: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/126.jpg)
PIPELINE - FUNIL DE VENDAS
• Um bom funil de vendas permite que se desenvolva um processo de vendas, para deixar claros os passos para o cliente atingir a compra de forma eficaz.
• Permite a criação de estratégias de longo prazo, pois a cada estágio de venda pede uma estratégia e abordagem diferente
• Permite mensuração dos resultados e a observação de onde ocorrem as maiores perdas e as maiores taxas de conversão.
http://www.slideshare.net/masterluz/palestra-funil-de-vendas-luz-loja-de-consultoria
![Page 127: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/127.jpg)
PIPELINE - FUNIL DE VENDAS
Perguntas para ajudar a criar um perfil de vendas:
• Quais os marcos importantes ao longo da venda?
• Quais informações podem ser oferecidas ao cliente para maior segurança na tomada de decisão?
• Quais os pontos de estrangulamento no processo de vendas?
• Onde estão as oportunidades de intervir e aumentar as chances de venda?
• Onde se pode criar métricas para verificar a taxa de sucesso do funil?
http://www.slideshare.net/masterluz/palestra-funil-de-vendas-luz-loja-de-consultoria
![Page 128: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/128.jpg)
PIPELINE - FUNIL DE VENDAS
Pensando em conteúdo, o que se pode analisar segundo o site To The Web:
Quais conteúdos conduzirão seus prospects pelo funil de vendas?
QUEM
Quem você está tentando atrair para o seu site? Descreva um vistante típico
• defina o grupo primário de usuários• defina o grupo secundário de usuários• defina o grupo terciário de usuários
![Page 129: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/129.jpg)
PIPELINE - FUNIL DE VENDAS
O QUÊ
Qual conteúdo é específico para cada usuário desse site?
• crie conteúdos que atendam pelo menos três grupos importantes , trace um plano que aborde os problemas que cada grupo pretende resolver acessando o site e suas objeções
• considere qual é a mensagem mais importante que a página deve transmitir
![Page 130: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/130.jpg)
PIPELINE - FUNIL DE VENDAS
COMO
Como você pode incentivar os visitantes a interagirem com a sua empresa?
• entenda e refine o processo de venda que os visitantes seguirão em seu site
• defina as métricas-chave do negócio para poder medir o sucesso alcançado
![Page 131: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/131.jpg)
http://totheweb.com/learning_center/attracting-sales-prospects.html
PIPELINE - FUNIL DE VENDAS
![Page 132: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/132.jpg)
EURIPEDES MAGALHÃES - @EURIPEDESM
Testes
![Page 133: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/133.jpg)
UXD - TRABALHANDO MELHORIAS
Projeto - Planeta Verde Tang
O que é - Uma “rede social” para crianças
Objetivo - Melhorar o uso do site
Aprendizados - A partir de testes, foi identificada a dúvida sobre a dificuldade das crianças fazerem scroll no site
![Page 134: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/134.jpg)
![Page 135: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/135.jpg)
Click Tale
![Page 136: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/136.jpg)
Depois
![Page 137: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/137.jpg)
![Page 138: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/138.jpg)
![Page 139: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/139.jpg)
![Page 140: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/140.jpg)
![Page 141: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/141.jpg)
Antes - Recorde
![Page 142: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/142.jpg)
Depois - Recorde
![Page 143: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/143.jpg)
UXD - TRABALHANDO MELHORIAS
Depois de quase 22 dias de teste A/B, foi gerada massa critica suficiente para encerraramento do teste.
Visitas - 3.220 (Que tiveram suas impressões divididas em 50% para cada versão)
Conversões - 70 (Que 40% gerado pela página original e 60% pela versão B)
E o resultado foi:
53% de incremento no volume de envio de vídeos na versão B (botão abaixo do passo) sobre a versão A.
69% superior à taxa de conversão da versão A no dia 13/09.
![Page 144: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/144.jpg)
HEURÍSTICAS - JAKOB NIELSEN
As heurísticas são uma série de “dicas” ou “regras” que ajudam no entendimento de situações comuns que acontecem diariamente e que podem atrapalhar a navegação pelos usuários.
![Page 145: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/145.jpg)
HEURÍSTICAS - JAKOB NIELSEN
1) FeedbackO 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árioA 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 demarcadasO usuário controla o sistema, ele pode, a qualquer momento, abortar uma tarefa, ou desfazer uma operação e retornar ao estado anterior.
Usabilidoido
![Page 146: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/146.jpg)
HEURÍSTICAS - JAKOB NIELSEN
4) ConsistênciaUm 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 errosEvitar 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árioO 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
![Page 147: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/147.jpg)
HEURÍSTICAS - JAKOB NIELSEN
7) AtalhosPara 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 naturaisDeve-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
![Page 148: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/148.jpg)
HEURÍSTICAS - JAKOB NIELSEN
9) Boas mensagens de erroLinguagem 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çãoO 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
![Page 149: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/149.jpg)
HTML
No código HTML se inserem as informções de tagueamentos e também de códigos para SEO.
Hoje dia existe o HTML 5 e os sites que contém animações via esses códigos e também os sites que chamamos de “design responsivo”.
![Page 150: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/150.jpg)
HTML - DESIGN RESPONSIVO
![Page 151: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/151.jpg)
![Page 152: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/152.jpg)
ADMINISTRAÇÃO DO SITE
Ao gerar conteúdo para o um blog por exemplo, é importante pensar que o texto a ser publicado, pode conter palavras que ajudam na busca do Google além das tags relacionadas ao post.
Quanto mais citações, mais relevância ao assunto, quanto mais relação com outros conteúdos online, mais relevância também.
O Wordpress permite ainda a instalação de diversos widgets e plug-ins que ajudam na divulgação do conteúdo.
![Page 153: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/153.jpg)
CONCLUINDO...
Em linhas gerais, sabemos que independente da técnica utilizada, o olhar deve ser voltado para o ser humano que vai utilizar essa criação.
Partindo deste ponto, fica mais fácil perceber caminhos inteligentes para o desenvolvimento.
Sair do senso comum e ir em busca de algo novo e interessante verdadeiramente.
![Page 154: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/154.jpg)
@EURIPEDESM
• Design Thinking - Tim Brown• Design de Navegação Web - James Kalbach• Design para a Internet - Felipe Memória• Não me faça Pensar - Steve Krug• Ergodesign e Arquitetura de Informação - Luiz Anger• O Guia para Projetar UX - Russ Unger• Zero Moment of Truth - Jim Lecinski• Psicodinâmica das Cores em Comunicação - Modesto Farina• E-Commerce Usability - David Travis
Links úteis e bibliografia
![Page 155: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/155.jpg)
@EURIPEDESM
• http://www.designthinkingforeducators.com/• http://www.uxnet.org/• http://mitworld.mit.edu/video/357/• http://designthinking.ideo.com/• http://arquiteturadeinformacao.com/• http://www.usabilitycounts.com/• http://www.intuitionhq.com/• http://nform.com/tradingcards/affinity-diagram
Links úteis e bibliografia
![Page 156: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/156.jpg)
@EURIPEDESM
• http://typekit.com• http://typeface.neocracy.org/examples.html• http://www.logodesignlove.com• http://logofaves.com• http://www.logomoose.com• http://logooftheday.com• http://www.logopond.com• http://38one.com/cleverblog
Links úteis e bibliografia
![Page 157: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/157.jpg)
@EURIPEDESM
•http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effec-tive-web-design/
•http://www.slideshare.net/rpanini/a-importncia-do-design-no-ecommerce
•http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html
http://webinsider.uol.com.br/2010/03/02/a-estrategia-da-encontrabilidade-e-ocupar-espacos/
•http://www.1stwebdesigner.com/inspiration/excellent-shopping-cart-de-signs-showcase-and-best-practices/
Links úteis e bibliografia
![Page 158: Design usabilidade- Curso Intensivo](https://reader036.fdocument.pub/reader036/viewer/2022062312/555b2e26d8b42afc348b49c9/html5/thumbnails/158.jpg)
@EURIPEDESM
web: www.euripedes.com.brmail: [email protected]: @euripedesm
MAIS:http://posmktdigital.wordpress.com/www.twitter.com/mktdigimpacta
Obrigado