Diretrizes de Usabilidade Diretrizes de Usabilidade

SUMÁRIO

Objetivo

Escopo

Definições, acrônimos e abreviações

Referências

Requisitos de Usabilidade

Perfil do Usuário 

Interface de Acesso

Identidade Visual
Padrão de Interface de Sistemas
Projeto visual
Tela inicial do Módulo de Contratos
Área de identificação do sistema
Área de acesso às funcionalidades
Área de identificação do usuário e funções gerais (ferramentas) do SIG
Área de Trabalho
Área de Conteúdo e Inserção de ícones
Elementos Visuais
Ícones Informativos
Ícones de ações
Ícones da barra de funções gerais (ferramentas)
Ícones de Menu
Acessibilidade
Padrão de Construção
Restrições

 

Objetivo

Este documento de Diretriz de Usabilidade tem como objetivo orientar os desenvolvedores e web designers na construção e manutenção da interface do sistema, utilizando elementos visuais (ícones) adequados.

Sua intenção é promover uma melhor interação do usuário com as funcionalidades do sistema, orientando sua construção para que os padrões de usabilidade sejam mantidos, e ainda, abranger o máximo de soluções de interfaces necessárias para o correto desenvolvimento de sistemas.

Escopo

As diretrizes contidas neste documento abrangem a usabilidade de elementos visuais (ícones) e se aplica a todos os sistemas utilizados ou desenvolvidos baseados no framework SIG da Ebserh.

Definições, acrônimos e abreviações

  • Cascading Style Sheets (CSS) - São as folhas de estilos associadas às páginas HTML e que gerenciam o padrão visual do sistema.
  • WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) é uma especificação técnica publicada pela World Wide Web Consortium (W3C) que especifica como aumentar a acessibilidade de páginas web, com conteúdo dinâmico e componentes de interface.
  • Ebserh – Empresa Brasileira de Serviços Hospitalares
  • SIG - Sistema de Informações Gerenciais da Ebserh

Referências

Esta subseção lista todos os documentos utilizados como referência na elaboração desta diretriz.

Documento

Responsável

Versão

Data

Padrões Web em Governo Eletrônico Cartilha de Usabilidade

Departamento de Governo Eletrônico - MPOG

1.2

Abril de 2010

Pontos de verificação para a Acessibilidade ao conteúdo da Web - Diretrizes 1.0

 

The World Wide Web Consortium (W3C)

2014

Agosto de 2014

 

Requisitos de Usabilidade

Esta seção descreve os aspectos que influenciaram o projeto de usabilidade. Nela serão descritos os perfis de usuários do sistema e aspectos de identidade visual que devem ser aplicados ao sistema.

Perfil do Usuário

Não haverá diferenças no padrão de usabilidade e acessibilidade conforme o perfil do usuário, salvo exista alguma necessidade especial apontada pelo cliente durante a fase de análise negocial do projeto. Este tipo de mudança poderá implicar em alterações de prazo e custo do projeto, cabendo análise pertinente e aprovação das novas condições.

Interface de Acesso

Caso o Sistema possua alguma necessidade especial para esta interface deverá ser documentada e prototipada durante a fase de análise negocial do projeto ou na fase de levantamento de requisitos. Tal mudança poderá implicar em alterações de prazo e custo do produto a ser entregue, cabendo análise pertinente e aprovação das novas condições.

Identidade Visual

A identidade visual do Sistema deverá atender às especificações sugeridas pela Ebserh sendo contemplado neste documento as exceções ao modelo, bem como aqueles itens que não estão pré-definidos.

Padrão de Interface de Sistemas

Esta seção inclui todas as diretrizes para a utilização adequada dos elementos visuais (ícones) que compõem a usabilidade, a organização e a distribuição desses elementos na Interface dos sistemas, tendo como meta a eficiência do processo de utilização de suas funcionalidades.

Projeto visual

Esta seção apresenta, como exemplo, o projeto visual do sistema SIG.

Aqui é apresentado um modelo de tela em nível de navegação do sistema, com a descrição das áreas que o compõe.

Disponibilizando a logo do sistema, as informações dos módulos disponíveis no SIG (Módulos), área para acesso ao sistema (login), listagem de prêmios (Prêmios) e informações (Informes).

Tela inicial do Módulo de Contratos

Área de identificação do sistema

Área de identificação do sistema com a logo do SIG e o nome do sistema selecionado [1].

Área de acesso às funcionalidades

Menu horizontal de acesso aos módulos do sistema selecionado [2]. Ao selecionar uma opção são apresentados os itens de suas funcionalidades. As opções são: Principal, Relatórios, Sistema e Sair.

Área de identificação do usuário e funções gerais (ferramentas) do SIG

