Senac Bauru - Marketing na Web - Aulas 3, 4 e 5

Senac Bauru

Aula 3

Sitemap é uma representação hierárquica da estrutura de um site, composta por páginas web.

Deve ser utilizado para ilustrarmos o funcionamento do projeto e correlação das páginas.

Promoções

História

Tortas Doces

Auto-promoção

Home do site

Elemento de página / animação

Link de primeiro nível / superlink

Página web

Conjunto de páginas / categorias / conteúdo dinâmico

Formulários

Ligação das páginas

Link interno do site

Fluxo de dados

Ponto de decisão

Formulário decontato

Grava cotação

no sistema

Login

Após passarmos pelo briefing, pesquisa e montarmos o sitemap o próximo documento do projeto web o Escopo.

Neste documento descrevemos textualmente:

O funcionamento do site; Seus links e suas correlações; O conteúdo necessário para cada

página e como ele será organizado; Campos dos formulários; Funcionamento dos sistemas.

Ok, e agora? O que fazer com os documentos?

- Você já os aprovou com o cliente?

Vamos aos Wireframes Mas antes vamos falar um pouco sobre

Usabilidade.

“A capacidade de um sistema interativo oferecer a um usuário em um

determinado contexto de operação a realização de tarefas de maneira

eficaz, eficiente e agradável.”

“A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de tarefas de maneira eficaz, eficiente e agradável.”

celulares

softwares

televisão

A maçaneta da minha casa


telespectadores

ouvintes

internautas

Os motoristas


Hora de ler meus e-mails

Acompanhar o sobe e desce da Bolsa de Valores

Chegar ao vigésimo andar de elevador


Comprei os ingressos com antecedência pela internet. É baba, vai lá.

Esse mapa do metrô não ajuda em nada. E agora, não sei falar japonês?!

Filho, como eu faço pra esse celular parar de tocar?

Vídeo “Torneira”

1. Menos é mais. Faça o site leve e rápido Se você esta vendendo um produto ou serviço na internet, mantenha o foco em sua

mensagem. Ninguém quer ver um layout cheio de animações e gravuras que nunca terminam de baixar.

Tenha em mente que se não ajuda a vender, não serve. Não faça nada só porque os outros estão fazendo. Construa um site para agradar ao cliente, não ao chefe.

Lembre–se que “a imagem seduz, mas é o texto que vende”. Se você quiser passar sua mensagem, não deve escondê–la. Use um layout limpo e elegante, clean. Simples, mas não simplório.

Você tem apenas alguns segundos para conquistar a atenção do visitante. Mantenha as páginas leves, use poucas imagens, bem colocadas e comprimidas. O texto deve ser direto e objetivo. Especialmente na página inicial.

2. Padrão Mantenha o mesmo padrão em todas as páginas. É fácil, basta:

Usar as mesmas cores, molduras, botões, fontes e demais elementos em todas as páginas;

Deixar a logomarca da empresa sempre na mesma posição;

Se o menu está à esquerda, deixe–o lá o tempo todo, se estiver à direita, idem.

3. Navegação A palavra chave é simplicidade. A internet já é um labirinto de

informações. Conheço diversas pessoas que ficam loucas quando têm que achar alguma coisa. Então não complique, torne a navegação em seu site simples e direta.

Todas as páginas devem estar a dois, no máximo, três cliques de distância umas das outras. Você pode conseguir isto colocando menus para as áreas principais do site em todas as páginas.

Uma forma de testar a navegação do site é chamar alguém, de preferência sem muito conhecimento. Peça a ele que encontre alguma coisa que VOCÊ sabe que está lá, só não diga como. Outra forma é imaginar–se um iniciante na internet e verificar se seria difícil encontrar alguma informação.

4. Fale conosco Já tentou entrar em contato com a empresa e se perdeu no

labirinto de links e páginas sem encontrar o e–mail ou telefone para contato? Eu já e aquela empresa perdeu um possível cliente.

Para evitar este problema, coloque seu e–mail em todas as páginas. Se necessário faça um formulário de contato com poucos campos para o usuário preencher. Apenas o nome, e–mail, telefone (caso haja algum problema com o e–mail) e um espaço para a mensagem são necessários. Você poderá pedir as outras informações mais tarde. O importante agora é fazer contato.

