Marco del problema

El abandono no es falta de interés. Es costo de uso.

El diseño tenía un objetivo medible: reducir el costo de registrar un movimiento.

Usuario objetivo

Método de validación

Evaluación heurística de Nielsen sobre el producto terminado.

Un segundo detector sobre el DOM sí encontró 19 anti-patrones, pero ninguno de los defectos de uso. Son cosas distintas.

Heurística 6 · Reconocimiento antes que recuerdo

La diferenciación dependía de un estado que en táctil no existe.

src/piezas/FilaMovimiento.tsx// Antes: la acción destructiva solo se distinguía al pasar el puntero
"text-texto-3 hover:text-gasto"

// Ahora: color y fondo propios en reposo, sin interacción previa
"text-gasto bg-gasto-sutil"

Heurística 5 · Prevención de errores

Un defecto de formato alteraba el monto en dos órdenes de magnitud.

src/utils/moneda.ts// El backend responde "120.50"; el formato local usa "1.248,50".
// Si hay coma, la coma es decimal y los puntos son miles.
const normalizado = crudo.includes(',')
  ? crudo.replace(/\./g, '').replace(',', '.')
  : crudo   // ← sin esta rama, "120.50" se convertía en 12050

Del archivo de Figma al código

Un único origen para los tokens del sistema.

src/index.css@theme {
  /* Escala extraída de la fotografía de portada */
  --color-lavanda-900: #553d78;
  --color-borde-fuerte: #cbd5e1;  /* 3:1, WCAG 1.4.11 */

  /* 20px y no 14: `grande` y `extra` valían lo mismo
     y el sistema prometía una distinción inexistente */
  --radius-extra: 20px;
}

Heurística 8 · Diseño estético y minimalista

El fondo como material, no como ornamento.

src/layout/landing/Fondo.tsx// El degradado se detiene donde el texto secundario aún cumple AA.
// Medido en el navegador: 5,05:1 en el punto más oscuro.
'linear-gradient(175deg, #f7f9fb 0%, … 80%, #c9d4e2 100%)'

Diseño responsivo · Los tres tipos de pantalla

La adaptación no es de escala: es de producto.

1440 · escritorio

820 · tableta

390 · celular

En móvil se retira la fotografía, entran registros reales y aparece una navegación inferior inexistente en escritorio.

Diseño responsivo · Implementación

Los puntos de corte se declaran una vez y se comparten.

src/pantalla/useTipoPantalla.ts// Espejo de los breakpoints de Tailwind (md = 48rem, lg = 64rem).
// La desincronización aquí no se paga como en una media query suelta:
// esto no decide cómo se ve algo, decide QUÉ se renderiza.
const CONSULTAS = {
  celular: '(max-width: 47.999rem)',
  tableta: '(min-width: 48rem) and (max-width: 63.999rem)',
}

Diseño responsivo · Decisión de arquitectura

En móvil no se entrega la misma interfaz reordenada.

src/app/App.tsxif (pantalla === 'celular') {
  return (
    <Suspense fallback={null}>
      <AppCelular />   // pantallas propias, navegación inferior
    </Suspense>
  )
}

La tableta conserva la versión de escritorio, que a ese ancho ya resuelve. La bifurcación se aplica solo donde cambia la expectativa de uso.

Accesibilidad implementada

Dos decisiones que solo existen en el código.

src/ui/Boton.tsx// focus-visible y no focus, para que el anillo
// no quede fijado tras un clic con el ratón
'focus-visible:outline-2
 focus-visible:outline-offset-2
 focus-visible:outline-tinta-900'

src/movimiento/Revelar.tsxconst menosMovimiento = useReducedMotion()

if (menosMovimiento) {
  // ya visible: la visibilidad nunca queda
  // condicionada a que una animación corra
  return <div>{children}</div>
}

Además: 5,05:1 de contraste sobre el fondo, 3:1 en controles y áreas táctiles de 44 px en 14 componentes.

Trazabilidad con la investigación

Desviaciones respecto al RDA1 y su justificación.

Estado actual · Hallazgos no resueltos

Lo que la auditoría dejó documentado y sigue pendiente.

• Identidad de marca (heurística 6). El logotipo se lee «olsillo»: el símbolo no se reconoce como la letra inicial. Verificado en producción.
• Rotulado de navegación (heurística 2). El enlace «Nosotros» conduce a la sección «Cómo funciona».
• Contraste. El texto reducido de la tarjeta de saldo alcanza 3,94:1 e incumple el nivel AA.
• Cobertura móvil. El panel de control no dispone todavía de versión para celular.

Cada punto está localizado en un archivo concreto y medido. No es una lista de intenciones.

Conclusión

El diseño se sostiene en evidencia, no en preferencia.

• Cada decisión de interfaz responde a un dato de la investigación de usuarios.
• El sistema de diseño existe en el código como un único origen de tokens, no como una guía paralela al producto.
• La evaluación heurística identificó defectos que el análisis estático no detecta, y esos defectos se corrigieron en el código.
• El resultado está en producción y verificable: bolsillo.mashaec.net

Gracias.

Concepto · Anti-patrón

Un anti-patrón es una solución habitual que produce un defecto conocido.

El código funciona: no es un error de sintaxis. Es una decisión tan repetida que ya está catalogada, con su consecuencia documentada. Por eso una herramienta puede detectarlos.

De los 19 detectados, uno resultó falso positivo verificado y otro quedó suprimido: la tipografía «repetida» proviene del UI Kit del proyecto.

Método · Las dos mediciones

Miden cosas distintas, y por eso se aplicaron las dos.

