Aula 02 Pratica Modelos Cognitivos

Escola Superior de Tecnologia
DETI Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design
Web Design
Resumo
Design de navegação
Estrutura da informação
Navegabilidade
Organização
Interface
Estrutura da informação
Imaginemos que entramos numa loja e não conseguimos

identificar os serviços ou produtos que esta representa.
O mesmo acontece num site.
Devemos estruturar a informação de forma a que o utilizador ao

aceder encontre rapidamente o que a empresa faz e quais os
serviços que disponibiliza.
Para tal é necessário definir o objectivo do site, transmitir as

informações necessárias da empresa e definir os conteúdos
das paginas.
Objectivo do site
Qual o objectivo deste site?
Para informar com eficácia, a homepage deve destacar as

tarefas de criação da marca e as de alta prioridade.
A homepage deve ter um visual diferente das outras paginas,

deve permitir ao utilizador facilidade de reconhecimento,
para que estes a reconheçam como ponto de partida, ao
voltarem de qualquer outra parte do site.
Boas praticas na criação do objectivo do site
Exibir o nome da empresa e/ou logótipo,

Num tamanho razoável e num local de
Destaque.
Esta área de identificação não necessita de ser grande mas

deve ser maior e mais destacada que os itens que lhe são
próximos, de forma a que se destaque.
Normalmente esta deve situar-se no canto superior esquerdo.
Incluir um slogan resumindo explicitamente

o que o site ou empresa faz.
Devemos incluir um slogan simples que informe os utilizadores

que não conhecem a empresa e lhes de um ideia rápida do
que o site oferece.
O Slogan deve ser justificativo da diferença entre o nosso site
e os da concorrência, e o ter implícito a importância que este
tem para os utilizadores.
Apresentar as tarefas de alta prioridade

para que os utilizadores tenham um ponto
de partida defendido na homepage.
Devemos colocar estas tarefas num local de destaque e não

devemos atribuir a essas mesmas tarefas muitas chamadas
para outras tarefas.
Restringir ao máximo o numero de tarefas básicas entre 1 e 4
e manter limpa a área em volta destas.
Definir explicitamente uma pagina como

a homepage oficial do site.
Dentro do site use o termo “Homepage” somente para se

referir á própria homepage.
A pagina não deve conter varias formas de voltar á pagina
principal. Devemos ser consistentes nas forma como
retornamos á principal.
Estruturar a homepage de forma diferente

de todas as outras paginas.
Usar uma estrutura ligeiramente diferente na homepage.
Assegurar aos utilizadores um reconhecimento dos pontos

iniciais quando voltarem de um exploração mais detalhada do
site.
Informações da empresa
Todos os sites devem conter um método objectivo de

procurar informações sobre a empresa. Ate porque muitos
utilizadores que visitam o site só querem mesmo tirar
informações á cerca da empresa.
Estas directrizes também devem ser aplicadas para sites

governamentais e de outro tipo de organizações, embora
com algum nível de detalhe inferior.
Boas praticas na criação de informações da empresa
Agrupar informações da empresa, como :

Sobre nós, Relações com investidores,
Sala de imprensa,etc. Numa área reservada.
Conseguimos com esse agrupamento que as pessoas que
procuram informação em relação á empresa tenham um
acesso rápido a essa mesma informação.
Permitindo também as pessoas que não querem aceder a essa

informação a separação do conteúdo fora da homepage.
Incluir um link da homepage para uma

secção- Sobre Nos – oferecendo uma ideia
geral sobre a empresa e links para todos os
detalhes relevantes sobre os produtos,
serviços, valores da empresa, propostas de
negocio, etc.
O link recomendado para esse link é –
Sobre [nome da empresa].

Apresentar uma cara unificada aos clientes
É importante diferenciar entre os serviços somente disponíveis

da Web e os serviços que a empresa executa no seu todo.
Por exemplo uma estação de televisão pode oferecer difusão

on-line no site, assim como listar informações de programas
disponíveis na empresa.
Incluir um Link Contacte-nos na homepage

que aceda a uma pagina com todos os
contactos.
Estimula os visitantes a entrar em contacto com a empresa e

a deixar o seu contacto.
Não incluir informações internas da empresa

no Web site publico
Podem confundir os utilizadores, ao pensarem que as politicas

internas da empresa lhes dizem respeito.
Navegação
Um dos objectivos principais de uma Homepage é

facilitar a navegação em todos os sítios do site.
É fundamental que os utilizadores encontrem sem

muito trabalho a área de navegação adequada,
distinguir as opções e ter uma noção básica do que
existe por detrás dos Links.
A área de navegação deve conter o conteúdo mais

