Editar
Padrão para edição de registros no ME, orientando acesso, formato de edição, validações e feedbacks do fluxo.
Boas Práticas
Editar atualiza dados de um registro existente. A interface deve mostrar o conteúdo atual, permitir ajustes e confirmar a mudança com "Salvar".
Contextos
A edição pode partir de diferentes áreas da interface. O contexto define o container ideal e o nível de complexidade do fluxo.
Modal para entidades de complexidade média. 'Editar fornecedor' é um caso real no ME: dados de contato, prazo, condições de pagamento.
Clique duplo ativa o modo inline. O valor é salvo ao pressionar Enter ou ao mover o foco — sem botões Salvar/Cancelar na linha.
A estrutura interna é idêntica nos dois casos: Nav global → breadcrumb → subheader com CTAs → body. O container de apresentação — overlay modal ou URL dedicada — é secundário. Aplica-se a documentos de fluxo abertos do Index e a entidades complexas como Usuário ou Empresa.
Hierarquia
1 — Modal simples (entidade de configuração)
Uso
- Entidades de configuração com poucos campos — Cargo, Local, Condição de Pagamento
- Edição rápida sem abandonar a tela atual; sem chassi completo
Regras
- Título do modal: "Editar [nome do registro]"
- Dados atuais sempre pré-preenchidos — nunca formulário em branco
- CTA primária: "Salvar" (nunca "Confirmar" — reservado para criação)
- CTA secundária: "Cancelar" (descarta alterações)
- Alerta ao tentar fechar com alterações não salvas
Heurísticas primárias
- Consistência e padrões — "Editar" como verbo padrão; nunca "Modificar", "Alterar" ou "Update"
- Controle e liberdade do usuário — sempre possibilitar cancelar sem salvar alterações
- Prevenção de erros — validações em tempo real, não apenas ao salvar
- Visibilidade do status do sistema — CTA "Salvar" diferencia edição de criação
Quando NÃO usar modal simples
- Documentos de fluxo (Cotação, Pedido, Requisição) — usam chassi completo mesmo em modal
- Entidades complexas com 15+ campos ou dependências — use chassi completo
- Fluxos que exigem aprovação em etapas ou pré-visualização
2 — Editar inline (tabela)
Uso
- Edição de campo único em tabelas sem abrir modal
Acesso
- Clique direto na célula editável
Indicadores visuais
- Borda ao redor do campo ativo
- Ícones Salvar/Cancelar ao lado
Heurísticas secundárias
- Reconhecimento em vez de memorização — dados atuais pré-preenchidos no formulário
- Prevenção de erros — alerta ao tentar sair com alterações não salvas
- Flexibilidade e eficiência — edição inline para campos simples em tabelas
Quando usar
- Campos simples como nome, valor, status
- Evitar para campos com dependências ou validações complexas
3 — Chassi completo (modal de documento ou página dedicada)
Uso
- Documentos de fluxo abertos do Index (Cotação, Pedido, Requisição) — abrem como overlay modal mas com chassi completo internamente
- Entidades complexas como Usuário ou Empresa — abrem em página dedicada com navegação real
- Qualquer edição que exige contexto completo, multi-seção ou pré-visualização
Estrutura do chassi
- Nav global — barra azul no topo (idêntica em modal e página)
- Breadcrumb — row dedicada abaixo do Nav indicando o caminho
- Subheader — título "Editar [entidade]" à esquerda; [Cancelar] + [Salvar alterações] à direita
- Body — formulário pré-preenchido; tabelas de itens com toolbar e filter bar próprias
Modal vs. página dedicada
- Modal overlay — padrão para documentos de fluxo; pode ser expandido para página dedicada
- Página dedicada — para entidades complexas ou quando o usuário navega diretamente via URL
- A estrutura interna do chassi é idêntica nos dois casos — o container não altera o padrão
Heurísticas
- Reconhecimento em vez de memorização — dados atuais pré-preenchidos no formulário
- Prevenção de erros — alerta ao tentar sair com alterações não salvas
- Flexibilidade e eficiência — edição inline para campos simples em tabelas
- Alerta ao tentar sair com alterações não salvas — válido tanto no modal quanto na página dedicada
Labeling
Editar precisa deixar claro qual informação será modificada. O rótulo e o CTA devem refletir a ação real e evitar ambiguidade com fluxos de criação.
Abre o formulário de edição de registro existente
Ação de abertura — menu de mais ações, toolbar, header do documento
CTA de confirmação da edição — persiste as alterações
CTA primária do formulário de edição
Descarta alterações não salvas e retorna ao estado anterior
CTA secundária do formulário ou modal de edição
| Verbo | Objeto | Resultado |
|---|---|---|
| Editar | Cargo | Editar cargo |
| Salvar | — | Salvar |
- 'Editar [entidade]' ao abrir o modo de edição deixa claro o que será modificado antes do modal abrir.
- 'Salvar' como CTA primária de edição — diferencia claramente de 'Confirmar' (criação) e 'Cancelar' (saída).
- Em edição inline de célula, useícones de checkmark e × em vez de texto para economizar espaço.
- Não use'Modificar', 'Alterar' ou 'Update' — o verbo padrão ME é 'Editar'.
- Não use'Confirmar' como CTA de edição — é semântica de criação; causa confusão contextual.
- Não abra formulário em branco para edição — semprepré-preencha com os dados atuais.
Exemplos de uso
Editar deve preservar a confiança do usuário: mostrar o estado atual, permitir ajustes controlados e comunicar claramente o resultado da alteração.
Modal com campos pré-preenchidos e foco no primeiro campo
Ao abrir o modal de edição, os campos já exibem os valores atuais e o cursor está no primeiro campo. O usuário edita apenas o que precisa, sem redigitar o que está correto.
Modal vazio para edição de registro existente
Abrir um formulário de edição com campos em branco força o usuário a redigitar todos os dados. É equivalente a criar um novo registro — confunde e aumenta o erro de digitação.
Alerta de alterações não salvas ao tentar sair
Se o usuário modificou campos e tenta navegar para outra página ou fechar a aba, um Alert inline aparece: "Você tem alterações não salvas. Salvar antes de sair?" — com ações Salvar e Descartar.
Perder alterações silenciosamente ao navegar
Navegar para outra página sem avisar sobre alterações não salvas resulta em perda de trabalho. Sempre intercepte a navegação quando há dados modificados não confirmados.
Edição inline para campos simples de tabela
Quantidade, preço unitário e outros campos numéricos de tabela podem ser editados inline com duplo clique — sem abrir modal. O valor é salvo ao confirmar com Enter ou ao mover o foco.
Modal para editar um único campo numérico
Abrir um modal completo para alterar apenas a quantidade de um item é um custo de interação desproporcional. Use edição inline para campos simples e únicos.
Feedback para Editar
Editar é uma ação de alta intenção e o usuário precisa saber que as alterações foram salvas. O feedback deve ser imediato e claro. Escolha o componente pelo nível de impacto da edição:
Use para confirmar que as alterações foram salvas — discreto, imediato e sem interromper o fluxo.
Ex: "Alterações salvas."
Use quando salvar desencadeia um processo adicional ou exige que o usuário acompanhe o resultado.
Ex: "Alterações enviadas para aprovação."
Alterações enviadas para aprovação. Acompanhe o status na aba Aprovações.
Use para sinalizar alterações pendentes enquanto o usuário ainda está no modo de edição.
Ex: "Modificações não salvas" no título do formulário/modal
Editar cargo
Modificações não salvas