Los ajustes sirven para que los usuarios indiquen sus preferencias acerca de como se debería comportar tu app. Los beneficios son:
- No necesitas interrumpirlos con cuestiones cuando se dan ciertas situaciones de forma repetitiva. Los ajustes predeterminan que ocurrirá siempre en dichas situaciones (ver el principio de diseño: Decide por mi pero déjame tener la decisión final).
- Ayuda a tus usuarios a sentirse como en casa y tener el control en todo momento (ver el principio de diseño: Permite que la adapte a mi estilo).
Contenidos
Flujo y Estructura
Proporciona acceso a Ajustes en el menú overflow
Los ajustes tienen una importancia menor dentro de la UI de la app porque no se frecuentan con regularidad. Incluso si la action bar tiene espacio, nunca coloques los Ajustes como un botón de acción. Colócala dentro del menú overflow y ponle de título “Ajustes”. Debe ir abajo del todo en la lista excepto del elemento “Ayuda”.
Nota del autor: Actualmente, tanto el elemento “Ajustes” como “Ayuda”, se colocan dentro del menú lateral de la izquierda. Visita el apartado Material Design para ver más información sobre algunas pautas nuevas.
Evita la tentación de hacer un ajuste para todo
Aunque los Ajustes requieren de unos pasos para acceder a ella, no importa cuantos elementos incluyas, ya que una vez configurada la app no volverán a visitarlos con frecuencia. Nunca serán una parte clave de tu interfaz de usuario. Esto es una buena noticia, pero también posee un desafío.
Los ajustes pueden ser un lugar tentador donde añadir un montón de cosas, como si fuese un trastero enorme donde ir almacenando todo lo que tienes. No es un lugar donde tengas que gastar un montón de tiempo, así que es fácil razonar e ignorar que vas a colocar ahí en función de ciertas condiciones. Ten en cuenta que cuando los usuarios visitan los Ajustes, normalmente de forma infrecuente, esperan tener una experiencia parecida a la que tienen en el resto de tu app. Además, cuanto más ajustes tengas en tu app, el usuario tiene que realizar más elecciones, y demasiadas elecciones puede ser abrumador.
Así que cada vez que pienses, “simplemente haré de esto un ajuste”, observa el siguiente diagrama para considerar si debes añadirlo finalmente a los ajustes, o descargarlo:
Si aún así tienes un montón de ajustes, puedes agruparlos según la relación entre ellos
El número de elementos que un humano puede mantener en memoria, de media, es de 7±2. Si presentas una lista de 10 o más ajustes (incluso después de utilizar los criterios mencionados anteriormente), los usuarios tendrán más dificultad a la hora de explorar, comprender y procesar los mismos.
Puedes solucionar esto dividiendo algunos de los ajustes, o todos, en grupos, creando listas pequeñas de varios ajustes relacionados. Uno de estos grupos se puede presentar de dos formas:
1. En secciones divididas
2. En subpantallas separadas
Puedes usar una o ambas técnicas de agrupación para organizar los ajustes de tu app.
Por ejemplo, en la pantalla principal de la app Ajustes de Android, cada elemento navega hacía una subpantalla de ajustes relacionados. Además, estos elementos son a su vez agrupados en secciones divididas.
Agrupar ajustes no es una ciencia exacta, pero hay algunas recomendaciones que puedes seguir en función del número de ajustes en tu app.
7 o menos
No los agrupes ya que no beneficia a los usuarios.
8 a 10
Intenta agruparlos en función de su relación en 1 o 2 secciones divididas. Si tienes cualquier “singletons” (ajustes que no se relacionan con ningun otro ajuste y no puede ser agrupado dentro de alguna sección dividida), puede que:
- Si ellos incluyen alguno de los ajustes más importantes, colócalos en la parte superior sin ninguna sección dividida.
- Si no es el caso anterior, colócalos en una sección dividida al final llamada “OTROS”, según el orden de importancia.
11 a 15
El mismo consejo que arriba, pero utilizando de 2 a 4 secciones divididas.
También, trata de seguir los siguientes pasos para reducir la lista:
- Si 2 o más de los ajustes son para usuarios avanzados, colócalos dentro de una subpantalla “Avanzados”.
- Trata de combinar ajustes que estén muy relacionados, utilizando las pautas de diseño mencionadas anteriormente. Por ejemplo, puedes rediseñar dos ajustes que utilizan cajas de verificación en uno, mediante un ajuste de selección múltiple.
16 o más
Si tienes más de 4 ajustes relacionados, agrupa los mismos dentro de una subpantalla. Después utiliza el consejo de arriba para reducir el tamaño de la lista.
Pautas de Diseño
Elección múltiple
Usa esta pauta para un ajuste que necesita presentarse en un conjunto discreto de opciones, en el cual el usuario tiene que seleccionar uno.
Slider (Deslizador)
Usa esta pauta para ajustes donde el rango de selección no toma valores discretos, si no que puede ser cualquier valor.
Fecha/hora
Usa esta pauta para un ajuste que necesita recibir una fecha o una hora proporcionada por el usuario.
Navegar a una subpantalla
Usa esta pauta para navegar a una subpantalla, o una secuencia de subpantallas, las cuales guían al usuario a través de un proceso de configuración complejo.
- Si se navega a una única subpantalla, usa el mismo título, tanto en subpantalla como en el elemento que permite llegar a ella.
- Si se navega a una secuencia de subpantallas (como en este ejemplo), usa el título que describe el primer paso en la secuencia.
Lista de subpantallas
Usa esta pauta para un ajuste, o una categoría de ajustes, que contienen una lista de elementos equivalentes.
El título proporciona el nombre del elemento, y el texto secundario puede ser utilizado para el estado. En este ejemplo, el estado se refuerza con un icono en la parte derecha de la descripción. Cualquier acción asociada con la lista aparece en la action bar en lugar de en la lista.
Master On/off switch (Interruptor maestro On/off)
Usa esta pauta para una categoría de ajustes que necesita que todos los ajustes dentro de la misma se “enciendan” o “apaguen” al mismo tiempo.
Un interruptor se coloca en el primer elemento en la action bar de una subpantalla. Cuando el interruptor está apagado, los elementos en la lista desaparecen, reemplaza el texto que se describe explicando la razón de porqué la lista está vacía. Si cualquier acción requiere que el interruptor esté encendido, serán deshabilitadas.
Puedes también repetir el interruptor on/off en elemento del menú que dirige a la subpantalla. Sin embargo, deberías hacer esto únicamente cuando los usuarios necesiten entrar en una subpantalla determinada con muy poca frecuencia, ya que una vez configurados los parámetros dentro de la misma, solo se necesita que se encuentren encendidos o apagados.
Individual on/off switch (Interruptor individual on/off)
Usa esta pauta para ajustes individuales que requieren una descripción más elaborada que la que se puede proporcionar con un checkbox.
Los interruptores solo aparecen en una subpantalla, así que los usuarios no serán capaces de cambiar su estado sin ser expuestos al texto descriptivo. El texto secundario aparece debajo del título del ajuste para reflejar la selección actual.
En este ejemplo, Android Beam está encendido por defecto. Ya que los usuarios no saben para que sirve este ajuste, hemos hecho un estado más descriptivo en vez de escribir solo “On”.
Dependencia
Usa esta pauta para un ajuste que cambia su disponibilidad en función del valor de otro ajuste.
El ajuste deshabilitado aparece debajo del ajuste del cual depende, sin ningún tipo de margen o sangría. Si el ajuste incluye una línea de estado, esta mostrara “No disponible”, y si la razón no es realmente obvia, se puede incluir una pequeña explicación en el estado.
Si un ajuste dado depende de 3 o más ajustes, considera utilizar una subpantalla con un interruptor maestro para así mantener los ajustes principales en la pantalla sin mostrar un montón de ajustes deshabilitados.
Por defecto
Presta especial atención a la hora de elegir los valores por defecto de tus ajustes. La razón es que los ajustes determinan el comportamiento de la app, y tus elecciones contribuirán a la primera impresión que el usuario obtendrá de tu app. Incluso aunque los usuarios pueden cambiar los ajustes, ellos serán influenciados por el estado inicial de la app. Lee las siguientes preguntas (si se aplican) para decidir que hacer:
- ¿Qué opción utilizaría la mayoría de los usuarios si esta no estuviese por defecto?
- ¿Qué opción es más neutral o se encuentra en el punto medio?
- ¿Qué opción tiene menor riesgo de ser conflictiva?
- ¿Qué opción utiliza menos cantidad de batería o de datos móviles?
- ¿Qué opción ofrece mejor soporte para el principio de diseño No pierdas mis cosas?
- ¿Qué opción ofrece mejor soporte para el principio de diseño Solo interrúmpame si es importante?
Guía de Escritura
Escribe con claridad y se conciso
Escribir una buena descripción para un ajuste puede ser un desafío ya que el espacio es muy limitado. Solo tienes una o dos línea, y son realmente cortas en dispositivos muy pequeños. Sigue los siguientes consejos para hacer grandes y significativas descripciones:
- Escribe cada descripción con una sola oración y en minúscula (excepto la primera letra de la primera palabra).
- No comiences una descripción con un verbo de instrucción tales como “Ajusta”, “Cambia”, “Edita”, “Modifica”, “Gestiona”, “Usa”, “Selecciona”, o “Elige”. Los usuarios ya son conscientes de que ellos van a hacer esas acciones con los ajustes.
- Del mismo modo, no termines una descripción con palabras como “ajuste” o “ajustes”. Ya se encuentran de modo implícito.
- Si el ajuste es parte de un grupo, no repitas la palabra o palabras utilizadas en el título de la subsección dividida o el de la subpantalla.
- Evita empezar una descripción con una palabra negativa, como “No” o “Nunca”. Por ejemplo, “No permitir…” puede ser reescrita por “Bloquea…”
- Evite las palabras demasiado técnicas tanto como puedas, a menos que el término en cuestión sea comprendido debido al público al que va destinada tu app. Usa nombres y verbos habituales para transmitir el objetivo de los ajustes.
- No te refieras al usuario. Por ejemplo, para un ajuste que permita al usuario encender o apagar las notificaciones, descríbelo como, “Notificaciones” en lugar de “Notificarme”.
Una vez hayas decidido las descripciones de tus ajustes, asegúrate de que se vean bien en un dispositivo con una baja densidad de pantalla en modo vertical, ya que entonces se mostrarán correctamente en todos los dispositivos.
El texto secundario es para el estado, no para la descripción…
Antes de Ice Cream Sandwich (ICS), usualmente se mostraba el texto secundario como una descripción o unas instrucciones. A partir de ICS, se utiliza el texto secundario para el estado.
El estado en el texto secundario ofrece los siguientes beneficios:
- Los usuarios pueden ver de un vistazo el valor actual de un ajuste sin tener que navegar más allá.
- Se aplica el principio de diseño Hágalo breve.
… hasta que es un ajuste con un checkbox
Hay una excepción más importante cuando uses un texto secundario para el estado: los ajustes checkbox. Aquí, el texto secundario se usa para la descripción, no para el estado. El estado está implícito en el icono del checkbox, por lo que es innecesario. La razón es que es necesario tener una buena descripción en un checkbox ya que a diferencia de otros ajustes, este no muestra un dialogo o lleva a otra subpantalla donde se pueda mostrar información adicional.
Dicho esto, si un título de un ajuste checkbox es lo suficientemente claro por si mismo, no es necesario añadir una descripción. Solo incluye una si es necesario.
Sigue los siguientes consejos para escribir las descripciones de los ajustes checkbox:
- Mantén todo en una única sentencia, y no utilices puntuación final.
- Transmite que ocurre cuando el ajuste se encuentra seleccionado, mediante una frase sencilla. Por ejemplo: “Permite intercambiar datos”.
- Evite las palabras repetitivas que aparecen ya en el título.
- No te refieras al usuario a menos que sea completamente necesario para que comprenda el ajuste.
- Si debes referirte al usuario, hazlo en segunda persona, “tu”, en lugar de en primera persona, “yo”. Android habla a los usuarios, no se hablan ellos sobre ellos mismos.
Ejemplos de escritura
Los siguientes ejemplos son cambios que hemos realizado a los títulos y textos secundarios en la app Ajustes en Ice Cream Sandwich.
En este ajuste checkbox, hemos eliminado la palabra “Usar” y cambiado el título para ser más directo y comprensible.
En este ajuste de elección múltiple, hemos cambiado la etiqueta para ser más amigable además de reemplazar la descripción con el estado. Hemos puesto algunas palabras descriptivas alrededor del valor, “10 minutos”, ya que podría ser malinterpretado por “apagar durante 10 minutos”.
Este ajuste navega hacia una secuencia de subpantallas que permiten al usuario elegir el tipo de bloqueo de pantalla y su configuración. Hemos eliminado la palabra “Cambiar” en el título, y se ha reemplazado la descripción con el tipo de bloqueo de pantalla que se está utilizando. Si el usuario no seleccionase alguno de los ellos, el texto secundario mostrará “Ninguno”.
En este ajuste checkbox, aunque utiliza una jerga bastante técnica, hemos mantenido el título “NFC” ya que: (1) no podemos encontrar una alternativa más clara o concisa y (2) el usuario se debe familiarizar con este acrónimo debido al dramático incremento que tendrá en los próximos años.
Nosotros, sin embargo, reescribimos la descripción. Es bastante menos técnica que antes, y transmite de una mejor forma como y de que forma utilizar el NFC. No incluimos todas las palabras del acrónimo ya que no es necesario para el usuario conocerlas y ocuparían bastante espacio.
Lista de verificación para los Ajustes
- Asegúrate de que cada elemento en Ajustes cumple los criterios necesarios para estar ahí.
- Si tienes más de 7 elementos, explora formas para agruparlos en ajustes relacionados.
- Utiliza pautas de diseño en cualquier lado que puedan aplicarse para que la curva de aprendizaje del usuario sea más amena.
- Elige los valores por defectos más seguros, neutrales y que utilizarían la mayoría de los usuarios.
- Da a cada ajuste un título, claro conciso y que utilice un texto secundario apropiado.
Puedes ver más información sobre Ajustes en la página oficial de Google en inglés pulsando aquí.