Interfaz de perfil de usuario

1) Principios

1. Un pensamiento en la pantalla. Perfil = conjunto de particiones cortas independientes con un CTA cada una.
2. Seguridad predeterminada. Estados visibles de 2FA/sesiones/dispositivos, rutas de acceso simples a la acción.
3. Transparencia de datos. Qué se almacena, por qué, cómo desactivar/descargar/eliminar.
4. Personalización sin sobrecarga. Sólo ajustes reales que afectan a la experiencia.
5. Nunca pierdas el contexto. Borradores, volver a la última partición, URL predecible.

2) Arquitectura de la información

• Perfil (avatar, nombre, contactos)
• Seguridad (contraseña, 2FA, dispositivos/sesiones)
• Pagos (métodos, piezas almacenadas automáticamente, historial)
• Límites (juego responsable)
• KYC (estado, descarga de documentos)
• Preferencias (idioma, moneda, formato de coeficiente, apuestas rápidas, temas)
• Notificaciones (tipos/canales, silencio/digestos)
• Privacidad y datos (visibilidad, DSAR/exportación, eliminación de cuentas)

Nunca muestre PAN/CVC completos; tokens y máscaras sólo para UX.

3) Header del perfil

Avatar (carga/recorte), display-name, ID/username.
Etiquetas de estado: KYC: En la verificación/Pasado, 2FA: Encendido/Apagado, Juego responsable: Activo.
Enlaces rápidos: «Cambiar contraseña», «Confirmar e-mail/teléfono», «Establecer límite».

html
<header class="profile-head">
<img class="avatar" alt="Аватар пользователя">
<div>
<h1>Имя пользователя</h1>
<div class="badges"><span class="badge">KYC: На проверке</span><span class="badge">2FA: Выкл</span></div>
</div>
<button class="btn btn--primary">Загрузить документы</button>
</header>

4) Sección «Perfil»

Campos: nombre, fecha de nacimiento, país, idioma de interfaz.
Contactos: correo electrónico (verificación), teléfono (OTP).
Local: la fecha/hora/moneda está vinculada al idioma y al país.
La fecha de nacimiento sólo se edita a través del sapport después de KYC.

UX: consejos de formato, máscaras suaves, auto seave con debouns, confirmación de éxito.

5) Seguridad

Contraseña: cambiar por contraseña actual + reglas de calidad (manómetro/indicaciones), no mostrar requisitos retroactivos.
2FA: TOTP/SMS; flujo maestro simple: «Habilitar → QR → códigos de respaldo».
Dispositivos y sesiones: lista de entradas activas (dispositivo/OS/ubicación/hora), CTA «Completar todo excepto el actual».
Soc-logins: Enlace/desvío con confirmación.

6) Pagos

Métodos de pago: tarjetas (máscara '1234'), A2A/billeteras; Estado predeterminado.
Conclusiones: datos guardados (IBAN/monedero) con verificación mediante micro transferencia, si se aplica.
Historial de transacciones: filtros por tipo/fecha/cantidad, exportación CSV.
Transparencia: Comisión/ETA y estado «En tramitación/Rechazado/Terminado».

7) Límites (Juego responsable)

Tipos: Depósito, Apuesta, Temporal (time-outs), Auto-exclusión.
UX: radio período (día/semana/mes) + suma, texto explícito «Entrará en vigor a través de»....
Cambio hacia la atenuación - con retraso; aprietes - inmediatamente.

8) KYC

Stepper: Datos personales → Documentos → Envío → En revisión.
Requisitos de archivo claros (tipo/tamaño/claridad) + vista previa.
Estado y plazos, canal de notificaciones de preparación, historial de documentos presentados.

9) Preferencias

Formato de coeficiente: decimal/fraccionario/americano.
Apuestas rápidas: switch + advertencia «sin confirmación» y Undo si está permitido.
Tema: luz/oscuridad/sistema; modo de contraste para personas con discapacidad visual.
Geo y lenguaje: guardar, pero recordar los requisitos de las jurisdicciones (contenido/listas de bloques).

10) Notificaciones

Canales: push/e-mail/SMS/en la aplicación.
Grupos: financiero, juego, social, marketing (por defecto moderadamente).
«No molestar»: rangos de tiempo y condiciones (por ejemplo, sin marketing por la noche).
Preview: cómo se ve la notificación, dónde desactivar.

11) Privacidad y datos

Visibilidad del perfil (si las funciones sociales): quién ve el nick/avatar/actividad.
Carga de datos (DSAR): solicitud de archivo con fecha de vencimiento; Notificación de preparación.
Borrar la cuenta: explicar las consecuencias, grace-period, «Congelar» como alternativa.
Diario de consentimiento: cookies/marketing/términos - fechas y versiones.

12) Historial de acciones

Cinta: entradas/salidas, cambios de contraseña/2FA, cambios de datos de pago, límites.
Filtros y exportaciones; Explicación de geo-IP y dispositivos.
CTA «¿No fuiste tú?» → un flow rápido de cambio de contraseña y finalización de sesiones.

13) A11y y localización

Las etiquetas y pistas están relacionadas a través de 'aria-describedby'; errores - 'role =' alert '.
El contraste ≥ AA, visible ': focus-visible', el orden Amb corresponde a lo visual.
'prefers-reduced-motion' es un mínimo de animaciones.
Expansión lingüística: margen de ancho del 20-30%; los números son tabulares ('font-variant-numeric: tabular-nums;').

