Ir para o conteúdo

Guia de estilo

Introdução

  O guia de estilo é um registro das principais decisões de design tomadas, de forma que elas não se percam, isto é, sejam efetivamente incorporadas no produto final1. Servem como uma ferramenta de comunicação entre os membros da equipe de design e também com a equipe de desenvolvimento.

  Um guia de estilo deve incorporar decisões de design que abranjam os principais elementos e considerações da interface de design. Os elementos a seguir devem ser levados em consideração.

  • Layout: Envolve a proporção e os grids de design, a utilização de metáforas espaciais, bem como o design gráfico de exibidores e ferramentas.

  • Tipografia: Refere-se ao uso de fontes e estilos de texto em diálogos, formulários e relatórios.

  • Simbolismo: Foca na clareza e consistência no design de ícones, garantindo que os símbolos utilizados comuniquem de forma eficaz.

  • Cores: Aborda os princípios fundamentais relacionados ao uso de cores no design, incluindo a aplicação de diretrizes específicas para uma paleta de cores eficaz.

  • Visualização de Informação: Diz respeito ao design de gráficos, diagramas e mapas para apresentar informações de maneira clara e compreensível.

  • Design de Telas e Elementos de Interface (Widgets): Envolvem as decisões de design relacionadas à disposição de elementos na tela, bem como o estilo e a funcionalidade de widgets e componentes da interface do usuário.

Objetivo do Guia de Estilo

  O propósito fundamental deste Guia de Estilo é fornecer diretrizes e melhores práticas para o design e desenvolvimento de interfaces de usuário eficazes e usáveis na disciplina de Interação Humano-Computador (IHC). Aqui, abordaremos os seguintes tópicos:

  1. Elementos de Interface: incluindo disposição espacial e estrutura de grade, janelas, tipografia, paleta de cores, ícones, widgets, logotipos e design de telas.

  2. Elementos de Interação: abrangendo estilos de interação, seleção de estilos e o uso de aceleradores (teclas de atalho).

  3. Elementos de Ação: detalhando o preenchimento de campos, seleção de itens e ativação de funcionalidades.

  Este guia visa proporcionar um recurso valioso para profissionais que buscam aprimorar a usabilidade e a eficácia de suas interfaces de usuário na disciplina de IHC.

Organização e conteúdo do guia de estilo

  O guia de estilo seguirá a estrutura proposta por Marcus3 e Mayhew2, a qual é dividida em: introdução, resultados de análise, elementos de interface, elementos de interação, elementos de ação, vocabulário e padrões. Este artefato tem como objetivo padronizar a interação do site e a aparência, garantindo uma melhor experiência para o usuário.

Público-alvo do guia de estilos

  Programadores, membros da equipe de suporte e gerentes de projeto que estão participando deste projeto são o público-alvo deste guia de estilo. Este guia deve ser utilizado como referência ao longo do processo de desenvolvimento, com o objetivo de assegurar que o resultado final seja uma interface utilizável, acessível e eficiente.

Como Utilizar o Guia

  O Guia de Estilo oferece orientações para garantir que a interface do usuário atenda às necessidades dos usuários finais, promovendo uma interação eficaz e satisfatória. serve como uma referência para apoiar a tomada de decisões de design em todas as etapas do projeto de Interação Humano-Computador.

Como Manter o Guia

  A manutenção contínua do Guia de Estilo é de suma impotância para que a equipe composta por alunos, designers e desenvolvedores tomem decisões que afetem o projeto de Interação Humano-Computador. Isso assegura a consistência visual e de interação no sistema, proporcionando a melhor experiência do usuário e evitando problemas de usabilidade e acessibilidade.

Elementos de interação

Estilo de Interação

Neste site, os usuários têm à disposição diversas maneiras de interagir através da página de autoatendimento e na barra de menu, são ofericidas opções como:

  1. Consulta de Contas Pagas: Para acessar suas contas já quitadas de forma rápida e prática.

  2. Verificação de Falta de Água: Para saber se há falta de água em uma região específica.

  3. Emissão da Segunda Via da Conta: Para obter uma cópia da sua fatura com facilidade.

  4. Reporte de Vazamento de Água na Rua: Para ajudar a identificar problemas de vazamento para uma solução mais rápida.

  5. Revisão de Conta: Para casos em que você tenha dúvidas ou precise revisar uma fatura.

  6. Consulta da Qualidade da Água: Para verificar a qualidade da água na sua região.

  7. Verificação da Situação de Débito: Para manter-se informado sobre a situação dos seus débitos.

