![Page 1: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/1.jpg)
www.estrategiadigital.com.br
![Page 2: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/2.jpg)
Discussão em sala de aula
O que faz um site ser bom ?
O que faz um site ser ruim ?
![Page 3: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/3.jpg)
Reflexão
O primeiro passo para saber se um site é bom ou ruim é definir um objetivo.
Caso o objetivo não seja executado, o site pode ser definido como ruim?
![Page 4: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/4.jpg)
A taxa de rejeição analisada individualmente é um bom indicador de melhorias para um site ?
![Page 5: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/5.jpg)
Reflexão
Na página principal do site da sua empresa, quais são os call to action?
O que é um call to action?
Num site de e-commerce, o botão de finalizar a compra é um indicativo do próximo passo que o internauta deve fazer...
![Page 6: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/6.jpg)
Teste aplicado no www.psicologiaribeiraopreto.com.br
É um teste que pode ser aplicado na fase inicial do desenvolvimento de um site
![Page 7: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/7.jpg)
Como funciona o Visual Attention Prediction Tool
![Page 8: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/8.jpg)
Behavour Analytics pelo Google Website Optimizer
![Page 9: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/9.jpg)
O que é usabilidade ?
http://www.youtube.com/user/msanchezusabilidade#p/u/3/NSyEl7_pJ80
![Page 10: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/10.jpg)
Batimento cardíaco sobe mais de 20 % em teste num site com usabilidade ruim
http://www.youtube.com/user/msanchezusabilidade#p/u/2/8j96mj3DyBA
![Page 11: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/11.jpg)
Avaliação da usabilidade de sites
http://www.youtube.com/user/msanchezusabilidade#p/u/0/9LAApah_UrQ
![Page 12: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/12.jpg)
Fatores que levam o internauta a “sair fora” de um site
1. Links que não mudam de cor depois de acessados2. Quebrar o botão de “voltar”3. Abrir novas janelas do navegador ao clicar em links 4. Janelas pop-up5. Elementos de design que parecem anúncios6. Violar os padrões de navegação
![Page 13: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/13.jpg)
Elementos de design que parecem anúncios
http://wynnlasvegas.com/#homepage/
![Page 14: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/14.jpg)
http://www.youtube.com/watch?v=PWEKzTjrktA&feature=related
Wireframe é um desenho básico de uma interface.
Retrata a arquitetura de informação do sistema desejada pelo cliente, retratando a usabilidade do sistema.
No entanto, este desenho deve ser muito simples e resumido, informando ao desenvolvedor apenas o que for estritamente
necessário.
![Page 15: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/15.jpg)
http://www.youtube.com/watch?v=PWEKzTjrktA&feature=related
![Page 16: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/16.jpg)
http://www.youtube.com/watch?v=rgfD_jChuPc&NR=1
Tipografia com um wireframe
![Page 17: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/17.jpg)
Tipografia
![Page 18: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/18.jpg)
É possível trabalhar a tipografia na web como na mídia impressa ?
Reflexão ?
Caso positivo...isso é aconselhável ?
![Page 19: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/19.jpg)
O usuários utilizam a web e a mídia impressa de formas diferentes. Um outdoor ou capa de uma revista é estático...um leitor entenderá a mensagem simplesmente olhando.
Mas a web é interativa, as pessoas precisam fazer coisas nela e a tipografia pode ajudar ou atrapalhar esse processo.
É por isso que o trabalho do designer é muito importante !
Jacob Nilsen (pag 215 – usabilidade na web)
Tipografia
![Page 20: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/20.jpg)
normalmente necessitariam de mais palavras normalmente necessitariam de mais palavras normalmente necessitariam de mais palavras normalmente necessitariam de mais palavras normalmente necessitariam de mais palavras Subtítulos curtos normalmente necessitariam de mais palavras de mais normalmente necessitariam de mais palavras normalmente necessitariam de mais palavras Frases curtas, com de mais
normalmente necessitariam de mais palavras normalmente necessitariam de mais palavras normalmente necessitariam de mais palavras normalmente necessitariam de mais palavras normalmente necessitariam de mais palavras Subtítulos curtos normalmente necessitariam de mais palavras de mais normalmente necessitariam de mais palavras normalmente necessitariam de mais palavras Frases curtas, com de mais
![Page 22: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/22.jpg)
1. listas com marcadores
2. Subtítulos curtos
3. Frases curtas, com uma ou mais idéias por frase
4. Parágrafos curtos, até mesmo com apenas uma frase
5. Texto facilmente mapeável, com palavras-chave em negrito
6. Gráficos in-line para guiar os olhos ou ilustrar pontos que normalmente necessitariam de mais palavras
![Page 23: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/23.jpg)
Curiosidades
Textos com letras MAIÚSCULAS reduzem em 10 % a velocidade de leitura
Estudos com fontes não serifadas na web geraram leituras mais rápidas. Exatamente
oposto da texto impresso.Na dúvida, use a verdana (pg 233)
![Page 24: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/24.jpg)
Significa que pessoas portadoras de necessidades especiais sejam capazes de usar a Web. Mais concretamente, significa uma Web projetada de modo a que estas pessoas possam perceber, entender, navegar e interagir de uma maneira efetiva com a Web, bem como criar e contribuir com conteúdos para a Web.
http://maujor.com/w3c/introwac.html
![Page 25: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/25.jpg)
Acessibilidade na Web: Custo ou Benefício?
http://www.youtube.com/watch?v=zNVrNo7MxsA&feature=related
![Page 26: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/26.jpg)
Garantir a acessibilidade nos sites é importante para quem ?
Resposta 1 -> Internautas
Resposta 2 -> Google
![Page 27: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/27.jpg)
![Page 28: Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto](https://reader036.vdocuments.net/reader036/viewer/2022062406/5590b5c31a28ab035f8b45fe/html5/thumbnails/28.jpg)