Download - 2010.1 - PUB5AN - Marketing Digital AULA 03
![Page 1: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/1.jpg)
UsabilidadeProf. Neca Boullosa
![Page 2: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/2.jpg)
“Tornar o simples complicado é fácil, tornar o complicado
simples é criatividade”Charles Mingus
![Page 3: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/3.jpg)
Criando um site na internet
![Page 4: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/4.jpg)
Defina objetivos e públicos◦Quem vai acessar?◦O que vou oferecer? Ou posso oferecer? Site
ou Hot-site?◦Site é um organismo vivo◦Hot-site tem vida útil.
Criando um site na internet
![Page 5: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/5.jpg)
Tipos de Site◦Branding◦E-commerce◦Serviços◦B2B
Tipo de Site
![Page 6: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/6.jpg)
Arquitetura da informação◦Entender o cliente◦Levantar informações ◦Mudar processos internos◦Mapa do Site◦Landing Pages◦CMS (Gerenciamento de Conteúdo)
A parte mais difícil
![Page 7: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/7.jpg)
Mapa de um site
![Page 8: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/8.jpg)
![Page 9: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/9.jpg)
![Page 10: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/10.jpg)
Desenho e Montagem
![Page 11: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/11.jpg)
Desenho e Montagem◦Diretor de Arte para internet?◦Redator para web?◦Usabilidade / Layout◦Programação / Banco de Dados / Sistemas e Aplicações
Desenho e Montagem
![Page 12: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/12.jpg)
Usabilidade é tudo
![Page 13: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/13.jpg)
Pesquisa, feita em dezembro de 2009, descobriu que 78% dos consumidores passaram para sites rivais ao enfrentar demoras, erros ou problemas de transação.
Além disso, 88% não voltam ao site cujo desempenho os desapontou.
![Page 14: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/14.jpg)
“É a extensão na qual um produto pode ser usado por usuários específicos para alcançar objetivos específicos com efetividade, eficiência e satisfação em um contexto de uso específico”
Usabilidade
![Page 15: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/15.jpg)
Segundo o “papa” da usabilidade, JAKOB NIELSEN, “deve-se retirar da página tudo que não auxiliar o usuário a atingir o objetivo que definimos para ele.”
Usabilidade
![Page 16: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/16.jpg)
O inovador ou bonito nem sempre é útil. Uma grande besteira continua sendo uma grande besteira, mesmo que com um belo design.
Bonito não é útil
![Page 17: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/17.jpg)
Os sites devem ser focados na experiência do usuário e não na mente do diretor de criação que o concebeu ou no dono da empresa. O usuário é o verdadeiro juiz. Será ele quem dirá se o site da empresa está bom ou ruim.
Foco no usuário
![Page 18: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/18.jpg)
Tenha consciência que o usuário não sabe NADA sobre o conteúdo do seu site, e você irá planejá-lo de forma mais simples possível.
O Usuário não sabe nada
![Page 19: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/19.jpg)
Não fique reinventando a roda a cada página.
Crie um padrão e siga-o em todo o site.
Se precisar, crie sub-padrões por área, se houver muito conteúdo.
Seja Coerente
![Page 20: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/20.jpg)
Ela deve dar o tom do site, destacar os principais conteúdos, possuir links para as primeiras seções.
Não deixe ela parecida com as páginas internas.
Página Inicial, a porta de entrada
![Page 21: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/21.jpg)
Mantenha seu texto claro e objetivo, na medida do possível, curto também.
O usuário não quer ler um livro. Vá colocando mais conteúdo nos níveis mais
internos do site.
Texto... Curto ou longo?
![Page 22: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/22.jpg)
Mantenha suas páginas leves, não entupa seu site com imagens, gráficos e animações desnecessárias.
Sigas as práticas comuns. “Modernizar” só para ser diferente vai lhe prejudicar. O moderno é simples.
Usuários fogem de lentidão
![Page 23: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/23.jpg)
5 DICAS RÁPIDAS DE USABILIDADE
![Page 24: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/24.jpg)
1-Pessoas olham para pessoas
![Page 25: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/25.jpg)
![Page 26: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/26.jpg)
![Page 27: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/27.jpg)
2-A qualidade do Design é um indicador de
credibilidade.
![Page 28: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/28.jpg)
3 – A maioria dos usuários NÃO dá
scroll.
![Page 29: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/29.jpg)
Fuja do scroll, principalmente nas primeiras páginas.
77% dos usuários não faz scroll
Scroll ou Não Scroll
![Page 30: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/30.jpg)
4 – Azul é a melhor cor para links.
![Page 31: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/31.jpg)
Siga os padrões...
![Page 32: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/32.jpg)
5-Espaços em branco melhoram a compreensão.
![Page 33: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/33.jpg)
E PARA TERMINAR!
![Page 34: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/34.jpg)
Segundo a pesquisa de JAKOB NIELSEN:
BASTAM 5 USUÁRIOS PARA VOCÊ MELHORAR SIGNIFICATIVAMENTE A EXPERIÊNCIA DO SEU SITE.
Teste seu site
![Page 35: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/35.jpg)
TRABALHO FINAL DA DISCIPLINA
Avaliação em GRUPOAvaliação INDIVIDUAL
![Page 36: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/36.jpg)
Briefing◦ Levantamento de informações
Arquitetura de Informação◦ Organização do Conteúdo
Layout◦ Desenho do Site
Montagem◦ Produção do Conteúdo
Campanha Online◦ Plano de Mídia Digital
Site do Curso de Publicidade
![Page 37: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/37.jpg)
Identificação dos Participantes por etapa Avaliação Individual por etapa
◦ A cada aula, os envolvidos na etapa serão avaliados.
NÃO FALTEM!
Se precisar, vamos fazer um aula-extra.
Divisão da Equipe
![Page 38: 2010.1 - PUB5AN - Marketing Digital AULA 03](https://reader033.vdocuments.site/reader033/viewer/2022060117/5586427ad8b42acc138b51cb/html5/thumbnails/38.jpg)
21/5 – Arquitetura de Informação◦ Mapa do Site
28/5 – Layouts e Plano de Mídia 4/6 – Entrega do Site e Plano de Mídia e
Peças
Entrega do Plano de Mídia◦ Peças planejadas◦ Diversos Formatos
Apenas JPG – Flash é opcional
Conclusão e Entrega 4/6