Weby shortcut
instagram link
Youtube-play
Flickr

Manual Portal UFG - Capítulo 3

Atualizado em 04/12/14 11:20.

3. Identificação dos elementos do site (padrão de interface THIS)

O processo de transição de modelos anteriores para novo layout do Portal UFG deve ocorrer sem perda de conteúdo, e sim, a partir de uma reconfiguração baseada no reconhecimento e aglutinação de informações familiares, suas estruturas e relações, além do uso efetuado por seus usuários (Figuras 15 a 21).

Figura 15
Figura 15 – Padrão de sites antigo

 

Figura 16
Figura 16 - Banner

 

Figura 17
Figura 17 - Campo central

 

Figura 18
Figura 18 - Menus

 

3.1 Rotulação dos elementos do segundo novo layout

Figure 19
Figura 19 - Assinatura e Marca

 

Figura 20
Figura 20 – Rodapé

 

Figura 21
Figura 21 - Menu Global

 

3.2 Identificação dos elementos do site antigo no novo layout

Recomenda-se para o primeiro nível do menu superior o uso de 7 rótulos (tags), dispostos em uma única linha horizontal. A apresentação dos itens de submenu, serão feitas em 3 níveis, um dropdown (expansível para baixo) e 2 dropforward (expansivo para o lado). Caso os 3 níveis de submenu ainda não sejam suficientes para disponibilizar todo o conteúdo desejado, o nível subsequente deve acontecer na página seguinte, com a devida lista de sublinks.

 

  1. Primário (horizontal da esquerda para direita)
  2. Secundário (dropdown / vertical para baixo)
  3. Terciário (dropforward / horizontal para a direita)
  4. Quaternário (dropforward / horizontal para a direita)

 

3.3 Estrutura informacional

A estrutura informacional deverá apresentar uma hierarquia de rótulos inter-relacionados. Abaixo seguem dois exemplos de hierarquia de informação representados por fluxograma. A Figura 21 apresenta uma estrutura global e genérica que pode ser utilizada por qualquer unidade de graduação, enquanto a Figura 22 apresenta a estrutura específica da PROGRAD/UFG e seus respectivos sites vinculados.

 

Figura 22
Figura 22 - Diagrama elaborado para os cursos de graduação.

 

Figura 23
Figura 23 - Exemplo de hierarquia de rotulação informacional do menu superior para sites vinculados  à PROGRAD.