web design uiMay 1, 202610 min read

El problema de la página de ajustes

Las páginas de ajustes son donde la integridad de un producto va a morir. Cinco arquetipos, seis reglas, ejemplos reales de Linear, Notion, Vercel y una auditoría lista para aplicar.

By Boone
XLinkedIn
the settings page problem

La página de ajustes es la pantalla más honesta de tu producto. Muestra, en un solo scroll, exactamente qué decisiones se negó a tomar el equipo. Cada interruptor es una discusión fosilizada. Cada pestaña anidada es un "ya lo resolveremos luego" que nadie resolvió.

La mayoría de las páginas de ajustes son vertederos. Tres años de interruptores tirados por ingenieros que no supieron decir que no, marketers que necesitaban un opt-out y PMs que trataron "hagámoslo configurable" como sustituto de "decidamos". El resultado es una pantalla que al equipo le da vergüenza mostrar en una demo y que al usuario le da miedo tocar.

Este es el argumento para tratar los ajustes como una superficie de producto de primera clase. Cinco arquetipos, seis reglas, ejemplos reales de productos que ya usas y una auditoría para ejecutar antes de lanzar.

Los ajustes son la pantalla que delata al equipo

La proliferación de ajustes es un indicador adelantado de disfunción organizacional. Cuando un equipo no logra alinearse sobre un valor por defecto, el interruptor se lanza. Cuando un cliente se queja y nadie quiere negarse, el interruptor se lanza. Cuando el PM no puede decidir entre dos flujos, los dos salen a producción detrás de un ajuste.

Seis meses después, nadie recuerda por qué existe la mitad de los interruptores. Eliminar un ajuste exige la misma decisión que el equipo evitó la primera vez, así que se acumulan. Mira cualquier producto con más de tres años en el mercado y podrás contar las decisiones sin tomar en el árbol de ajustes.

Los cinco arquetipos de las malas páginas de ajustes

Las malas páginas de ajustes no son aleatorias. Caen en cinco patrones, cada uno el punto final de un tipo concreto de pereza organizacional.

Diagrama voxel de cinco tarjetas de arquetipos etiquetadas: el vertedero, la hoja de cálculo, el callejón sin salida, el laberinto y el museo
Diagrama voxel de cinco tarjetas de arquetipos etiquetadas: el vertedero, la hoja de cálculo, el callejón sin salida, el laberinto y el museo

1. El Vertedero

Acumulación cronológica. Los ajustes aparecen en el orden en que se añadieron, sin agrupar nunca. El feature flag más nuevo está junto a una preferencia de notificaciones de 2019, junto a un interruptor beta que debía graduarse hace dos años. Cursor se está deslizando hacia esto. Cada versión añade tres interruptores a la pestaña General, y esa pestaña ya es un scroll de 40 filas de decisiones sin relación. El Vertedero es el estado por defecto de cualquier página de ajustes que nadie diseña activamente.

2. La Hoja de Cálculo

Preferencias alfabéticas. El equipo renunció a la jerarquía y dejó que el sistema operativo ordenara. Cada interruptor pesa lo mismo, cada fila es idéntica. Las preferencias de notificaciones de Slack viven aquí. Sonido, insignia, móvil, canal, palabra clave, no molestar, horario, personalizado, todo aplanado en un muro sin ninguna historia sobre cuáles importan.

3. El Callejón sin Salida

Ajustes que no cambian nada visible. El usuario activa "Modo compacto" y la pantalla se ve idéntica. Activa "Habilitar funciones avanzadas" y no aparece nada. El rediseño de Ajustes del Sistema de Apple en macOS lanzó toda una generación de estos: ajustes anulados en silencio por otros ajustes, ajustes que requieren un reinicio que la pantalla nunca menciona. El Callejón sin Salida enseña a los usuarios que los ajustes no funcionan, y dejan de confiar en el resto del producto.

4. El Laberinto

