Y al llegar a la meta, pónselo fácil: el formulario de donación

por Santiago Álvarez

Última actualización: 16 06 2014

Desde un punto de vista de la tecnología, un formulario no deja de ser una página HTML que forma parte de la web. Pero por su importancia y complejidad es mucho más que eso. Es la puerta de entrada a los socios y a las donaciones. Y para tan importante misión, lo deseable sería que fuese una puerta por la que los potenciales socios pudiesen transitar fácilmente. En muchas ocasiones, no será tanto una cuestión de que los anhelados socios puedan atravesar fácilmente la puerta de las donación o la “membresía”, sino más bien que no les demos con la puerta en las narices a aquellos que deberían ser agasajados.

En este post vamos a reflexionar sobre ciertas cuestiones relacionadas con los formularios de donaciones.

Distracciones, ninguna

El principal objetivo de un formulario de donaciones es la donación, valga la redundancia. Esto es, la conversión. Es por ello por lo que se deben eliminar todas las distracciones que puedan considerarse irrelevantes para la conversión.

¿Es necesario que la página donde está el formulario contenga también la caja de búsqueda o el menú de navegación de la web? ¿Vamos a molestar al que está a punto de convertirse en socio preguntándole si quiere suscribirse a nuestro boletín?

Ejemplo de formulario sin distracciones.

Ejemplo de formulario sin distracciones.

No se trata pues de presentar un formulario y eliminar el resto de elementos, sino de sopesar muy bien cuáles de estos contenidos son relevantes y adaptarlos a la situación. La cuestión a la que se debe contestar al plantear qué elementos deben acompañar el formulario de donaciones es: ¿qué inquietudes tiene una persona que está a punto de hacer una donación, qué información le ayudaría a dar el paso y cómo debería presentarse dicha información?

Complicaciones, ninguna

La vida ya es suficientemente complicada por sí misma, no es necesario que se la compliquemos más a los que, por otra parte, deberíamos tender la mano. Lamentablemente, en los formularios de donaciones es habitual que se le complique la vida al donante innecesariamente y que gran parte de éstos abandonen. ¿Cuál es la tasa de abandono en tu formulario de donaciones? Es fundamental conocer ese dato para que seas consciente de lo que se está escapando por complicarle la vida al donante.

La gente no quiere perder el tiempo con formularios largos o en tener que seguir demasiados pasos para realizar su donación.

Ejemplo de formulario conciso.

Ejemplo de formulario conciso.

Se debe evitar que el formulario contenga información irrelevante o preguntas difíciles de entender que puedan espantar al futuro donante.

El potencial donante de Amnistía Internacional llega a este formulario porque sabe lo que es la entidad, es innecesario incluir un párrafo al inicio del formulario con tanto contenido. También es innecesario preguntar por la forma de pago, si se ofrece una única opción.

El potencial donante de Amnistía Internacional llega a este formulario porque sabe lo que es la entidad, es innecesario incluir un párrafo al inicio del formulario con tanto contenido. También es innecesario preguntar por la forma de pago, si se ofrece una única opción.

La usabilidad es fundamental para no crear complicaciones innecesarias al donante. Por norma general, es más usable que las etiquetas estén situadas sobre las cajas de forma que el desplazamiento de la vista sea de arriba hacia abajo sin tener que hacer zigzag. Además, en la medida de lo posible es deseable que exista una sola columna de campos y que al final de la trayectoria de la vista se encuentre claramente identificado el botón de enviar. Es un error incluir elementos del formulario debajo del botón de enviar ya que el recorrido del usuario termina en este punto.

Ejemplo de formulario con etiquetas sobre las cajas.

Ejemplo de formulario con etiquetas sobre las cajas.

Ejemplo de formulario con un campo después del botón de enviar que obliga al usuario a hacer un recorrido de ida y vuelta.

Ejemplo de formulario con un campo después del botón de enviar que obliga al usuario a hacer un recorrido de ida y vuelta.

De la misma forma que no debe incluir el formulario distracción alguna, tampoco debe incluir botones de cancelar, volver o borrar que no aportan nada en el proceso de conversión y lo único que pueden provocar es que el potencial cliente se confunda, haga click, pierda la información completada y abandone el formulario cabreado por haber perdido el tiempo.

Ejemplo de formulario con un botón de volver innecesario, que tiene la misma apariencia que el de enviar y además ocupa el lugar natural para este ya que se encuentra en la trayectoria de la vista (etiquetas y hacia abajo). Además contiene una línea horizontal que divide en dos el formulario innecesariamente.

