Componentes
                                                      •   Home
         Criação de um Web site                       •   Menu
                                                      •   Conteúdo
                                                      •   Navegação
              Clara Pereira Coutinho                  •   Páginas do site: ligações internas e externas




                Página inicial                                  Processo de Concepção
• Deve caber no rectângulo do monitor (evitar o
  scrolling)                                          •   Planear o site (organizar a informação)
• deve compreender o assunto do site,
                                                      •   conteúdo
• como o usar
• e ter indicações sobre o que pode ver (encontrar)
                                                      •   navegação no site
  quando o percorrer                                  •   E os níveis de interacção.
• autor do site
• data da concepção/última alteração
• optimização do site (I.E. e resolução do monitor)




                                                                                                          1
Navegação no site                                            Texto
• Deve proporcionar confiança ao utilizador       • Simplicidade e clareza
  – saber onde está
                                                  • Legibilidade e efeito estético
  – saber como ir para...
                                                  • Tipo de letra: sem serifa

• Torna-se intuitiva quando existe consistência                Exemplos: arial, helvética
  na sua localização                              • Tamanho: 10 ou 12




                        Cor                                           Cuidados!
• Web palette (216 cores)                         • Não coloque demasiadas opções
• É importante haver contraste entre o fundo e    • O conteúdo central deve ficar acima da linha
  os caracteres                                     do “scroll”
• A cor pode ser um indicador da relevância da    • Não conceba uma página pesada que vai
  informação                                        demorar a ser descarregada




                                                                                                   2
5 princípios de design                                         Site
               (J. Davis e S. Merritt (1998)

• Comunique com clareza                            Três condições de sucesso:
• Mantenha consistência visual, conceptual e       • Rápido acesso
  mecânica                                         • Atraente
• Tire partido dos contrastes                      • deve ser fácil e rápido encontrar a informação
• Evite a confusão e a desordem: equilíbrio
• Aplique os princípios do cinema: início,
  meio e o fim




Padrão de comportamento visual para a leitura de          Zonas prioritárias para colocação de
              conteúdos on-line.                                   conteúdos on-line




                                                                                                      3
10 principais erros num site (Nielsen,
                 1994)
1. Frames                                                3. Movimento do texto e animações em loop
Embora a maioria dos browsers já suporte os frames, o
   uso de frames continua a não permitir que o
   utilizador recomende um link de uma determinada       - É difícil ler um texto em deslocamento
   página dentro do site.                                - o uso intensivo de animações causa cada vez mais
                                                            problemas sendo associados pelos utilizadores a
2. Usar tecnologia de ponta                                 publicidade.
Os upgrades do software leva a que muitos utilizadores
    desistam de visitar um site ao mínimo erro de
    javascript.




4. URL complexas e longas                                7. Falta de suporte na navegação

5. Páginas orfãs                                         É importante o utilizador saber sempre onde se
                                                             encontra num documento Web e poder aceder
                                                             sempre a qualquer parte do documento.
6. Páginas com barras de scroll                          Suportes á navegação: logótipo no canto superior
90% dos utilizadores da Web não fazem o scroll               esquerdo, link para a homepage ou indicação clara
  das páginas. Preferem navegar através dos                  de que parte do site a pagina corrente pertence.
  botões e de links visíveis.




                                                                                                                 4
Concepção e gestão do site
8. Utilização de cores não standard para os links
                                                    • Pasta principal com o nome do projecto e
                                                      uma pasta para guardar as imagens
9. Informação desactualizada
                                                    • Defina previamente as pastas que vai
                                                      precisar e onde vai colocar os ficheiros
10. Tempo de download elevado                         (deslocar ficheiros para outras pastas obriga-o a refazer os links)

+ do que 10 segundos de espera para carregar uma    • designe os seus ficheiros de uma forma
   página leva a que o utilizador desista             correcta e consistente




• Quando designar os ficheiros e links não use
  espaços. Por ex:
             manualEd.html ou manual_Ed.html
• seja cuidadoso na actualização do site (designe
  a versão antiga)




                                                                                                                            5

Criar um website

  • 1.
    Componentes • Home Criação de um Web site • Menu • Conteúdo • Navegação Clara Pereira Coutinho • Páginas do site: ligações internas e externas Página inicial Processo de Concepção • Deve caber no rectângulo do monitor (evitar o scrolling) • Planear o site (organizar a informação) • deve compreender o assunto do site, • conteúdo • como o usar • e ter indicações sobre o que pode ver (encontrar) • navegação no site quando o percorrer • E os níveis de interacção. • autor do site • data da concepção/última alteração • optimização do site (I.E. e resolução do monitor) 1
  • 2.
    Navegação no site Texto • Deve proporcionar confiança ao utilizador • Simplicidade e clareza – saber onde está • Legibilidade e efeito estético – saber como ir para... • Tipo de letra: sem serifa • Torna-se intuitiva quando existe consistência Exemplos: arial, helvética na sua localização • Tamanho: 10 ou 12 Cor Cuidados! • Web palette (216 cores) • Não coloque demasiadas opções • É importante haver contraste entre o fundo e • O conteúdo central deve ficar acima da linha os caracteres do “scroll” • A cor pode ser um indicador da relevância da • Não conceba uma página pesada que vai informação demorar a ser descarregada 2
  • 3.
    5 princípios dedesign Site (J. Davis e S. Merritt (1998) • Comunique com clareza Três condições de sucesso: • Mantenha consistência visual, conceptual e • Rápido acesso mecânica • Atraente • Tire partido dos contrastes • deve ser fácil e rápido encontrar a informação • Evite a confusão e a desordem: equilíbrio • Aplique os princípios do cinema: início, meio e o fim Padrão de comportamento visual para a leitura de Zonas prioritárias para colocação de conteúdos on-line. conteúdos on-line 3
  • 4.
    10 principais errosnum site (Nielsen, 1994) 1. Frames 3. Movimento do texto e animações em loop Embora a maioria dos browsers já suporte os frames, o uso de frames continua a não permitir que o utilizador recomende um link de uma determinada - É difícil ler um texto em deslocamento página dentro do site. - o uso intensivo de animações causa cada vez mais problemas sendo associados pelos utilizadores a 2. Usar tecnologia de ponta publicidade. Os upgrades do software leva a que muitos utilizadores desistam de visitar um site ao mínimo erro de javascript. 4. URL complexas e longas 7. Falta de suporte na navegação 5. Páginas orfãs É importante o utilizador saber sempre onde se encontra num documento Web e poder aceder sempre a qualquer parte do documento. 6. Páginas com barras de scroll Suportes á navegação: logótipo no canto superior 90% dos utilizadores da Web não fazem o scroll esquerdo, link para a homepage ou indicação clara das páginas. Preferem navegar através dos de que parte do site a pagina corrente pertence. botões e de links visíveis. 4
  • 5.
    Concepção e gestãodo site 8. Utilização de cores não standard para os links • Pasta principal com o nome do projecto e uma pasta para guardar as imagens 9. Informação desactualizada • Defina previamente as pastas que vai precisar e onde vai colocar os ficheiros 10. Tempo de download elevado (deslocar ficheiros para outras pastas obriga-o a refazer os links) + do que 10 segundos de espera para carregar uma • designe os seus ficheiros de uma forma página leva a que o utilizador desista correcta e consistente • Quando designar os ficheiros e links não use espaços. Por ex: manualEd.html ou manual_Ed.html • seja cuidadoso na actualização do site (designe a versão antiga) 5