24 may 2025·8 min de lectura

Patrones de UI para pantallas de conciliación en operaciones financieras

Patrones de UI para pantallas de conciliación que ayudan a los equipos de operaciones a detectar desajustes, revisar evidencias, aplicar correcciones controladas y mantener un registro de auditoría limpio.

Patrones de UI para pantallas de conciliación en operaciones financieras

Qué debe resolver una pantalla de conciliación

Una pantalla de conciliación existe para responder una pregunta práctica: cuando dos fuentes no coinciden, ¿cuál es la verdad que vamos a reportar y sobre la que operaremos?

Normalmente comparas una “fuente” (feed bancario, procesador de pagos, POS, sublibro, sistema de almacén) contra tu “libro de registro” (a menudo el libro mayor). La pantalla no es solo una vista comparativa. Es el lugar donde se toman y registran las decisiones.

Los desajustes ocurren por motivos mundanos, y eso es buena noticia porque la interfaz puede anticiparlos. Verás diferencias causadas por retrasos en contabilizaciones, elementos faltantes, duplicados, problemas de mapeo (cuenta equivocada, cliente, moneda) y coincidencias parciales donde un registro de un lado equivale a varios del otro.

El trabajo del usuario en una buena configuración de pantalla de conciliación es mover cada excepción de “incierta” a “resuelta” sin adivinar. Esa tarea se suele descomponer en acciones repetibles:

  • Confirmar que se trata de la misma transacción (o no), con suficiente contexto para decidir rápido
  • Elegir una resolución: emparejar, dividir, fusionar, dar de baja o marcar como pendiente
  • Aplicar la corrección en el sistema correcto, con la razón adecuada
  • Dejar una nota clara para que la siguiente persona entienda por qué se hizo

El mayor riesgo no es una coincidencia incorrecta, sino un cambio silencioso. Si la pantalla permite editar valores sin mostrar qué cambió, quién lo cambió y qué registros se vieron afectados, se pierde la confianza y se pierde tiempo durante las auditorías.

Diseña la pantalla de modo que cada resolución produzca un resultado rastreable: valores antes/después, registros fuente vinculados, marca temporal, usuario y código de razón. Si se requieren aprobaciones, la UI debe dejar el estado “necesita aprobación” obvio para que el trabajo no desaparezca en una zona gris.

Si más adelante construyes esto en una herramienta como AppMaster, trata el registro de auditoría como un modelo de datos de primera clase, no como una nota al margen. Tu cierre de mes futuro te lo agradecerá.

Una estructura de página simple que escala

Una pantalla de conciliación funciona mejor cuando se siente como una lista de verificación tranquila, incluso cuando los datos están desordenados. La forma más fácil de lograrlo es un diseño claro de tres partes: Resumen arriba, Cola de trabajo a la izquierda (o centro) y Detalles a la derecha.

El Resumen responde “¿estamos cerca?”. Muestra totales para cada lado (conteo y monto), luego el delta en ambas unidades. La gente debería ver, de un vistazo, si están desfazados por 3 ítems, $124.18 o ambos. Si puedes, incluye una pequeña tendencia como “delta mejoró desde el último guardado” para que los revisores sepan que su trabajo está moviendo la aguja.

La Cola de trabajo es donde vive la escala. Mantén búsqueda y filtros visibles todo el tiempo para que los usuarios no tengan que abrir paneles extras para hacer trabajo básico. Una lista simple de filas con un chip de estado (Nuevo, En revisión, Corregido, Requiere aprobación) suele ser suficiente.

Aquí hay una estructura clara usada en muchas pantallas de conciliación:

  • Barra de resumen: totales izquierdo, totales derecho, delta centrado
  • Control de ventana temporal: “Últimos 7 días” por defecto con expansión rápida a 30/90/personalizado
  • Campo de búsqueda siempre visible y filtros clave (estado, rango de importe, fuente)
  • Lista de cola de trabajo con ordenamiento y un atajo “siguiente ítem”
  • Panel de detalles con registros lado a lado y botones de acción

Por defecto, usa la ventana temporal más pequeña útil. Por ejemplo, empieza con los últimos 7 días para mantener la cola corta y rápida, y deja que los usuarios expandan con un clic cuando necesiten el mes completo. Esto reduce ruido y ayuda a los revisores nuevos a ganar confianza.

