Guia de Estilo

Introdução

Segundo Barbosa et al (2021)¹, o guia de estilo é um documento que registra as decisões de design importantes em projetos, garantindo consistência. Ele fornece diretrizes para elementos como layout, tipografia, cores e interação. O guia é uma ferramenta de comunicação entre equipes de design e desenvolvimento, e pode ser usado em diferentes níveis, como plataforma ou produto. É essencial para manter a coerência no design, mas não é um conjunto rígido de regras, mas sim um apoio flexível ao processo criativo.

Objetivo

O objetivo do guia de estilo é manter a consistência e a qualidade do design em um projeto, registrando e comunicando as principais decisões de design para garantir que sejam aplicadas de maneira consistente no produto final. Logo, serve como uma ferramenta de comunicação entre os membros da equipe de design e com a equipe de desenvolvimento na construção do produto final.

Organização e conteúdo

O guia de estilo será organizado com tópicos contendo os seguintes contéudos:

Resultados de análise: Descrição do ambiente de trabalho do usuário.
Elementos de interface: Disposição espacial, janelas, tipografia e cores.
Elementos de interação: Estilos de interação, seleção de um estilo e aceleradores.
Elementos de ação: Preenchimento dos campos, seleção e ativação
Vocabulários e padrões: Terminologia, tipos de tela, sequências de diálogos.

Público alvo

Este guia de estilo foi criado para servir como uma referência útil tanto para os estudantes que estão estudando a disciplina de Interação Humano-Computador quanto para a equipe de design e desenvolvedores da Plataforma Lattes que desejam utilizá-lo.

Como utilizar o guia

Este guia de estilo é uma fonte de orientação que pode ser usada ao longo de todo o projeto de Interação Humano-Computador, abrangendo desde a criação até a manutenção. As diretrizes e boas práticas oferecidas no guia são úteis para ajudar na tomada de decisões de design, assegurando que a interface do usuário atenda às necessidades dos usuários e promova uma interação eficaz e satisfatória com o sistema, ao longo de todo o ciclo de vida do projeto.

Como manter o guia

Para fins de manutenção e com a necessidade de correção ou alteração no guia de estilo, é essencial que ele seja atualizado de forma a permanecer em conformidade com as decisões tomadas no projeto de Interação Humano-Computador. É importante incluir a data de atualização no guia de estilo para manter um registro claro das mudanças. Dessa forma, o guia de estilo permanece como a fonte primária de estilização da aplicação, garantindo a consistência visual e de interação em todo o sistema, o que é fundamental para proporcionar a melhor experiência do usuário e evitar problemas de usabilidade e acessibilidade.

Resultados de análise

Descrição do ambiente de trabalho do usuário

A Plataforma Lattes fornece acesso através de computadores e dispositivos móveis (como tablets e celulares), sendo o uso ideal por meio dos computadores, isto é, desktops ou notebooks. Assim, é de extrema importância levar em consideração as características específicas desses dispositivos durante o processo de design e desenvolvimento da interface do sistema, de modo a assegurar que ela proporcione uma experiência satisfatória e eficaz para aqueles que a acessam por meio deles. Isso requer ajustar a interface para se adequar a diferentes tamanhos de tela, escolher elementos visuais apropriados e incorporar funcionalidades que sejam intuitivas e de fácil acesso para os usuários.

Elementos de interface

Na figura abaixo são apresentadas: as dimensões espaciais e os grids, as janelas, a tipografia e as cores presentes na Plataforma Lattes.

Figura 1 - Elementos da Interface.

Fonte: Caio Braga e Doan Filho, 2023

Elementos de interação

Estilos de interação

As interações do usuário com o sistema são divididas em três partes: - Curriculo: cadastro, atualização e busca - Pesquisa: busca, deposito - Instituição: busca, atualização e cadastro

sendo essa interação feita através de caixas de textos, botões, hiperlinks e textos.

Seleção de um estilo

