Formas multifacetadas e preservação de contexto

1) Princípios

1. Um objectivo são alguns passos naturais. Não divida por tabelas de base de dados, mas por uma lógica de usuário, «Dados → Confirmação → Conclusão».
2. Cada passo é um sentido completo. Não seja muito pequeno, os passos são perfeitos.
3. A transição não deve excluir o contexto. Todos os campos, eleições e arquivos são salvos.
4. Deixe-me voltar. Para trás, sem perda de dados.
5. Sigam o progresso. Bar progresso, cabeçalho passo e CTA claro.
6. O usuário pode sair e voltar. O rascunho é local ou servidor.

2) Arquitetura de moldes

Status do cliente: Estore local (por exemplo, React Context/Redux/Sinal) ou armazenamento temporário ('sessionStorage', IndexedDB).
State do servidor: crie um rascunho com 'draft _ id' e guarde após cada etapa.
Segurança: 'draft _ id' está ligado ao usuário e expira em N horas; os dados são criptografados em paz.

• 'currentStep' é o índice da etapa atual;
• 'completedSteps' é a lista dos concluídos;
• 'errors' - erros por passo;
• `progress = current / total`.

js const formState = {
draftId: "d-84f...",
currentStep: 2,
steps: [ { id: "personal", completed: true }, { id: "kyc", completed: false } ],
data: { name:"", idPhoto:null },
lastSaved: Date. now()
}

3) Design de passos e layout

Estrutura: navegação vertical (desktop )/progresso-bar acima (mobile).
O nome visível do passo é "1. Dados pessoais», «2. Confirmação de identidade".

• A principal é Seguir/Continuar.
• Secundário: «Para trás».
• O último passo é «Concluir «/» Enviar ».

• Use 'ária-current =' step '.
• Mostre% se os passos forem desiguais.
• Adicione a dica «Pode voltar mais tarde».

4) Salvar contexto e dados

Armazenamento automático

• alterar o campo (com o debouns 500-1000 ms);
• ir para o próximo passo;
• perder o foco da aba.

• localmente ('localStorage '/ IndexedDB) - se a forma for curta;
• servidor - para CUS/pagamentos/questionário.

js const saveDraft = debounce(async (data) => {
await fetch('/api/draft', { method:'POST', body: JSON. stringify(data) });
}, 800);

Restaurar

Ao abrir o formulário, procure um rascunho ('draft _ id' ou chave local).

• Em caso de conflito (novos campos), «atualizar o rascunho» para realçar as alterações.

5) X pattern transições

Apenas depois da validação local do passo.
Para trás, sem confirmação se não houver perda de dados.
Se a rede estiver errada, preserve localmente e mostre «Restaurar na próxima conexão».
Não altere o URL aleatoriamente: '/forma/step/2 '→ fácil de navegar/recuperar.
Suporte 'Ctrl + Enter' para avançar rapidamente para o próximo passo.

6) Estados e dicas visuais

In progress: indicador cinza/ativo, passo clicado apenas se o anterior estiver concluído.
Completed: caixa verde/ícone; você pode abrir para edição.
Error: caminho vermelho, texto abaixo do campo e em linhas avançadas.
Disabled: os passos após o atual estão ocultos ou não estão disponíveis.

html
<nav aria-label = "Progress">
<ol class="steps">
<li class = "done "> <span> 1 </span> Data </li>
<li class = "current" aria-current = "step "> <span> 2 </span> Documents </li>
<li> 3 Verification </li>
</ol>
</nav>

7) A11y e disponibilidade

'ária-current =' step 'para o passo ativo.
A mudança de passo é «aria-live =» polite «».
Mantenha o foco dentro do passo atual; ao navegar, mova para o cabeçalho.
Navegação de Tab e Enter é previsível; Esc não deve perder o contexto.
Para passo a passo, use «role =» list «,» role = «listitem» e «aria-label» para o passo.

8) Comportamento de erro e interrupção

Falha na rede: banner "Conexão perdida. Os dados serão mantidos localmente".
Timeout: repita automaticamente em 3-5 c; se falhar, um rascunho off-line.
Quebra de sessão: depois do login → «Continuar do último passo».
Erro na etapa: Preserve os campos parcialmente preenchidos e realce os campos com problemas.

