UI para SaaS y software B2B: densidad, productividad y claridad en el día a día

Cuando nos sentamos con el equipo de administración de una gestoría para entender su software de facturación, lo primero que hicimos fue mirar. Durante una hora observamos a una persona trabajar. Abrió la misma pantalla de clientes más de treinta veces, usó el ratón para todo, copió y pegó datos entre dos pestañas y, cuando quiso cambiar el estado de doce facturas, lo hizo una a una. Nada estaba roto. Simplemente, el software estaba diseñado para el primer día de uso y ella llevaba seis años usándolo.

Esa es la gran particularidad del software B2B y de los SaaS profesionales: sus usuarios pasan horas dentro, repiten las mismas tareas cientos de veces y se convierten en expertos. Una interfaz pensada como una web de marketing, con mucho aire, tarjetas grandes y un paso por pantalla, se les queda corta. Pero tampoco vale lo contrario, la pantalla atiborrada que solo entiende quien la diseñó, porque cada mes llegan personas nuevas.

Esta guía recoge cómo trabajamos ese equilibrio: densidad que se adapta, navegación para productos con muchas entidades, herramientas para usuarios expertos, permisos y configuración, y una entrada amable para quien empieza.

01Qué hace diferente al diseño B2B

Antes de entrar en patrones, conviene tener presentes cuatro diferencias con el diseño de consumo:

• →Uso intensivo y repetido. La misma tarea, decenas de veces al día. Cada clic de más se multiplica.
• →Quien compra no siempre es quien usa. Dirección o IT decide la compra viendo una demo; el equipo vive con el producto. El diseño tiene que convencer en la demo y servir en el día a día.
• →Datos complejos y relacionados. Clientes, proyectos, facturas, tareas, usuarios, todo conectado. La arquitectura de la información pesa tanto como la estética.
• →Consecuencias reales. Un error al borrar o enviar algo puede afectar a dinero, clientes o datos de otras personas. La interfaz tiene que dar confianza y red de seguridad.

Ninguna de estas diferencias justifica una interfaz fría o fea. Al contrario: un software agradable de usar reduce la fatiga de las jornadas largas, y el cuidado visual transmite fiabilidad, algo que pesa mucho en la decisión de compra.

02Densidad de información: más datos, mismo orden

La densidad es la cantidad de información visible por pantalla. En B2B suele ser alta, y eso está bien siempre que se mantenga el orden.

Niveles de densidad

Muchos productos profesionales ofrecen dos o tres niveles de densidad que la persona elige. Estas son las referencias con las que solemos trabajar:

Al reducir la altura visible de botones y campos en modo compacto, el área clicable puede seguir siendo mayor que el dibujo. Para ratón es menos crítico que en táctil, pero WCAG 2.2 fija un objetivo mínimo de 24 × 24 px CSS en su nivel AA, y conviene respetarlo también en las versiones densas.

Lo que hace que la densidad funcione

• →Alineación rigurosa. En una pantalla densa, las columnas alineadas son lo que permite escanear. Números a la derecha, texto a la izquierda, todo sobre una rejilla, idealmente con un sistema de espaciado de 8 puntos o su variante de 4.
• →Jerarquía tipográfica con pocos tamaños. Dos o tres tamaños, apoyados en peso y color, en lugar de muchos tamaños distintos.
• →Color contenido. La interfaz en neutros y el color reservado para estado (error, aviso, éxito) y acción principal. Así, lo que tiene color significa algo.
• →Divulgación progresiva. Lo esencial visible; el detalle en paneles laterales, filas expandibles o información emergente.
• →Tipografía con cifras tabulares. Las fuentes con números de ancho fijo hacen que las columnas de cifras se alineen perfectamente. En CSS se activa con font-variant-numeric: tabular-nums.

Las tablas son el corazón de muchos SaaS. Les dedicamos una guía completa sobre diseño de tablas de datos, con alineación, ordenación, filtros y acciones por fila.

03Navegación para productos con muchas entidades

Un SaaS crece. Lo que empieza con cinco secciones acaba con veinte, más configuración, más integraciones. La navegación tiene que soportar ese crecimiento.

Estructura habitual

• →Barra lateral para las secciones principales, colapsable a iconos para ganar espacio. Admite crecer mejor que una barra superior.
• →Selector de espacio de trabajo o cuenta arriba de la barra lateral cuando la persona trabaja con varias empresas o proyectos.
• →Migas de pan cuando hay niveles (Cliente › Proyecto › Tarea).
• →Cabecera de página con título, estado del objeto y acciones principales siempre en el mismo lugar.
• →Configuración separada del trabajo diario, en su propio espacio con su propia navegación.

Vistas guardadas y filtros

Una de las funcionalidades más valoradas por usuarios expertos es poder guardar una combinación de filtros, columnas y orden como vista propia («Mis facturas pendientes de este mes») y, si el producto lo permite, compartirla con el equipo. Convierte una búsqueda que se repite cada día en un clic.

04Herramientas para usuarios expertos

Aquí está la diferencia entre un software correcto y uno que la gente defiende con cariño.

