Introdução

Segundo Barbosa e Silva (2011), um guia de estilo consiste em um registro das decisões de design mais importantes, visando sua preservação e incorporação efetiva ao produto final, além de servir como ferramenta comunicativa para os stakeholders da equipe. É crucial que tais decisões sejam facilmente consultáveis e discutíveis para orientar futuros projetos ou atualizações.

Para alcançar tais objetivos, é fundamental contar com um guia de estilo que oriente a criação de interfaces capazes de atender às necessidades e expectativas dos usuários, assegurando consistência visual e de interação em todo o sistema. Neste contexto, foram utilizados os Princípios Gerais e as Metas de Usabilidade para identificar áreas passíveis de melhoria por meio do guia de estilo.

Objetivos do Guia de Estilo

O propósito deste guia de estilo é oferecer diretrizes e práticas recomendadas para o design e desenvolvimento de interfaces de usuário eficazes e usáveis na área de Interação Humano-Computador (IHC). Marcus [3] apresenta os elementos que um guia de estilo deve seguir. A seguir é listado os elementos que fazem parte de um guia de estilo:

Layout: proporção e grids; uso de metáforas espaciais; design gráfico de exibidores e ferramentas;
Tipografia e seu uso em diálogos, formulários e relatórios: estilos de interação, seleção de estilo, aceleradores (atalhos);
Simbolismo: clareza e consistência no design de ícones;
Cores: os dez mandamentos sobre o uso de cores;
Visualização de informação: design de gráficos, diagramas e mapas;
Design de telas e elementos de interface (widgets).

Organização e Conteúdo do Guia de Estilo

O guia de estilo do site da Prefeitura Municipal de Lagoa da Prata foi elaborado seguindo a estrutura proposta por Marcus[2] e Mayhew[3], sendo divididos em tópicos (Introdução, Resultados de análise, Elementos de interface, Elementos de interação, Elementos de ação e Vocabulário e padrões) e subtópicos (elementos descritos de um guia de estilo). O objetivo deste artefato é padronizar tanto a interação do site como a aparência para que possa ser garantida uma boa experiência do usuário sendo ela consistente e de alta qualidade.

Público-alvo do Guia de Estilo

O público-alvo deste guia de estilo são os desenvolvedores, designers e equipes envolvidas no projeto de desenvolvimento de uma aplicação.

Desenvolvedores: eles têm a responsabilidade de transformar o design da interface em realidade, seguindo as orientações definidas no guia.
Designers: estão envolvidos na concepção e na criação de protótipos da interface, assegurando que os princípios de design sejam aplicados de maneira adequada.
Equipe de suporte: é incumbida de fornecer assistência técnica e manter a consistência do design durante todo o ciclo de vida da aplicação, desde o desenvolvimento até a manutenção.

Os utilizadores do guia devem referenciá-lo ao longo do desenvolvimento da aplicação, aderindo às orientações definidas para assegurar uma interface que seja fácil de usar, acessível e eficaz. Adicionalmente, eles têm a oportunidade de enriquecer o guia, partilhando feedback, ideias e atualizações com base nas suas vivências e descobertas.

Como Utilizar o Guia

Em produção

Este guia pode ser utilizado como referência para decisões de design ao longo de todo o ciclo de vida do projeto de Interação Humano-Computador, incluindo as fases de produção e manutenção. As diretrizes e práticas recomendadas aqui fornecem orientação para tomada de decisões de design, visando garantir que a interface resultante atenda às necessidades dos usuários finais, promovendo uma interação eficaz e satisfatória com o sistema.

Em mantenção

Durante a manuntenção do site da Prefeitura Municipal de Lagoa da Prata, é essencial aplicar o guia de estilo para avaliar e aprimorar as interfaces já existentes, incorporando o feedback dos utilizadores e acompanhando as tendências emergentes de design. Além disso, o guia serve como uma fonte de orientação para abordar dúvidas dos utilizadores e resolver questões de usabilidade de maneira uniforme e eficiente.

Como Manter o Guia

O guia de estilo é um recurso em constante evolução, demandando uma manutenção regular para garantir sua pertinência e eficácia ao longo do tempo. Sendo crucial que o guia seja constantemente atualizado e esteja conforme a evolução do projeto. Para garantir a manuntenção adequada e que os aspectos descritos sejam seguidos iremos adotar as seguintes as práticas:

Revisão Regular: Toda vez que houver decisões de design ou desenvolvimento que impactem o site, é necessário atualizar o guia de estilo para refletir tais mudanças. Garantindo que esteja alinhado com as últimas atualizações do projeto e com as tendências de design.
Monitoramento de mudanças: Sempre que possível coletar feedback dos usuários para que possa ser feito propostas atualização para o guia, uma vez aceitas a documentação deve ser feita imediatamente para evitar problemas de padronização.

Resultados de análise

Ao analisarmos como os usuários utilizam o site da Prefeitura Municipal de Lagoa da Prata, percebemos o seguinte:

