Cuando un fallo de diseño puede afectar a tus ventas

Escrito el 3 octubre, 2009 por Nacho Plaza

He entrado en la página web de Iberia para intentar comprar un billete de avión, y me he encontrado con un fallo en el diseño de las CSS que seguramente les está haciendo perder ventas. A mí casi me hace cerrar la pestaña del navegador. Pero justo después me he encontrado con un problema de usabilidad que ha sido lo que ha hecho que me perdieran como cliente.

Estaba intentando buscar un billete desde Copenhague a Madrid. Tras rellenar el formulario, presiono “Buscar” y me aparece un mensaje superpuesto sobre el contenido informándome de que la reserva se calculará y cobrará en la moneda del país de salida del vuelo. Pero el problema está en que ese mensaje queda oculto por un banner de publicidad en flash. Publicidad de la propia compañía.

A pesar de no poder ver el mensaje completo, me entero de lo que me quieren decir. Ahora sólo tengo que pulsar “Continuar” para que me realice la búsqueda. Pero resulta que sólo soy capaz de ver el botón “Volver” y no veo ningún botón de “Aceptar” o “Continuar”. Este botón queda también oculto detrás del banner, por lo que no puedo pulsarlo. Lo primero que me viene a la cabeza es que la página web de Iberia no me permite realizar búsquedas para poder comprar sus servicios, ya que me encuentro con un muro insalvable.

Así que redimensiono la ventana del navegador (uso una resolución de 1680×1050) para hacerla más pequeña y el mensaje se desplaza hacia la izquierda, de forma que ya puedo acceder al botón de “Continuar”. Esta acción, aunque nos parezca trivial a los desarrolladores, seguro que no se le ocure a todos los usuarios que se encuentren con este problema.

El problema está en que en las CSS usan float:left y left:50%. Esto hace que el contenedor del mensaje se posicione en el centro de la ventana del navegador. Luego lo centran aplicando un margin-left:-28.4em, que es la mitad de la anchura del mensaje. Por esos valores seguro que la resolución que usa el equipo de desarrollo es de 1280×1024 Ahora un consejo: las pruebas de tu aplicación no hay que hacerlas con tu equipo, sino con los que puedan tener tus clientes.

Al usar left:50% hacen que la posición del contenedor dependa de la anchura que tenga el navegador desde el que estás visualizando la web. La solución es sencilla: poned un left:200px y eliminad el margin-left.

Una de las primeras premisas de los programadores y diseñadores de sitios de ecommerce es “No pongas trabas al cliente en su proceso de compra. Evita que encuentre obstáculos y déjale el camino limpio hasta el botón Comprar“. En el momento de que algún usuario que acceda a tu web y por cualquier motivo no pueda finalizar una compra, estás perdiendo dinero.

Y ya que nos ponemos…

Una vez superado el tema de no poder hacer la búsqueda, llego a la pantalla en que me dicen los precios del billete que me interesa. Como bien me habían avisado, la reserva se ha calculado en la moneda del país de salida del vuelo. En este caso, coronas danesas. Pero… ¿dónde está el conversor a euros o la cotización aproximada de la corona danesa?

No me puedo creer que ahora tenga que ir a buscar un conversor online y tener que calcularme yo mi propia factura. Me parece bien que me avisen de que me calcularán y cobrarán la factura en coronas, a pesar de que sean una compañía española y yo un cliente comprando desde España. ¿Pero ni siquiera me dicen el precio aproximado en euros? Es en este momento donde decidí dejar la web de Iberia y probar en buscadores generalistas de vuelos.

Cuando decidí volver a entrar en la web para hacer pruebas con otros navegadores y para escribir esta entrada, intenté llegar al final del proceso de compra sólo para ver si encontraba algún otro problema. Justo después de la pantalla en que decidí no comprar su billete, aparece otra prácticamente igual y con un práctico conversor de divisas.

Si ese conversor hubiese estado en la pantalla anterior, podría llegar a haberles comprado el billete a ellos (aunque me hubiese salido bastante más caro que con quien realmente compré el billete). Este es un claro ejemplo de por qué hay que cuidar la usabilidad de tus aplicaciones. Puedes tener una aplicación web que no presente dificultades técnicas a tus clientes para realizar su compra. Pero si no tienes en cuenta también la usabilidad del sitio, puedes seguir perdiendo ventas.

Be Sociable, Share!

•