Guia de Estilo
Introdução
Para Barbosa e Silva (2011, p.282)1 o guia de estilo "Trata-se de um registro das principais decisões de design tomadas, de forma que elas não se percam, isto é, sejam efetivamente incorporadas no produto final". O mesmo serve de ferramenta comunicativa para os stakeholders da equipe. O que torna de suma importância que as decisões possam ser consultadas com facilidade e possam ser discutidas para projeções futuras ou apenas atualizações.
Para alcançar esses objetivos, é essencial ter um guia de estilo que oriente a criação de interfaces que atendam às necessidades e expectativas dos usuários, além de garantir a consistência visual e de interação em todo o sistema. Na produção do artefato, foram utilizados as Metas de Usabilidade e os Princípios Gerais, ambos documentos tratam de como o site tem ressalvas que podem ser melhoradas através do guia de estilo.
Objetivo do Guia de Estilo
Este guia de estilo tem como objetivo fornecer diretrizes e melhores práticas para o design e desenvolvimento de interfaces de usuário eficazes e usáveis na disciplina de IHC. Nele iremos analisar os elementos que são:
- Elementos de interface: disposição espacial e grid, janelas, tipografia, cores, símbolos, widgets, logo e design de telas;
- Elementos de interação: estilos de interação, seleção de um estilo, aceleradores (teclas de atalho);
- Elementos de ação: preenchimento de campos, seleção e ativação.
Organização e Conteúdo do Guia de Estilo
O guia de estilo do Bilheteria Digital será feito a partir dos elementos analisados que foram citados no parágrafo anterior.
Público-alvo do Guia de Estilo
Este guia de estilo foi elaborado para atender às necessidades tanto dos alunos que estão cursando a discilina de Interação Humano Computador, quanto da equipe de design e desenvolvedores do Bilheteria Digital que possam ter interesse pelo artefato. A partir dele os atores poderão tomar decisões de design embasadas em diretrizes e melhores práticas que foram citadas em Metas de Usabilidade e os Princípios Gerais.
Como utilizar o Guia
Este guia de estilo pode ser utilizado como uma referência para tomar decisões de design durante todo o ciclo de vida do projeto de Interação Humano Computador, incluindo tanto a fase de produção quanto a fase de manutenção. As diretrizes e melhores práticas fornecidas neste guia são relevantes para orientar a tomada de decisões de design e garantir que a interface de usuário resultante atenda às necessidades dos usuários finais, promovendo assim uma interação eficaz e satisfatória com o sistema.
Como manter o Guia
É essencial atualizar o guia de estilo sempre que a equipe (de aluno e/ou deseigns e desenvolvedors do Bilheteria Digital) tomar uma decisão que modifique o projeto de Interação Humano Computador, para garantir que todas as alterações realizadas estejam em conformidade com as diretrizes e padrões definidos no guia. Dessa forma, é possível manter a consistência visual e de interação em todo o sistema, garantindo a melhor experiência do usuário e evitando possíveis problemas de usabilidade e acessibilidade.
Resultados da Análise
Descrição do Ambiente de Trabalho do Usuário
A plataforma Bilheteria Digital é predominantemente acessada por usuários por meio de computadores, sejam eles desktops ou notebooks. Portanto, é fundamental considerar as especificidades desses dispositivos ao projetar e desenvolver a interface do sistema, garantindo que ela ofereça uma experiência de usuário satisfatória e eficaz para aqueles que acessam a plataforma por meio desses meios. Isso envolve a adaptação da interface para diferentes tamanhos de tela, a escolha de elementos visuais apropriados e a implementação de funcionalidades intuitivas e de fácil acesso para os usuários. Por fim, os elementos de interface estão explicitados na figura 1.
Elementos de Interface
Os elementos sobre disposição espacial e grid, janelas, tipografia, símbolos não tipográficos, cores e animações são apresentados na figura 1.
Figura 1 - Elementos da Interface.
Elementos de Interação
Estilo de Interação
Os usuários podem interagir com o site na seleção de eventos, seleção de assentos, finalização da compra, confirmação de compra e cancelamento de compra. Os quais são feitos através de botões e/ou hiperlinks.
Seleção de Estilos
A escolha do estilo do Bilheteria Digital tem a interface simples e focada nos objetivos de encontrar um evento e comprar seu ingresso, tanto que suas páginas não destoam muito umas das outras, com botões semelhantes.
Aceleradores (Teclas de Atalho)
No site não foram encontradas teclas de atalho.
Elementos de Ação
Preenchimento de Campos
Os campos de preenchimento disponíveis na interface do sistema exigem que o usuário insira informações manualmente, de acordo com suas necessidades e objetivos. Esses campos podem incluir a barra de pesquisa e a caixa de texto dentro do perfil, que são exemplos de campos que exigem entrada de texto.
Seleção
Há alguns elementos de seleção como por exemplo seleção de eventos, seleção de quantidade de ingressos, seleção do menu, idioma de preferência.
Ativação
Incluem botões, ícones, links e outros elementos clicáveis. No site encontramos elementos como botões de compra, hyperlinks e pagamento.
Vocabulários e padrões
Terminologia
O site utiliza termos ligados a eventos e com o vocabulário comum para o entendimento dos usuários que utilizam o site. As terminologias são usadas na página inicial, na descrição dos eventos, página de compra e no "meu painel" do usuário.
Tipos de Tela
As telas seguem um padrão simples e minimalista, elas não destoam muito uma das outras, seguindo a mesma identidade visual.
Sequência de Diálogos
As sequências seguem um padrão, os botões de confirmação e cancelamento são semelhantes em páginas diferentes.
Propostas de Intervenção
As propostas de intervenção foram desenvolvidas com base nas Metas de Usabilidade e nos Princípios Gerais definidos para o projeto da Bilheteria Digital. Essas diretrizes foram utilizadas como referência para identificar áreas de melhoria e sugerir mudanças que visam aprimorar a usabilidade e a experiência do usuário.
Metas de Usabilidade
Com base nas metas priorizadas (eficiência, segurança e utilidade) foram levantados pontos específicos que podem ser aprimorados no sistema. Para a meta de utilidade, foi proposto o botão de filtro em que o usuário verá eventos do próprio estado com mais facilidade de acordo com data, localidade, público alvo e preço. Para a meta de segurança, será pedida para o usuário confirmar ações consideradas críticas, como cancelar um pedido. Para a meta de eficiência, serão introduzidos elementos que auxiliem os usuários a realizarem as suas tarefas como a quantidade de ingressos restantes.
Princípios Gerais
Em relação aos princípios, que envolvem consistência, feedback, prevenção de erros, flexibilidade e simplicidade, foram consideradas mudanças que promovam a conformidade com esses princípios. Por exemplo, a consistência foi melhorada ao padronizar elementos visuais e interações em todo o sistema, tornando mais fácil para o usuário entender e navegar pelas diferentes partes da aplicação.
Outros aspecto importante são o equilíbrio entre o controle e liberdade do usuário e a correspondência com as expectativas do usuário. No primeiro tópico, pode-se observar no site em que o único filtro aplicável é de estado, não podendo filtrar por categoria, data e local. No segundo, foi identificado que o botão que sinaliza um localizador não é funcional pois ele é só uma imagem, ou seja, se o usuário pensar em mudar a localização através dele, ele cometerá um erro, o que quebra a expectativa do usuário.
Proposta no figma
Para apresentar as propostas de intervenção de forma mais detalhada, foi elaborado um quadro no Figma. O quadro no Figma fornecere uma representação visual das mudanças propostas, incluindo alterações na interface, fluxos de navegação revisados e outras melhorias que contribuam para a usabilidade e a experiência do usuário.
Essas intervenções têm como objetivo principal aprimorar a interação entre o usuário e o sistema da Bilheteria Digital, tornando-o mais fácil de usar, intuitivo e satisfatório ao considerar as Metas de Usabilidade e os Princípios Gerais.
Figura 2 - Proposta de intervenção.
Referências Bibliográficas
1. BARBOSA, S. D. J.; SILVA, B. S. Interação Humano-Computador. Rio de Janeiro: Elsevier, 2011.
Histórico de Versões
| Versão | Data | Descrição | Autor(es) | Revisor(es) |
|---|---|---|---|---|
1.0 |
13/05/2023 | Criação da página guia de estilo. | Geovanna Maciel | Douglas Alves |
1.1 |
13/05/2023 | Adição dos tópicos. | Geovanna Maciel Douglas Alves | Matheus Henrique e Rafael Ferreira |
1.2 |
27/05/2023 | Correções após apresentação | Geovanna Maciel Douglas Alves | Arthur de Melo |
1.2.1 |
08/06/2023 | Adição proposta de intervenção atualizada figma | Douglas Alves | Geovanna Maciel |
1.2.2 |
10/06/2023 | Dividindo a proposta de intervenção em tópicos. | Geovanna Maciel | Douglas Alves |
2.0 |
01/07/2023 | Correção do documento a partir da verificação. | Matheus Henrique | Douglas Alves |