Guia de Design de UI/UX: Sistema de

Gerenciamento de Supermercado

1. Visão Geral do Projeto

O objetivo é criar uma aplicação web interna, limpa e eficiente para gerenciar as operações de um
supermercado. A interface deve ser intuitiva e adaptada para três perfis de usuários distintos, cada um
com suas tarefas específicas. A clareza, a velocidade de uso (especialmente para o Caixa) e a
consistência visual são as chaves para o sucesso do projeto.

2. Personas (Perfis de Usuário)

Temos três usuários principais. O design deve ser otimizado para as tarefas de cada um.

👨‍💼 Ana, a Gerente

Objetivo: Ter uma visão geral do negócio, gerenciar sua equipe e garantir que os dados estejam
corretos.
Necessidades: Acesso rápido a relatórios, capacidade de adicionar e remover funcionários, e
controle total sobre os dados de clientes e produtos. A interface para Ana pode ser mais densa
em informações, focada em dados e gerenciamento.

🛒 Bruno, o Caixa

Objetivo: Registrar as compras dos clientes de forma rápida e eficiente, sem erros.
Necessidades: Uma interface de Ponto de Venda (PDV) extremamente rápida, com o mínimo de
cliques possível para adicionar produtos e finalizar uma venda. A interface para Bruno deve
priorizar a velocidade e a simplicidade.

📦 Carlos, o Repositor

Objetivo: Manter o catálogo e o estoque de produtos sempre atualizados.

Necessidades: Uma forma simples de adicionar novos produtos ao sistema e de atualizar a
quantidade em estoque ou o preço dos produtos existentes. A interface para Carlos é focada em
gerenciamento de inventário.

Page 1 of 5
3. Guia de Telas Essenciais
A seguir, uma descrição das telas que precisam ser criadas, divididas por funcionalidade e perfil de
usuário.

Telas Comuns a Todos

1. Tela de Login

É a porta de entrada do sistema.

Conteúdo:
Logo do supermercado.
Campo de texto: "CPF".
Campo de texto: "Senha" (com ícone para alternar visibilidade).
Botão principal: "Entrar".
Área para mensagens de erro (ex: "CPF ou senha inválidos.").

Telas do Perfil: Gerente

O Gerente tem acesso a todas as áreas do sistema. A navegação deve ser clara, possivelmente com um
menu lateral persistente.

1. Dashboard (Tela Principal)

Visão geral e central de comando.

Conteúdo:
Título de Boas-vindas: "Bem-vinda, Ana!".
Widget de Resumo Financeiro:
Seletores de data ("De" e "Até").
Cards de destaque exibindo: "Receita Total", "Despesas com Salários" e
"Lucro/Prejuízo" para o período selecionado.
Widget de Ações Rápidas: Botões grandes e claros para as ações mais comuns, como
"Adicionar Novo Funcionário" e "Adicionar Novo Produto".
(Opcional) Gráfico: Um gráfico de linhas simples mostrando a evolução da receita nos
últimos 7 ou 30 dias.

2. Tela de Gerenciamento de Funcionários

Visão completa da equipe.

Page 2 of 5
 Conteúdo:
Título da página: "Gerenciamento de Funcionários".
Botão de Ação Primária: "+ Adicionar Funcionário".
Tabela de Funcionários:
Colunas: Nome, CPF, Email, Cargo.
Em cada linha, botões de ação: "Editar" (ícone de lápis) e "Excluir" (ícone de lixeira).
Modal ou Página de Adicionar/Editar Funcionário:
Formulário com todos os campos de um funcionário (Nome, CPF, Email, Telefone,
Endereço, Aniversário, Salário, Senha).
Um campo de seleção ( <select> ) para o "Cargo" (Gerente, Caixa, Repositor).

3. Tela de Gerenciamento de Clientes

Visão completa dos clientes fidelizados.

Conteúdo:
Título da página: "Clientes Cadastrados".
Tabela de Clientes:
Colunas: Nome, CPF, Email, Pontos de Fidelidade.
Em cada linha, botões de ação: "Editar" e "Excluir".

4. Tela de Gerenciamento de Produtos

Visão completa do inventário (idêntica à tela do Repositor).

Conteúdo:
Título da página: "Gerenciamento de Produtos".
Botão de Ação Primária: "+ Adicionar Produto".
Tabela de Produtos:
Colunas: Nome do Produto, ID, Preço Unitário, Quantidade em Estoque, Data de
Validade.
Em cada linha, botões de ação: "Editar" e "Excluir".

Telas do Perfil: Caixa

A interface do Caixa deve ser otimizada para velocidade e uso contínuo.

1. Tela de Ponto de Venda (PDV)

O coração da operação do caixa.

Layout Sugerido: Duas colunas para máxima eficiência.

Conteúdo da Coluna Esquerda (Carrinho):

Page 3 of 5
 Uma lista dinâmica dos produtos adicionados à venda. Cada item da lista deve mostrar:
Nome do Produto , Quantidade (com botões de + e - para ajuste rápido), e
Subtotal .
Uma área de destaque na parte inferior com o VALOR TOTAL da compra, em fonte grande
e clara.
Conteúdo da Coluna Direita (Ações):
Campo de texto principal com foco automático: "Código do Produto".
Campo de texto secundário: "CPF do Cliente" (opcional).
Botão de Ação Primária, grande e acessível: "Finalizar Compra".
Botão de Ação Secundária: "Cancelar Compra".
Feedback Visual:
Ao adicionar um item, ele deve aparecer instantaneamente na lista com uma animação sutil.
Ao finalizar, um modal de sucesso deve aparecer: "Compra registrada com sucesso!".

2. Tela/Modal de Cadastro de Cliente

Acessível a partir da tela de PDV.

Conteúdo:
Um formulário simples e rápido.
Campos: Nome, CPF, Email, Telefone, Endereço e Data de Aniversário.
Botão de Ação: "Salvar Cliente".

Telas do Perfil: Repositor

Interface focada em uma única tarefa: gerenciar produtos.

1. Tela de Gerenciamento de Produtos

Interface principal e única para este perfil.

Conteúdo:
Exatamente como a tela de gerenciamento de produtos do Gerente.
Título da página: "Gerenciamento de Produtos".
Botão de Ação Primária: "+ Adicionar Produto".
Tabela de Produtos com as colunas relevantes e ações de "Editar" e "Excluir".
Modal ou Página de Adicionar/Editar Produto com um formulário completo para todos os
detalhes do produto.

4. Princípios Gerais de Design

Page 4 of 5
 Consistência: Use os mesmos estilos de botões, fontes, cores e espaçamentos em toda a
aplicação. Crie um pequeno "design system" com componentes reutilizáveis.
Feedback ao Usuário: Sempre forneça feedback para as ações. Use spinners de carregamento
durante as chamadas de API e mensagens de sucesso ou erro (ex: "Funcionário adicionado com
sucesso!").
Design Responsivo: Embora seja uma aplicação interna (provavelmente usada em desktops),
garantir que ela funcione bem em telas menores é uma boa prática.

Este guia deve fornecer uma base sólida para iniciar o processo de design. Fique à vontade para propor
melhorias e otimizações no fluxo de usuário!

Page 5 of 5