1. 01Atajos de teclado para las acciones frecuentes: crear (C), buscar (/), navegar entre elementos (J/K o flechas), abrir (Intro), cerrar (Esc). Con una pantalla de ayuda que los muestre, normalmente con la tecla «?».
2. 02Paleta de comandos con Cmd+K o Ctrl+K: un buscador universal de acciones, objetos y pantallas. Da velocidad sin añadir ni un botón a la interfaz.
3. 03Acciones masivas. Seleccionar varias filas y aplicar una acción a todas: cambiar estado, asignar, exportar, archivar. Con un contador visible («12 seleccionadas») y la barra de acciones cerca de la selección.
4. 04Edición en línea. Cambiar un valor directamente en la tabla, sin abrir una ficha, para los campos que se editan a menudo.
5. 05Deshacer en lugar de confirmar. Para acciones reversibles, ejecutar al momento y ofrecer «Deshacer» durante unos segundos es más rápido que un diálogo de confirmación en cada acción. Los diálogos se reservan para lo irreversible o lo que afecta a otras personas.
6. 06Duplicar y plantillas. Partir de algo existente en lugar de rellenar desde cero.
7. 07Velocidad percibida. Respuestas inmediatas y actualizaciones optimistas, que muestran el resultado antes de que el servidor confirme. Walter Doherty y Ahvie Thadani describieron en 1982 cómo la productividad aumenta cuando el sistema responde en menos de unos 400 ms; sigue siendo una buena referencia para interacciones frecuentes.

05Permisos, roles y configuración

En B2B casi siempre hay varias personas con distintos niveles de acceso. Cómo se representa eso en la interfaz influye mucho en la experiencia.

• →Roles explicados. En la pantalla de invitar a alguien, cada rol con una frase de lo que puede hacer («Editor: puede crear y modificar proyectos, pero no gestionar la facturación»).
• →Acciones no disponibles con motivo. Un botón desactivado sin explicación genera frustración. Lo que funciona es mostrarlo con un mensaje breve («Solo los administradores pueden exportar. Pide acceso a Laura») o, si nunca será relevante para ese rol, ocultarlo.
• →Configuración por niveles. Ajustes de la organización, del equipo y personales, claramente separados.
• →Historial de actividad. Quién cambió qué y cuándo. Da tranquilidad y resuelve dudas sin preguntar.
• →Valores por defecto sensatos. La mayoría de cuentas no cambian casi nada de la configuración, así que lo que viene de serie debería ser lo adecuado para la mayoría.

06Onboarding: la primera semana importa

En B2B, si el equipo no adopta la herramienta en las primeras semanas, la empresa no renueva. Por eso la entrada merece tanto cuidado como el uso experto.

• →Primer valor rápido. Identificar la acción que hace que alguien «entienda» el producto (crear el primer proyecto, importar los clientes, enviar la primera factura) y llevar hasta ella con el menor esfuerzo.
• →Datos de ejemplo que se pueden borrar con un clic, para que las pantallas no estén vacías el primer día.
• →Importación sencilla desde hojas de cálculo u otras herramientas, con vista previa y corrección de errores.
• →Estados vacíos que enseñan, con una frase y una acción clara.
• →Ayuda en contexto en lugar de un tour de diez pasos al entrar.

Lo desarrollamos con más calma en la guía de onboarding de producto digital.

07La marca dentro de una herramienta de trabajo

Una duda frecuente al diseñar un SaaS es cuánta marca cabe en una interfaz donde manda la función. Más de la que parece, siempre que se coloque en los lugares adecuados.

La marca vive con naturalidad en la tipografía (una familia bien elegida para interfaces, con buenas cifras y varios pesos, aporta carácter en cada pantalla), en el color de acción principal, en los iconos, en la ilustración de estados vacíos y celebraciones, y en el tono de los textos. Un mensaje como «Todo al día: no tienes facturas pendientes» dice mucho de quién está detrás del producto.

Donde conviene contenerse es en el área de trabajo: tablas, formularios y paneles necesitan neutralidad para que los datos sean protagonistas. Un fondo con textura o un color de marca muy saturado detrás de una tabla cansa a las dos horas.

Hay además un momento en el que la marca pesa especialmente: la demo comercial. Quien decide la compra suele ver el producto durante media hora, y ahí la coherencia entre la web de marketing, las presentaciones y el propio software transmite solidez. Si la web promete un producto moderno y cuidado y la demo muestra otra cosa, la confianza se resiente. Por eso, cuando trabajamos un SaaS, solemos revisar a la vez la identidad, la web y la interfaz, para que cuenten la misma historia.

Por último, piensa en las jornadas largas. Un modo oscuro bien resuelto, una opción de tamaño de texto y contrastes cómodos (al menos 4,5:1 en textos, como pide WCAG) se agradecen mucho a las seis de la tarde.

08Ejemplo resuelto: la pantalla de facturas de la gestoría

Volvamos al software del principio. Estos fueron los cambios en la pantalla de facturas, por orden de impacto:

1. 01Tabla con densidad estándar por defecto y opción compacta, cifras tabulares alineadas a la derecha y columna de estado con color y texto.
2. 02Selección múltiple con barra de acciones: marcar como cobradas, enviar recordatorio, exportar.
3. 03Vistas guardadas: «Pendientes de cobro», «Vencidas», «Este trimestre», creadas por defecto y editables.
4. 04Panel lateral para ver una factura sin perder la lista, con navegación entre facturas con las flechas.
5. 05Paleta de comandos con búsqueda de clientes y facturas por número o nombre.
6. 06«Deshacer» durante ocho segundos al archivar, en lugar del diálogo de confirmación.

La persona a la que observamos el primer día cambió el estado de sus doce facturas en tres clics. Fue ella quien pidió que formáramos al resto del equipo.

09Diseñar herramientas que la gente quiera usar

El buen software B2B no se nota cuando funciona: se nota en que la jornada pesa menos. Es un diseño de respeto por el tiempo de las personas, y por eso tiene tanto que ver con observar cómo trabajan como con dibujar pantallas.

En SIMA diseñamos y desarrollamos software a medida y SaaS dentro de nuestro servicio de desarrollo web y apps con IA, siempre empezando por sentarnos junto a quien lo va a usar. Si tu equipo trabaja con una herramienta que podría ahorrarle horas, escríbenos y la miramos juntos.