importante do site
Elementos da Navegação
Navegação é o nome dado ao acto de activar

ligações. Ao navegar estamos constantemente a
visualizar novos documentos.
Esta pode ser:

INTERNA
EXTERNA
Navegação Externa
A principal forma de navegação na net é deste tipo.

Pode ser feita das seguintes formas:
Hiper ligações simples (Links) – palavras normalmente

sublinhadas
Menus Verticais – menus extensos normalmente em texto,
mas que podem assumir a aparência de imagens,
normalmente encontram-se no lado esquerdo podendo
aparecer também no lado direito.
Menus horizontais – são menus curtos que agregam a maior
parte das vezes ligações ás parte principais do site.
Exemplos de: Menu Vertical

Menu Horizontal
Navegação Interna
A navegação diz-se interna quando é feita dentro de um

mesmo documento.
Só se torna necessária em documentos muito extensos.
Faz-se a partir de ligações textuais, contidas no topo do

documento, que ligam a trechos específicos do texto.
Activada essa ligação somos levados para o local desejado do

texto.
Formas de navegação
Pagina A forma de navegação pode assumir duas vertentes
Índice
Navegação pontual e sequencial
A primeira consiste na ligação directa entre

dois documentos de tema diverso.
A segunda faz-se dentro de um só tema.
Navegação pontual
Ex.: um site que tenha uma secção de
contactos e se efectua a partir da secção
de noticias, esta é uma ligação pontual, em
contrapartida uma vez dentro de noticias,
a ligação de uma noticia ás outras através
Navegação sequencial de setas, como se folheássemos um livro é
sequencial.
Pagina
Conteúdos
Boas praticas na criação da navegação
Alocar a área de navegação principal em

local bastante destacado, de preferência
imediatamente ao lado do corpo principal
da pagina.
Evitar posicionar qualquer área de navegação horizontal superior,

em cima de gráficos com réguas horizontais ou áreas de banner.
-Normalmente os utilizadores ignoram tudo o que esta por cima ou dentro

de uma forma rectangular, no inicio da pagina.
Agrupar os itens na área de navegação,

de modo a que itens semelhantes fiquem
próximos entre si.
O agrupar de itens ajuda os utilizadores a distinguir as

categorias semelhantes ou relacionadas, e a identificar a
variedade de produtos oferecidos. Por exemplo num site
farmacêutico agrupar os medicamentos com receita medica dos
medicamento sem receita medica.
Não disponibilizar diversas áreas de

navegação para o mesmo tipo de links
Não devemos incluir muitas áreas por categorias nem diversas

áreas para noticias.
Grupos semelhantes podem complicar a interface.

Não incluir um link activo para a

homepage na homepage
Se se incluir um link “homepage” como parte da barra de navegação,

este deve estar inactivo ou não permitir a navegação. Se se
utilizar um logótipo para retornar para a homepage este não
devera aparecer na homepage,.
Não inventar termos para as opções de

navegação por categorias. As categorias
devem ser diferenciáveis entre si. Se o
utilizador não entende o termo utilizado
não consegue distinguir as categorias.
A accenture utiliza a palavra “uCommerce”, para a modalidade de

comercio electrónico, mas na sua barra de navegação tem
escrito “eComerce”
Se existir um recurso de carrinho de

compras,para compras on-line, incluir
um link na homepage
Desta forma permitimos ao utilizador que veja imediatamente o

que seleccionou sem necessitar de navegar dentro do site.
A utilização de ícones na navegação

deve ser usada apenas se ajudar
os utilizadores a reconhecerem
imediatamente uma classe de itens.
Não utilizar ícones quando simples links e texto são

claramente diferenciáveis entre si.
Organização
Todos os sites devem conter de forma organizada, todos os

conteúdos a disponibilizar bem como possuir um layout
atractivo e dinâmico.
Para se conseguir essa organização temos de seguir

recomendações para a criação de conteúdos e de interface.
Layout
O layout da pagina corresponde á disposição dos seus

diversos elementos segundo uma estrutura consistente
que realce as diversas hierarquias presentes.
Desta forma antes de se iniciar a construção do interface

devemos esboçar alguns protótipos numa folha de papel
por forma a encontrar e a testar alternativas.
Solução possível para a composição dos diversos

elementos da pagina.
Titulo do Site
Navegação Principal
logótipo
Titulo da pagina
Navegação secundária Bloco de texto ou

imagem
Destaques
Ligações relevantes
Nome do autor e data
Criação do conteúdo
A criação do conteúdo é um dos aspectos mais críticos do