Diez niveles de pestañas anidadas. Ajustes enterrados bajo una categoría, una subcategoría, un desplegable "Avanzado", un modal. El usuario sabe que el interruptor existe, ya lo ha activado antes, y aun así no lo encuentra. El Jira de antes construyó una carrera sobre esto: proyecto, tablero, flujo de trabajo, esquema, esquema de permisos, esquema de notificaciones, todos árboles separados.

5. El Museo

Ajustes que nadie ha tocado en tres años. Existen porque quitarlos parece arriesgado. Hacen referencia a funciones retiradas en 2023. Todo producto SaaS heredado tiene un ala del Museo, y el costo es la promesa del equipo de mantener rutas de código que debieron morir hace dos refactorizaciones.

Los ajustes son una superficie de producto, no un armario

La mayoría de los equipos tratan los ajustes como el lugar donde se limpia el resto del producto. Ese enfoque es el bug. Los ajustes son una de las superficies de mayor palanca del producto, y los equipos más fuertes la diseñan así.

Composición voxel en marco dividido. La mitad izquierda, etiquetada MALO, muestra un muro plano de interruptores idénticos. La mitad derecha, etiquetada BUENO, muestra la misma superficie reorganizada con búsqueda, agrupación, valores por defecto y divulgación progresiva
Composición voxel en marco dividido. La mitad izquierda, etiquetada MALO, muestra un muro plano de interruptores idénticos. La mitad derecha, etiquetada BUENO, muestra la misma superficie reorganizada con búsqueda, agrupación, valores por defecto y divulgación progresiva

Los ajustes expresan la visión del producto sobre el usuario. Comunican cuatro cosas a la vez. Cuánto confía el equipo en el usuario. Cuánto control está dispuesto a compartir. Cuáles cree que son los valores por defecto correctos. Y si respeta lo suficiente el tiempo del usuario como para diseñar para el 5% que cambia los valores por defecto sin castigar al 95% que no.

Linear diseñó los ajustes como una única superficie de búsqueda, guiada por command-K, casi sin pestañas anidadas. El mensaje implícito: el usuario es competente, la búsqueda es rápida, el equipo hizo el trabajo de jerarquía para que el usuario no tenga que hacerlo. Notion tomó la dirección opuesta y ganó igual. Los ajustes viven junto a lo que afectan. Ajustes de página en la página. Ajustes de base de datos en la base de datos. Los ajustes contextuales desaparecen dentro del trabajo.

Vercel usa una jerarquía por alcance: proyecto, equipo y cuenta, cada uno claramente etiquetado, cada uno limitado al recurso que gobierna. Stripe Dashboard va por lo orientado a la acción, donde cada pantalla es "haz esto", no "configura esta preferencia". Los ajustes de repositorio de GitHub clavan el alcance con una separación limpia entre repositorio, organización y cuenta.

Las seis reglas que deciden toda página de ajustes

Estas reglas se acumulan. Cumple cinco de seis y la página se lee como una superficie de producto. Cumple tres y en un año se desliza hacia uno de los arquetipos.

Regla 1: Búsqueda primero

La jerarquía es un plan B, no el principal. El usuario conoce el nombre del ajuste antes de saber en qué pestaña vive. El command-K de Linear cubre los ajustes como un tipo de resultado de primera clase. Figma añadió búsqueda de ajustes y el tiempo hasta activar el interruptor bajó de inmediato. Si tu página de ajustes no tiene barra de búsqueda, estás apostando a que los usuarios memorizarán tu arquitectura de la información. No lo harán.

Regla 2: Ubicación contextual en lugar de registro central

Los ajustes viven junto a lo que afectan. Ajustes de notificaciones en el panel de notificaciones. Ajustes de página en la página. Una página central de ajustes sirve para asuntos de nivel de cuenta como perfil, facturación y sesiones, y casi nada más. Notion es el estándar de oro. El panel derecho de Figma hace el mismo trabajo para las propiedades de capa, marco y componente.

Regla 3: Valores por defecto sensatos que ganan confianza