Si lo construyes en una herramienta como AppMaster, mantiene el diseño consistente entre web y móvil: las mismas tres zonas, solo apiladas en pantallas pequeñas, para que la formación y la memoria muscular se trasladen.

Cómo mostrar desajustes para que la gente decida rápido

Una buena vista de desajustes responde tres preguntas en segundos: qué está mal, qué gravedad tiene y qué debo hacer a continuación. Si la pantalla obliga a abrir tres modales solo para entender una diferencia, la gente dudará, adivinará o dejará notas para más tarde.

Empieza usando un conjunto pequeño y coherente de tipos de desajuste en todo el producto. Esa consistencia importa más que la formulación perfecta, porque los revisores desarrollan memoria muscular. La mayoría de los equipos cubren el 90% de los casos con cuatro etiquetas: elemento faltante, elemento extra, monto difiere y fecha difiere. Pon el tipo al inicio de la fila para que la gente no lo busque.

La severidad debe ser obvia pero comedida. Prefiere etiquetas simples como “Alta”, “Media”, “Baja” (o “Bloquea cierre”, “Requiere revisión”, “FYI”) con color contenido. Usa el color como pista, no como mensaje. Reserva el rojo fuerte para casos que realmente detienen el cierre del periodo y mantén todo lo demás neutral.

Los revisores también necesitan el “por qué”, pero no en jerga interna. Muestra una línea corta de razón que haga referencia a lo que el sistema encontró, como “Coincidió por referencia, monto difiere” o “No se encontró asiento en el libro mayor para la transacción bancaria”. Si hay reglas involucradas, muestra el nombre de la regla solo si ayuda, e incluye las diferencias clave de campos en términos comprensibles.

Mantén visibles los valores crudos y normalizados juntos. La normalización (redondeo, conversión de moneda, recorte de espacios, cambios de zona horaria) es común, y ocultarla genera desconfianza. Un diseño práctico es una comparación de dos columnas dentro de cada fila de desajuste:

  • Fuente A (crudo): tal como se importó (banco, procesador, archivo)
  • Fuente B (crudo): tal como se importó (libro, ERP, sublibro)
  • Normalizado: los valores usados para emparejar, con un pequeño tooltip “i” que explique la transformación
  • Delta: una diferencia calculada única (por ejemplo, “+$12.30” o “2 días”)

Si lo construyes con una herramienta como AppMaster, modela el tipo de desajuste y la severidad como enums en la capa de datos, para que cada lista, filtro y panel de detalle sea coherente en todo el flujo de revisión.

Patrones de cola de trabajo para revisión de alto volumen

Cuando el volumen es alto, una cola de conciliación debe comportarse más como una bandeja de entrada que como un informe. Las personas deben entender cada fila en un segundo, decidir qué hacer y seguir avanzando sin perder contexto.

Empieza con columnas que respondan “qué es” antes de “qué significa”. Si puedes, mantén la primera pantalla con lo esencial y lleva los detalles al panel lateral.

  • Referencia o ID (ID transacción banco, ID asiento)
  • Fecha y periodo
  • Importe y moneda
  • Contraparte o cuenta
  • Estado (abierto, en revisión, esperando aprobación, resuelto)

El ordenamiento debe coincidir con la forma de pensar de los revisores. Un buen valor por defecto es “mayor delta primero” porque saca a la superficie el mayor riesgo rápidamente. Añade conmutadores rápidos para recientes, pendientes más antiguos y “revisados recientemente” para facilitar los traspasos.

Las vistas guardadas son lo que permite escalar una cola entre roles. Un analista puede querer “abiertos + auto-coincidencia fallida”, un aprobador “solo esperando aprobación” y un auditor “resueltos en este periodo con ediciones manuales”. Mantén las vistas obvias y con nombres claros para que la gente no termine creando sus propias hojas de cálculo.

La selección masiva puede ahorrar mucho tiempo, pero solo si tiene salvaguardas. Deja claros los límites (por ejemplo, máximo 50 ítems), muestra qué campos cambiarán y advierte cuando las acciones sean irreversibles. Un paso de vista previa simple evita errores masivos.