Ninguna regla mecánica puede detectar que una señal desaparece en un dispositivo sin puntero: eso exige recorrer la tarea.

Escala · Cómo se obtiene un 18 sobre 40

Diez heurísticas, cuatro puntos cada una.

Interpretación · Por qué la puntuación es baja

Es una medición de diagnóstico, no una calificación de entrega.

La misma evaluación registró tres fortalezas: el fondo como activo de marca, la disciplina de tokens y una rejilla que crece con el texto en vez de recortarlo.

Responsive · El mecanismo completo

Cómo se detecta el tamaño y quién decide qué se renderiza.

src/pantalla/useTipoPantalla.ts// Espejo de los breakpoints de Tailwind (md = 48rem, lg = 64rem).
const CONSULTAS = {
  celular: '(max-width: 47.999rem)',
  tableta: '(min-width: 48rem) and (max-width: 63.999rem)',
}

// Se llama en el PRIMER render: no hay un fotograma con la versión
// equivocada antes de que un efecto lo corrija.
function leer(): TipoPantalla {
  if (window.matchMedia(CONSULTAS.celular).matches) return 'celular'
  if (window.matchMedia(CONSULTAS.tableta).matches) return 'tableta'
  return 'escritorio'
}

// Reacciona al rotar el dispositivo y al redimensionar la ventana.
export function useTipoPantalla(): TipoPantalla {
  return useSyncExternalStore(suscribir, leer, () => 'escritorio')
}

Y en App.tsx, el valor decide: por debajo de 768 px se monta <AppCelular />, un árbol de componentes distinto.

Responsive · Por qué no basta con una media query

Una consulta de medios cambia estilos. Esto cambia el componente.

El coste de mantener el espejo es un comentario en cada archivo. El coste de no mantenerlo es un fallo que solo aparece en una franja de 32 píxeles.

Resultado · Estado de los hallazgos

Qué pasó con cada uno, verificado en producción.

Una reevaluación daría una puntuación más alta. No la presento como cifra porque no he vuelto a ejecutar el instrumento completo: lo que presento es el estado de cada hallazgo.

Problema

Cada ruta traducía sus propios errores.

try:
    servicio.crear_cuenta(...)
except NombreRepetido:
    raise HTTPException(status_code=409, detail="nombre repetido")
except NoEncontrado:
    raise HTTPException(status_code=404, detail="no existe")
# ...y lo mismo en las otras 56 rutas, cada una con su redacción

El mismo error con distinto formato según el punto de entrada. El cliente no puede confiar en la respuesta.

Herencia

Una clase base que ya conoce su código HTTP.

class DomainError(Exception):
    code = "INTERNAL_ERROR"
    status = 500

class NotFound(DomainError):
    code = "NOT_FOUND"
    status = 404

14 clases de error heredan de una. Cada una porta su propio código y su propio estado.

Polimorfismo

Un único manejador atiende a las catorce.

async def domain_handler(request, exc: DomainError):
    return JSONResponse(
        status_code=exc.status,      # lo aporta la excepción
        content=_cuerpo(exc.code, str(exc)),
    )

El router no captura: lanza y delega. Incorporar un error nuevo no exige modificar ninguna ruta.

Encapsulamiento e inyección de dependencias

El servicio decide; no consulta.

class AccountService:
    def __init__(self, repo: AccountRepository, movimientos: TransactionRepository):
        self._repo = repo               # recibido, nunca construido aquí

    def create_account(self, user_id, datos):
        if self._repo.get_by_name(user_id, datos.name):
            raise AccountNameTaken("ya tienes una cuenta con ese nombre")

Sin una línea de SQL. Y como el repositorio se inyecta, la regla se verifica en pruebas sin base de datos.

Arquitectura y estado pendiente

Cinco capas; cada una habla solo con la inferior.

Modelo

El saldo no se almacena: se deriva.

Restricciones · La más relevante

Una transferencia sin destino elimina dinero del patrimonio.

CONSTRAINT ck_tx_transfer_shape CHECK (
    type <> 'transfer' OR (
        counter_account_id IS NOT NULL      -- tiene destino
        AND category_id IS NULL              -- no es un gasto
        AND account_id <> counter_account_id
    )
);

Sin esta restricción, la operación descuenta de una cuenta sin acreditar en ninguna.

Restricciones · Límite del CHECK

Un CHECK solo evalúa su propia fila.

La regla «un egreso no puede clasificarse con una categoría de ingreso» exige consultar otra tabla, y eso un CHECK no puede hacerlo.

Restricciones · Unicidad con nulos

En SQL, NULL no equivale a NULL.

Un UNIQUE convencional sobre columnas que admiten nulos permite duplicados: dos categorías del sistema homónimas no colisionan porque sus identificadores de usuario son nulos.

CREATE UNIQUE INDEX uq_categories_root ON categories (
    COALESCE(user_id, '00000000-0000-0000-0000-000000000000'::uuid),
    lower(name), kind
) WHERE parent_id IS NULL;

Modelo relacional

No existen tablas pivote, y responde a una decisión.

No hay ninguna relación de muchos a muchos en el modelo.

Índices y tipos

Índice compuesto y parcial sobre la consulta más frecuente.

CREATE INDEX ix_tx_user_date ON transactions (user_id, occurred_at DESC)
    WHERE deleted_at IS NULL;

Búsqueda de texto

Trigramas sobre índice invertido.

Con comodín inicial, un índice B-tree es inservible, y la acentuación impide la coincidencia literal.

Umbral fijado en 0,6: admite erratas en palabras largas y descarta coincidencias espurias en las cortas.