Nueva arquitectura de la información de un sitio web real

Asignatura: Arquitectura de la información

Consultor: Francesc  Puig  Mascaró

Introducción

En la asignatura Arquitectura de la Información se nos pidió que, gradualmente, nos involucráramos en el trabajo que hace un verdadero profesional de la AI. En la segunda PEC debíamos elegir un sitio web (de tres propuestos) para trabajar sobre él hasta el final del semestre. Yo elegí el sitio que me resultaba más familiar, ya que me pareció que mi análisis, estudio de la competencia y posteriores tareas serían mucho más acertadas si trataban de un sitio similar a otros con los que hubiera interactuado frecuentemente. El sitio de Las casas canarias se ajustaba a estas características. En la práctica final se nos pedía crear un nuevo árbol de contenidos y nueve wireframes del sitio web, siempre con la idea de mejorarlo lo más posible y basándonos en los trabajos anteriores, donde habíamos analizado este sitio y varios de empresas de la competencia, y planteado ya una mejora de su AI. De manera que en esta práctica propuse una serie de modificaciones de estructura, lenguaje y navegación, entre otras, para hacer de Las casas canarias un sitio más intuitivo, predecible, agradable y fácil de usar, además de mucho más eficiente desde el punto de vista comercial.

Etapas y retos

Lo primero que hice fue volver a analizar concienzudamente el sitio real de Las casas canarias, enfocando mi pensamiento en la propuesta que debía hacer. Así pues, constaté que en esta web hay varios errores graves y que el principal y más importante es que al usuario le resulta extremadamente difícil saber a qué actividad se dedica la empresa Las casas canarias (¿alquiler vacacional, venta de propiedades, o ambas?). Una vez aislado este gran problema, paso a enumerar otros de diversa gravedad, como por ejemplo:

• La ubicación del menú principal y de la caja de búsqueda.
• La falta de concreción de las opciones de los menús (¿cuando entro en el enlace de una isla, es para alquilar o para comprar?).
• La falta de referencias para el usuario (¿en qué parte del sitio estoy?).
• Una cierta sobrecarga informativa y, sobre todo, visual.
• La longitud excesiva de las páginas (al hacer scroll se pierde de vista la cabecera y el usuario se queda sin referencias).

Este análisis me llevó a pensar que es muy probable que el usuario que entre a esta web se pierda y se agobie fácilmente, lo cual hará que salga de ella y busque otras alternativas, en vez de quedarse y hacer su reserva/compra, que es el objetivo principal de la empresa al crear el website.

La segunda etapa fue plantearme qué tipo de sitio me gustaría ofrecer a mí si fuera la empresa que manda a construir una web para hacer más rentable su negocio y darse a conocer, y también viéndome como una usuaria que entra en el sitio por primera vez. Así, los objetivos principales que me planteé conseguir al proponer la nueva arquitectura de la información fueron los siguientes:

• Que el usuario sepa en cuanto entre al sitio su finalidad, en este caso, alquiler de un alojamiento para sus vacaciones o compra de un inmueble en las islas Canarias.
• Que cada página del sitio tenga los mismos elementos comunes: cabecera y pie, de forma que el usuario siempre sepa dónde está, de dónde viene y adónde puede ir, y pueda acceder directamente, por ejemplo, a la caja de búsqueda o al mapa.
• Que haya distintas opciones de búsqueda.
• Que sea fácil encontrar información práctica, tanto sobre las islas como sobre el transporte, ayuntamientos, etc.
• Conseguir todo esto utilizando un lenguaje coloquial, llano y directo.

Así que dividí el sitio en tres secciones principales: ‘Quiero Alquilar’, ‘Quiero Saber Más’ y ‘Quiero Comprar’. De esta forma, el usuario puede ir directamente a lo que le interesa (comprar o alquilar) y tener la pestaña ‘Quiero Saber Más’ siempre visible para poder buscar información práctica no directamente relacionada con los inmuebles (los enlaces de esta sección, por cierto, están buscados cuidadosamente para que, en la medida de lo posible, no lleven a sitios de la competencia, sino a sitios oficiales).