Los indicadores de progreso mantienen al equipo alineado. Muestra conteos por estado arriba y hazlos filtros clicables. Mejor aún, muestra la propiedad (sin asignar vs asignado a mí) para evitar trabajo duplicado.

Estos patrones son sencillos de construir con una herramienta visual como AppMaster: una tabla de cola, filtros guardados por rol y chips de estado dan velocidad a los equipos financieros sin sacrificar control.

Un flujo paso a paso que reduce retrabajo

Añade salvaguardas para correcciones
Guía bajas y ajustes con validaciones, permisos y acciones reversibles.
Construir con seguridad

Un buen flujo de conciliación trata menos sobre visuales llamativos y más sobre evitar que la gente salte por la pantalla. El objetivo es guiar al revisor desde “¿Qué cambió?” hasta “¿Qué hicimos al respecto?” sin perder contexto.

Comienza haciendo el Paso 1 inevitable: elegir un periodo de conciliación y las fuentes de datos exactas. Colócalos en la parte superior de la página y mantenlos visibles después de la selección (periodo, fuente A, fuente B, última actualización). La mayoría del retrabajo ocurre cuando alguien revisa desajustes contra una extracción equivocada.

El Paso 2 es el escaneo de 30 segundos. Muestra el delta total, el conteo de ítems sin emparejar y las principales categorías de desajuste (transacción faltante, diferencia de monto, desplazamiento de fecha, duplicado). Cada categoría debe ser clicable para filtrar la lista de trabajo.

El Paso 3 es donde importa la velocidad: abre un ítem y compara campos lado a lado. Mantén los campos clave alineados (importe, fecha, referencia, contraparte, moneda, cuenta) y muestra la evidencia ahí mismo: fila de importación cruda, asiento en el libro y cualquier documento adjunto. Evita ocultar evidencia detrás de pestañas extra.

El Paso 4 es el punto de decisión. La UI debe presentar un conjunto pequeño de acciones con resultados claros:

  • Emparejar: vincular dos registros y bloquear el par
  • Dividir: mapear un registro a varias líneas con totales forzados
  • Dar de baja: crear un asiento de ajuste con razón obligatoria
  • Escalar: asignar a un rol o persona con fecha límite
  • Ignorar: marcar como no conciliable con nota obligatoria

El Paso 5 es responsabilidad. Requiere una nota corta para todo lo que no sea una coincidencia limpia y solo desencadena aprobación cuando las reglas lo indiquen (por ejemplo, bajas por encima de un umbral o cualquier ajuste a un sublibro cerrado). Muestra quién aprobará antes de enviar, para que el revisor no tenga que adivinar.