Web design.
Normalmente os utilizadores passam os olhos pela pagina e

não lêem muito.
O conteúdo tem que ser optimizado de forma a que o

utilizador ao “varrer” o ecrã fique com o maior numero de
informação relevante possível.
Regras a seguir na Criação do conteúdo
- Usar a linguagem dos Clientes

- Evitar Conteúdos redundantes
- Não utilizar frases difíceis de perceber
Ex:
Drem, Plan, Go
- Empregar letras maiúsculas e outros padrões de estilo com
consistência
Regras a seguir na Criação do conteúdo
- Usar espaços não separáveis entre as palavras e as frases

que necessitem de permanecer juntas para serem
percebidas.
- Explicar o significado de abreviações
- Evitar pontos de exclamação
- Utilização de forma rara todas as letras maiúsculas e nunca

como estilos de formatação.
- Evitar usar inadequadamente espaços e pontuação para

dar enfeze.
Algumas dicas na Criação do conteúdo
- Utilizar exemplos para revelar o conteúdo do site.
Ex.
Saldos ou
$25 Agora $15

Algumas dicas na Criação do conteúdo
- Para cada exemplo usar um link directo para a pagina

correspondente.
- Inserir um link para uma categoria mais abrangente ao lado

do exemplo especifico.
- Indicar de forma clara que links conduzem a informação de

cada exemplo dado

Aula 02 Pratica Modelos Cognitivos

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Aula 02 Pratica Modelos Cognitivos

Diunggah oleh

Hak Cipta:

Format Tersedia

Escola Superior de Tecnologia

DETI Instituto Politécnico de Castelo Branco

Imaginemos que entramos numa loja e não conseguimos

O mesmo acontece num site.

Devemos estruturar a informação de forma a que o utilizador ao

Para tal é necessário definir o objectivo do site, transmitir as

Qual o objectivo deste site?

Para informar com eficácia, a homepage deve destacar as

A homepage deve ter um visual diferente das outras paginas,

Boas praticas na criação do objectivo do site

Exibir o nome da empresa e/ou logótipo,

Esta área de identificação não necessita de ser grande mas

Boas praticas na criação do objectivo do site

Incluir um slogan resumindo explicitamente

Devemos incluir um slogan simples que informe os utilizadores

Boas praticas na criação do objectivo do site

Apresentar as tarefas de alta prioridade

Devemos colocar estas tarefas num local de destaque e não

Boas praticas na criação do objectivo do site

Definir explicitamente uma pagina como

Dentro do site use o termo “Homepage” somente para se

Boas praticas na criação do objectivo do site

Estruturar a homepage de forma diferente

Usar uma estrutura ligeiramente diferente na homepage.

Assegurar aos utilizadores um reconhecimento dos pontos

Todos os sites devem conter um método objectivo de

Estas directrizes também devem ser aplicadas para sites

Boas praticas na criação de informações da empresa

Agrupar informações da empresa, como :

Permitindo também as pessoas que não querem aceder a essa

Boas praticas na criação de informações da empresa

Incluir um link da homepage para uma

O link recomendado para esse link é –

Sobre [nome da empresa].

Boas praticas na criação de informações da empresa

Apresentar uma cara unificada aos clientes

É importante diferenciar entre os serviços somente disponíveis

Por exemplo uma estação de televisão pode oferecer difusão

Boas praticas na criação de informações da empresa

Incluir um Link Contacte-nos na homepage

Estimula os visitantes a entrar em contacto com a empresa e

Boas praticas na criação de informações da empresa

Não incluir informações internas da empresa

Podem confundir os utilizadores, ao pensarem que as politicas

Um dos objectivos principais de uma Homepage é

É fundamental que os utilizadores encontrem sem

A área de navegação deve conter o conteúdo mais

Navegação é o nome dado ao acto de activar

Esta pode ser:

A principal forma de navegação na net é deste tipo.

Hiper ligações simples (Links) – palavras normalmente

Exemplos de: Menu Vertical

A navegação diz-se interna quando é feita dentro de um

Só se torna necessária em documentos muito extensos.

Faz-se a partir de ligações textuais, contidas no topo do

Activada essa ligação somos levados para o local desejado do

Navegação pontual e sequencial

A primeira consiste na ligação directa entre

Boas praticas na criação da navegação

Alocar a área de navegação principal em

Evitar posicionar qualquer área de navegação horizontal superior,

-Normalmente os utilizadores ignoram tudo o que esta por cima ou dentro

Boas praticas na criação da navegação

Agrupar os itens na área de navegação,