Projeto Basico Secao Viii Manual de Estilo de Interacao

SISTEMA INTEGRADO DE GESTO GOVERNAMENTAL ETAPA 01
SEO VIII MANUAL DE ESTILO DE INTERAO

1

SEO VIII
Manual de Estilo de Interao


2

Manual de Estilo de Interao
Introduo
Este documento rene as diretrizes criadas para o MEI (Manual de Estilo de
Interao) Guia de Interfaces Grficas criado para orientar o desenvolvimento
de novos sistemas de informao da Prodemge. O documento dividido em duas
sees principais: Componentes (elementos padres de sistemas) e Templates de
Pginas ( com Exemplos de navegao e Casos de Uso principais).
As convenes e padres de interfaces especificados neste documento tem como
principal objetivo garantir a consistncia na criao dos sistemas desenvolvidos
pela Prodemge, facilitando o desenvolvimento e proporcionando, como
consequncia maior qualidade de uso aos usurios e clientes.


3

1. Componentes
1.1.Cabealhos
Cabealhos so elementos fixos das interfaces. Devem conter principalmente a identificao
clara do sistema e a navegao global, como acesso ao perfil de usurio, menu principal,
acesso ao login e atalhos de acessibilidade (aumento e diminuio do tamanho da fonte). Veja
abaixo alguns exemplos de comportamento do cabealho.

Exemplo de cabealho no logado.

Exemplo de cabealho logado.

No exemplo acima, quando o usurio est logado, o cabealho (topo) exibe um menu com
acesso aos principais mdulos do sistema e uma notificao indica as atualizaes do sistema,
neste exemplo est exibindo as novas tarefas no vistas. E logo ao lado, uma indicao de que
o usurios est logado.

Os menus devem ser agrupados por tipos de aes, demandas ou funcionalidades similares.

Exemplo de menu de ferramentas. Neste exemplo de menu, os mdulos do sistema podem
estar disponveis para acesso rpido. Uma sugesto de organizao para este menu seria:
listar os mdulos mais acessados em cima e os demais abaixo


4

Exemplo de menu de notificaes. Este menu pode indicar as ltimas atualizaes do sistema.
Exibe as ltimas notificaes ativas do sistema, marcando (com uma cor diferente) as
notificaes que no foram vistas.

1.2 Elementos de Formulrio
Os Elementos de Formulrio so campos e recursos que facilitam o preenchimento de
informaes pelos usurios, devem ser focados em agilizar e facilitar a realizao de uma
tarefa, evitando e prevenindo erros e ajudando o usurio a sanar os erros cometidos com
mensagens claras.

1.2.1 Esttica
Na esttica dos formulrios, uma recomendao o uso de linhas de fundo para auxiliar o
alinhamento dos campos, como no exemplo. Estas linhas com preenchimento de cor clara, cria
ritmo e facilita a leitura, mas no deve ser nunca com cores muito pesadas.

1.2.2. Ttulos e subttulos
Agrupe informaes do formulrio sempre que possvel, separando os grupos de informaes
com ttulos.

1.2.3. Atalhos
Permita, sempre que possvel, a navegao pelos campos por meio da tecla "Tab" do teclado.

1.2.4. Preveno de erros
O sistema no deve apagar os campos, aps ocorrer algum erro no preenchimento.


5

Exemplo de padro de formulrio
1.2.5 Uso de mscaras e auto-completar
Sempre que possvel, use mscaras para prevenir que os usurios preencham um campo da
maneira incorreta. Use auto-completar para campos onde o usurio precisa preencher uma
informao que pode ser previamente prevista, como nomens de cidades, buscas, horrio,
categorias pr-definidas etc. Veja exemplos destes recursos a seguir.

Exemplo de uso de mscara para campos de data, inscrio e auto-completar.


6

1.2.6 Uso de Ajuda contextual e Tool Tips
Sempre que necessrio use instrues abaixo dos campos para informar e lembrar como o
usurio deve preencher aquele campo. Quando a informao for maior, faa uso dos Too Tips,
como nos exemplos a seguir.

Exemplo: as instrues devem vir abaixo do campo. O tool tip indicado com um cone e
quando o usurio passa o mouse em cima, ele exibe um balo com as instrues.

1.2.7 Select Box (Campos de Seleo)
Os campos de seleo apresentam um grupo de informaes previamente cadastradas no
sistema e auxiliam no preenchimento do formulrio. Veja algumas variaes dos campos de
seleo e exemplos de como ultiliz-los.

Exemplos de estilos de campos de seleo e como us-los.
1.2.8 Check Box
Os campos de Check box, ao contrrio dos Radio Buttons (boto rdio), oferecem um recuso
para os usurios podem escolher mais de uma opo, como nos exemplos a seguir.


7

