Análise de Interface de Usuário
Introdução
A análise de interface de usuário (UI) é uma técnica de elicitação de requisitos que visa entender as interações dos usuários com a interface de um sistema. Essa técnica se concentra em avaliar os elementos visuais, fluxos de navegação e comportamentos esperados para garantir que o sistema ofereça uma experiência intuitiva e eficiente. A análise de UI permite identificar requisitos funcionais e não funcionais que melhoram a usabilidade, acessibilidade e a satisfação geral do usuário.
Durante o processo de análise, o engenheiro de requisitos observa a interface e as interações com ela, levando em consideração aspectos como layout, design visual, consistência, feedback ao usuário, entre outros. O objetivo é identificar pontos de melhoria na interface, compreender as expectativas dos usuários e garantir que os requisitos de usabilidade sejam atendidos.
Metodologia
A análise de interface de usuário foi realizada de forma colaborativa, com os participantes avaliando diferentes telas do aplicativo Cinemark. Para cada tela, foram observados elementos como a disposição dos botões, navegação, feedback visual e interação do usuário com as funcionalidades disponíveis. Os participantes também avaliaram a consistência do design, a facilidade de uso e a acessibilidade do sistema.
A análise foi conduzida de forma qualitativa, sem a utilização de protótipos ou testes com usuários reais. O foco foi identificar pontos de melhoria na interface que poderiam otimizar a experiência do usuário e atender melhor às suas necessidades e expectativas.
Cronograma
A tabela 1 apresenta o cronograma da elicitação e as funções dos membros responsáveis pela técnica.
Tabela 1: Cronograma da Análise de Interface de Usuário.
| Nome | Data | Função |
|---|---|---|
| Arthur Evangelista de Oliveira | 03/05/2025 | Analista de requisitos |
| Euller Júlio da Silva | 03/05/2025 | Analista de requisitos |
Fonte: Davi Camilo, 2025.
Demonstração Visual
A seguir, apresentamos um vídeo demonstrando as principais telas analisadas na técnica de Análise de Interface de Usuário. A gravação tem como objetivo ilustrar visualmente os elementos de interação, fluxos de navegação e características observadas durante a avaliação.
O vídeo apresenta exemplos reais das interações observadas no app Cinemark, como tela inicial, seleção de sessões, escolha de assentos, navegação pelo catálogo de filmes, uso do Snack Bar, login, pagamento, carrinho e configurações de perfil.
Tabela 2 - Análise de Telas
| Tela | Responsável | Funcionalidades | Elementos de Interação | Observações / Regras de Negócio |
|---|---|---|---|---|
| Tela inicial (home) | Arthur Evangelista de Oliveira | Exibir filmes em cartaz, novidades, ofertas, parcerias; acessar notificações, pedidos e carrinho; alterar localização. | Carrossel de filmes, ofertas, promoções e anúncios, botões de navegação inferior (Home, Filmes, Cinemas, Snack Bar, Club, Mais), ícones de localização, notificações, carrinho e pedidos. | O botão de pedidos é pequeno e sobreposto a anúncios; idealmente deveria estar em aba separada. |
| Login | Arthur Evangelista de Oliveira | Autenticar usuário. | Campos de e-mail/senha, botão de login, link para cadastro e recuperação de senha. | Exige e-mail válido e senha correta. |
| Catálogo de filmes | Arthur Evangelista de Oliveira | Buscar filmes pelo nome; listar filmes em cartaz, em pré-venda e futuros lançamentos. | Botão de busca; Lista de filmes com imagem, botão de seleção, filtros (cartaz, pré-venda, em breve). | Filmes em cartaz ou pré-venda direcionam para fluxo de compra; futuros lançamentos mostram apenas informações. |
| Seleção de poltronas | Arthur Evangelista de Oliveira | Permitir ao usuário escolher os assentos desejados na sala selecionada. | Mapa visual da sala de cinema com representação fiel da disposição dos assentos; Cores/ícones diferenciando assentos: Disponíveis, ocupados, selecionados, especiais (ex: cadeirantes); Legenda com explicação das cores; Informações da sessão (filme, local, sala, data e horário) no topo da tela. | Deve ser possível selecionar mais de um assento por vez; O layout da sala muda conforme a planta de sala; Não deve permitir continuar sem selecionar ao menos um assento; |
| Seleção de Ingressos | Arthur Evangelista de Oliveira | Permitir ao usuário definir o tipo de ingresso (inteira, meia, parceria, voucher etc.) para cada assento selecionado. | Lista de ingressos com opções de categoria (inteira, meia-entrada, convênio, voucher); Campo de seleção de tipo de ingresso por assento; Preço de cada tipo de ingresso ao lado da opção; Informações da sessão (filme, data, hora, sala, cinema) visíveis na tela; Botão de continuar (prossegue para o Snack Bar); | Os preços variam conforme o tipo de ingresso e convênios disponíveis; Não é possível continuar sem definir o tipo para todos os assentos selecionados; |
| Snack Bar | Arthur Evangelista de Oliveira | Permitir que o usuário adicione produtos alimentícios (pipoca, refrigerante, combos etc.) à sua compra antes do pagamento. | Lista de produtos divididos por categorias: Pipocas, Bebidas, Doces, Combos; Imagem de cada item com nome, descrição (opcional), preço e botão de adicionar/remover quantidade; | O usuário pode seguir sem adicionar nenhum item (opção "Pular"); Combos podem ter descontos em relação à compra dos itens separadamente; Quantidade máxima por item pode ser limitada. |
| Meus ingressos | Arthur Evangelista de Oliveira | Acessar ingressos comprados. | Lista de ingressos, botão para exibição das informações do ingresso | Disponível somente após confirmação do pagamento. |
| Pagamento | Euller Júlio da Silva | Finalizar a compra dos ingressos e produtos selecionados, informando valor total, método de pagamento e confirmação. | Resumo da compra (ingressos, snack bar, sessão); Campo para aplicar cupom de desconto; Valor total da compra atualizado com ou sem cupom; Botões de método de pagamento: Cartão de crédito, cartão de débito e pix; Campos de preenchimento de dados do cartão (caso necessário); Botão “Confirmar pagamento”; | Ao concluir o pagamento, os ingressos são salvos automaticamente na tela “Meus pedidos”; Pagamentos por Pix devem gerar QR Code e chave copia e cola chave Pix. |
| Cadastro / criar conta | Euller Júlio da Silva | Permitir criação de conta com dados pessoais e confirmação por e-mail. | Campos: nome, como gostaria de ser chamado, data de nascimento, e-mail, telefone, CPF (opção de usar para nota fiscal), cidade, senha; botão "Cadastrar". | Após clicar em "Cadastrar", envia código de confirmação para o e-mail; após confirmação, sugere ativar biometria com opção de fazer depois. |
| Recuperar email/senha | Euller Júlio da Silva | Permitir recuperar e-mail pelo CPF ou redefinir senha. | Opções na tela de login: "Recuperar meu e-mail" e "Esqueci minha senha"; campo CPF (para recuperar e-mail); botões "Ok" e "Caso tenha esquecido sua senha, clique aqui"; campo e-mail (para redefinir senha); envio de código para confirmação. | Para recuperar e-mail, exibe e-mail mascarado e retorna para a tela de login; para redefinir senha, solicita e-mail e envia código de verificação para permitir definir nova senha. |
| Seleção de sessão e horário | Euller Júlio da Silva | Permitir ao usuário escolher uma sessão específica de um filme selecionado. | Lista de sessões com: Horário da sessão; Tipo de sala (Ex: XD, IMAX); Idioma (dublado ou legendado); Tipo de exibição (2D ou 3D); Nome do cinema; | Deve exibir as sessões apenas do cinema definido pela localização do usuário; O redirecionamento após a escolha da sessão deve passar automaticamente os dados da sessão para a tela seguinte. |
| Carrinho | Euller Júlio da Silva | Exibir resumo da compra, permitir aplicar cupom de desconto, prosseguir para pagamento. | Lista de itens (ingressos, produtos do Snack Bar); botão "Adicionar cupom de desconto"; botão "Prosseguir para pagamento"; subtotal e total atualizados automaticamente | Deve atualizar o valor total conforme itens e cupons aplicados; permite remoção de itens do carrinho; não permite prosseguir se o carrinho estiver vazio. |
| Perfil / Configurações | Euller Júlio da Silva | Permitir acesso a configurações e personalização da conta. | Menu “Mais” com as opções: Pedidos, Notificações, Meus dados, Senha e biometria, Pagamento, Promoções, Termos e Condições, Atendimento, Sobre o app, Avaliar na Google Play | Cada opção leva a uma tela específica; permite editar dados pessoais, alterar senha, ativar/desativar biometria e gerenciar métodos de pagamento; acesso a suporte e informações legais. |
| Notificações / promoções | Euller Júlio da Silva | Exibir notificações recentes e promoções disponíveis. | Lista de notificações e promoções com título, descrição e, em alguns casos, imagem; botão ou link “Ver mais” | Promoções possuem validade e podem desaparecer após expirar; algumas notificações direcionam para páginas específicas (como filmes ou eventos). |
Fonte: Arthur Evangelista de Oliveira e Euller Júlio da Silva, 2025.
Requisitos Elicitados
Os requisitos elicitados a partir da análise de interfaces de usuário foram organizados de forma estruturada para facilitar a visualização do comportamento esperado do sistema. As tabelas 3 e 4 apresentam os Requisitos Funcionais (RF) e os não funcionais (RNF) identificados, agrupados por tela, com suas respectivas funcionalidades, elementos de interação e regras de negócio observadas durante a atividade de avaliação.
Legenda das Tabelas 3 e 4
- RF: Requisito Funcional
- RNF: Requisito Não Funcional
- AIx: Requisito elicitado por Análise de Interface
Tabela 3 - Requisitos Funcionais
Fonte: Arthur Evangelista de Oliveira e Euller Júlio da Silva, 2025.
Tabela 4 - Requisitos Não Funcionais
Fonte: Arthur Evangelista de Oliveira e Euller Júlio da Silva, 2025.
Conclusão
A análise da interface do próprio aplicativo Cinemark forneceu informações valiosas sobre padrões de design e funcionalidades existentes. Essa avaliação auxiliou na identificação de elementos que poderiam ser aprimorados no aplicativo, visando uma melhor experiência do usuário. As informações coletadas contribuíram diretamente para a definição de requisitos específicos, detalhados na seção de Requisitos Elicitados.
Bibliografia
- Cinemark Brasil. Disponível em: https://www.cinemark.com.br. Acesso em: 3 maio 2025.
- WIEGERS, Karl E.; BEATTY, Joy. Software Requirements. 3. ed. Redmond: Microsoft Press, 2013.
Histórico de Versão
| Versão | Data | Descrição | Autor(es) | Revisor(es) |
|---|---|---|---|---|
1.0 |
03/05/2025 | Criação da página 'Análise de UI', contendo introdução, metodologia, análise e os requisitos elicitados | Arthur Evangelista e Euller Júlio | Davi Camilo e Tiago Antunes |
1.1 |
04/05/2025 | Ajuste na formatação | Davi Camilo | Euller Júlio |
1.2 |
12/05/2025 | Adição da conclusão | Arthur Evangelista | Euller Júlio |
1.3 |
12/05/2025 | Adição da seção "Demonstração Visual" com vídeo no YouTube sobre as interações analisadas | Euller Júlio | Arthur Evangelista |
1.4 |
12/05/2025 | Adição do cronograma da técnica | Davi Camilo | Tiago Antunes |