14) Patrones móviles

Menú de perfil como drawer; estados clave/STA - en la parte superior.
Sticky-CTA en la parte inferior para formas largas («Guardar cambios»).
Escala de campos, teclado por tipo ('inputmode').
Notificaciones/Historial - Cinta con carga infinita y un observador sentry.

15) Vacíos, errores, estados

Empty: sugerencia amistosa y «qué sigue» (añadir el método/incluir 2FA).
Error: causa + cómo corregir + Retry; no restablecer los datos introducidos.
Busy: cargadores locales, sin bloquear toda la pantalla; TTFF ≤ 100 ms.

16) Métricas

Completion Rate por configuración clave (2FA, KYC, métodos de pago).
Secciones Time-to-Complete (contraseña/2FA/KYC/límites).
Error Rate formularios + fracción de Retry exitosos.
Adopción de preferencias (tema, apuestas rápidas, formato de coeficientes).
Post de seguridad: proporción de usuarios con 2FA, número de sesiones completadas de otras personas.

17) Anti-patrones

Configuración crítica oculta (2FA/límites) en profundidad.
Cuestionarios largos en el modal; La ausencia de una tienda de automóviles.
Envío «mudo» sin busy/confirmación.
Restablecer el enfoque y «saltar» el diseño; CLS debido a las imágenes.
Prohibición de copiar código de 2FA/OTP.
Mezcla de marketing y notificaciones críticas predeterminadas.

18) Tokens del sistema de diseño (ejemplo)

json
{
"profile": {
"sectionGap": 20,
"fieldHeight": 44,
"radius": 12
},
"security": {
"badge": { "radius": 8, "px": "4 8" },
"focusRing": { "width": 2, "offset": 2 }
},
"lists": {
"row": { "py": 12, "px": 16 },
"divider": 1
},
"motion": { "hoverMs": 160, "pressMs": 90 },
"a11y": { "contrastAA": true, "reduceMotion": true }
}

19) Snippets

Lista de dispositivos/sesiones (HTML)

html
<ul class="sessions" role="list">
<li>
<div>Chrome · Windows · Киев</div>
<small>Последняя активность: 14:32</small>
<button class="btn btn--ghost">Выйти</button>
</li>
<li aria-current="true">
<div>Safari · iOS · Текущая сессия</div>
<small>Последняя активность: сейчас</small>
<button class="btn btn--ghost" disabled>Текущая</button>
</li>
</ul>
<button class="btn btn--secondary">Завершить все сеансы</button>

Interruptor de formato de coeficiente (radio)

html
<fieldset>
<legend>Формат коэффициентов</legend>
<label><input type="radio" name="odds" value="decimal" checked> Десятичные</label>
<label><input type="radio" name="odds" value="fractional"> Дробные</label>
<label><input type="radio" name="odds" value="american"> Американские</label>
</fieldset>

Tarjeta de métodos de pago (enmascaramiento)

html
<article class="pay-card">
<h4>Visa •••1234</h4>
<small>По умолчанию</small>
<div class="actions">
<button>Сделать основным</button>
<button class="danger">Удалить</button>
</div>
</article>

20) QA-check-list

Significado y flujo

• Las secciones son lógicas; cada pantalla tiene un CTA principal.
• Las URL/navegación restauran la última partición.

Formularios

• Correctos 'type/inputmode/autocomplete'; máscaras suaves, predecible caret.
• Controles asíncronos con debouns; guardar no pierde datos.

Seguridad

• El flow 2FA es comprensible; los códigos de respaldo están disponibles para su descarga.
• Las sesiones/dispositivos terminan, los eventos son lógicos.
• Los campos sensibles no están en caché o en la lógica.

iGaming-especificidad

• Límites de entrada diferida y períodos diferentes.
• Los estados y documentos de KYC son claros; los plazos y el canal de notificación son visibles.
• El formato de coeficientes y las apuestas rápidas funcionan según lo declarado.

A11u/Localización

• Contraste ≥ AA; ': focus-visible' ver; El orden de corte es correcto.
• Los textos y números se adaptarán al idioma/moneda; RTL es compatible (si es necesario).

Performance

• TTFF ≤ 100 ms; sin CLS; las imágenes son flojamente cargadas.
• Las listas grandes (historial) están paganizadas/virtualizadas.

21) Documentación en el sistema de diseño

Компоненты: `ProfileHeader`, `ProfileSection`, `SecurityPanel`, `SessionsList`, `PaymentMethodCard`, `LimitsForm`, `KYCStepper`, `PreferencesForm`.
Tokens: campos/radios/focus/insignias, estados de CUS/límites, colores éxito/error/atención.
Los patrones son: «Una CTA por partición», «Undo/Confinamiento por riesgo», «Exportación/Eliminación de Datos (DSAR)».
Do/Don 't: configuración de seguridad oculta, formularios sobrecargados que enmascaran las inclusiones de marketing.

Resumen breve

La interfaz de perfil es un centro de confianza: debe ser simple, honesta y segura. Una arquitectura clara, un flow rápido y predecible (2FA/KYC/límites/pagos), formas ordenadas y transparencia de datos convierten el perfil en el soporte del producto y reducen la carga del zapport, especialmente crítico para iGaming.