Ejemplo de formulario con un botón de volver innecesario, que tiene la misma apariencia que el de enviar y además ocupa el lugar natural para este ya que se encuentra en la trayectoria de la vista (etiquetas y hacia abajo). Además contiene una línea horizontal que divide en dos el formulario innecesariamente.

Cualquiera que se haya tomado la molestia y el tiempo de intentar completar nuestro formulario se enfadará mucho si pierde la información proporcionada. Te invito a que hagas la siguiente prueba: completa tu formulario y antes de dar al botón de enviar dale al botón back de tu navegador. ¿Se alerta de la pérdida de información permitiendo cancelar la acción o, directamente se pierde la información proporcionada y se cabrea al usuario?

Dos pruebas que podemos hacer en un formulario para comprobar si éste es ‘usable’ son:

  1. ¿La tecla tabulador pasa de un campo a otro siguiendo el orden lógico y sin saltar ningún campo?
  2. ¿Haciendo click en las etiquetas el foco se sitúa en el correspondiente campo para completarlo? Es muy habitual que los formularios no permitan hacer click en las etiquetas para campos de tipo radio o check (selectores de una única opción o de múltiples). Desde un punto de vista de usabilidad no sería demasiado grave el que no fuese así pues los usuarios solemos hacer click directamente en el campo para empezar a teclear, pero, si este error se produce nuestro formulario tiene problemas de accesibilidad y podría funcionar mal en dispositivos móviles. La accesibilidad es un estándar de construcción de webs para facilitar el acceso a la información a todas las personas con discapacidad.
Formulario donde el orden de tabulación es correcta pero no funciona el click en las etiquetas. Además contiene demasiadas distracciones (cabecera y call2action “haz una donación” innecesario en la propia página de conversión) que hacen que el formulario aparezca demasiado abajo.

Formulario donde el orden de tabulación es correcta pero no funciona el click en las etiquetas. Además contiene demasiadas distracciones (cabecera y call2action “haz una donación” innecesario en la propia página de conversión) que hacen que el formulario aparezca demasiado abajo.

La validación de errores debe ser robusta para evitar que los datos introducidos sean erróneos pero suelen complicar demasiado la vida a los usuarios. Dos pautas a tener en cuenta a la hora de gestionar los errores de un formulario:

  1. Todos los errores se deben mostrar simultáneamente, no de uno en uno (lo ideal es hacerlo según se van completando pero por su complejidad no suele hacerse hasta que el usuario hace click en el botón de enviar).
  2. Los errores se deben mostrar en el mismo formulario identificando de forma clara cuáles son los campos erróneos y proporcionando ayuda para solventar el error.
Ejemplo de formulario que presenta los errores según se producen identificando de forma clara el error.

Ejemplo de formulario que presenta los errores según se producen identificando de forma clara el error.

Los formularios son la puerta de entrada a información personal de los donantes y por ello debe considerar toda la seguridad posible. Un formulario que no esté bajo SSL no es aceptable y provocará la desconfianza del potencial donante y eventualmente el abandono. Las páginas que están bajo SSL muestran un candadito en su barra de direcciones que comienza por https (Secure HTTP).

Hemos visto muchas cuestiones en este post sobre cómo deben ser los formularios de donaciones. Todas ellas encaminadas a facilitar la conversión del potencial donante que ha llegado a nuestra puerta de entrada. La recomendación final que haríamos desde aquí es “no le distraigas ni le compliques la vida”.

También te puede interesar:

Santiago Álvarez
Jefe de máquinas

2 Comentarios

  1. juan carlos dice:

    Hola!

    Estoy contriyendo una web para una ongd a través de wordpress y justo ahora debo hacer los formularios de donaciones. Como e hacen? que plugin/s debo utilizar?

    Gracias!

    1. Alicia Urrea dice:

      Hola Juan Carlos,

      ¿Cómo tienes pensado que se haga el pago? Esa es la pregunta clave. Dependiendo de la respuesta puedes optar por varias soluciones:

      1) El pago se hace con cargo a cuenta. Entonces simplemente necesitas recoger datos y para ello, se usaría un formulario que envíe a email como Contact Form 7

      2) Si vas a usar Paypal, lo que te recomendamos es que directamente mandes a Paypal para que sean ellos los que gestionen la tranasacción. Es decir, en tu web simplemente habría un embebido de Paypal

      3) Si quieres pasarela de pago, entonces es todo un poco más complicado. Se podría hacer con plugins prémium de WordPress, pero os recomendaríamos que en este caso, ya que hay que recoger datos privados, entonces se haga algún pequeño desarrollo para recoger esos datos.

      Un saludo

Deja tu comentario

Los campos con * son obligatorios