Guia de Estilo

Introdução

Segundo a análise de Barbosa e Silva (2011, p.282) [1], o guia de estilo é definido como um registro das principais decisões de design, cujo propósito é preservá-las integralmente na versão final do produto. Além disso, esse guia desempenha um papel essencial como ferramenta de comunicação entre os membros da equipe e outras partes interessadas. Portanto, é de extrema importância que essas decisões possam ser facilmente consultadas e discutidas, tanto para planejamento futuro quanto para atualizações.

Com o intuito de alcançar esses objetivos, é preciso contar com um guia de estilo que oriente a criação de interfaces que satisfaçam plenamente as necessidades e expectativas dos usuários, enquanto garantem a consistência visual e de interação em todo o sistema. Durante a elaboração deste documento, foram consideradas as Metas de Usabilidade e os Princípios Gerais, ambos documentos que destacam áreas onde o site pode ser aprimorado por meio das diretrizes apresentadas neste guia de estilo.

Objetivo do Guia de Estilo

O Objetivo do Guia de Estilo é fornecer diretrizes e recomendações claras para orientar o processo de design e desenvolvimento de interfaces de usuário de forma a garantir que atendam às necessidades e expectativas dos usuários finais. Este guia tem como propósito principal preservar as decisões de design ao longo do ciclo de vida do projeto, proporcionando uma base sólida para a consistência visual e de interação em todo o sistema. Além disso, o Guia de Estilo serve como uma ferramenta de comunicação essencial para a equipe de projeto e outras partes interessadas, facilitando a consulta e discussão das decisões de design para futuras projeções e atualizações do sistema.

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

O Guia de Estilo para o site do "Nota Legal" será feito de acordo com os elementos analisados, e com o seu Objetivo, citado anteriormente.

Público-alvo do Guia de Estilo

Este guia de estilo foi meticulosamente desenvolvido para atender às necessidades tanto dos estudantes matriculados na disciplina de Interação Humano-Computador quanto da equipe de design e desenvolvedores do Nota Legal, caso demonstrem interesse no artefato em algum momento. Através deste guia, os envolvidos terão à disposição uma base sólida para a tomada de decisões de design embasadas em diretrizes e melhores práticas, conforme mencionadas nas Metas de Usabilidade e nos Princípios Gerais.

Como utilizar o Guia

Este guia de estilo tem como objetivo servir como um ponto de referência essencial para orientardecisões de design ao longo de todo o ciclo de vida do projeto de Interação Humano-Computador, abrangendo tanto a fase de produção quanto a fase de manutenção. As diretrizes e melhores práticas contidas neste guia são de suma importância para direcionar as decisões de design, garantindo que ainterface do usuário resultante seja ajustada às necessidades dos usuários finais. Assim, busca-se promover uma interação eficaz e satisfatória com o sistema.

Como Manter o Guia

É importante que o Guia de Estilo esteja sempre atualizado, de acordo com as decisões tomadas pela equipe de design, que modificarão o projeto. Essa constância garante a padronização no projeto, assegurando que todas as alterações estejam alinhadas com os princípios estabelecidos. Manter o Guia de Estilo atualizado não apenas preserva a coesão visual e funcional, mas também assegura uma experiência de usuário consistente e de alta qualidade em todas as interações, fortalecendo assim a identidade do projeto e a confiança dos usuários.

Resultados da Análise

Descrição do Ambiente de Trabalho do Usuário

O site Nota Legal é acessado tanto por computadores (desktops ou notebooks) quanto por smartphones. Portanto, é crucial garantir que a interface seja adaptada para diferentes tamanhos de tela e que as funcionalidades sejam fáceis de usar em ambos os tipos de dispositivos. Veja os detalhes na figura 1.

Figura 1:
Página Home Fonte: Lucas Victor, 2023

## Elementos de Interface, Interação e Ação Os elementos de interface, interação e ação estão disponíveis no projeto, o qual pode ser acessado através do site Figma, conforme a figura 2 abaixo:

Figura 2:
Figma do Guia de Estilo Fonte: Lucas Ribeiro e Lucas Victor, 2023

Vocabulários e padrões

Terminologia

Durante a criação dos protótipos, é fundamental utilizar uma linguagem simples e compreensível para os usuários, evitando o uso de termos técnicos. Se for necessário utilizar termos técnicos, eles devem ser explicados de maneira clara para que até mesmo os usuários iniciantes possam entender e usar a aplicação facilmente.

Em relação às telas comuns, elas devem seguir os padrões de layout especificados nos Elementos de Interface, garantindo que as informações sejam apresentadas de forma consistente.

No que diz respeito às caixas de diálogo, elas devem seguir um padrão definido, com os botões de confirmação e cancelamento posicionados de maneira uniforme em todas as caixas de diálogo, para proporcionar uma experiência de usuário consistente e intuitiva em toda a aplicação.

Referências Bibliográficas

[1] BARBOSA, S. D. J.; SILVA, B. S. Interação Humano-Computador. Rio de Janeiro: Elsevier, 2011.

Bibliográfia

Repositório do Grupo 2 do desenvolvimento do projeto Lichess, disponível em: https://github.com/Interacao-Humano-Computador/2022.2-Lichess

Repositório do Grupo 1 do desenvolvimento do projeto Bilheteria Digital, disponível em: https://github.com/Interacao-Humano-Computador/2023.1-BilheteriaDigital

Histórico de Versões

Versão	Data	Descrição	Autor(es)	Revisor(es)
1.0	20/10/2023	Criação da página guia de estilo.	Lucas Victor	Izabella Alves
1.1	20/10/2023	Adição introdução, objetivos, público-alvo, como utilizar, como manter.	Lucas Victor Lucas Ribeiro	Izabella Alves
1.2	20/10/2023	Adição do figma.	Lucas Victor	Izabella Alves
1.3	20/10/2023	Adição do Descrição do Ambiente de Trabalho do Usuário	Lucas Victor	Izabella Alves
1.4	20/10/2023	Adição da Termologia	Lucas Victor	Izabella Alves
1.5	20/10/2023	Adição da link do figma	Lucas Victor Lucas Ribeiro	Izabella Alves