1.2.9 Radio Button (Radio)
Os Radio Buttons, oferecem a opo do usurio escolher entre uma opo ou outra. Podem
estar previamente marcados, como padro, ou no selecionados previamente, como nos
exemplos abaixo.

1.2.10 Calendrios
Os calendrios devem ter um padro que torne a tarefa de escolher uma data ou um perodo,
mais rpida, ou seja, mais fcil tambm. Por isto a sugesto que se use um padro como o
mostrado abaixo. Ao clicar no cone de calendrio, o sistema exibe o calendrio do ms, com
possiblidade de navegar pelos meses seguintes ou anteriores.

1.2.11 Criao de listas
Um recurso de criao de listas, deve oferecer a opo dos usurios selecionarem as opes
em uma lista pr-cadastrada e enviarem estas opes para a nova lista. A opo de desfazer
tambm deve estar presente, como no exemplo a seguir.


8

1.2.12 Validao de Campo
A mensagem principal de aviso mostrada quando ocorre validao via boto concluir ou
enviar . A mensagem principal deve acompanhar a rolagem da tela, permanecendo sempre
visvel, independentemente se o usurio, rolar verticalmente a tela, como no exemplo abaixo.

Exemplo de sistema de validao de campos e mensagens de erro.
Alm disto o sistema deve indicar visualmente o campo que est errado, indicando com uma
mensagem ou feedback curto o problema e como o usurio poder resolv-lo.


9

1.2.13 Validao de Campos em tempo real
H tambm a possibilidade da validao ocorrer em tempo real, a medida que o usurio vai
preenchendo os campos. Neste caso o sistema exibe um feedback visual e textual se o campo
foi preenchido corretamente ou no. Deve-se fazer uso de cores para indicar o feedback, como
nos exemplos abaixo.

Use a cor verde para indicar sucesso e vermelho para um erro.
1.2.14 Caixa de Dilogo
A caixa de dilogo deve ser usada quando precisar chamar ateno do usurio para algum erro
impeditivo, no formulrio. A caixa por padro deve conter um ttulo, o boto fechar (x), uma
mensagem clara e os botes de ao. Sendo que a ao principal pode vir destacada, como no
exemplo.

Exemplo de caixa de dilogo padro


10

1.2.15 Alertas e Mensagens
Os alertas e mensagens devem seguir um padro visual para cada contexto, como no exemplo
a seguir.

Neste exemplo acima, as cores indicam se houve sucesso ou erro. Os cones tambm auxiliam a passar a
mensagem correta. A mensagem deve conter uma opo de fechar indicada por um x.

1.2.16 Barra Progressiva
O sistema deve sempre indicar o processamento de uma ao realizada pelo usurio, seja o
envio de um formulrio, upload de arquivos etc. Deve sempre seguir um padro visual e
sempre que possvel indicar o status.

1.3 Navegao
Os padres de navegao foram criados para dar consistncia aos sistemas, facilitando o uso
e principalmente ajudando a organizar os diversos tipos de informao. Conhea alguns estilos
de navegao que foram criados e como eles podem ser usados.

1.3.1 Migalha de po
Devem ser usadas em todo o portal. Os itens devem ser clicveis e linkveis, exceto o ltimo,
referente a tela corrente.


11

Exemplo de Migalha de po (breadcrumb)

1.3.2 Menu com cones sem Drop Down
Neste caso no h sub-opes, por isto com apenas um clique o usurio pode ir
direto a pgina ou funcionalidade desejada. Os cones neste caso devem vir
acompanhados de um label que os identifique.

Abaixo uma variao de um menu com cones e drop down exibindo mais opes.

1.3.3 Menu de Funcionalidade
O menu usando somente cones indicado quando as aes so conhecidas
pelos usurios e facilmente reconhecidas. Ex.: Editar, Salvar, Abrir, Excluir,
Configurar etc. Deve vir sempre com atributo alt como no exemplo:


12

1.3.4 Menu Principal Horizontal
Priorize o uso do menu horizontal nos principais mdulos dos sistemas. Ele otimiza
o espao.

1.3.5 Menu Principal Vertical
Use o menu vertical somente para navegao contextual e nunca global.


13

1.3.6 Visualizao em rvore
Use a visualizao em rvore para indicar hierarquia de pastas dentro de diretrio.
Usado principalmente para encontrar e visualizar documentos.

Exemplo de menus em rvore.

1.3.7 Drag and Drop
Este recurso pode ser utilizado quando o usurio precisa ordenar elementos ou criar listas.
Deve ser usado o padro e exemplo a seguir:


14

1.4 Upload de Arquivo
1.4.1 Arquivo anexo
Ao ser anexado, o sistema deve exibir o cone e nome do arquivo anexado ao lado do boto,
como no exemplo. Alm disso, exibida uma mensagem de sucesso que pode ser fechada.

Exemplo de interface para Upload de Arquivos