Le di mucha importancia al lenguaje, y, aunque dudé mucho sobre la forma en que iba a dirigirme al usuario, finalmente me decidí por el tuteo por la sensación de cercanía que aporta (expresiones como ‘Quiero comprar’ o ‘Quiero saber más’ van directo al grano sin ser demasiado coloquiales).

Además, con esta AI quise crear sensación de marca (con el logo de la empresa, el título del sitio y un subtítulo que explica claramente qué es esta web), permitir al usuario hojear y buscar los alojamientos o propiedades de la manera que le resulte más fácil e intuitiva (por isla o por tipo de alojamiento), proveer al sitio de distintas vías de comunicación (correo, redes sociales) y facilitar lo más posible el acceso a las opciones fundamentales, hasta el punto de repetirlas en varias ubicaciones de una misma página (enlaces a redes sociales, botón Lo que dicen de nosotros, etc.).

Otro objetivo era dar información suficiente para que el usuario tenga a su alcance enlaces para ampliar información, si lo desea, y que pueda modificar una búsqueda concreta. Procuré dar mucha importancia a los pequeños detalles, como colocar los breadcrumbs o las flechas (página anterior/siguiente) tanto en la parte superior como en la inferior de cada página.

Cacoo, por su facilidad de manejo y claridad visual, fue la herramienta que elegí para crear el nuevo árbol de contenidos del sitio, ya que uno de los retos que se nos planteó en el enunciado de la práctica era que este esquema fuera muy claro e intuitivo. Debo, sin embargo, puntualizar que:

• Las cajas llamadas ‘Un enlace’ por cada isla están pensadas para no sobrecargar el árbol con información irrelevante (se sobrentiende que todas las islas tendrán las mismas secciones).
• El código de colores es el siguiente: lo que está en azul es accesible desde cualquier página y lo que está en rosa, no.

Este es, pues, el árbol de contenidos que propuse:

Por fin, la última etapa consistió en crear nueve wireframes para dejar perfilada mi propuesta de AI. Uno de los retos principales fue intentar hacerlos lo más autoexplicativos posible y también que provocaran una sensación visual agradable y “ligera”. A modo de información práctica, diré que los hice con mockingbird, ya que de todas las herramientas recomendadas en el enunciado de la práctica me pareció la más completa, cómoda y práctica. Estos son los wireframes que debía crear: home o página de inicio, subhome de los principales ítems de la web (‘Quiero Alquilar’ y ‘Quiero Comprar’), página de detalle de un alojamiento, resultados de una búsqueda, página de una reserva, de contacto, el mapa del sitio y, finalmente, una página a elegir por cada alumno (página de una isla: Lanzarote).

El primer wireframe que hice es, pues, de la página de inicio del sitio (Las Casas Canarias/Nuestras Casas Canarias), donde se ve claramente que la cabecera y el pie tienen todos los elementos fundamentales para que el usuario se sienta cómodo y ubicado, sabiendo en todo momento qué opciones tiene. El resto de la página simplemente nos muestra las tres secciones en que se divide el sitio y un mapa del archipiélago. Añadí un botón con la opción ‘Lo que dicen de nosotros’ para que el usuario pueda ver las opiniones de los clientes:

Las siguientes páginas son ‘Quiero Alquilar’, donde complementé el título con la frase “una Casa Canaria para mis vacaciones” para despejar cualquier posible residuo de duda sobre su finalidad (alquiler vacacional, no residencial), y ‘Quiero Comprar’. No hice un wireframe de ‘Quiero Saber Más’, porque esta página consiste simplemente en los enlaces que se ven en la página de inicio. Éstas dos subhomes que muestro a continuación son prácticamente gemelas, con pequeñas diferencias específicamente adaptadas para cada caso (como la segunda caja de búsqueda) y en ambas se ofrece una selección especial de alojamientos:

La siguiente es la página detalle de un alojamiento (Casa Virginia), con la información básica de la casa y una caja para hacer una reserva directamente, además de un apartado de fotos que está claramente diferenciado de lo anterior (para aportar sin confundir). En todas las páginas donde era posible procuré, además, poner una caja con accesos directos a una selección especial de alojamientos:

A continuación, veremos la página ‘Tu Búsqueda’, que deja claro en qué sección estamos buscando, muestra los resultados visual y textualmente, y da opción al usuario de modificar la búsqueda de dos maneras distintas:

‘Quiero Reservar’. Una de mis grandes dudas al hacer esta página fue si debía mostrar el precio de las casas en su ficha, en las selecciones especiales, etc. o si solo debía mostrarlo en la página de reservas. Me decidí por ésta al ver que era un opción muy utilizada en webs de este estilo y, al parecer, da buenos resultados. (Aunque en la página ‘Tu búsqueda’ ya puse la opción de buscar por horquilla de precios):

La página que se ve a continuación es ‘Contacta con Nosotros’, donde se ofrecen distintas vías para contactar con la empresa:

Casi acabando tenemos el ‘Mapa del Sitio’. Es complicado diseñarlo, pero vale la pena, porque es la mejor manera de tener una visión realmente global del site:

Y, por último, la página Lanzarote [1], con información general, mapa interactivo señalando las casas que hay en la isla, fotos y la susodicha selección especial de alojamientos:

Conclusiones

Lo que más me llamó la atención al hacer esta práctica fue darme cuenta del ingente trabajo que hay detrás de cada sitio web. Hacer esta parte del trabajo de un arquitecto de la información me llevó muchísimo tiempo de análisis, planificación y ejecución, pero aprendí que, en realidad, es solo una pequeña porción del proyecto: no tuve que hacer tests con usuarios, por ejemplo, y tan solo hice los wireframes de algunas páginas del sitio. Por otro lado, fue una experiencia interesantísima que me ha aportado mucho, sobre todo en cuanto a capacidad de observación y análisis de los sitios. Creo que, de aplicarse esta propuesta de AI, mejoraría sustancialmente el sitio original, pero aun así, hay problemas en los que me resultó muy difícil tomar una decisión y no estoy segura de haber acertado. Por ejemplo, en lo que comenté anteriormente sobre dónde poner el precio: aunque preferí seguir la línea de muchos de los sitios similares que encontré, yo personalmente prefiero que me muestren los precios al mismo tiempo que las casas, y no estoy convencida de haber elegido la mejor opción (aunque supongo que, en este caso, el cliente tendría una opinión bastante clara). Finalmente, solo me queda decir que la práctica y la asignatura en general me parecen utilísimas y que, sin saberlo, yo ya pensaba desde hacía tiempo en la AI, planteándome, cada vez que entro en un sitio, qué opciones faltan, qué funciona y qué no, lo mucho que me ahuyenta o confunde el exceso de información…, en definitiva, ¡queriendo modificar la AI de los sitios que visito!

Nota y fuentes consultadas

GIL, E.; DE LERA TATJER, E. y MONJO PALAU, A. Usuarios y Sistemas Interactivos.

HOWARD, C., 20 Steps to Better Wireframing.

MÁRQUEZ CORREA, J., Guía para evaluación experta.

MONTERO, Y. H. y MARTÍN FERNÁNDEZ, F., Guía de Evaluación Heurística de Sitios Web.

MONTERO, Y. H., y MARTÍN FERNÁNDEZ, F. J., Elementos de navegación y orientación del usuario.

MORVILLE, P. y ROSENFELD, L. Arquitectura de la Información para la World Wide Web.

NICHANI, M., Organizing Digital Information for Others.

NIELSEN, J., Ten Usability Heuristics.

RIPOLL, A. Arquitectura de la información de la v3 de Mosaic.

SPENCER, D., TClassification schemes and when to use them.

Cita recomendada: HANDLER, Florencia. Nueva arquitectura de la información de un sitio web real. Mosaic [en línea], abril 2013, no. 107. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n107.1319.