No canto superior direito do SIG serão apresentadas as funções gerais do SIG [3]:

  • Alteração de cores do layout;
  • Impressão da página em execução;
  • E-mails;
  • Usuários on line;
  • Ajuda;
  • Contato;
  • Sair do sistema.

Logo abaixo é apresentada a área de identificação do usuário, disponibilizando o nome do usuário [4] e o tempo restante para expiração da seção [5].

Área de Trabalho

Inicialmente deve apresentar a identificação do perfil e o caminho da funcionalidade que está sendo acessada (migalha) [6].

Área de Conteúdo e Inserção de ícones

[7] São as áreas onde poderão aparecer a maioria dos elementos visuais descritos neste documento de usabilidade.

Elementos Visuais

A usabilidade será composta por diversos elementos visuais (ícones) organizados de acordo com os princípios de design, no qual são observados aspectos de contraste, repetição, alinhamento e proximidade, com o objetivo de orientar o usuário por intermédio de pistas visuais, facilitando a utilização do sistema. Os ícones podem apresentar tamanho (largura e altura em pixels) e cores diferentes.

Ícones Informativos

Ícone

Indicação <alt> <hint>

Indicação

Construção
<img src=”” />

   

Campo Obrigatório

  • Exibido sempre que houver campo obrigatório a ser preenchido, à direita do campo.

obrig.gif
(8x11 pixels)

Preenchimento Incorreto

  • Exibido quando o tipo de dado informado para um campo for inválido; o hint deste ícone deve trazer a mensagem referente ao erro; será posicionado à direita do campo;

restricao.png
(21x21 pixels)

Informações

  • O hint desse ícone apresentará dados necessários ao preenchimento de determinado campo. Será posicionado à direita do campo.

info.gif
(21x21 pixels)

 

Ícones de ações

Ações executadas a partir do acionamento dos ícones no sistema. Alguns ícones podem ser usados para mais de um tipo de ação.

Os ícones devem ser posicionados na ordem que são apresentados na tabela abaixo, de acordo com sua função.

Ícones da barra de funções gerais (ferramentas)

Ações executadas a partir do acionamento dos ícones da barra de ferramentas na parte superior à direita.

Ícones de Menu

Ações executadas a partir do acionamento dos ícones do menu horizontal abaixo da logo.

Acessibilidade

É essencial que os elementos visuais aqui relacionados apresentem uma codificação HTML compatível com os padrões de acessibilidade na web. Para tanto, os ícones inseridos nas páginas web deverão conter, em sua codificação HTML, um equivalente textual. Ou seja: todos os elementos visuais deverão conter a tag HTML nativa para imagens (<img>) acompanhada da respectiva propriedade “alt”.

Exemplo: <img src=”bt_help.png” alt=”Botão de ajuda” />. 

Padrão de Construção

  • Layout

Os layouts utilizados para o sistema usarão as funcionalidades nativas da biblioteca do SIG para construção das telas. 

  • Ícones

Antes de inserir algum ícone na tela ou módulo em que estiver usando, o usuário deverá atentar para o tamanho (em pixels) de cada ícone, observando tal indicação nas listas descritas acima.

Exemplos:

- Ícones da barra de funções gerais (ferramentas) (23 x 23 pixels)

- recuo_d.gif (11x10 pixels)

  • Utilização de temas

As customizações da aparência das telas devem ser feitas utilizando os recursos de temas da biblioteca. Esses temas devem conter folhas de estilo CSS e imagens. A vantagem de se usar temas é que a identidade visual pode ser replicada facilmente de um sistema para outro.

As folhas de estilos que não forem nativas da biblioteca de componentes deverão ser nomeadas de forma a identificar a sua função na estrutura do sistema. A nomenclatura das folhas de estilo deverá seguir o padrão: “sistema_<Identificação>.css”.

  • Utilização de novos ícones

Para a utilização de ícones em novas funcionalidades e que não estejam relacionados neste modelo de usabilidade, deverá ser contatada a equipe de design para providências na elaboração dos mesmos.

  • Código

A codificação dos ícones no sistema deverá apresentar indentação padrão, de forma a facilitar o entendimento da hierarquia utilizada na construção. Deverão ser utilizados comentários somente para identificação das áreas da página, de forma a facilitar a localização dos elementos.

Restrições

  • CSS (Cascade Style Sheet)

Com o objetivo de garantir a flexibilidade da formatação do sistema, e, na medida do possível, deve-se evitar a atribuição de características diretas ao código, utilizando para isso o padrão cascata na atribuição dessas características.

  • Navegadores

O sistema deverá ter suas características visuais e funcionais mantidas nas versões atualizadas e maduras do Mozilla Firefox e Google Chrome, preferencialmente.