Junio de 2001

© César Martín
iworkwithyou@yahoo.com
http://www.alzado.org

Como organizar listas de datos complejas

En este articulo se van a ver ejemplos sobre como organizar las paginas donde se muestran listas de productos (por lo general es la pagina de resultados de busqueda dentro de una tienda). Las paginas tomadas como ejemplos pertenecen a sites de supermercados, entre ellos, El Corte Ingles, Condisline, Alcampo y Webvan.

Resumen.

1. La pagina de resultados debe ofrecer informacion suficiente para poder tomar la decision de compra.
2. Es imprescindible mostrar una foto del producto (menor de 100x100 pixels suele ser adecuado).
3. Ofrecer ayuda para que el usuario pueda acortar el rango de busqueda evitando el uso de combos.
4. La pagina de resultados debe ofrecer unicamente 2 enlaces bien identificados. "Comprar el producto" (boton de comprar), "ver mas informacion" (enlazando el nombre del producto, o boton de informacion).
5. Aplica cambios en tu site y contrasta, obsevando el log de visitas, los resultados de estas modificaciones.

La foto del producto es un detalle que en muchos sites no aparece. Si bien la produccion puede llevar un tiempo y coste, es fundamental ofrecer una foto del producto. En muchos casos el nombre no es suficiente para saber de que estamos hablando y una foto ayuda a salir de dudas. En otros casos, la silueta del envase puede ser suficiente (limpiadores, utensilios, piezas mecanicas).

En estas 2 imagenes se ven los resultados que ofrece "El Corte Ingles" y "Condisline" buscando "yogures". El no ofrecer una imagen hace muy dificil reconocer de que producto se esta hablando.

El precio. El precio debe aparecer de forma notable y se debe dedicar una columna para que aparezca de forma limpia y sea facil comparar con los productos cercanos. Ya que el precio del producto es una factor determinante, es recomendable ofrecer la lista ordenada por precios. Si no se usa el criterio de precio para ordenar la lista, se debe indicar cual se esta usando para ayudar al usuario a encontrar el producto que necesita.

La descripcion. La descripcion del producto debe ser elemental y haciendo hincapie en el detalle que hace diferente a un producto sobre el resto (el sabor, el material, la caducidad, el peso). Para poder resaltar estos detalles debemos ordenar esta informacion de una forma sencilla y homogenea de tal forma que el usuario pueda rapidamente ver las diferencias entre productos.

En esta imagen del supermercado "Alcampo" sobre yogures se puede ver como la descripcion no ayuda a escanear la informacion.

El primer elemento es la marca, pero no esta identificado con lo que marcas desconocidas pueden equivaler a ruido (en este caso la marca "Auchan" es ruido). Tambien se puede ver como en el caso del "danone" la tercera linea de la descripcion apenas da informacion de utilidad (Yogur - Natural, pack de 4 unidades).

Las fotos al ser tan pequeñas no dan informacion sobre el envase con lo que apenas ayudan a ver que es lo que estamos comprando. La solucion pasa por mostrar una unidad del pack de tal forma que se pueda ver mejor el envase y graficamete indicar que el pack contiene 4 unidades.

2. En productos de compra es imprescindible mostrar una foto del producto.
Poner una foto del producto ayuda al usuario a saber que es lo que esta comprando. La imagen tambien ayuda a no tener que leer todo el texto de la descripcion del producto con lo que el tomar la decision de compra es mas rapido.

La foto del producto debe enseñar el envase, la etiqueta y el color del producto final. Si el producto final esta disponible en varios colores, se debe disponer de una foto para cada color para que el usuario pueda confirmar visualmente la version del producto que esta comprando. Si es necesario se deben mostrar fotos del producto de tal forma que se pueda ver el detalla de zonas importantes, la textura, parte trasera, etc.

Si la foto no es buena, es mejor no mostrarla. Una mala foto puede causar rechazo y el usuario no comprara el producto y puede que abandone el site. Es mejor invertir algo de dinero y hacer unas buenas fotos.

Procura que la foto no sea demasiado grande (para listas de resultados la foto no debe pasar de 75x75 y sobre los 125x125 para ficha de producto) y comprimela bien para evitar que pese mucho (usa gif y no mas de 64 colores). El peso de una foto pequeña (75x75 o menor) no debe superar los 2 - 3kbs.


3. Procura ofrecer ayuda para que el usuario pueda acortar el rango de busqueda.
En tiendas de discos y libros, buscar productos puede resultad facil ya que el nombre del autor y/o el titulo suele servir para acortar los resultados y darnos el camino hacia el producto que deseamos. En el caso de supermercados y tiendas de ropa (como ejemplos mas notables) el nombre del producto y la variedad hace que el encontrar lo que queremos sea algo mas complicado.


Por lo general, la solucion mas facil es crear paginas con directorios. El directorio se suele componer de una serie de categorias y subcategorias que muestran al usuario de forma abierta la estructura del site. El usuario puede ver todo lo que el site ofrece y pinchando sobre los enlaces profundiza en las diferentes categorias. Cuanta mas informacion ofrezca el directorio en cada paso, menos tiempo tardara el usuario en encotrar lo que quiere. No importa que la pagina tenga scroll o sea algo "densa" mientras ofrezca toda la informacion relevante.

Este ejemplo ilustra un directorio donde se muestran 3 categorias con diferentes sub secciones y con fotos de productos relacionados. La maquetacion debe variar segun las necesidades pero el esquema sera similar. Las ventajas de un directorio frente a un combo son que el control esta de parte del usuario ya que las opciones estan fijadas en la pagina y esta todo a la vista.

Si bien un directorio puede ser el camino mas comodo en el caso de supermercados y tiendas de ropa, no debemos olvidar tener un buscador eficaz que ayudara a los usuarios que ya se han aprendido el nombre del producto.

Hay que evitar el uso del combo como sistema de navegacion ya que es bastante incomodo de manejar y no muestra la informacion de una forma que se puedan ver diferentes niveles de un solo vistazo.
Aun peor es la solucion de usar combos "combinados". Por muy ingenioso que parezca el sistema no es comodo. Usa paginas completas con directorios y ofrece toda la informacion necesaria. El usuario se sentira en control del proceso.

Si ofreces botones que pueden alterar el rango de la buqueda o la apariencia de la pagina de resultados, procura que aparezcan cerca del dato a modificar.

En este ejemplo de Alcampo se puede ver como alejando los botones, sencillamente se pierde comprension e interes. Si ese boton estuviera cerca de la columna de la imagen seria mas facil de entender y mas comodo de usar.


4. La pagina de resultados de busqueda debe ofrecer unicamente 2 enlaces bien identificados. Comprar y mas informacion.
La pagina de resultados solo debe tener dos posibles enlaces, comprar el producto y ver mas informacion. El ver mas informacion solo si es realmente necesario. Si la pagina de resultados esta bien diseñada en la mayoria de los casos no sera necesario el ver la ficha de producto individual.

Lo mejor es usar botones del sistema con el nombre de "comprar", "informacion" y en el caso de "añadir al carrito de la compra", mejor usar un icono.

Ejemplo de Webvan	Ejemplo de Alcampo	Favorito Ejemplo de El Corte Ingles
Este ejemplo viene de Webvan donde se puede ver el icono y en texto el significado.	"Alcampo" muestra el resultado de la accion y la cantidad que vamos a introducir.	El Corte Ingles permite indicar la cantidad usando las flechitas y el carrito "ejecuta" la accion. Seria mejorable si en la caja de cantidad por defecto hubiera un "1" para que la mayoria de los usuarios puedan ejecutar la orden mas simple de la forma mas simple.