Seleção de Estilos

  O site da Caesb apresenta uma interface com uma paleta de cores uniforme e elementos consistentes. O site é dedicado a fornecer informações sobre os serviços oferecidos pela Caesb, com foco especial em consultas relacionadas à água e verificação de contas.

Aceleradores (Teclas de Atalho)

  Não foram encontradas teclas de atalho.

Resultados da análise

  A maioria dos usuários acessa o site da Caesb através de celulares por isso é essencial que o site seja adaptado para dispositivos móveis devido à crescente tendência de uso de smartphones para acessar informações online.

  Além disso, a otimização do acesso às funcionalidades do site da Caesb em dispositivos móveis é crucial para atender às necessidades dos usuários que buscam realizar ações específicas, como consultar faturas, relatar problemas, ou obter informações sobre serviços.

Elementos de Interface

  Os elementos sobre disposição grid, tipografia, cores, botões e ícones e logos estao representados na figura 1.

Figura 1 - Elementos da Interface

Fonte: Oscar de Brito e Leandro de Almeida

Elementos de Ação

Preenchimento de Campos

  Este documento estabelece diretrizes essenciais para o preenchimento de campos em interfaces de sistemas, visando assegurar a consistência e clareza na coleta de informações dos usuários. Os elementos que um usuário pode preencher, são campos presentes na interface do sistema, demandam que o usuário insira informações manualmente, de acordo com suas necessidades e objetivos. Exemplos de tais campos incluem a barra de pesquisa e as barras para efetuar o login.

Seleção

  Há vários elementos de seleção, como, por exemplo, botões, menus, dropdowns, links, campos de pesquisa e outros. Esses elementos têm como objetivo facilitar a interação do usuário com o site, tornando a experiência mais agradável e intuitiva.

Ativação

  Incluem botões, ícones, links, imagens e outros elementos clicáveis. Foram encontrados opções de efetuar o donwload para pdf, botões para acessar outras páginas e links para notícias.

Vocabulários e padrões

Terminologia

  A Caesb segue convenções e padrões comuns a sites institucionais e de serviços públicos, são mais formais do que informais. O vocabulário e as terminologias usados no site geralmente refletem os termos e conceitos específicos relacionados ao setor e aos serviços oferecidos pela organização. Isso ocorre por algumas razões como: Profissionalismo, Clareza e maior precisão, respeito ao público e universabilidade.

Tipos de Tela

  O site da CAESB adota um padrão de design coeso e uma identidade visual consistente em suas diversas telas. A interface segue uma abordagem de design sólido e funcional, mantendo a coerência em todos os elementos. Essa uniformidade de estilo torna a experiência do usuário mais intuitiva e orientada para a eficiência, garantindo que os usuários possam navegar facilmente por todas as seções do site, que abrangem desde informações gerais até serviços específicos e recursos e recursos de atendimento ao cliente.

Sequência de Diálogos

  As sequências seguem um padrão, os botões de confirmação e cancelamento são semelhantes, mesmo quando estão em páginas diferentes, e são de fácil visualização.

Referências

1. SIMONE DINIZ JUNQUEIRO BARBOSA, BRUNO SANTANA DA SILVA, Interação Humano-Computador, 1a. Edição, Elsevier, 2010.

2. Mayhew, D. Th e Usability Engineering Lifecycle: a practitioner’s handbook for user interface design. San Francisco, CA: Morgan Kaufmann, 1999.

3. Marcus, A. Graphic Design for Electronic Documents and User Interfaces. New York, NY: Th e ACM Press, 1992.

Bibliografia

1. Bilheteria Digital. Guia de estilo. Repositório do Grupo Bilheteria Digital da disciplina de Interação Humano Computador da Universidade de Brasília, 2023. Disponível em: https://interacao-humano-computador.github.io/2023.1-BilheteriaDigital/analise-de-requisitos/guia-de-estilo/. Acesso em: 21 de out. 2023.

2. BancoCentral. Guia de estilo. Repositório do Grupo BancoCentral da disciplina de Interação Humano Computador da Universidade de Brasília, 2023. Disponível em: https://interacao-humano-computador.github.io/2023.1-BancoCentral/#/analise_requisitos/guia_estilo. Acesso em: 21 de out. 2023.

Histórico de versão

Versão Data Descrição Autor(es) Revisor(es)
1.0 20/10/2023 Adiciona guia de estilo Leandro e Oscar Jefferson, Leandro, Mateus, Oscar, Pedro, Rodrigo e Tiago
1.1 21/10/2023 Acrescenta tópicos no guia de estilo Leandro e Oscar Jefferson, Leandro, Mateus, Oscar, Pedro, Rodrigo e Tiago