Guia de Estilo

Introdução

O Guia de Estilo é um documento criado com intuito de reunir os princípios e as diretrizes adotadas no projeto. Assim, registrando as principais decisões de design tomadas, com objetivo que elas não se percam e sejam de fácil acesso para serem efetivamente implementadas no produto final e reutilizadas durante as etapas de extensão do produto. Diante disso, esse documento pode servir como uma forma de comunicação da equipe de design com a equipe de desenvolvimento, nesse caso esses conceitos serão aplicados ao sítio eletrônico Lichess baseando-se nas Metas de Usabilidade de acordo com o ciclo de vida para engenharia de usabilidade de Mayhew [1].

Objetivo do guia de estilo

O objetivo desse documento é compreender o design proposto para o projeto do sítio eletrônico Lichess, analisando elementos como:

Elementos de interface (Design de telas, visualização de informações, disposição espacial e grid (layout), elementos de interface (widgets), janelas, tipografia, símbolos, logo e cores)
Elementos de interação (estilos de interação, seleção de um estilo e aceleradores (teclas de atalho))
Elementos de ação (preenchimento de campos, seleção e ativação) Com intuito de documentá-los e com esse entendimento propor melhorias para alguns elementos e no futuro dar prosseguimento ao projeto nas etapas de design, avaliação e desenvolvimento.

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

O guia de estilo irá abordar os aspectos supracitados acima referentes ao sítio eletrônico Lichess.

Público-alvo do guia de estilos

O público alvo deste guia de estilo são os alunos da disciplina de Interação Humano Computador, grupo responsável pela análise da plataforma Lichess no escopo da matéria, que por meio deste poderá realizar as outras etapas do projeto.

Como utilizar o guia

O guia pode ser consultado para decisões de design relacionadas ao projeto, sejam elas de produção ou manutenção, nesse caso especificamente para o projeto da disciplina Interação Humano Computador.

Como manter o guia

Sempre que a equipe de design tomar uma decisão que modificará o projeto é importante que o guia de estilo seja atualizado para que o projeto continue padronizado.

Resultados de análise

Os usuários utilizam geralmente o sítio eletrônico Lichess através de computadores, sejam esses de mesa ou notebooks.

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 sítio eletrônico Figma, localizado abaixo:

Vocabulário e padrões

Terminologia: As terminologias utilizadas durante a elaboração do protótipo de baixa e alta fidelidade devem familiares aos usuários evitando termos muito técnicos, caso esses sejam empregados devem vir acompanhados de explicações pontuais, para que usuários iniciantes também consigam utilizar a aplicação de forma intuitiva.
Tipos de tela (para tarefas comuns): As telas devem seguir os padrões especificados nos Elementos de interface de disposição espacial e grid.
Sequências de diálogos: As sequências de diálogos devem ser padronizadas, seguindo o padrão especificado nos elementos de interação de forma que os botões de confirmação e cancelamento se localizem de forma semelhante em todas as sequências de diálogos.

Bibliografia

[1] BARBOSA, Simone; DINIZ, Bruno. Interação Humano-Computador. Editora Elsevier, Rio de Janeiro, 2010.

Histórico de Versão

Versão	Data	Descrição	Autor(es)	Revisor(es)
`1.0`	11/12/2022	Criação do documento	Lucas Macedo e Lucas Gabriel	Nicolas Souza
`2.0`	31/01/2022	Adições de seções faltantes no documento do guia de estilo e Figma	Lucas Macedo e Lucas Gabriel	Nicolas Souza