La lista desplegable de diseño de formularios más común y básico

Los primeros tres artículos hablaron sobre el "cuadro de entrada", el "botón de opción" y la "casilla de verificación" en el formulario, por lo que esta vez hablaremos de la lista desplegable.

El siguiente artículo habla sobre campos de texto y botones.

Es bien sabido que nadie está dispuesto a completar el formulario y el cuadro de entrada hace que el proceso parezca muy complicado. Luego, en este momento se utilizará otro componente: la lista desplegable.

Lo que contiene son opciones. Debido a que el usuario no necesita ingresar, puede evitar que el usuario cause errores al ingresar.

En el diseño real, las listas desplegables también tienen muchas "desventajas", por lo que es necesario probar diferentes métodos para resolver el problema.

· Composición de la lista desplegable

·? Pasos de la lista desplegable

· ¿Los consejos para la lista desplegable también son muy importantes

·? Disposición razonable de las listas desplegables Opciones

·?El número de opciones de la lista desplegable

·?La lista desplegable puede hacer más

·?Se pueden ingresar números simples

· Seleccionar una fecha no es tan problemático

·?Principio paso a paso

·?Composición paso a paso

·?Principio del control deslizante

·?Detalles del control deslizante

·?Finalmente

La lista desplegable consta de la etiqueta [Etiqueta] , la lista desplegable y las opciones. La selección común en la lista desplegable es la selección de radio.

Para mostrar la lista desplegable: haga clic en el control de la lista desplegable → Expanda la lista → Desplácese y escanee la lista para seleccionar la opción Cerrar → Cerrar la lista desplegable.

Hay un elemento en el cuadro de entrada llamado mensaje oculto [marcador de posición], que se utiliza para ayudar a los usuarios a completar información. Este principio también se aplica a las listas desplegables. Este mensaje debe ser breve y preciso e indicarle al usuario qué debe seleccionarse, y el usuario aún puede ver lo que está seleccionado después de expandir el menú.

Por ejemplo, en la imagen de arriba: "Fecha de salida" es mucho mejor que "Por favor seleccione".

Puedes analizar los datos de selección de usuarios anteriores e intentar colocar las opciones con más opciones en una posición de mayor prioridad.

Cuando hay muchas opciones, puede intentar enumerar solo algunas de las más utilizadas. La ventaja es que el 90% de los usuarios elegirá inmediatamente la opción que cumpla con su propósito y el 10% de las personas podrá elegir. "otro" (puede intentar unirse. Una selección desplegable o un cuadro de entrada servirán para este propósito). Aunque esto ignorará a 10 usuarios, esta priorización puede mejorar la experiencia de 90 usuarios.

La opción seleccionada con mayor frecuencia por los usuarios superiores al 90% se puede utilizar como opción predeterminada.

Evite poner demasiadas opciones en la lista. Cuando haya más de 15 opciones en la lista desplegable, será difícil escanearlas. En la Web, los usuarios necesitan desplazarse constantemente con el mouse para encontrar opciones que satisfagan sus propósitos. Además, se puede decir que la experiencia de desplazarse dentro del espacio limitado de la pantalla del terminal móvil es muy mala.

Supongamos que ahora tenemos una lista desplegable que necesita recopilar la información del país del usuario. De un vistazo, puede ver que esta lista desplegable está ordenada por la primera letra del pinyin y "Albania (A)" ocupa el primer lugar. Cuando quiero seleccionar "China (Z)", será muy laborioso.

¿Cuándo quiero seleccionar "China"? Entonces sé exactamente lo que necesito seleccionar, entonces ¿puedo considerar cambiar la selección desplegable a una lista de selecciones de autocompletar? Luego solo necesita ingresar "中" a través del teclado y se filtrarán las opciones candidatas que contengan "中" (o zhong). Mejore la eficiencia de la selección mediante una simple coordinación de entradas.

Evite el uso de listas desplegables si hay demasiadas opciones y evite el uso de listas desplegables si hay muy pocas opciones.

Anteriormente se dijo en "El diseño de formulario más común y básico: botón de opción" que cuando 2 ≤ el número de opciones (opciones de radio) ≤ 7, cuando hay menos de 7 opciones en el menú desplegable, lista desplegable, considere usar botones de opción.

Utilizando los botones de radio, los usuarios pueden aprender cuántas opciones hay para esta pregunta y cuál es cada opción con solo escanear, eliminando así la necesidad de hacer clic para activar el cuadro desplegable.

Del mismo modo, si se trata de una pregunta sencilla que requiere una respuesta (sí/no) o (abrir/cerrar), evite el uso de listas desplegables y utilice casillas de verificación y conmutadores.

Reduce el número de opciones con la ayuda del programa.

