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
“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.”
telespectadores
ouvintes
internautas
Os motoristas
“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.”
Hora de ler meus e-mails
Acompanhar o sobe e desce da Bolsa de Valores
Chegar ao vigésimo andar de elevador
“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.”
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…
http://www.example2.htmlhttp://www.example2.html
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 :
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.1
Site map
ContactLogo
ok
⋁You want to…
http://www.exemple3.htmlhttp://www.exemple3.html
Section 2
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 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...
http://www.example4.htmlhttp://www.example4.html
HomeSection 1Section 2Section 3Section 4Section 5
NewsletterSearch
Site mapContact
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
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.