Dispositivos e Resolução: A maioria dos acessos ocorre por meio de smartphones, com resoluções variadas, geralmente na proporção de 9:16 a 9:21. É essencial adaptar o design do site para garantir que o conteúdo seja apresentado de forma clara e organizada em telas de diferentes tamanhos.
Navegadores: Embora não tenhamos informações específicas sobre os navegadores usados, observamos que o Google Chrome, Safari e Microsoft Edge são comuns entre os usuários. Portanto, o site deve ser compatível e testado em diferentes navegadores para proporcionar uma experiência consistente.
Sistemas Operacionais: Os sistemas Android e iOS são os mais utilizados em dispositivos móveis, enquanto Windows, macOS e Linux são predominantes em computadores. Garantir que o site funcione bem em todos esses sistemas é crucial para atender a diversos tipos de usuários.
Periféricos: Os usuários interagem com o site utilizando uma variedade de periféricos, como telas sensíveis ao toque, teclados virtuais e físicos. É importante projetar a interface levando em consideração esses diferentes métodos de interação.
Conectividade: Embora muitos acessem o site por meio de dispositivos móveis, é necessário considerar que as conexões de internet podem variar. O site deve ser otimizado para carregamento rápido, especialmente em conexões mais lentas ou instáveis.
Contexto de Uso: Os usuários acessam o site para diversas finalidades, desde consultar informações sobre impostos e notícias locais até realizar cadastros e acessar documentos oficiais. É fundamental projetar a interface pensando na diversidade de usos e garantir a facilidade de acesso às informações.

Elementos de interface, interação e ação

Os elementos de interface, interação e ação podem ser observados no projeto elaborado através do site Figma, localizado abaixo:

Figura 1 - Elementos da Interface.

Fonte: Lucas Heler, 2024. Acesso: Site com o Guia de estilo

Vocabulário e Padrões

O guia de estilo estabelece diretrizes para o vocabulário e os padrões a serem seguidos neste projeto:

Terminologia

Durante este projeto, é essencial considerar a consistência na terminologia utilizada pelos usuários. Recomenda-se ao designer avaliar cuidadosamente as semelhanças e diferenças nos termos, priorizando o uso de linguagem mais comum para garantir a intuitividade do sistema. Isso contribui para uma interação mais consistente e eficaz com o usuário.

Tipos de Telas (para tarefas comuns)

Todas as telas desenvolvidas devem aderir aos padrões definidos no guia de estilo. Ao criar uma página, é importante selecionar a interface apropriada com base no conteúdo. Além disso, é crucial seguir os padrões estabelecidos para os elementos de interface, interação e ação, conforme especificado no Figma.

Sequências de Diálogos

As sequências de diálogos devem incluir feedbacks e confirmações após a finalização ou realização de uma operação. É importante fornecer ao usuário um retorno adequado sobre o status da operação e garantir que ele esteja ciente das ações realizadas. Esse feedback de realização será fornecido por meio da conclusão da operação; todas devem possuir um resultado após qualquer operação feita. No caso de feedback de erro, o usuário deve ser informado sobre o erro ocorrido na tela, por exemplo, quando o preenchimento de campos está incorreto, o feedback deve ser exibido em vermelho acima ou abaixo do campo.

Conclusão

Neste projeto, elaboramos um guia de estilo para direcionar o design e a interação em um projeto de Interação Humano-Computador (IHC). O objetivo central do guia foi abordar e corrigir os erros identificados na Avaliação Heurística do site, além de refletir os princípios gerais do projeto, com foco em aprimorar a usabilidade e a experiência do usuário.

Ao seguir o guia de estilo, os desenvolvedores, designers e demais equipes envolvidas no projeto terão o suporte necessário para criar interfaces consistentes e intuitivas, alinhadas com as expectativas e necessidades dos usuários. Além disso, o guia serve como uma referência valiosa para a manutenção contínua do projeto, garantindo que as futuras alterações estejam em conformidade com as diretrizes estabelecidas.

Referências Bibliográficas

[1] Barbosa, S. D. J.; Silva, B. S. da; Silveira, M. S.; Gasparini, I.; Darin, T.; Barbosa, G. D. J. (2021) Interação Humano-Computador e Experiência do usuário. Autopublicação.

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

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

[4] FIGMA. Disponível em: FIGMA. Acesso em: 12 de Maio de 2023.

Historico de Versões

Data	Versão	Descrição	Autor(es)	Data de revisão	Revisor(es)
11/05/2024	`1.0`	Criação do documento	Lucas Heler	12/05/2024	Pedro Lucas
12/05/2024	`1.1`	Atualização com o figma do Guia de Estilo do Site	Lucas Heler	12/05/2024	Pedro Lucas
12/05/2024	`1.2`	Reestruturação dos tópicos da página, adição de referências bibliográficas adicionais	Pedro Lucas	12/05/2024	Lucas Heler
12/05/2024	`1.3`	Adicionado Resultado da Análise	Lucas Heler	13/05/2024	Pedro Lucas
13/05/2024	`1.4`	Adicionado novamente o Resultado da Análise, Adicionado a parte de disposição e grid	Lucas Heler	13/05/2024	Lucas Meireles, Pedro Lucas, Lucas Heler, Joyce Dionizio, Cainã Freitas, Augusto Duarte