Considerando uma escolha de estilo voltada para cada tipo de elemento da interface, a seleção pode ser feita visando o contexto e uso de cada item selecionado, com o foco para cadastramento e busca por curriculos, pesquisas e instituições

Aceleradores(Teclas de atalho)

Não foram encontradas aceleradores na plataforma

Elementos de ação

Os elementos e ações que o usuário pode executar de acordo com sua necessidade

Preenchimento dos campos

O usuário pode preencher os campos de cadastro, busca e atualização de acordo com as diretrizes estabelecidas, sendo inseridas manualmente em caixas de textos e barras de pesquisa.

Seleção

Na parte de seleção temos alguns aspectos a serem selecionados como currículo, pesquisa e instituição, ajustar fonte, selecionar twitter, selecionar rss e selecionar contraste. Levando, assim, o usuário a uma parte especifica de acordo com sua necessidade,

Ativação

Aqui temos o uso de botões ícones e principalmente hiperkinks sendo eles como:

Buscar currículo
Atualizar currículo
Cadastrar currículo
Buscar instituição
Atualizar instituição
Cadastrar instituição
Acessar o portal do dirétorio
Acessar painel lattes
Buscar dados de pesquisa
Despositar dados de pesquisa

Vocabulário e padrões

Terminologia

A plataforma usa alguns termos associados ao meio acadêmico, porém a linguagem é majoritariamente de comum entendimento para o público geral.

Tipos de tela

As telas mudam bastante de acordo com o uso do site, diferenciando-se de acordo com a ferramenta usada, podendo trazer uma interface diferenciada.

Sequências de diálogos

As sequências de diálogos não se diferenciam muito entre as telas, seguindo um padrão de instrução para o usuário.

Proposta de intervenção

A proposta de intervenção foram desenvolvidas de acordo com os Principios e Metas de usabilidade propostas pelo grupo, e pensada para ser usada como uma ferramenta para auxiliar nas melhorias requeridas para a Plataforma Lattes

Metas de usabilidade

Com embasamento nas metas de usabilidade elicitados pelo grupo como : Eficácia, Eficiência, Segurança, Utilidade, Aprendizado e Memorização trouxemos alguns pontos que podem ser melhorados, dentre eles:

Clareza nos componentes. -> Aprendizado.
Responsividade em dispositivos com menor resolução -> Utilidade.
Interface padronizadas -> Eficiência.

Princípios Gerais

Usando a relação com os princípios gerais elicitados pelo grupo, podemos considerar alguns aspectos para o auxílio das melhorias como:

Correspondência com as expectativas do usuário -> Trazendo uma interface padronizada podemos obter a satisfação do cliente ao usar a plataforma, atendendo as expectativas do usuário-alvo da plataforma.
Consistência e Padronização -> Fazendo a padronização da interface traremos consistência e padrão entre as telas.
Promoção da Eficiência do Usuário -> Com a interface padronizada podemos trazer uma melhor experiência do usuário e consequentemente aumenta a eficiência do usuário em relação ao uso da plataforma.

Proposta no figma

Criamos um quadro no figma para demonstrar de forma mais detalhada a nossa proposta de intervenção como citado na figura abaixo, fizemos essa proposta com o objetivo de melhorar a experiência e interação com a Plataforma Lattes, trazendo as as diretrizes vistas na disciplina como Principios e Metas de usabilidade.

Figura 2 - Proposta de Intervenção.

Fonte: Caio Braga e Doan Filho, 2023

Bibliografia

1. BARBOSA, Simone Diniz Junqueira et al. Interação humano-computador e experiência do usuário. 1. ed. Rio de Janeiro: Simone Diniz Junqueira Barbosa, 2021.

Histórico de versão

Versão	Descrição	Autor	Data	Revisor	Data de revisão
1.0	Criando guia de estilo	Doan Filho	23/10/2023	Caio Braga	23/10/23
1.1	Adicionando as figuras do Figma	Caio Braga	23/10/2023	Doan Filho	23/10/23
1.2	Refatoração da interface	Caio Braga	28/10/2023	Doan Filho	29/10/2023