Optimizando la Usabilidad de los Formularios Online

Los formularios son los porteros de internet. A menudo se rellenan como punto de partida – por ejemplo para registrarse en un sitio. También se rellenan para acceder a una cuenta – como los formularios para iniciar sesión. ¿Alguna vez has pensado que cuando escribes un tweet o un email estás técnicamente rellenando un formulario?. Están en todas partes y están subestimados. Es clave la optimización de los formularios para mejorar la conversión.

Aquí, discutiremos algunos consejos para ayudarte a mejorar y optimizar los formularios.

Mantenlo absurdamente simple

Lo mejor que puedes hacer cuando creas un formulario es mantenerlo lo más simple posible. (Esto es casi obvio.)

Asegúrate de que solo pides a tus usuarios la información que necesitas. Si no es necesario, no lo pidas. Esto hace más fácil la vida del usuario, que es lo que quieres.

iconfinder

heydesigners

Mantenlo Organizado

Cuantos menos campos mejor, porque crea una experiencia más clara. Sin embargo si tu formulario es largo, que no te de miedo. Dividelo en cachos y secciones agrupando la información similar. Digamos que es un cuestionario sobre los padres, separa las preguntas sobre papá y mamá.

Mantenerlo organizado mejorará la experiencia del usuario. No pasa nada si tienes que dividir el formulario en páginas, pero hazlo solo si es necesario.

fitbit

jawboneup

Si el formulario es largo, Muestra el progreso

Un formulario multipágina, como un proceso de compra, debe documentarse para que el usuario sepa en que parte del proceso se encuentra. Cuando hay múltiples páginas tienes que ser transparente. Muestra cuantos pasos/páginas quedan para completar. (Intenta mantener el número de páginas al minimo.) Y por encima de todo, tendrás que enseñar en que parte del proceso se encuentra el usuario – por ejemplo, página 1 de 3.

juiiicy

workingnomads

Especifica la sintaxis de entrada

¿Te has fijado alguna vez en la cantidad de formas diferentes que hay para introducir un teléfono? Un texto de ejemplo puede ayudar a especificar la sintaxis en la que deben introducirlo. Si necesitas que escriban el teléfono tal que así: 968 123 456, simplemente muéstralo. Sin embargo, hay una alternativa. Si no especificas en que formato quieres algo, se flexible con el formato. No muestres errores cuando la información no cumple con el formato deseado.

Despues de todo, ¿cómo pueden saber como quieres que escriban algo si no das instrucciones? En vez de eso, acepta lo que te dan y analizalo con JavaScript o RegEx (Expresiones regulares).

easypost

Utiliza el nombre apropiado para los botones

Los botones empiezan llamar la atención por tener nombres ‘pobres’ últimamente. Tener un botón que pone “Ir” o “Procesar” sería un buen ejemplo  porque no indica que ocurrirá claramente que ocurrirá al hacer click. Utilizar “Enviar correo” o “Crear una cuenta” son más descriptivos y concisos. Deja ver a los usuarios lo que está haciendo exactamente.

dropbox-1

Utiliza las etiquetas correctas

Los campos y sus descripciones tienen que ser directas y descriptivas. Quieres que los usuarios sepan exactamente que están introduciendo. Retomemos el ejemplo del formulario en el que pedimos información sobre los padres de alguien. Se directo y pon “Apellido de la madre” para ser lo más especifico y claro que puedas ser.

No hagas que los usuarios tengan que adivinar al apellido de quien te refieres.

karma

Explica porque necesitas cierta información

Por mi vida que a veces no me explico porque ciertos formularios de alta quiere mi teléfono. Esto es porque no explican porque es necesario – “por motivos de seguridad” no significa nada para mi. Si necesitas cierta información delicada, como el número de teléfono, por favor explica Por qué.

Personalmente, no me gusta dar mi número de teléfono. Sin embargo, si me dices que es porque quieres una forma fácil para contactarme en caso de que algo ocurra en el vuelo que acabo de reservar, me asegura que cuidarás de mi información. La seguridad es clave para la conversión en los formularios.

stripe

Desplegable o no Desplegable

With only a few options, the less sense it makes sense to have a drop down. The biggest flaw is that drop downs don’t allow you to see other options right away. A user has to click in order to see what else is available. If you are giving a user an option of two even four things, it’s easier to see all the options as once. Instead, use radio buttons or a toggle.

Con pocas opciones, no tiene mucho sentido tener un desplegable. La mayor pega del desplegable es que no deja ver las opciones directamente. El usuario tiene que hacer click para ver las opciones disponibles. Si estás dando al usuario una opción de dos o incluso de cuatro, resulta más fácil ver todas las opciones de una vez. En vez, utiliza botones radio o casillas de verificación.

healthtab

lovely

Últimos consejos

Para concluir, quiero dar una lista rápida con algunos consejos más. Tu formulario debería estar optimizado para móviles; asegúrate de que funciona bien en smartphones y tablets. Adicionalmente, piensa en utilizar las redes sociales para el inicio de sesión. Puede que sea una forma super fácil de mejorar las conversiones – mucha gente lo utiliza así es menos traumático para el usuario registrarse.

Es importante para los usuarios tener una razón clara para completar el formulario. Recuerda a los usuarios el valor o el beneficio que recibirán por completar correctamente el formulario. Las páginas para iniciar sesión deben decir claramente que estás ahí para iniciar sesión, y registrarse para recibir un eBook gratuito a través del boletín de noticias debería ser obvio también.

medium

awwwards

Conclusión

La optimización de un formulario se trata de credibilidad. Explica a tus usuarios porqué necesitas la información, y requiere solo lo que necesites de ellos. Asegúrate de guiarles tanto como puedas durante el proceso (textos de ejemplo). Los mjores formularios son simples, obvios y van al grano. No hagas perder el tiempo a nadie.

Desarrollador php especializado en convertir un buen café en código. Amante de JavaScript, Laravel y WordPress. Adicto a cualquier herramienta que acelere el desarrollo web. Sígueme en Twitter @zreedee.

Boletín de noticias

0 Comentarios

No hay comentarios aún

Deja tu respuesta

*
* Longitud mínima: 20 caracteres