Seleccionar página

Errores comunes en el diseño y como corregirlos

 

Mejora-el-diseño-de-tus-formularios

Los formularios son uno de los componentes más importantes del diseño online. Este artículo se centra en el diseño de formularios comunes. Ten en cuenta que estas son pautas generales y hay excepciones a la regla.

 

1- Los formularios deben ser de una columna, siempre que sea posible.

Mejora-tus-formularios1

 

Varias columnas interrumpen el flujo vertical de los usuarios. Por supuesto en versión de escritorio a veces es más positivo no tener que hacer largos scroll.

 

 

2- Las etiquetas o títulos se deben alinear encima.

Mejora-el-diseño-de-tus-formularios2

Los usuarios completan más fácilmente los formularios con las etiquetas alineadas encima o arriba. También son mejores para móvil. Sin embargo, hay que considerar el uso de etiquetas alineadas a la izquierda para la entrada de  un gran conjunto de datos, porque son más fáciles de analizar, reducen la altura, y piden más consideración que las etiquetas alineadas a la parte superior.

3- Coloca las etiquetas con sus entradas.

Mejora-el-diseño-de-tus-formularios

Presenta las etiquetas de las entradas próximas a sus campos y asegúrate de que hay suficiente separación entre los campos para que los usuarios no se confundan.

4- Evita las mayúsculas.

Mejora-el-diseño-de-tus-formularios

Las mayúsculas son más difíciles de leer.

5- Muestra todas las opciones de selección si hay menos de 6.

6-diseño-formularios

La colocación de las opciones en un selector desplegable requiere de dos clics, y ademas oculta las opciones, por lo que el usuario no las ve a simple vista. Utiliza un desplegable a partir de las 5 o 6 opciones. Si hay más de 25 opciones, incorpora una búsqueda contextual o inteligente.

6- Resístete a usar como etiquetas de texto el marcador de posición.

7-diseño-formularios

Es muy tentador para optimizar el espacio, el uso de texto del marcador como etiquetas. Esto puede causar muchos problemas de usuabilidad, ya que el usuario cuando se pone en el marcador pierde la visión de la etiqueta. Solo lo recomiendo cuando son pocos campos, y estos son obvios.

7- Coloca las casillas de verificación “checkboxes” unas debajo de otras.

8-diseño-formularios

La colocación de casillas de verificación en vertical unas debajo de otras hace la exploración más fácil.

8- Haz las llamadas a la acción “call to action” más descriptivas.

9-diseño-formularios

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

9- Indica los errores en su lugar y el motivo de estos.

10-diseño-formularios

Mostrar al usuario el error en el lugar dónde se produjo y proporcionar la razón de dicho error.

10- Utiliza validaciones en línea después de que el usuario rellene los campos.

11-diseño-formularios

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

11- No ocultes los textos de ayuda básicos.

12-diseño-formularios

Muestra los textos de ayuda básicos siempre que sea posible. Para los textos de ayuda complejos colócalos para que se muestren cuando el ratón este encima “mouseover”.

12- Diferencia las acciones principales o primarias de las secundarias.

14-diseño-formularios

En algunos casos debes hasta plantearte si la acción secundaria debería ser incluida.

13- Delimita la longitud del campo a su contenido cuando sea posible.

15-diseño-formularios

La longitud de la respuesta debe delimitar la longitud del campo. Emplea esto para los campos que tienen una cantidad de caracteres definidos, como números de teléfono de un mismo país, códigos postales, etc.

14- No uses los * y nombra los campos como Opcional

16-diseño-formularios

Los usuarios no siempre saben lo que está implícito en el marcador de campo requerido (*). En lugar de ello, es mejor utilizar la palabra opcional. Explicar lo que significa el (*) tampoco tiene mucho sentido y es algo que ahora le da un carácter antiguo o desfasado a los formularios.

 

 

15- Agrupa las informaciones relacionadas.

17-diseño-formularios

Los usuarios creen en los lotes, y las formas largas pueden ser muy pesadas visualmente. Mediante la creación de grupos el sentido del formulario para el usuario va a ser mucho más rápido.

16- No pidas datos si realmente no es necesario.

Omitir campos opcionales y pensar en otras formas de recoger estos datos.Siempre pregúntate si la respuesta se puede deducir, posponer o excluir.

La entrada de datos es más automática cada vez. Por ejemplo, los dispositivos móviles y portátiles recogen grandes cantidades de datos sin el conocimiento consciente del usuario. Piensa la manera en que puedes aprovechar los recursos actuales como conversaciones UI, SMS, correo electrónico, voz, OCR, la ubicación, la huella digital, biométricos, etc.

17- Haz el formulario divertido y original.

La vida es corta. Nadie quiere llenar un formulario. Mantén una conversación con el usuario, sé divertido, engánchalos gradualemente, haz lo inesperado y se original. Es el papel del diseñador mostrar la marca de su empresa para provocar una reacción emocional determinada. Si se hace correctamente, aumentarán las tasas de cumplimentación de los formularios. Sólo asegúrate de que no se violan las normas mencionadas anteriormente.

Este post esta basado en un articulo de Andrew Coyle, si queréis ver mis trabajos podéis hacer clic en este enlace.

Pin It on Pinterest

Share This