Introdução

Objetivo do guia de estilo

Neste documento buscamos registrar as principais decisões de design tomadas para o projeto a fim de que possamos consultá-las quando necessárias de forma que sejam implementadas definitivamente na entrega final. É nossa ferramenta de comunicação central dentro da equipe de forma que facilite as decisões de design e que seja reutilizado nas discussões do projeto e suas extensões.

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

O Guia de Estilo contará com os seguintes elementos analisados:

Elementos de interface
Disposição espacial e grid
Janelas
Tipografia
Símbolos não tipográficos
Cores
Animações
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
Ativação

Público-alvo do guia de estilo

O Públlico-alvo consiste na equipe de desenvolvedores do Cinemark como também seus designs e partes interessadas. Ademais pode ajudar outros alunos futuros da disciplina em entender os conceitos trabalhados na matéria Interação Humano-Computador e também para embasar decisões em seus projetos.

Como utilizar o guia

Para cumprir o objetivo deste guia é importante utilizá-lo como fonte de referência para as decisões de design e observação dos princípios e diretrizes do site. A utilização deste artefato é fundamental para orientar a equipe na jornada de construção e garantia de qualidade da interface de usuário.

Como manter o guia

A fim de manter o guia coerente e padronizado a equipe deve constantemente observar possíveis atualizações no decorrer das fases do ciclo de Mayhew. Assim, poderemos garantir a melhor 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 de análise

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

O site da Cinemark é projetado para ser acessado majoritariamente através de dispositivos modernos, como computadores (notebooks ou desktops) e dispositivos móveis (smartphones e tablets). Por isso, sua interface é responsiva, adaptando-se automaticamente a diferentes tamanhos e resoluções de tela para garantir uma experiência consistente e funcional para todos os usuários.

O design responsivo do site considera elementos importantes, como tamanhos adequados de botões, menus de navegação acessíveis e fontes legíveis, mesmo em telas menores, como as de smartphones. Além disso, as funcionalidades são otimizadas para toques (em dispositivos móveis) e cliques (em desktops). Essa abordagem visa melhorar a acessibilidade e usabilidade em diferentes contextos de uso

Apesar de bem adaptado, como é um site robusto com funcionalidades diversas, sua performance pode variar dependendo do dispositivo. Telas grandes, como as de desktops e notebooks, oferecem uma experiência visual mais completa, enquanto dispositivos móveis dependem de simplificações no layout para manter a navegabilidade. A responsividade bem executada permite ao site atender usuários em diferentes situações, desde a consulta rápida de horários no celular até a compra detalhada de ingressos no computador

Entretanto, para maximizar a responsividade e garantir acessibilidade em todos os dispositivos, o site poderia ser revisado regularmente com base nas últimas práticas de design adaptativo e nas tendências de acessibilidade web. Essa melhoria garantiria que a experiência do usuário continue relevante e eficiente frente às constantes inovações tecnológicas.

Elementos de interface

Figura 1 - Elementos da Interface.

Fonte: Pedro Miguel, 2024.

Elementos de Interação

O site da Cinemark oferece uma experiência rica em elementos de interação e ação, tanto para a navegação quanto para a compra de ingressos e uso de serviços adicionais.

Estilos de interação:

O site utiliza menus de navegação, botões e caixas de pesquisa que são intuitivos e responsivos. Por exemplo, o menu principal permite acessar a programação de filmes, promoções e serviços como o Cinemark Club.

Seleção de um estilo:

A interface prioriza uma navegação direta, com design claro e elementos visuais minimalistas, o que facilita a localização de informações rapidamente, como horários de sessões ou compra de ingressos.

Aceleradores (teclas de atalho):

Apesar de não estarem explicitamente indicados, o site é compatível com atalhos de teclado comuns para navegação web, como "Tab" para alternar entre campos e "Enter" para confirmar ações.

Elementos de Ação

Preenchimento de campos:

Durante a compra de ingressos, os formulários são otimizados para entrada rápida de dados. Campos como seleção de assentos e inserção de informações pessoais são bem organizados e visualmente claros.

Seleção:

A seleção de filmes e horários é feita por meio de botões com labels claras, como "Comprar Ingresso". Para opções adicionais, como escolher uma sala XD ou poltronas D-BOX, o processo é dinâmico e visualmente destacado.

Ativação:

O site permite ativar ações rapidamente, como finalizar compras ou inscrever-se no Cinemark Club, com feedback visual imediato, como mudanças de cor ou mensagens de confirmação.

Vocabulário e Terminologia

Terminologia:

O site utiliza um vocabulário acessível e familiar ao público geral, como "Ingressos", "Horários", "Salas 3D", "XD", e "Snack Bar". Termos específicos, como "D-BOX" ou "Cinemark Club", são acompanhados de descrições breves para ajudar o usuário a entender suas funções.

Consistência:

As palavras-chave são consistentes em toda a navegação, garantindo que o usuário reconheça facilmente seções ou ações, como "Comprar Ingresso" e "Assine Agora".

Tipos de Tela para Tarefas Comuns

Compra de Ingressos: O fluxo de compra é baseado em uma série de telas consecutivas: seleção de filme, escolha do horário, seleção de assentos, e finalização de pagamento. Cada tela apresenta informações claras e botões de ação bem destacados.
Consulta de Programação: O layout apresenta uma grade de filmes com horários, permitindo ao usuário filtrar por localização, idioma ou formato (e.g., legendado, 3D).
Inscrição em Programas: Telas dedicadas ao Cinemark Club incluem explicações dos benefícios e um formulário direto para cadastro

Sequências de Diálogos

Feedbacks Imediatos: Quando o usuário realiza uma ação, como selecionar assentos ou confirmar um pagamento, há feedback visual instantâneo, como alterações de cor ou mensagens de confirmação no topo da tela (e.g., "Compra realizada com sucesso").
Confirmação de Operação: Antes de finalizar ações críticas, como pagamento, o site apresenta um resumo da transação, incluindo o filme, horário e valor, seguido de um botão de confirmação. Isso reduz erros e aumenta a confiança do usuário.
Mensagens de Erro: Em casos de falhas, como cartões inválidos, o site fornece mensagens de erro simples e orientativas, que guiam o usuário para corrigir o problema sem frustração.

Referências

CINEMARK BRASIL. Site oficial Cinemark Brasil. Disponível em: https://www.cinemark.com.br. Acesso em: 3 dez. 2024. SAC CINEMARK BRASIL. Central de Atendimento Cinemark. Disponível em: https://sac.cinemark.com.br/hc/pt-br. Acesso em: 3 dez. 2024.

Histórico de versões

Versão	Descrição	Autor(es)	Data	Revisor(es)	Data de revisão
1.0	Criação da página	Ana Joyce	02/12/2024	Anne de Capdeville	02/12/2024
2.0	Adição da estrutura do Guia de Estilo	Pedro Miguel	03/12/2024	Ana Joyce	03/12/2024