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

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

Resumo Design de navegação Estrutura da informação Navegabilidade Organização Interface

DETI

Escola Superior de Tecnologia Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

Boas praticas na criação do objectivo do site

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.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

Boas praticas na criação do objectivo do site

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.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

Boas praticas na criação do objectivo do site

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.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

Boas praticas na criação do objectivo do site

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.

DETI

Escola Superior de Tecnologia Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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.

DETI

Escola Superior de Tecnologia Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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

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].

DETI

Escola Superior de Tecnologia Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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 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.

DETI

Escola Superior de Tecnologia Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

Boas praticas na criação de informações da 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.

DETI

Escola Superior de Tecnologia Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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

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.

DETI

Escola Superior de Tecnologia Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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

DETI

Escola Superior de Tecnologia Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

Exemplos de:

Menu Vertical Menu Horizontal

DETI

Escola Superior de Tecnologia Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

Formas de navegação Pagina Índice

A forma de navegação pode assumir duas vertentes 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

Navegação sequencial Pagina Conteúdos

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 de setas, como se folheássemos um livro é sequencial.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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

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.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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

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.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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

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,.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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

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”

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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

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.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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

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.

DETI

Escola Superior de Tecnologia Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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.

DETI

Escola Superior de Tecnologia Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

Solução possível para a composição dos diversos elementos da pagina. Titulo do Site logótipo

Navegação secundária Destaques Ligações relevantes

Navegação Principal Titulo da pagina

Bloco de texto ou imagem

Nome do autor e data

DETI

Escola Superior de Tecnologia Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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.

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

Algumas dicas na Criação do conteúdo -

Utilizar exemplos para revelar o conteúdo do site. Ex. Saldos

ou

$25

Agora $15

Escola Superior de Tecnologia

DETI

Instituto Politécnico de Castelo Branco

Designação do Módulo – Web Design

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