Diseña mejores formularios

Errores comunes de los diseñadores y cómo solucionarlos

Francisco Merelo
WikiUX
3 min readJul 13, 2017

--

Tanto si se trata de un flujo de registro, como de una interfaz de entrada de datos monótona, las formas son uno de los componentes más importantes del diseño de productos digitales. Este artículo se centra en lo común y lo que no debe hacer en el diseño de formularios. Ten en cuenta que estas son directrices generales y hay excepciones a cada regla.

Los formularios deben ser una columna

Las columnas múltiples interrumpen el impulso vertical de un usuario.

Arriba las etiquetas de alineación

Los usuarios completan los formularios rotulados alineados encima a velocidad mucho más rápida que las líneas alineadas a la izquierda. Las alineaciones también se traducen bien en móviles. Sin el embargo, considera el uso de las líneas alineadas a la izquierda para una entrada grande de conjunto de datos, ya que los campos son fáciles de leer.

Agrupar las etiquetas con sus entradas

Presente la etiqueta y la entrada cercana y asegúrese de que haya bastante altura entre los campos para que los usuarios no se confundan.

Evite usar excesivamente mayusculas

Todas las tapas son más difíciles de leer.

Mostrar todas las opciones si menos de 6

Colocar opciones en un menú desplegable de selector requiere dos clics y oculta las opciones. Utilice un selector de entrada si hay más de 5 opciones. Incorporar búsqueda contextual dentro del menú desplegable si hay más de 25 opciones.

Resistir usando texto de marcador de posición como etiquetas

Es tentador optimizar el espacio que utiliza el texto de marcador de posición como las etiquetas. Esto causa muchos problemas de usabilidad que han sido resumidos por Katie Sherwin de Nielsen Norman Group.

Coloque las casillas de verificación (y los radios) debajo de cada uno para escanear

Colocar las casillas de verificación debajo del otro permite leer fácilmente.

Hacer que las acciones sean descriptivas

Una llamada a la acción debe indicar la intención.

Especificar errores en línea

Mostrar al usuario donde ocurrió el error y proporcionar una razón.

Utilice la validación en línea después de que el usuario rellene el campo (a menos que los ayude durante el proceso)

No utilice validación en línea mientras el usuario está escribiendo - a menos que los ayude - como en el caso de crear una contraseña, nombre de usuario o mensaje con un recuento de caracteres.

No ocultar el texto del ayudante básico

Exponga el texto del ayudante básico siempre que sea posible. Para el texto del ayudante complejo, considere colocarlo al lado de la entrada durante su estado enfocado.

Diferenciar las acciones primarias de las secundarias

Hay un mayor debate filosófico sobre si una opción secundaria debe incluso ser incluido.

Utilice la longitud del campo como un alcance

La longitud del campo proporciona la longitud de la respuesta. Utilice para los campos que tienen un número de caracteres definido, como números de teléfono, postales, etc.

Quitar el * y denotan los campos opcionales

Los usuarios no siempre saben lo que implica el marcador de campo obligatorio (*). En su lugar, es mejor denotar campos opcionales.

Información relacionada con el grupo

Los usuarios piensan en lotes, y las formas largas pueden sentirse abrumadoras. Al crear los grupos lógicos el usuario tiene sentido de la forma mucho más rápido.

Por qué preguntar

Omita campos opcionales y piensa en otras formas de datos recopilados. Siempre pregúntate si la pregunta puede ser inferida, pospuesta o completamente excluida.

La entrada de datos es cada vez más automatizada. Por ejemplo, los dispositivos móviles y portátiles recogen grandes cantidades de datos sin la conciencia consciente del usuario. Piense en maneras en que puede aprovechar la interfaz de usuario social, conversacional, SMS, correo electrónico, voz, OCR, ubicación, huella dactilar, biométricos, etc.

Hazlo divertido

La vida es corta. Nadie quiere llenar un formulario. Sea conversacional. Sé divertido. Poco a Poco. Haga lo inesperado. Es el papel del diseñador para expresar la marca de su compañía para provocar una reacción emocional. Si se hace correctamente, aumentará las tasas de terminación. Sólo asegúrese de no violar las reglas mencionadas anteriormente.

--

--