5. Logos e imagens Como ninguém gosta de esperar dois minutos para ver uma

gravura carregar, mantenha suas imagens a um mínimo possível.

Se você tem que usar muitas imagens para passar sua mensagem, uma palavra: compressão.

Imagens são uma parte importante do site, mas podem torná–lo muito pesado.

Comprima as imagens para evitar ou pelo menos minimizar este problema.

6. Fontes (famílias de tipos de letra) Procure usar apenas uma fonte em todo o site. Se quiser usar mais

de uma, use apenas para destaques, citações e títulos. Mantendo a variação de tipos de letras ao mínimo, você garante um visual mais padronizado e limpo. É muito mais profissional.

Outra razão é que há poucas “fontes padrão” na internet. Arial, Verdana, Courier e Times New Roman são algumas delas. Se você usar alguma fonte fora dos padrões, pode ser que os usuários não vejam as páginas como foram criadas. Mantenha o padrão.

Há recursos de programação para que possamos inserir uma família de fontes no site exibí-la ao usuário (fonte embed) , mas lembre-se: menos é mais.

7. Espaço em branco Tão importante quanto as notas de uma canção são as pausas.

Pergunte a qualquer músico.

O mesmo ocorre no design de qualquer peça publicitária. Deixe que as palavras saltem da tela, colocando bastante espaço entre elas. Deixe o textorespirar. Use margens à esquerda e a direita.

Seguindo estas sugestões, o visual ficará muito mais limpo, agradável e profissional.

8. Becos sem saída Um beco sem saída é uma página aonde não existem links

para sair dela.

Pense no site de uma forma que não precise dos botões do browser para navegar, ou seja, se precisar clicar no botão voltar, tem alguma coisa errada.

Você pode colocar um link nas páginas, mas esta não deve ser a única forma de sair da página.

9. Links mortos Links mortos são aqueles que estão no menu, mas ainda não foram

criadas as páginas correspondentes ou, pior ainda, levam a uma “página em construção”.

Se a página não existe ou não está completa, não coloque indicações para ela, no futuro você poderá colocar os links e destacar que a página é nova, tornando o conjunto mais dinâmico e trazendo maior impacto. Além de tudo, links mortos dão um ar de falta de profissionalismo.

Páginas com a mensagem “em construção” causam frustração, pois o visitante espera encontrar a informação, mas ela não está lá.

Veja que um site de verdade estará sempre em construção. A construção só termina com o fim do site ou da empresa.

10. Links quebrados Teste todos os links em todas as páginas, sempre. Links

quebrados, ou seja, os que levam a páginas de erro ou não existentes, são outro fator de frustração e falta de profissionalismo.

Se você tem muitos links externos (para outros sites), teste–os de vez em quando para manter a integridade do site.

Livros: Não Me Faça Pensar, de Steve Krug Usabilidade na Web, de Cláudia Dias Projetando Websites, de Jakob Nielsen Homepage Usabilidade: 50 Websites

Desconstruídos, de Jakob Nielsen e Marie Tahir

Design/web/design:2, de Luli Radfahrer Design para internet, de Felipe Memória

Devemos produzí-los para: Planejar a navegação do site;

Experimentar de forma simples navegações diferenciadas sem perda de tempo de produção de layouts, animações;

Aprovar com o cliente a organização das informações e o padrão de navegação do site.

http://http://

http://http://

Section 1 Section 2

Title

ok

Home > Level 1 > Level 2 > Level 3 > Level 4

> Section 1Section 2Section 3Section 4

Advanced search

Button

Zone de Text

⋁

Logo

Title

Section 1Section 2

> Section 3Section 4

Home

Text

Text

Text

Title section 1

----

99

Campo de seleção

Section 3

⋁

Text area

⋁

⋀

⋀

✓

Search

?

Submit

99 ⋁⋀

✓

Gender* : ⋁M.

First name* :

Last name* :

Birth date* : mm/dd/yyyy (ex : 12/23/1972)

Radio buttons* : First exclusive choice

Second exclusive choice

