Diseño de páginas de configuración: cómo organizar los ajustes de una app
Cómo diseñar páginas de configuración: agrupa ajustes, elige valores por defecto, añade búsqueda y decide cuándo guardar. Patrones y errores comunes.
¿Qué es una página de configuración?
Es el lugar donde se guardan las preferencias del usuario y las opciones que la aplicación necesita para funcionar en su contexto. Suele ser una de las pantallas menos visitadas del producto, pero también una de las que más fricción genera cuando está mal hecha: el usuario entra con una tarea concreta, por ejemplo silenciar una notificación, y no encuentra la opción.
La clave es que la página no es un cajón de todo lo que el equipo no supo dónde poner. Cada ajuste debería tener una razón para estar allí, y el usuario debería poder encontrarlo sin conocer el nombre técnico que le dio el equipo de ingeniería.
¿Cómo agrupar los ajustes?
Agrupar es lo primero que hace que una página sea legible. Según las recomendaciones de Setproduct sobre diseño de ajustes, las pestañas sirven para un número moderado de categorías, y la navegación lateral se vuelve más útil cuando hay muchas opciones. En ambos casos, cada grupo necesita una etiqueta descriptiva, por ejemplo “Notificaciones” o “Privacidad”, en lugar de “Opciones avanzadas” o “Varios”.
Algunas reglas prácticas:
- Agrupa por la tarea del usuario (“qué quiero controlar”), no por la estructura interna del producto (“qué módulo lo implementa”).
- Pon arriba las categorías que más se consultan.
- Resalta la sección activa para que el usuario sepa dónde está. Las migas de pan ayudan cuando hay subniveles.
- Si tienes una navegación lateral, asegúrate de que se adapte a pantallas pequeñas. Setproduct sugiere colapsarla o convertirla en un menú de hamburguesa.
- Si hay muchos ajustes, pon un buscador visible arriba de la página. Setproduct lo recomienda, con sugerencias mientras la persona escribe.
¿Cómo elegir los valores por defecto?
Un valor por defecto es la respuesta que el sistema da por el usuario antes de que haga nada. Como la mayoría de las personas nunca abre la página de ajustes, ese valor termina siendo la configuración real de casi todos los usuarios.
Nielsen Norman Group lo plantea así en su artículo sobre preferencias de paginación: la mayoría de los usuarios prefiere usar los valores por defecto, así que es responsabilidad del diseñador elegir el que beneficie a más personas. La recomendación operativa de Setproduct va en la misma dirección: en los botones de opción, elige la opción más común o la recomendada; las casillas de verificación deberían empezar desmarcadas.
Si el usuario sí cambia un ajuste, el sistema debería recordarlo. Nielsen Norman Group señala que el sistema casi siempre debe respetar la preferencia que el usuario declaró y usarla como valor por defecto la próxima vez, en lugar de obligarlo a repetir la elección.
¿Cómo se guardan los cambios?
Aquí conviene separar dos casos:
| Tipo de ajuste | Cuándo se aplica | Control recomendado |
|---|---|---|
| Interruptor de efecto inmediato (por ejemplo, modo oscuro) | Al instante | Toggle sin botón de guardar |
| Conjunto de campos relacionados (por ejemplo, datos de facturación) | Al confirmar | Botón con verbo claro: “Guardar” o “Aplicar” |
| Acción que afecta a terceros o es irreversible | Tras confirmar | Diálogo de confirmación con la consecuencia explícita |
Nielsen Norman Group indica que un toggle debe tener efecto inmediato y no exigir pulsar Guardar. Si el resultado no puede ser instantáneo, recomienda usar botones de opción o una casilla. También aconseja separar los controles de efecto inmediato de los que necesitan un botón de envío, para que no se mezclen en el mismo formulario.
Tras guardar, da retroalimentación visible: un mensaje breve de confirmación basta. Si el cambio se puede revertir, dilo en el mensaje.
¿Cómo se escriben etiquetas que se entiendan?
Las etiquetas de los ajustes se leen rápido y se escanean. NN/g recomienda etiquetas cortas, con la palabra clave al principio y sin forma de pregunta. “Notificaciones por email” funciona mejor que “¿Quieres recibir notificaciones por email?”, porque describe qué pasa cuando el interruptor está activo.
Una prueba útil: lee la etiqueta en voz alta y agrega “activado” o “desactivado”. Si la frase no suena natural, reescríbela.
¿Cuándo NO conviene añadir una opción?
Antes de crear un ajuste, pregúntate si la mayoría de los usuarios lo necesitará. Cada opción nueva es una decisión más que el usuario tiene que tomar y que puede equivocar. Como casi nadie personaliza, una buena configuración por defecto les sirve más que una lista larga de interruptores.
No conviene crear un ajuste cuando:
- Un valor por defecto bien elegido resuelve el caso para casi todos.
- La opción solo cambia algo que el usuario ve una vez al año.
- La misma decisión podría tomarse en el contexto de la tarea, en lugar de en la página de ajustes.
Ejemplo
Ejemplo ilustrativo: una app de reservas tiene una página de ajustes. Antes, todas las opciones estaban en una sola lista con más de treinta casillas. El equipo rediseñó la página con cinco grupos con nombres de tarea (“Mi cuenta”, “Notificaciones”, “Privacidad”, “Pagos”, “Idioma y región”), puso un buscador arriba, dejó como valor por defecto las notificaciones de solo reservas y movió “Eliminar cuenta” a una sección aparte con una confirmación que explica qué se borra. Lo que más cambió fue la claridad de la sección de notificaciones, que pasó a tener un interruptor por canal y una frase de estado debajo.
Errores comunes
- Agrupar por el nombre interno del módulo en lugar de por lo que el usuario quiere hacer.
- Mezclar en un mismo grupo ajustes de efecto inmediato con otros que necesitan guardar, sin dejar claro cuál es cuál.
- Poner como valor por defecto la opción que más le conviene al negocio y no a la mayoría de los usuarios.
- Olvidar recordar la preferencia que el usuario acaba de elegir.
- Ocultar acciones destructivas entre opciones normales, sin confirmación.
- Etiquetas ambiguas como “Avanzado” o “Otros”, que obligan a abrir cada sección para saber qué hay dentro.
- No dar retroalimentación después de guardar, de modo que el usuario no sabe si el cambio funcionó.
Para acciones de este tipo, revisa también salvaguardas para acciones destructivas. Si no sabes qué categorías esperan tus usuarios, empieza por revisar lo que ya existe en apps similares y después habla con personas que las usen. Para validar la estructura de grupos antes de diseñar la pantalla, arquitectura de la información explica los principios que conviene aplicar.