Cada valor por defecto es una decisión de producto. Expresa lo que el equipo cree que es la respuesta correcta para el 80% de los usuarios. Si el valor por defecto es incorrecto, el interruptor es una curita. Los valores por defecto de notificaciones de Slack asumen que quieres estar localizable, no en silencio. La apuesta es correcta para el usuario mediano. La mayoría de los equipos diseñan primero el interruptor y dejan que el valor por defecto salga solo. Ese orden está mal.

Regla 4: Divulgación progresiva en lugar de proliferación plana

El usuario debería ver los cinco ajustes que le importan al 90% de los usuarios. Los otros 50 van un clic más adentro, detrás de una señal clara de "Avanzado". Los ajustes de proyecto de Vercel lo clavan. La primera pantalla muestra dominio, variables de entorno y protección de despliegue. Las anulaciones de build, las configuraciones de funciones y los rewrites viven en Avanzado.

Regla 5: Sin huérfanos

Cada ajuste pertenece a un grupo. Cada grupo tiene un nombre. La prueba del huérfano: lee en voz alta cualquier etiqueta sin más contexto. Si un diseñador de tu equipo no puede decirte qué hace el interruptor, es un huérfano. Los huérfanos son las semillas del Museo.

Regla 6: Cada ajuste se gana su lugar

Un ajuste es un contrato. El equipo se compromete a mantenerlo, documentarlo, probarlo y razonar sobre sus interacciones con todos los demás ajustes para siempre. La mayoría de los ajustes no pueden pagar ese alquiler. La disposición por defecto ante cualquier ajuste nuevo debería ser "no". Los buenos equipos matan más ajustes de los que lanzan.

Disposición hexagonal voxel de seis fichas etiquetadas que orbitan un cubo coral central con la etiqueta AJUSTES, cada ficha una regla de una palabra: búsqueda, contexto, defaults, divulgación, sin huérfanos, mérito
Disposición hexagonal voxel de seis fichas etiquetadas que orbitan un cubo coral central con la etiqueta AJUSTES, cada ficha una regla de una palabra: búsqueda, contexto, defaults, divulgación, sin huérfanos, mérito

Antipatrones que señalan que algo más profundo anda mal

Tres patrones matan más páginas de ajustes que todos los demás juntos. Cada uno es un síntoma de que el problema no es la pantalla, sino el equipo detrás.

Ajustes como sustituto de decisiones de producto. El equipo no se puso de acuerdo entre opt-in u opt-out, así que lo lanzó como interruptor. El usuario hereda la discusión sin resolver. Si oyes "hagámoslo configurable" en el standup, estás viendo cómo se forma este antipatrón. La lectura más profunda está en diseñar la fricción a propósito.

Ajustes que compensan un mal diseño. Un interruptor de "modo compacto" porque la densidad por defecto es demasiado holgada. Un interruptor de "alto contraste" porque los colores de marca no pasan accesibilidad. Un interruptor de "vista clásica" porque el rediseño fue rechazado. Cada uno es un arreglo real disfrazado de opción. La solución es diseñar bien la densidad, el contraste y las vistas desde la primera vez.

Ajustes que nadie puede explicar en una frase. Si un diseñador no puede describir qué hace el ajuste, qué cambia al activarlo y para quién es, el ajuste no debería lanzarse. Haz esa prueba antes de que cualquier interruptor nuevo llegue al código.

La auditoría de la página de ajustes

Render voxel de una tarjeta vertical de lista de auditoría inclinada hacia la cámara, siete filas con casillas coral, que sugiere una auditoría en curso
Render voxel de una tarjeta vertical de lista de auditoría inclinada hacia la cámara, siete filas con casillas coral, que sugiere una auditoría en curso

