Usabilidad y prototipado del e-commerce Cyberdark.net

Para mi Trabajo Final de Máster decidí trabajar una disciplina que me resultaba muy interesante como es la usabilidad. Es por ello que focalicé mis esfuerzos en optimizar un sitio web que me diera las opciones de hacerlo, en este caso Cyberdark.net, un e-commerce centrado mayoritariamente en la venta de libros de Ciencia Ficción, Fantasía, Terror y Misterio. Dicho sitio presenta unas carencias evidentes en cuanto a UX, por lo que existía un gran motivación por abordar las mejoras ya que las opciones de optimización eran muy amplias. Además, el hecho de que se tratara de un sitio web de comercio electrónico permitía trabajar todo el proceso de compra, desde la página principal hasta la de compra finalizada.

El objetivo principal del trabajo era optimizar la usabilidad del sitio web. Para ello, fue necesario fijar unos objetivos específicos, que fueron los siguientes:

– Realizar un análisis heurístico del sitio web para diseñar el test de usabilidad.

– Analizar los procesos de compra de la competencia para aprender de ellos tanto de sus virtudes como de sus defectos.

– Realizar test de usabilidad sobre el sitio actual para detectar los aciertos y errores que existen y que ayudan a configurar los prototipos.

– Realizar unos prototipos acordes a los resultados obtenidos en el análisis de la competencia y de los extraídos del test de usabilidad.

– Realizar test de usabilidad sobre los prototipos para comprender si los cambios en usabilidad que se han llevado a cabo suponen una mejora en el proceso de compra.

La metodología que se siguió fue la siguiente:

Análisis heurístico

Tabla Análisis heurístico
image-6022

En primer lugar se realizó un análisis heurístico, basado en la Guía de Evaluación Heurística de Sitios Web de Hassan Montero y Martín Fernández (2003). El cuestionario incluye una serie de preguntas en las que una respuesta afirmativa indica que no existe ningún problema de usabilidad y si, por el contrario, la respuesta es negativa, se evidencia que sí existe. En este paso se detectaron hasta treinta y tres problemas, lo que en cierta manera justificó la acción sobre el sitio. Además pudieron detectarse los primeros problemas de UX, lo que permitió configurar las preguntas del test de usabilidad.

Benchmark de la competencia

Tabla Benchmark
image-6023

En este cuadro se resumen los principales aciertos y errores de los tres sitios analizados en el benchmark: Amazon, Casa del libro y Librería Ender. En este punto se extrajo información interesante a seguir y a evitar que quedaría patente en los prototipos.

Test de usabilidad para conocer los errores de usabilidad del sitio actual

En este punto se realizó un primer test de usabilidad para conocer de mano de los usuarios cuáles los principales errores que se encontraban mientras navegaban por las distintas páginas de Cyberdark.

Algunos de los errores detectados fueron los siguientes: diseño general de la página poco atractivo, relación del logo con el tema de la empresa, abuso de catálogo en la home, imágenes de producto muy pequeñas y texto de tamaño muy reducido, ausencia de footer, información de envío y de contacto mal presentada y ubicada, buscador con poca presencia, botones call to action mal presentados en cuanto a tamaño, color y ubicación, ausencia de breadcrumbs, ficha de producto con problemas de diseño y a nivel de información, etc.

Prototipos

Aquí se presentaron los prototipos de las páginas del proceso de compra, que incorporaban todo lo aprendido del benchmarking y de la información extraída del primer test de usabilidad. Se incluyó la home, la página de producto, de carrito, de datos de envío, de dato de pago y la de compra finalizada.

Prototipos
image-6024

Test de usabilidad para comprobar si los cambios realizados habían tenido éxito

Por último, se testearon los prototipos, dejando algunos resultados interesantes y positivos al respecto del objetivo principal de optimización del sitio. Algunas de las mejoras introducidas que obtuvieron una respuesta positiva fueron: mejor comprensión del propósito del sitio web a través del título, mayor visibilidad de los productos, sus características y disponibilidad, mayor presencia de la información de contacto, la nueva ubicación del buscador, de la zona de identificación y del carrito de compra, la inclusión de la newsletter, de los destacados informativos, de las valoraciones y los breadcrumbs de situación en la página y en el proceso de compra, la claridad en la presentación de información en la ficha de producto, las opciones de visualización de las imágenes, los call to action destacados, la libertad de navegación, etc.

Los usuarios también detectaron algunos problemas durante la realización del test sobre los prototipos, algunos de ellos fueron: el tamaño del slider de la página principal, la ubicación de enlaces incluidos en ciertas categorías, el tamaño de los botones ‘Ver más’, la ubicación de la lista de deseos, el número de campos del formulario, la opción de registro, la ubicación de la opción de comprar sin registrarse, el texto de felicitación de compra de la página final, etc.

CONCLUSIONES

Se puede concluir que, tras aplicar la metodología correspondiente, se ha conseguido una mejora en la UX, que ha quedado evidenciada en los últimos tests. Además, se han establecido unos cimientos sobre los que construir el nuevo diseño de Cyberdark.net. Se ha iniciado un proceso de pruebas que ha de ser iterativo para asegurar que el sitio sea lo más usable posible antes de un hipotético lanzamiento.

Los proyectos a los que daría pie este TFM podrían ser, en primer lugar y el más evidente, realizar más pruebas de usabilidad para conseguir un diseño altamente usable que pudiera ser el inicio de una implementación real en Cyberdark.net. Por otra parte sería interesante trabajar una disciplina relacionada con la usabilidad como es la Arquitectura de la Información y optimizar el sitio en este ámbito. Por último, se podría investigar la situación del sitio en cuanto a SEO y, si existe margen de mejora, optimizar el proceso de compra o las páginas más relevantes como la principal, la de catálogo o la de producto.

¡Deja el primer comentario, no seas tímido!

Únete a la discusión

Puedes utilizar los siguientes HTML tags y atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>