Guia de Estilos
Introdução
Objetivo do Guia de Estilo
O objetivo deste guia de estilo é fornecer diretrizes claras para a criação e manutenção de uma interface de usuário consistente, eficiente e acessível para o Portal DETRAN-DF. Ele abrange aspectos visuais, de interação e de ação que devem ser seguidos por todas as equipes envolvidas no desenvolvimento e manutenção do sistema. A implementação dessas diretrizes visa aprimorar a experiência do usuário e garantir que o portal seja fácil de usar, compreensível e funcional para diferentes perfis de usuários (Barbosa e Silva, 2011, p.282-283).
Organização e Conteúdo do Guia de Estilo
O guia está organizado em várias seções, cobrindo aspectos como os elementos de interface, elementos de interação, ação, vocabulário e padrões. Cada seção detalha diretrizes específicas para garantir a consistência na interface do usuário e facilitar a navegação.
Público-Alvo do Guia de Estilo
O guia de estilo foi projetado para ser utilizado por:
-
Programadores: Para garantir que as implementações sejam consistentes com o design e as diretrizes de usabilidade.
-
Gerentes de Projeto: Para garantir que a visão do design seja mantida durante o desenvolvimento e em futuras iterações.
-
Equipe de Suporte: Para que os atendentes saibam como solucionar problemas relacionados à interface do portal com base nos padrões estabelecidos.
Como Utilizar o Guia
O guia de estilo deve ser utilizado sempre que uma atualização for realizada na interface ou quando novas funcionalidades forem introduzidas. Ele serve como uma referência para garantir que o portal continue com uma interface coesa.
Como Manter o Guia
O guia de estilo deve ser atualizado regularmente para refletir mudanças nas necessidades dos usuários, no design e nas tecnologias utilizadas. A manutenção deve ser feita por uma equipe responsável que acompanhará as mudanças no projeto, implementando novos elementos e padrões conforme necessário.
Resultados de Análise
Descrição do ambiente de Trabalho do Usuário
O ambiente de trabalho do usuário do Portal DETRAN-DF é digital e acessado por meio de navegadores de internet em dispositivos como computadores, tablets e smartphones. O sistema oferece diversas funcionalidades, como consultas de veículos, CNH, multas, e serviços como agendamento e pagamento. O objetivo é garantir que os usuários consigam realizar suas tarefas com facilidade, sem sobrecarregar a interface com informações excessivas ou complexidade desnecessária.
Elementos de Interface
Logotipo
Figura 1 - Logo Portal DETRAN-DF
Fonte: Portal DETRAN-DF
Disposição Espacial e Grid
Figura 2 - Disposição espacial e GRID
Autor: Luiza Maluf
Janelas e Containers
Figura 3 - Página de início
Fonte: Portal DETRAN-DF
Figura 4 - Seção "Veículos"
Fonte: Portal DETRAN-DF
Figura 5 - Login
Fonte: Portal DETRAN-DF
Figura 6: Preenchimento do Formulário de Inclusão de gravame
Fonte: Portal DETRAN-DF
Figura 7: Consulta das restrições de um veículo
Fonte: Portal DETRAN-DF
Figura 8: Página de agendamento de serviços
Fonte: Portal de Serviços do Detran
Tipografia
Figura 9: Tipografia
Autor: Luiza Maluf
Cores
Figura 10: Cores
Autor: Luiza Maluf
Elementos de Interação
Estilos de Interação
-
Clique: As interações são ser claras. Elementos clicáveis, como botões e links, são destacados com cores contrastantes (mudança de cor ou sublinhado).
-
Arraste e Solte: Para funcionalidades de upload de documentos, permitir que o usuário arraste e solte com feedback visual (e.g., sombra ao arrastar um item).
Seleção de um Estilo
- Cada interação é consistente com a função que ela executa. Por exemplo, todos as subseções relacionadas a "Consultas" dentro do Portal possui coloração verde, assim como as "Credenciais"são roxas e os aspectos relacionado aos "Veículos" estão em roxo.
Aceleradores (Teclas de Atalho)
O portal não possui teclas de atalho
Elementos de Ação
Preenchimento de Campos
-
Os campos de formulário são bem definidos e com rótulos claros. Cada campo tem um texto de exemplo ou placeholder que oriente o usuário sobre o que inserir.
-
Campos obrigatórios: são indicados com um asterisco (*) e as mensagens de erro são exibidas de forma clara, destacando os campos que precisam ser corrigidos.
Seleção
-
Para campos de seleção, como listas suspensas ou caixas de seleção, há uma descrição clara do que está sendo selecionado.
- Exemplo: "Consultar" na figura 7 em que seleciona a consulta do veículo.
Ativação
- A ativação de botões e links deve é com a cor de fundo e do texto diferenciadas, além de utilizar efeitos de hover ou foco que indiquem ao usuário que a ação pode ser realizada.
Vocabulário e Padrões
Terminologia
- A terminologia é clara e consistente ao longo do portal. Termos como "agendar", "consultar", "editar" e "cancelar" são utilizados de forma consistente, com a mesma grafia e significado em todas as páginas e interações.
Tipos de Tela (Para Tarefas Comuns)
-
Tela Inicial: Exibe links rápidos para as principais funções do portal, como "Consultar Multas", "Agendar Atendimento", "Verificar CNH".
-
Tela de Consulta: Apresenta tipos de consultas que o usuário pode realizar dentro das subseções.
-
Tela de Emissão: Exibe os documentos que o usuário tanto pessoais quanto de seu veículo que podem ser emitidos.
Sequências de Diálogos
Para Feedback ou Confirmação de uma Operação:
- Exemplo: Após o usuário agendar um serviço, uma janela de confirmação aparece com a mensagem "Seu agendamento foi realizado com sucesso".
Bibliografia
Referências Bibliográficas
BARBOSA, S. D. J.; SILVA, B. S. Interação Humano-Computador. Rio de Janeiro: Elsevier, 2011.
Histórico de versão
Versão | Data | Descrição | Autor(es) | Revisores |
---|---|---|---|---|
1.0 | 02/12/2024 | Construção do Guia de Estilo. | Luiza Maluf | Márcio Henrique |