Pasa cada página de ajustes por estas siete preguntas. Si no hay un sí seguro en seis, la página no está terminada.

  1. ¿Puede el usuario encontrar cualquier ajuste en menos de cinco segundos? Si no, a la página le falta búsqueda o la jerarquía está rota.
  2. ¿Tiene cada ajuste una descripción de una frase que entienda alguien que no sea ingeniero? Si la etiqueta necesita que un ingeniero la explique, no pertenece a la superficie del producto.
  3. ¿Activar el interruptor produce un efecto visible e inmediato? Los cambios de estado ocultos matan la confianza.
  4. ¿Los ajustes están agrupados por tarea del usuario, no por equipo de funcionalidad? Una página organizada según qué equipo es dueño de la función es un artefacto interno filtrándose al producto. Agrupa por objetivo del usuario.
  5. ¿Los valores por defecto están defendidos por escrito en algún lugar? El equipo debería poder señalar un documento, una decisión de jerarquía visual o un principio de marca. Si el valor por defecto es "lo que puso el ingeniero durante el sprint", la página no está terminada.
  6. ¿Podrías quitar la mitad de los ajustes sin que un usuario lo note? Si es así, hazlo. El Museo pesa más de lo que el equipo cree.
  7. ¿La página se ve y se siente como el resto del producto? Léela junto a tus principios de diseño de landing pages. Si la marca se desmorona, la página de ajustes está fuera de marca.

Un equipo que hace esta auditoría dos veces al año lanza una superficie de ajustes ante la que los usuarios no se encogen. El equipo que nunca la hace termina lanzando el tipo de página de ajustes que se convierte en herramienta de reclutamiento para la competencia.

Elige el principio y luego poda la página

Los ajustes son la visión del mundo del equipo, congelada en interruptores. Los buenos equipos tratan la página como un flujo de primera clase, con el mismo oficio que ponen en el onboarding, el dashboard y el sitio de marketing.

La forma más rápida de arreglar una página de ajustes no es rediseñarla. Es borrar la mitad. Elimina cada ajuste que falle la prueba del huérfano, la prueba de una frase y la prueba de ganarse su lugar. Lo que quede es la columna vertebral de una superficie de ajustes de verdad.

La conexión con los estados vacíos no es casual. Ambas pantallas revelan lo que el equipo cree cuando no hay nada más en pantalla que distraiga. La misma disciplina aparece en los principios de diseño web.

Preguntas frecuentes

¿Cuántos ajustes debería tener un producto?

Los menos posibles. Cada ajuste es un contrato que el equipo mantiene para siempre. La disposición por defecto ante cualquier ajuste nuevo debería ser "no". Si el equipo no puede defender el ajuste en una frase, nombrar al usuario al que sirve y describir qué cambia visiblemente al activarlo, el ajuste no debería lanzarse.

¿Dónde deberían vivir los ajustes en el producto?

Junto a lo que afectan, no en un ala central de ajustes. Ajustes de página en la página. Ajustes del espacio de trabajo en el espacio de trabajo. Ajustes de notificaciones en el panel de notificaciones. Una página central de ajustes sirve para asuntos de nivel de cuenta como facturación, perfil y sesiones, y casi nada más.

¿Cómo limpio una página de ajustes con años de interruptores acumulados?

Haz la auditoría y luego borra. Agrupa cada ajuste por tarea del usuario. Identifica huérfanos, callejones sin salida y piezas de museo. Elimina el 30% inferior en la primera pasada y observa los tickets de soporte. Si nadie se queja, elimina otro 20%.

Diseña la página de ajustes como la página de inicio

La página de ajustes no es un sótano. Es una habitación donde viven tus usuarios avanzados y por la que te juzgan los nuevos. Trátala como la página de inicio, el onboarding, el dashboard. Aplica el mismo oficio. Lánzala con la misma convicción.

Si quieres un equipo que diseñe la página de ajustes como el resto del producto en lugar de heredarla del backlog, contrata a Brainy. Diseñamos los ajustes como un flujo de primera clase, con la disciplina que mantiene la página pequeña y los interruptores ganándose su alquiler.

Want a settings surface that reads like the product instead of the bug tracker? Brainy designs settings as a first-class flow, not a graveyard.

Get Started

More from Brainy Papers

Keep reading