Por ejemplo: si la recarga de un número de teléfono móvil requiere que el usuario seleccione un operador, después de que el usuario ingresa el número de teléfono móvil, la lista desplegable puede ayudarlo a seleccionar el operador. Si se requiere que el usuario seleccione un banco al pagar para vincular una tarjeta, después de que el usuario ingresa el número de la tarjeta bancaria, la lista desplegable puede ayudar al usuario a seleccionar el banco emisor de la tarjeta y el tipo de tarjeta. Hay miles de formas de diseñar diferentes selecciones desplegables.

En el lado móvil, también podemos utilizar la función de hardware del sistema "ubicación de llamada" para precompletar opciones al usuario.

Si las opciones de la lista desplegable son números simples, la lista desplegable será más laboriosa que ingresar. Puede considerar usar el teclado numérico para ingresar, que es más simple que la selección desplegable. Existen diferentes soluciones según el escenario. Para ajustes de rango pequeño a valores precisos, puede considerar el uso de controladores paso a paso; para ajustes a gran escala de valores inexactos, puede considerar el uso de controles deslizantes para seleccionar fechas; puede usar un selector de fechas.

La selección de una fecha definitivamente será algo frecuente. Si se utilizan varias listas desplegables (año/mes/día), traerá una muy mala experiencia al usuario. Entonces podemos intentar utilizar el selector de fechas.

El paso a paso [Stepper] consta de un botón de aumento, un botón de disminución y el valor controlado por el botón. Cada vez que hace clic en el número del botón de aumentar (o disminuir) para aumentar (o disminuir) una cantidad fija. Por ejemplo, los usuarios prefieren utilizar un paso a paso para seleccionar la cantidad de productos en una aplicación de comercio electrónico. En este caso, el paso a paso es más intuitivo que una lista desplegable y más fácil de usar.

Debe prestar atención al límite máximo y al límite mínimo. Cuando se alcance el límite máximo o mínimo, agregue un botón para desactivar aumentar (disminuir). Si puede completar previamente un valor predeterminado mediante el análisis de datos (que el 90% de los usuarios suele elegir), es una forma de mejorar la eficiencia.

Imagínese: cuanto más se aleje el valor predeterminado del paso a paso del valor esperado del usuario, más clics serán necesarios y menos eficiente será completar la selección. Cuando no se puede satisfacer el valor predeterminado (a menudo eligen 10 usuarios), también puede cambiar la visualización numérica a un cuadro de entrada y luego usar la entrada del teclado numérico para realizar modificaciones precisas.

Los controles deslizantes comunes [Sliders] constan de botones, ejes, valores máximos y valores mínimos que se pueden arrastrar. Al igual que los botones de opción, el comportamiento del control deslizante está influenciado por el comportamiento de la vida real.

Escenario: Estoy escuchando una canción y el sonido es un poco suave. Quiero aumentar el volumen. Utilizo el control deslizante para ajustar el volumen en el rango de 0-100 según mi audición, en lugar del valor exacto de 75, que está dentro de este rango (valor aproximado), entonces el control deslizante es más fácil de usar que el menú desplegable. lista. .

Dependiendo de los diferentes escenarios de diseño, los valores precisos pueden ser importantes y los controles deslizantes también pueden satisfacer eso. Agregue una visualización numérica que cambie con cada diapositiva. Al mismo tiempo, también se puede hacer clic en los números en los cuadros de entrada y luego usarlos con la entrada del teclado numérico para modificar la posición del control deslizante.

En el lado móvil, se recomienda colocar los valores máximo y mínimo del control deslizante en la parte superior. Eso siempre permanecerá visible cuando esté en uso. Si está por debajo, quedará fácilmente tapado por los dedos.

Al arrastrar, use efectos de movimiento para proporcionar retroalimentación para la interacción del usuario.

La selección es más eficiente que la entrada, pero eso no significa que pueda usar la lista desplegable en cualquier momento. . Utilice sus principios (lista desplegable/paso a paso/control deslizante) para realizar transformaciones según diferentes escenarios, y la selección también puede ser muy diferente. Por ejemplo, las opciones relacionadas se pueden mostrar en grupos en una lista desplegable, o la lista desplegable se puede transformar en un control de selección múltiple, etc. Las opciones convenientes y fáciles de usar tienen el mismo propósito que el formulario: el formulario es solo una forma de recopilar información del usuario, y lo que los usuarios necesitan es completar el formulario de manera eficiente y feliz.

Mencioné un selector de fechas arriba, pero no entré en detalles. Hablaré de ello más adelante.

Las opiniones anteriores se basan en mi resumen personal. Aunque la redacción es deficiente, si tiene opiniones diferentes, no dude en comunicarse ~

Si ve esto, aquí hay artículos. sobre otros componentes (Anuncio):

"El cuadro de entrada de diseño de formulario más común y básico"

"El botón de opción de diseño de formulario más común y básico"

"El diseño de formulario más común y básico: casilla de verificación"

Me siento tan feliz de poder poner tres anuncios...