Third exclusive choice

Check boxes* : First optional choice

Second optional choice

Third optional choice✓

Numeric field* :

----

⋁

⋀Text area* :

Fieldset

* Mandatory fields

http://www.example1.htmlhttp://www.example1.html

Section 1 Section 2

Section 1

OverviewSection 1.1Section 1.2

> Section 1.3Section 1.4

Home

Cartridge

Nunc vero fatemur, acuti hebetesne, valentes imbecilline simus, non esse id in nobis.

Learn more...

Section 3 Section 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras lacinia, wisi nec lacinia fermentum, sem est blandit eros, at varius dolor velit at justo. Vestibulum euismod sapien in arcu consectetuer cursus. Curabitur magna dolor, auctor vel, volutpat vitae, posuere ut, odio. In sit amet orci. Cras luctus erat quis lectus. Morbi fermentum, neque vitae accumsan gravida, mi ipsum eleifend libero, in condimentum libero purus eget massa. Integer posuere pulvinar augue. Etiam tempus ligula vitae ipsum. Integer tristique. Integer ultricies, massa nec dignissim porttitor, urna augue fermentum enim, ac nonummy risus augue eu sapien.

Aliquam at eros. Quisque tempus ante sit amet velit. Phasellus cursus posuere odio. Curabitur tempor fermentum augue. Etiam tempus iaculis ipsum. Suspendisse wisi pede, scelerisque sit amet, adipiscing quis, vulputate ut, mauris. Nunc sodales, diam eget molestie rutrum, lectus sem fermentum diam, nec feugiat velit leo a est. Fusce scelerisque vestibulum lacus. Duis eu leo vitae sem cursus rhoncus. Ut metus. Vestibulum ligula dui, vestibulum quis, convallis vel, volutpat ut, eros. Etiam eget orci. Sed non magna non est tempor malesuada. Integer tellus justo, sagittis et, congue vitae, tempor in, lorem. Nam luctus, tortor ac dapibus pretium, nibh lacus pretium libero, sit amet vehicula augue libero eu elit. Fusce at est sed velit semper suscipit. Maecenas mattis magna at est. Maecenas elit.

Proin eget tellus sit amet risus bibendum semper. Sed mattis mattis eros. Nulla facilisi. Maecenas ultricies nulla non justo. Duis accumsan, nulla et viverra posuere, pede pede rhoncus est, sit amet imperdiet nisl turpis facilisis erat. Morbi felis. Praesent vestibulum justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vestibulum, mi ut molestie iaculis, ipsum urna tristique dolor, sed iaculis felis est nec pede. Fusce convallis ante in ligula.

Title section 1.3

Site map

Contact

Help

LogookSearch…


Search :

You are here : Home > Section 1 > Section 1.3 >

HomeSection 1

Section 1.1Section 1.2Section 1.3

> Section 1.3.1Section 1.3.2

Section 1.4

Section 2Section 3Section 4

ToolsMenu Help

Advanced search

Direct access :




Title section 1.3.1

Site map

ContactLogo

ok

⋁You want to…

http://www.exemple3.htmlhttp://www.exemple3.html

Section 2




Title section 2.3.1

Section 1 Section 2 Section 3 Section 4 Section 5

Home > Section 2 > Section 2.3

OverviewSection 2.1Section 2.2Section 2.3- Section 2.3.1- Section 2.3.2- Section 2.3.3Section 2.4

Section 6

Home Site map ContactLogo

okSearch…

Cartridge

Nunc vero fatemur, acuti hebetesne, valentes imbecilline simus, non esse id in nobis.

Learn more...


HomeSection 1Section 2Section 3Section 4Section 5

NewsletterSearch

Site mapContact




Title section 1.3

OverviewSection 1.1Section 1.2Section 1.3Section 1.4

Section 1

Learn more...

Link #1Link #2Link #3Link #4

Logo

Pesquise, questione.

Qualquer dúvida envie um email para: [email protected]

Vocês podem encontrar meus outros contatos em: http://meadiciona.com.br/pccidaos

Por hoje é só pessoal.

Technology

Senac Bauru - Marketing na Web - Aulas 3, 4 e 5