Directrices sobre controles deslizantes

Un control deslizante (también denominado control de intervalo) permite al usuario establecer un valor de un intervalo determinado pulsando, o arrastrando hacia atrás y hacia adelante a lo largo de un recorrido.

Control deslizante

Control deslizante que se desliza verticalmente

Ejemplos

Captura de pantalla que ilustra el control deslizante estándar

¿Es este el control que necesito?

Usa un control deslizante cuando quieras que tus usuarios puedan establecer valores contiguos definidos (como el volumen o el brillo) o un intervalo de valores discretos (como la configuración de resolución de pantalla).

Un control deslizante es una buena opción si sabes que los usuarios ven el valor como una cantidad relativa y no como un valor numérico. Por ejemplo, al ajustar el volumen, los usuarios piensan en términos de bajo o medio, y no piensan que deben ajustar el valor de volumen en 2 o 5.

No uses un control deslizante para una configuración binaria. En lugar de ello, usa un control de alternancia.

A continuación encontrarás algunos factores adicionales que deberás tener en cuenta a la hora de decidirte a usar un control deslizante:

  • ¿Parece que el valor de configuración es una cantidad relativa? Si no es así, usa botones de radio o controles de selección.
  • ¿Es el valor de configuración un valor numérico exacto y conocido? Si es así, usa un cuadro de texto numérico.
  • ¿Sería bueno que el usuario obtuviera una respuesta inmediata sobre el efecto de los cambios realizados a la configuración? Si es así, usa un control deslizante. Por ejemplo, los usuarios pueden elegir un color más fácilmente si ven de forma inmediata el efecto de los cambios en los valores de matiz, saturación o luminosidad.
  • ¿Tiene la configuración un intervalo de cuatro o más valores? Si no es así, usa botones de radio.
  • ¿Puede el usuario cambiar el valor? Los controles deslizantes permiten la interacción del usuario. Si un usuario no puede cambiar el valor, será mejor usar texto de solo lectura.

Si intentas decidir entre un control deslizante y un cuadro de texto numérico, usa el cuadro de texto numérico si:

  • El espacio en pantalla es limitado.
  • Es probable que el usuario prefiera usar el teclado.

Usa el control deslizante si:

  • Los usuarios van a sacar provecho de una respuesta instantánea.

Recomendaciones

  • Da al control el tamaño que facilite a los usuarios el establecimiento del valor que quieran. En el caso de opciones con valores discretos, asegúrate de que al usuario le resulte fácil seleccionar cualquier valor mediante el mouse. Asegúrate de que los extremos del control deslizante caben siempre en los límites de una vista.
  • Proporciona una respuesta inmediata mientras el usuario hace una selección, o a continuación (siempre que resulte práctico). Por ejemplo, el control de volumen de Windows emite un sonido para indicar el volumen de audio seleccionado.
  • Usa etiquetas para mostrar el intervalo de valores. Excepción: si el control deslizante está orientado verticalmente y la etiqueta superior es Máximo, Alto, Más o equivalente, en cuyo caso puedes omitir las demás etiquetas porque el significado queda claro.
  • Deshabilita todas las etiquetas asociadas o los indicadores visuales de respuesta cuando deshabilites el control deslizante.
  • Ten en cuenta la dirección del texto al establecer la dirección del flujo y/o la orientación del control deslizante. El texto va de izquierda a derecha en algunos idiomas, y de derecha a izquierda en otros.
  • No uses un control deslizante como indicador de progreso.
  • No cambies el tamaño predeterminado del control de posición del control deslizante.
  • No crees un control deslizante continuo si el intervalo de valores es muy grande y es probable que los usuarios seleccionen uno de los valores representativos del intervalo. En lugar de ello, usa esos valores como únicos pasos permitidos. Por ejemplo, si el valor de tiempo puede durar hasta 1 mes pero los usuarios solo tienen que elegir entre 1 minuto, 1 hora, 1 día o 1 mes, crea un control deslizante con estos 4 puntos como pasos.

Instrucciones de uso adicionales

Elegir el diseño adecuado: horizontal o vertical

Puedes orientar el control deslizante de forma horizontal o vertical. Usa estas directrices para determinar qué diseño usar.

  • Usa una orientación natural. Por ejemplo, si el control deslizante representa un valor del mundo real que normalmente se muestra en vertical (como la temperatura), usa una orientación vertical.
  • Si el control se usa para buscar en archivos multimedia, como en una aplicación de vídeo, usa una orientación horizontal.
  • Cuando uses un control deslizante en una página que permita movimiento panorámico en una dirección (horizontal o verticalmente), usa una orientación para el control deslizante que sea diferente a la dirección del movimiento panorámico. En otro caso, es posible que los usuarios muevan el control deslizante y cambien su valor de forma accidental al intentar desplazar la página.
  • Si aún no estás seguro de qué orientación usar, usa aquella que mejor se ajuste a tu diseño de página.

Directrices para la dirección del intervalo