El Paso 6 cierra el ciclo. Tras enviar, confirma qué cambió (“Emparejado con Asiento #48321”, “Ajuste redactado”) y muestra inmediatamente la entrada de auditoría: marca temporal, usuario, acción, campos antes/después y estado de aprobación. Un revisor nunca debería preguntarse si su clic “surti efecto”.

Herramientas de corrección con salvaguardas

Las correcciones son donde aparecen errores y riesgos de fraude, por lo que la UI debe hacer que las acciones más seguras sean las más fáciles. Una buena regla: permite avanzar el trabajo sin cambiar balances al principio, y exige más intención cuando sí se altera el dinero.

Comienza con acciones “seguras” que no alteran saldos. Estas reducen idas y vueltas y mantienen las decisiones visibles:

  • Vincular registros (línea bancaria con asiento) sin editar ninguno de los dos
  • Añadir una anotación que explique lo observado y lo que se necesita
  • Solicitar información al propietario (factura faltante, referencia errónea, contraparte no clara)
  • Marcar para revisión cuando algo no cuadra
  • Aparcar el ítem para más tarde con una razón clara

Cuando el usuario necesite crear un ajuste, usa un formulario guiado en lugar de un campo de texto libre. El formulario debe dificultar olvidar lo básico y facilitar la revisión posterior. Aquí es donde también previenes “arreglos rápidos” que crean problemas mayores al cierre de mes.

Mantén las acciones destructivas detrás de permisos y una confirmación clara. Por ejemplo, “Eliminar ajuste” debe ser raro, basado en roles y requerir una razón. Prefiere acciones que creen un nuevo registro en lugar de editar el historial.

La validación debe ocurrir antes de guardar y el mensaje debe explicar cómo corregirlo. Una lista de verificación simple funciona bien:

  • Campos obligatorios: código de razón, importe, fecha efectiva
  • Chequeos de balance: el ajuste lleva la diferencia dentro de la tolerancia
  • Adjuntos cuando se necesitan: captura, nota del proveedor, mensaje bancario
  • Chequeos de política: tipo de ajuste permitido para esta cuenta y periodo
  • Comprobación de duplicados: ajuste similar ya existe para la misma referencia

Haz explícito el comportamiento de deshacer. Los usuarios deben saber si pueden reabrir el ítem, revertir el ajuste o crear una contrapartida. Ejemplo: un revisor vincula la línea bancaria equivocada y luego se da cuenta de que la coincidencia pertenece a otro pago. Un claro “Desvincular” (con nota) es más seguro que editar la transacción original y preserva una historia limpia de lo ocurrido y por qué.

Registro de auditoría y aprobaciones sin frenar al equipo

Estandariza las etiquetas de desajuste
Mantén tipos y severidades de desajuste consistentes entre listas, filtros y detalles.
Definir tipos

Un registro de auditoría solo ayuda si responde preguntas rápido: quién tocó este ítem, qué cambió y por qué. El truco es hacerlo visible cuando se necesita, pero sin bloquear el flujo normal de revisión.

Haz las acciones legibles, no solo almacenadas

Añade una línea de tiempo compacta en el panel de detalles del ítem. Cada entrada debe mostrar el actor, la marca temporal, la acción y un resumen corto del cambio. Manténlo escaneable y consistente, para que los revisores detecten el último evento importante (por ejemplo “importe corregido” o “aprobado”) de un solo vistazo.

Cuando un campo se corrige, guarda y muestra ambos valores: antes y después. Muéstralos en línea en la entrada de la línea de tiempo (por ejemplo: “Importe bancario: 1,250.00 -> 1,205.00”) y también en el historial del campo si alguien abre “Detalles de cambio”. Esto evita el error común de conservar solo el valor final.

Aprobaciones que formen parte del flujo

Para acciones de mayor riesgo (baja, sobrescritura manual, emparejamiento forzado), exige una razón. Usa un menú desplegable corto más una nota opcional, para que el revisor avance rápido pero deje una explicación clara.

El esquema maker-checker funciona mejor cuando es por estados, no por mensajes. Usa estados simples como Borrador, Enviado, Necesita info, Aprobado, Rechazado, Escalado y muestra el estado actual cerca del título del ítem. Mantén la UI de aprobaciones ajustada:

  • Una acción primaria (Enviar o Aprobar) según el rol
  • Una acción secundaria (Solicitar info o Rechazar)
  • Una razón obligatoria cuando la política lo exige
  • Un asignado/cola para escalaciones
  • Una etiqueta clara de “qué pasa después” (por ejemplo: “Se registrará la corrección al aprobar”)

Finalmente, mantiene la evidencia adjunta al propio ítem de conciliación: archivos subidos, referencias de email o chat, IDs externos y notas. Un revisor no debe tener que buscar en otros sistemas para justificar una decisión. En herramientas como AppMaster, esto se mapea naturalmente a un registro “Reconciliation Item” con entidades relacionadas “Evidence” y “Approval Events”, de modo que la UI siga simple y los datos completos.

Casos límite que rompen diseños ingenuos

Despliega según tus condiciones
Lanza en AppMaster Cloud o exporta el código fuente para tu propia infraestructura.
Desplegar ahora

La mayoría de las pantallas de conciliación funcionan hasta que aparecen datos reales. Los puntos de ruptura son previsibles, por lo que ayuda diseñarlos desde el principio.

Las coincidencias parciales son la primera trampa. Una tabla limpia de uno a uno se desmorona cuando una transferencia bancaria paga tres facturas o cinco liquidaciones con tarjeta se agrupan en un asiento. Trata estos casos como de primera clase: permite a los revisores crear una coincidencia agrupada con un total visible, un indicador de “monto no asignado” y una etiqueta de grupo clara (por ejemplo, “3 ítems -> 1 asiento”). Haz el grupo expandible para que la gente confirme las partes sin perder el resumen.

Los duplicados son la segunda trampa. La gente a menudo “arregla” duplicados emparejando los ítems equivocados. Añade pistas suaves como “posible duplicado” basadas en importe, ventana de fechas y contraparte, pero mantenlo seguro: los revisores deben poder abrir una vista comparativa, elegir el registro correcto y marcar el otro como duplicado con una razón. Si ofreces fusión, que sea reversible y conserva siempre los IDs originales.

Las diferencias de moneda y redondeo son comunes y no deben parecer errores. Muestra el cálculo exacto (tasa, comisión, redondeo) y permite umbrales configurables (por moneda, cuenta o tipo de transacción). La UI debe decir “dentro de tolerancia” vs “requiere acción”, no solo “coincide/no coincide”.

Los asientos realizados fuera de fecha pueden confundir el cierre del periodo. Cuando un ítem se resuelve después del cierre, no reescribas la historia. Muéstralo como “resuelto después del cierre” con la fecha de resolución y exige nota o aprobación si cambia un número de periodo cerrado.

Por último, ocurren caídas y feeds faltantes. Añade estados que faciliten volver más tarde:

  • “Feed retrasado” con próxima ejecución estimada
  • “Registro fuente faltante” con quién contactar
  • “Verificado manualmente” con revisor y marca temporal
  • “Necesita reimportación” con acción de reintento

Si construyes esto en AppMaster, modela estos estados en el Data Designer y aplica transiciones permitidas en el Business Process Editor, para mantener el manejo de casos límite consistente y auditable.

Ejemplo: conciliación banco vs libro mayor en cierre de mes

Es fin de mes. Tu extracto bancario muestra $248,930.12 en actividad para abril, pero tu libro interno totaliza $249,105.12. La pantalla de conciliación se abre con un Resumen que responde tres preguntas rápido: cuántos ítems coinciden, cuántos están desajustados y cuánto dinero queda sin resolver.

En el panel Resumen, el usuario ve: 1,284 ítems emparejados, 3 desajustes y una diferencia no resuelta de $175.00. Un pequeño aviso muestra “2 ítems necesitan acción” porque uno de los desajustes es solo informativo.

La tabla de desajustes agrupa por tipo y hace obvio el siguiente paso:

  • Comisión bancaria no registrada: $25.00 (Acción necesaria)
  • Pago duplicado en el libro: $150.00 (Acción necesaria)
  • Retraso de contabilización: $0.00 de diferencia (Info, pendiente de liquidación)

Cuando el usuario hace clic en una fila, se abre Detalle del Ítem a la derecha. Para la comisión de $25.00, Detalle del Ítem muestra la línea bancaria (fecha, descripción, importe) junto al lado del libro (no se encontró asiento coincidente) más una solución sugerida: “Crear asiento de gasto: Comisiones bancarias.” El usuario selecciona la razón de corrección, añade una nota y adjunta la línea del extracto como evidencia.

Para el pago duplicado de $150.00, Detalle del Ítem muestra dos asientos que están emparejados con un pago bancario. El usuario marca uno de los asientos del libro como duplicado, elige “Reversar asiento” y la pantalla crea una transacción reversa propuesta. Como esto cambia la contabilidad, se envía a aprobación: el estado pasa a “Pendiente de aprobación” y el desajuste deja de contar como “No revisado”.

El retraso de contabilización luce distinto. El banco muestra un pago iniciado el 30 de abril que se liquida el 1 de mayo. El usuario marca la resolución como “Diferencia de timing”, indica la fecha esperada de liquidación y el ítem pasa a “Apertura para periodo siguiente”.

Más tarde, un auditor debe poder confirmar, sin adivinar:

  • Quién revisó cada desajuste, quién lo aprobó y cuándo
  • Los valores antes y después de cualquier asiento editado o reverso
  • El código de razón, notas y evidencias vinculadas al estado de resolución
  • Que abril se cerró con solo correcciones aprobadas y que las partidas pendientes fueron marcadas explícitamente

Verificaciones rápidas antes de cerrar un periodo

Modela los registros de auditoría primero
Usa Data Designer para capturar valores antes/después, usuarios, razones y aprobaciones en un solo lugar.
Probar AppMaster

Cerrar un periodo es donde pequeñas fallas en la UI se convierten en grandes dolores después. Una buena lista de cierre debe ser visible en pantalla, fácil de verificar y difícil de saltarse por accidente.

Empieza por los totales. Muestra conteo y monto por fuente para el periodo y deja claro qué cifra provoca el desajuste (por ejemplo, “3 ítems, $1,240.00” en cada lado). Si los totales coinciden pero los conteos no, señálalo claramente para que los revisores no asuman que ya terminaron.

Antes del cierre, cada excepción debe tener un estado final y una razón que alguien más pueda entender semanas después. “Resuelto” no basta sin una nota como “cargo duplicado revertido” o “diferencia de timing, se limpiará el próximo periodo”. Este patrón evita trabajo repetido.

Usa una lista de verificación corta de pre-cierre y bloquea el cierre si falla cualquiera de estas:

  • Totales coinciden para el periodo (conteos y montos entre fuentes)
  • Cada excepción tiene un estado final (resuelto, aceptado, diferido) y una razón
  • No hay aprobaciones pendientes para ítems dentro del periodo
  • Revisión aleatoria completada: 5 ítems resueltos tienen evidencia y notas claras
  • Snapshot/export disponible para reproducir el estado del periodo más tarde

La revisión aleatoria es simple pero poderosa. Abre cinco ítems resueltos al azar y verifica tres cosas: la evidencia (línea de estado, recibo, registro del sistema), la acción de corrección (qué cambió) y la nota (por qué fue válida). Si falta alguna, la UI está enseñando el hábito equivocado.

Finalmente, haz el periodo reproducible. Ofrece un “snapshot” que congele totales clave, estados de excepción, notas y aprobaciones. En AppMaster, esto puede ser un registro “Period Close” generado por un Business Process, de modo que la vista de auditoría coincida con lo que los revisores vieron al cerrar.

Siguientes pasos: convertir estos patrones en una pantalla funcional

Empieza por los datos, no por el diseño. Una pantalla de conciliación se complica cuando el sistema no puede explicar claramente qué es un registro y cómo se relaciona con otros. Define un modelo pequeño que puedas ampliar más tarde: tus archivos/feeds fuente, las transacciones individuales, los grupos de coincidencia que conectan ítems entre fuentes y los ajustes que creas para corregir diferencias. Añade campos necesarios para la revisión (importe, moneda, fechas, texto de referencia) además de los aburridos pero críticos (estado, responsable, timestamps).

Luego fija los roles desde temprano. La mayoría de los equipos necesitan al menos tres: un analista que proponga coincidencias y correcciones, un aprobador que firme ajustes y un auditor que pueda ver todo sin modificar nada. Si dejas los permisos para después, terminarás rehaciendo acciones clave (editar, deshacer, reabrir) cuando llegue la primera revisión de controles.

Después, prototipa las tres superficies que impulsan el trabajo real:

  • Una cola que muestre qué necesita atención y por qué (sin emparejar, desbalance, esperando aprobación).
  • Un panel de detalles que permita decidir rápido (ítems lado a lado, deltas, coincidencias sugeridas).
  • Una línea de tiempo de auditoría que se lea como una historia (quién hizo qué, cuándo y con qué valores antes/después).

Define las transiciones de estado como reglas, no como costumbres. Por ejemplo, un grupo no debería pasar a “Conciliado” a menos que la diferencia restante sea cero (o esté dentro de una tolerancia establecida), todos los campos requeridos estén presentes y las aprobaciones completas. Permite excepciones, pero fuerza un código de razón y un comentario para mantener limpio el registro de auditoría.

Para construir rápido, usa una plataforma no-code como AppMaster: modela la base de datos en Data Designer con PostgreSQL, arma la cola y los paneles con el constructor web y aplica las reglas del flujo en el editor visual de Business Process. Mantén la primera versión estrecha (un par de fuentes, pocos estados), pruébala con casos reales de cierre de mes e itera según los desajustes que tu equipo realmente vea.

Fácil de empezar
Crea algo sorprendente

Experimente con AppMaster con plan gratuito.
Cuando esté listo, puede elegir la suscripción adecuada.

Empieza