Guia de Estilo

Introdução

Barbosa e Silva (2011, p.282)^1^ descrevem o guia de estilo como um documento essencial que registra as decisões de design significativas para assegurar que estas sejam preservadas e efetivamente implementadas no produto final. Serve também como uma ferramenta de comunicação chave para os stakeholders e membros da equipe, permitindo que as decisões sejam facilmente acessadas e discutidas, o que é crucial para futuras modificações ou atualizações.

A criação de um guia de estilo eficaz é vital para direcionar o desenvolvimento de interfaces que satisfaçam as necessidades e expectativas dos usuários, mantendo a consistência visual e de interação em toda a plataforma. Durante a elaboração deste guia, foram utilizados os recursos das Metas de Usabilidade e dos Princípios Gerais, que abordam como melhorar o site por meio do guia de estilo.

Objetivo do Guia de Estilo

Este guia de estilo é projetado para fornecer diretrizes e práticas recomendadas para a concepção e o desenvolvimento de interfaces de usuário que sejam eficazes e fáceis de usar em Interacção Humano-Computador (IHC). Neste guia, exploraremos os seguintes aspectos:

Elementos de Interface

Disposição espacial e grid: Organização do espaço na tela para facilitar a interação.
Janelas: Uso e gestão de janelas dentro da interface.
Tipografia: Escolha de fontes e estilos de texto para melhorar a legibilidade.
Cores: Seleção e combinação de cores para aumentar a clareza e a estética.
Símbolos: Uso de ícones e símbolos para comunicação rápida e eficaz.
Widgets: Implementação de elementos interativos como botões e caixas de seleção.
Logo e design de telas: Incorporação de identidade visual e layout das telas.

Elementos de Interação

Estilos de interação: Diferentes métodos para permitir a interação dos usuários com o sistema.
Seleção de um estilo: Critérios para escolher o estilo de interação mais adequado.
Aceleradores (teclas de atalho): Implementação de atalhos de teclado para acelerar a interação.

Elementos de Ação

Preenchimento de campos: Estratégias para a entrada de dados pelos usuários.
Seleção e ativação: Métodos para selecionar e ativar comandos ou opções dentro da interface.

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

O guia está organizado em seções que cobrem os principais elementos de interface e considerações de design, incluindo layout, tipografia, cores, simbolismo, visualização de informação, elementos de interação e ação, e vocabulário e padrões.

Público-alvo

Desenvolvido para atender às necessidades dos alunos da disciplina de Interação Humano-Computador e dos profissionais de design e desenvolvimento do Bilheteria Digital, este guia de estilo oferece um conjunto de diretrizes e melhores práticas. Detalhadas nas Metas de Usabilidade e nos Princípios Gerais, essas orientações são essenciais para que todos os atores envolvidos possam fazer escolhas de design bem fundamentadas.

Como utilizar o Guia

O guia deve ser utilizado durante a produção e manutenção do site. Ele deve ser consultado sempre que houver dúvidas sobre decisões de design ou quando novas funcionalidades forem implementadas.

Como mantê-lo

Preservar a consistência visual e funcional em todo o sistema do Central Expresso é essencial, exigindo atualizações regulares no manual de estilo sempre que ocorrerem mudanças no projeto de Interação Humano-Computador por parte de alunos, designers e desenvolvedores. Tal prática assegura a adequação de todas as modificações às normas definidas no guia, o que aprimora substancialmente a experiência do usuário e reduz possíveis dificuldades de usabilidade e acessibilidade.

Resultados da Análise

O ambiente de trabalho dos usuários do site Central Expresso é predominantemente digital, acessando o site por meio de desktops, laptops, tablets e smartphones. Os usuários buscam informações sobre serviços de transporte, horários, tarifas, e reservas de passagens.

Elementos de Interface

Os elementos de interface são apresentados na figura 1.

Figura 1 - Figma

Fonte: Alana Gabriele e Marco Túlio.

Central Expresso (Figuras)

Nas figuras 2, 3, 4, 5, 6, 7, 8 e 9 estão os elementos de interface

Figura 2 - Cores

Fonte: Gustavo Alves

Figura 3 - Ícones

Fonte: Gustavo Alves

Figura 4 - Logo

Fonte: Gustavo Alves

Figura 5 - Tipografia

Fonte: Gustavo Alves

Figura 6 - Grid do Sistema

Fonte: Gustavo Alves

Figura 7 - Tela 1

Fonte: Gustavo Alves

Figura 8 - Tela 2

Fonte: Gustavo Alves

Figura 9 - Tela 3

Fonte: Gustavo Alves

Elementos de Interação

Estilos de interação:

Navegação: menu de navegação no topo da página, ícone de carrinho de compras, botões para selecionar o período da vizualização dos horários, voltar para página anterior, esvaziar o carrinho e avançar.

Seleção de um estilo:

Hiperlinks: Links em texto sublinhado, mudando de cor ao passar o mouse (hover).

Aceleradores (teclas de atalho):

Não foram encontradas teclas de atalho.

Elementos de ação

Preenchimento de campos:

Campo de texto para informar a quantidade de passagens que deseja adicionar no carrinho;
Dados do cliente e endereço de entrega para a compra da passagem.

Seleção:

Seleção do menu;
Item "Horários" do menu apresenta 3 opções (Semanal, Sábado e Domingo) para escolha.

Ativação:

Apresenta botões, ícones e links. No site encontramos elementos como ícone de compra, hyperlinks, botão de voltar e esvaziar carrinho.

Vocabulário e padrões

Terminologia:

Utiliza terminologia consistente em todo o site e comuns para fácil entendimento.

Tipos de tela:

Apesar das telas não serem minimalista, elas seguem o mesmo padrão.

Sequências de diálogos:

Mensagens de confirmação em pop-ups, com botões de ação claros ("Sim", "Não"), utilizado para ação de evaziar o carrinho, botão de avançar indicando a sequência do formulário de comprar de passagens.

Bibliografia

BARBOSA, S. D. J.; SILVA, B. S. Interação Humano-Computador. Rio de Janeiro: Elsevier, 2011.
Interação Humano-Computador. (2023). Público-Alvo do Guia de Estilo. Recuperado de https://interacao-humano-computador.github.io/2023.1-BilheteriaDigital/analise-de-requisitos/guia-de-estilo/#publico-alvo-do-guia-de-estilo

Histórico de Versões

Versão	Data	Descrição	Autor(es)	Revisor(es)
1.0	13/05/2024	Guia de Estilo	Alana Gabriele Marco Túlio	Renan Araújo
1.1	08/07/2024	Figuras	Gustavo Alves	Renan Araújo