Enquanto o sistema faz upload no arquivo, deve exibir uma barra indicando o status (em
porcentagem concluda) do processo.

1.4.2 Anexando em lote
Ao anexar mais de um arquivo ao mesmo tempo, o sistema deve indicar o estado de cada
processo.

Exemplo de upload de arquivos em lote


15

1.5 Tabelas
Foram desenvolvidas alguns exemplos de interfaces para tabelas. Veja diversos tipos e
padres para as tabelas.
1.5.1 Tabela simples

1.5.2 Tabela com paginao

1.5.3 Tabela com travamento


16

1.5.4 Crud Tabela

Tabela Dinmica


17

2. Templates de Pgina
Os Templates de pginas foram criados para exemplificar alguns casos de usos e navegaes
mais comuns e servem de referncia para o desenvolvimento das interfaces. Foram
desenhadas telas para Login, CRUD, Caixa de Entrada, Tela de Buscas e Consultas, Tela de
Gerao de Relatrios, Painel de Controle e Pgina Inicial de um mdulo.

2.1 CRUD
CRUD Tabular um padro de interfaces onde possvel ao usurio Criar documento, Deletar,
Editar, Visualizar. Existem algumas regras para uso de icones ou menu dropdown para aes
contextuais, dentro da tabela, veja a seguir:
Usar icones para quando houver um nmero pequeno de aes (at 3, por exemplo)
Usar dropdown quando for um nmero grande de aes possveis (acima de 3)

Exemplo de de tela principal CRUD

2.1.1 CRUD / Incluso simples de documento
A incluso de documentos pode ser feita usando uma janela modal em casos em que a
incluso exige poucas informaes, casos de uso simplificados.


18

2.1.2 CRUD / Incluso completa de documento
Este tipo de template deve ser usado para incluso de documentos extensos, com muita
informao (mais de 6 campos, por exemplo). Desta forma o sistema abre uma nova pgina,
como no exemplo abaixo.


19

2.1.3 Confirmar excluso
Quando o usurio clica em excluir documento, o sistema pode exibir uma mensagem de
confirmao, como no exemplo.

2.2 Caixa de Entrada
A Caixa de entrada um recurso que exibe ao usurio uma lista de opes, podem ser tarefas,
documentos ou processos em andamento. A Caixa de entrada deve conter as seguintes
funcionalidade, de acordo com a necessidade:


20

Ordenamento de colunas
Mltiplas selees ("Selecionar todos")
Aes contextuais agrupadas em menu dropdown em cada linha.
Paginao com possibilidade de inserir nmero da pgina.
Funo "Exibir" nmero de resultados.

Exemplo de interface de Caixa de Entrada


21

2.3 Consulta Busca Simples
A tela de Consulta deve conter um rea para a busca e abaixo uma tabela que exibir os
resultados buscados. A busca por padro deve exibir somente os filtros e recursos essenciais e
as demais opes devem ser exibidas quando o usurio clicar em exibir busca avanada.
Veja o exemplo abaixo.

Exemplo de tela de consulta de documentos com opo de busca avanada e tabela de
exibio dos resultados.
2.4 Tabular dinmica
Uma tabela dinmica um modelo de tabela que o usurio pode editar as informaes de
modo dinmico e direto, como no exemplo. Ao clicar em editar a tabela exibida no modo
editvel, conforme abaixo.


22

2.5 Gesto de Relatrios
Na tela de Gesto de Relatrios, o usurio, pode criar, editar e consultar relatrios. Abaixo um
exemplo deste tipo de tela.

Exemplo de Gesto de Relatrios com sistema de busca.


23

2.6 Tela Inicial Contbil
Este exemplo, detalha como seria uma tela de um mdulo do sistema GRP. Neste exemplo de
pgina inicial do mdulo Contbil, h uma caixa de entrada e reas com acesso rpido a
informaes, como ferramentas mais usadas e uma caixa de busca simplificada.

Exemplo de tela inicial de um Mdulo do SIGG


24

2.7 Tela de Login
Este um exemplo de uma tela inicial de login.

Abaixo uma variao de interface de login, que pode ser usado como recurso de
acesso rpido na lateral do sistema, por exemplo.


25

2. 8 Portal GRP
Este um exemplo de como poderia ser uma tela inicial para o Portal GRP.

A Pgina inicial poderia exibir os principais destaques, notcias atualizadas, um
acesso rpidos a principais documentos usados pelos usurios e acesso ao login.

Projeto Basico Secao Viii Manual de Estilo de Interacao

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Projeto Basico Secao Viii Manual de Estilo de Interacao

Uploaded by

Copyright:

Available Formats

SISTEMA INTEGRADO DE GESTO GOVERNAMENTAL ETAPA 01

SEO VIII MANUAL DE ESTILO DE INTERAO

You might also like