Usabilidad en E-commerce: Formularios

3 Comments

Contrariamente a lo que se suele pensar, rellenar nuestras páginas web con botones bonitos y plugins de jQuery que nos llenan la página de efectos chulísimos no hace que una página sea usable. Hace tiempo que comenté aspectos de usabilidad que una tienda online debería cumplir para evitar que su ratio de conversiones cayese por culpa de una página «mal hecha».

En este caso vamos a hablar del papel que juegan los formularios en esta ecuación llamada ‘Usabilidad‘.

¿por qué es importante la usabilidad en un formulario? En lo que a la interacción hombre-máquina en la web se refiere, en la mayoría de los casos la interfaz de uso es un formulario para introducir X datos. La mayoría de las veces, cuando un usuario tiene que interactuar con una tienda online tiene en frente un formulario para introducir X datos. Los formularios de una tienda online deben ser usables, porque sino seguramente vamos a frustrar y disuadir a usuario. Podemos tener una página super bonita, pero si nuestro formulario de checkout es «feo», no valida, destá descolocado, etc, no os aseguro la conversión.

Hay 6 cosas que un usuario espera de un buen formulario:

1. Etiquetas

Le dicen al usuario que dato se requiere en el campo al que pertenecen.

Palabras individuales vs frase: Si con una palabra no queda claro para qué es el campo, entonces debemos utilizar  una frase para eliminar ambigüedad.

No utilizar nunca mayusuclas (excepto la primera letra, por supuesto), ya que le daría un aspecto poco profesional. En vez de «Nombre y Apellidos» es mejor utilizar «Nombre y apellidos».

-Aiunque la mayoría de los lectores electrónicos usan ya las etiquetas <label> para leer los formularios, todavía quedan algunos que necesitan de los dos puntos «:» para leerlos correctamente, y estaríamos cumpliendo con las guías generales de usabilidad.

-Respecto a la posición de las etiquetas, si quieres que los clientes rellenen el formulario lo más rápido posible, entonces pon las etiquetas encima del campo. En caso contrario, lo ideal sería ponerlos a la izquierda, ya que obliga al cliente a leer con detenimiento la información que tiene  que leer.

2. Campos de entrada

Los datos importantes que necesita introducir el usuario.

Tipos de campos: Hacer un buen uso de los tipos de campos es imprescindible. Por ejemplo: si sólo existe una opción posible, utilziar Radio buttons, en caso contrario Checkboxes.

Estilo de los campos: Manetener los estilos lo más simple posible es fundamental. Existen miles de plugins de jQuery para modificar los campos y adaptarlos al estilo de nuestra web, pero tampoco hay que pasarse, ya que el usuario podría no identificar los campos a la primera. Recordad, «Don’t make me think«.

Restricciones en los campos: Si es necesario que el usuario introduzca los datos en un formato específico, es mejor que le pongamos una nota de ayuda en el lateral que devolverle un error al completar el formulario. Por ejemplo, para las fechas «DD/MM/AAAA» o el DNI «NúmeroLetra».

-Si existe algún campo obligatorio, utilizar el asterisco «*» para marcarlo, y mejor que sea en un color que destaque sobre el campo.

3. Acciones

Botones o enlaces que ayuden a enviar el formulario.

Acciones primarias vs secundarias: Si existe un botón «Reiniciar formulario» al lado del de «Enviar», mejor que sean de distinto color o forma, no queremos causar confusión en el cliente cuando  estamos a un click de terminar la venta.

Nombres: El infinitivo «Enviar» está demasiado extendido y además da la sensación de que el formulario es genérico, nada destacable. Si queremos diferenciarnos, es mejor cambiar esa palabra por otra que aluda a la propia acción, por ejemplo: «Acceder», «Unirse ahora», «Comprar»….

4. Ayuda

La mejor forma de ayudar a rellenar un formualrio, es añadiendo ayuda interativa mediante iconos situados al lado del campo,y cuando el usuario se situe sobre ellos o haga click, mostrarle información referente a ese campo.

5. Mensajes

Encuentro necesario e imprescindible que el usuario reciba feedback cuando haya completado y enviado un formulario. Por ejemplo: «El formulario se envío correctamente»,»el e-mail elegido ¡ya se encuentra en nuestra base de datos». Estamos teniendo una conversación con ellos a través del formulario, si nos hablan y no les contestamos sería una falta de educación ¿no?.

6. Validación

Validación de los datos que introduce el usuario, con el fin de asegurarnos de que los datos encajan con lo que se pide, devolviendo un feedback al usuario.

-Es recomendable añadir validación sólo donde sea necesario. No podemos frustrar al usuario, sino ayudarle a que los campos clave los rellene con confianza.

Otros post sobre Usabilidad en BrainSINS

Usabilidad en E-commerce: Checkout

Usabilidad y experiencia de usuario en el carrito de la compra

La buena voluntad del visitante

Referencias

An Extensive Guide to Web Form Usability

Los formularios de registro de Twitter y Skype han sido los elegidos para las imágenes del post.

Suscríbete a nuestra newsletter