9) Sessões paralelas e segurança

'draft _ id' é exclusivo do usuário.
Se você abrir uma nova guia, sugira "Abrir outra sessão. Atualizar ou continuar aqui".
Para COs/formulários financeiros - os dados são criptografados no cliente (AES/GCM) antes de salvar o rascunho.
Remove rascunhos por TTL (por exemplo, 7 dias de inatividade).

10) Exemplos de cenário iGaming

10. 1 CUS/verificação

1. Dados pessoais → 2. Documentos → 3. Verificação → 4. Terminação.

Ensaio automático depois de baixar a foto.
Restaurar da etapa de verificação após a interrupção.
Estado de espera de confirmação com o indicador.

10. 2 Pagamento/depósito

Passos: 1. Soma → 2. Método → 3. Confirmação.
Os dados do método são salvos entre as sessões.
É possível voltar a selecionar o método sem excluir o valor.

10. 3 Definir limites

Etapas: tipo de limite → valor → confirmação.
O progresso mostra os passos restantes.
Depois de concluído, a tela «Entrar em vigor através»...

11) Métricas e controle

Complition rate:% dos usuários que completaram todos os passos.
Drop-off per step: em que passo vão.
Average time per step и Time-to-Complete.
Auto-save sucess rate (quantos rascunhos foram restaurados).
Erro recovery rate: proporção de sucesso após falha.

12) Antipattern

Navegação rígida sem «Para Trás».
Perda de dados digitados durante o reinício.
Saltar passos sem contexto.
Um submit geral para 10 telas.
Erro na etapa - e «Recomeça».
Tela vazia após falha na rede.
Um bar de progresso sem nomes significativos («1/4/7»...).

13) Sistema de design de tokens (exemplo)

json
{
"steps": {
"radius": 10,
"gap": 8,
"barHeight": 4,
"activeColor": "#2B9F5E",
"inactiveColor": "#E0E0E0"
},
"autosave": {
"debounceMs": 800,
"retryMs": 3000,
"ttlDays": 7
},
"a11y": {
"ariaLive": "polite",
"focusBehavior": "scrollToTitle"
}
}

presídios CSS

css
.steps { display:flex; gap:8px; list-style:none; counter-reset:step; }
.steps li { position:relative; flex:1; text-align:center; }
.steps li::before { counter-increment:step; content:counter(step); display:block; width:24px; height:24px; line-height:24px; margin:0 auto 4px; border-radius:50%; background:var(--inactive); color:#fff; }
.steps li. done::before { background:var(--success); }
.steps li[aria-current="step"]::before { background:var(--primary); }

14) QA-folha de cheque

Salvar e restaurar

• O rascunho é criado e atualizado a cada passo.
• Ao reiniciar, a recuperação está disponível e correta.
• Conflito de versões está sendo processado (formato antigo/novo).

Navegação

• «Para trás» não perde os dados.
• O URL corresponde ao passo atual.
• O bar de progresso está sincronizado com o estado.

Rede e Off-Line

• Off-line salva localmente e restabelece online.
• As mensagens de falha são compreensíveis e não essenciais.

A11y

• 'aria-current =' step ',' aria-live = 'polite' 'estão funcionando.
• O foco é transferido para o cabeçalho da etapa.

Performance

• Transições instantâneas (≤ 100 ms).
• As salvas asinhrônicas não bloqueiam a UI.

15) Documentação em design

Компоненты: `StepIndicator`, `MultiStepForm`, `AutosaveBanner`, `DraftRecoveryModal`.
Guidas de armazenamento de contexto (local vs server), A11y e ARIA.
Modelos UX: KYC, depósitos, limites, questionários, reembolso após erro.
Do/Don 't com exemplos de falha na rede e recuperação com sucesso.

Resumo curto

A forma multifacetada deve ser sentida por um processo contínuo, mesmo que o usuário tenha se distraído, reiniciado a página ou perdido a rede. Armazenamento automático, recuperação, progresso visível e retais seguros transformam cenários complexos (KYC, pagamentos, limites) em experiência previsível e confiável.