Componentes UI esenciales

Los botones son el componente que más directamente impacta en la conversión. Un sistema de botones bien diseñado tiene una jerarquía clara: primario (acción principal), secundario (acciones alternativas) y terciario o ghost (acciones de baja prioridad). Cada nivel debe diferenciarse visualmente de forma inmediata.

Un botón primario debe tener fondo sólido con el color de acento de la marca, texto contrastado y un tamaño mínimo que invite al clic o tap. Los botones secundarios suelen usar un borde (outline) sin fondo sólido. Los botones ghost se presentan como texto enlace sin borde ni fondo. Es fundamental que cada botón tenga estados visibles: default, hover, active, focus y disabled.

Los formularios son el punto donde más usuarios abandonan. Cada campo adicional aumenta la fricción, por lo que la primera regla es pedir solo la información estrictamente necesaria. Un formulario de contacto con nombre, email y mensaje convierte significativamente más que uno con 10 campos.

Los campos deben tener labels visibles (no solo placeholder text, que desaparece al escribir), estados de validación claros (en tiempo real si es posible), mensajes de error específicos ("El email no tiene formato válido" en vez de "Error en el campo") y una distribución vertical en una sola columna para móvil.

Las cards son contenedores visuales que agrupan información relacionada: un producto, un artículo, un perfil de usuario. Su fuerza está en la escaneabilidad: el usuario puede recorrer una cuadrícula de cards rápidamente y decidir cuál le interesa sin leer todo el contenido.

Una card efectiva tiene una jerarquía interna clara: imagen o elemento visual arriba, título prominente, descripción breve y acción (botón o enlace) al final. El error más común es meter demasiado contenido en una card: si necesitas scroll interno, la card es demasiado compleja y debería ser una página aparte.

Un modal es una ventana superpuesta que bloquea la interacción con el contenido de fondo. Su naturaleza es intrusiva por definición, por lo que debe usarse solo cuando la acción requiere atención inmediata: confirmar una eliminación, aceptar términos, completar un proceso que no puede posponerse.

Los errores más comunes con modales son usarlos para contenido que debería ser una página, anidar modales dentro de modales (experiencia confusa) y no permitir cerrarlos con la tecla Escape o haciendo clic en el overlay. Todo modal debe ser accesible con teclado y tener un foco atrapado (focus trap) para evitar que el usuario tabule fuera de él.

Los dropdowns (select, combobox, menú contextual) son uno de los componentes más problemáticos en interfaces. El select nativo de HTML tiene un estilo que varía entre navegadores y es difícil de personalizar. Los dropdowns custom ofrecen control visual total pero requieren implementar accesibilidad manualmente: navegación con flechas, búsqueda por texto, soporte de screen readers.

Para listas de menos de 5-7 opciones, los radio buttons o segmented controls suelen ser mejores que un dropdown porque hacen visibles todas las opciones sin interacción adicional. Los dropdowns se justifican cuando hay más de 7 opciones o cuando el espacio es limitado.

Las tablas son el mejor componente para mostrar datos comparativos o tabulares: listados de productos, registros de usuarios, transacciones financieras. En desktop, una tabla bien diseñada con columnas alineadas, filas alternas en color y cabeceras fijas es extremadamente eficiente para escanear datos.

El reto está en la responsividad. Las tablas con muchas columnas no funcionan en móvil. Las estrategias más comunes son: scroll horizontal con la primera columna fija, layout de tarjetas (cada fila se convierte en una card), o mostrar solo las columnas esenciales con un botón "ver más" para los detalles.

Los tooltips son pequeñas cajas de texto que aparecen al hacer hover sobre un elemento para ofrecer contexto adicional. Son útiles para explicar iconos sin label, mostrar atajos de teclado o aclarar campos de formulario sin saturar la interfaz con texto permanente.

El problema principal de los tooltips es que dependen del hover, que no existe en dispositivos táctiles. La alternativa en móvil es el popover, que se activa con tap y permanece visible hasta que se cierra. Los tooltips deben contener solo texto breve; si necesitas contenido más complejo (imágenes, enlaces, formularios), un popover o un modal son más apropiados.