La dirección del intervalo es la dirección hacia la que mueves el control deslizante cuando lo deslizas desde su valor actual a su valor máximo.

  • Para el control deslizante vertical, pon el valor más grande en la parte superior del control deslizante, independientemente de la dirección de lectura. Por ejemplo, para un control deslizante de volumen, siempre debes poner el valor de volumen máximo en la parte superior del control deslizante. Para otros tipos de valores (como días de la semana),sigue la dirección de lectura de la página.
  • Para estilos horizontales, pon el valor inferior en el lado izquierdo del control deslizante en caso de un diseño de página de izquierda a derecha, y en el lado derecho en caso de un diseño de página de derecha a izquierda.
  • La única excepción a la directriz anterior es para las barras de búsqueda en archivos multimedia: siempre debes poner el valor inferior en el lado izquierdo del control deslizante.

Directrices para pasos y marcas de graduación

  • Usa puntos de paso si no quieres que el control deslizante admita valores arbitrarios entre el mínimo y el máximo. Por ejemplo, si usas un control deslizante para especificar el número de entradas de cine que comprar, no permitas valores de punto flotante. Dale un valor de paso de 1.
  • Si especificas pasos (también denominados puntos de acoplamiento), asegúrate de que el paso final esté alineado con el valor máximo del control deslizante.
  • Usa marcas de graduación cuando quieras mostrar a los usuarios la ubicación de los valores principales o significativos. Por ejemplo, un control deslizante que controla un zoom podría tener marcas de graduación para 50%, 100% y 200%.
  • Muestra marcas de graduación cuando los usuarios necesiten saber el valor aproximado de la configuración.
  • Muestra marcas de graduación y una etiqueta de valor cuando los usuarios necesiten saber el valor exacto de la configuración que eligen, sin interactuar con el control. En otro caso, pueden usar la información sobre herramientas del valor para ver el valor exacto.
  • Siempre muestra marcas de graduación cuando los puntos de paso no sean obvios. Por ejemplo, si el control deslizante tiene 200 píxeles de anchura y 200 puntos de acoplamiento, puedes ocultar las marcas de graduación porque los usuarios no van a notar el comportamiento de acoplamiento. Pero si solo hay 10 puntos de acoplamiento, muestra las marcas de graduación.

Directrices para etiquetas

  • Etiquetas de control deslizante

    La etiqueta del control deslizante indica para qué se usa el control.

    • Usa una etiqueta sin punto final (esta es la convención para todas las etiquetas de control).
    • Coloca las etiquetas encima del control deslizante si el control está en un formulario que ubica la mayoría de sus etiquetas encima de sus controles.
    • Coloca las etiquetas a los lados si el control deslizante está en un formulario que ubica la mayoría de sus etiquetas al lado de sus controles.
    • Evita colocar etiquetas debajo del control deslizante porque el dedo del usuario podría tapar la etiqueta cuando el usuario toca el control deslizante.
  • Etiquetas de intervalo

    Las etiquetas de intervalo, o de relleno, describen los valores mínimo y máximo del control deslizante.

    • Etiqueta los dos extremos del intervalo del control deslizante, a menos que la orientación vertical haga que resulte innecesario.
    • Si es posible, usa solo una palabra para cada etiqueta.
    • No uses puntuación final.
    • Asegúrate de que las etiquetas sean descriptivas y estén paralelas. Ejemplos: Máximo/Mínimo, Más/Menos, Bajo/Alto, Suave/Fuerte.
  • Etiquetas de valor

    Una etiqueta de valor muestra el valor actual del control deslizante.

    • Si necesitas una etiqueta de valor, muéstrala debajo del control deslizante.
    • Centra el texto en relación con el control e incluye las unidades (como pueden ser píxeles).
    • Como el control de posición del control deslizante queda oculto al deslizarlo, considera la posibilidad de mostrar el valor actual de alguna otra forma, con una etiqueta u otro elemento visual. Un control deslizante que establezca el tamaño del texto podría presentar un texto de muestra del tamaño correcto al lado del control deslizante.

Aspecto e interacción

Un control deslizante está formado por un recorrido y un control de posición. El recorrido es una barra (que, opcionalmente, puede mostrar diversos estilos de marcas de graduación) que representa el intervalo de valores que se pueden especificar. El control de posición es un selector, que el usuario puede mover pulsando en el recorrido o arrastrándolo hacia atrás y hacia adelante.

Un control deslizante tiene un destino táctil grande. Para que la accesibilidad táctil sea buena, un control deslizante se debe poner lo suficientemente lejos del borde de la pantalla.

Al diseñar un control deslizante personalizado, piensa en la manera de presentar toda la información necesaria al usuario de la forma más clara posible. Usa una etiqueta de valor si el usuario tiene que saber cuáles son las unidades para entender la opción. Busca formas creativas de representar valores gráficamente. Por ejemplo, un control deslizante que controle el volumen podría mostrar el gráfico de un altavoz sin ondas de sonido en el extremo inferior del control y el gráfico de un altavoz con ondas de sonido en el extremo superior.

Temas relacionados

Para diseñadores
Directrices sobre modificadores para alternar
Para desarrolladores (XAML)
Slider class
Para desarrolladores (HTML)
input type=range element | input type=range object

 

 

Mostrar:
© 2015 Microsoft