AI PAC02: Evaluación de la arquitectura de la información de webs

PAC /02Evaluación de webs desde el punto de vista de la Arquitectura de la Información

Beatriz García Fernández Grado Multimedia Octubre 2012

PAC/02 BLOQUE I COMPONENTES DE LA ARQUITECTURA DEL SITIO WEB ELEGIDO

ESQUEMAS DE ORGANIZACIÓN

ESTRUCTURAS DE ORGANIZACIÓN

FOLKSONOMÍAS

ETIQUETAS

SISTEMA DE NAVEGACIÓN

BLOQUE II FASE DE INVESTIGACIÓN

EVALUACIÓN HEURÍSTICA

BENCHMARKING O ESTUDIO DE LA COMPETENCIA

CONCLUSIONES

PAC02 / BLOQUE I. COMPONENTES DE LA ARQUITECTURA DEL SITIO WEB ELEGIDO

La web escogida es www.practica.com.es, una web que muestra el catálogo de productos de una cadena de muebles y de decoración.

ESQUEMAS DE ORGANIzACIÓNUtiliza un esquema de organización ambigua. Para ser más precisos, organización por temas. Esta forma de organización es ideal debido al al tipo de usuario que visita este tipo de web: es un usuario que busca una clase de producto, pero no uno concreto, y por eso, gracias a este tipo de organización, navegan por los diferentes productos hasta decidirse por uno. Le permite descubrir de forma fortuita productos que a lo mejor no buscaba.

Es una forma de organización que la empresa debe aprovechar para que los usuarios encuentren productos que no estaban en su mente y así aumentar las ventas de la compañía.

ESTRUCTURAS DE ORGANIzACIÓNLa estructura de organización utilizada es jerárquica, que además peca de ser demasiado ancha, plana y desequilibrada. También se han observado algunos fallos de conexiones. Por ejemplo, para ir a la página de contacto se debe hacer a través del pie de la página o entrando en la sección “Club” y buscarlo allí.

HOME

PRODUCTOS TIENDA ENTREGAS CLUB

CONTACTO

MI CUENTA

PAC02 / BLOQUE I. COMPONENTES DE LA ARQUITECTURA DEL SITIO WEB ELEGIDO

FOLkSONOMíASNo se utilizan folksonomías. El contenido de la web está editado integramente por la empresa y los usuarios solo pueden dejar un comentario en las páginas de producto.

ETIQUETASa) Iconos

Navegación global

Navegación suplementariab) Textuales

• Encabezamientos

• Opciones del sistema de navegación (menú)

• Términos de índiceEl único meta tag que aparece en el código de la página es el siguiente que creo que no ayuda mucho al posicionamiento de la página:<meta name=”keywords” content=”condiciones, plazos de entrega, transporte, paquetería” />

SISTEMAS DE NAVEGACIÓNBásicamente la navegación se hace a través del encabezado y del pie de la página:

PAC/02 BLOQUE I COMPONENTES DE LA ARQUITECTURA DEL SITIO WEB ELEGIDO

ESQUEMAS DE ORGANIZACIÓN

ESTRUCTURAS DE ORGANIZACIÓN

FOLKSONOMÍAS

ETIQUETAS

SISTEMA DE NAVEGACIÓN

BLOQUE II FASE DE INVESTIGACIÓN

EVALUACIÓN HEURÍSTICA

BENCHMARKING O ESTUDIO DE LA COMPETENCIA

CONCLUSIONES

PAC02 / BLOQUE II. FASE DE INVESTIGACIÓN / EVALUACIÓN HEURíSTICA

EVALUACIÓN HEURíSTICARealizada según las directrices plasmadas en el libro Arquitecture for the World Wide Web de Morville & Rosenfeld.

IdentidadLa marca es grande y preside todas las páginas del sitio. Además utiliza un color rojo muy luminoso que destaca de forma muy importante sobre el fondo negro sobre el que está colocado. Los colores rojo y negro se utilizan en el resto de los elementos de la web, creando una mayor uniformidad estilística.

Una frase colocada justo debajo del logo nos indica que estamos visitando una “Tienda de muebles y decoración online”.

La dirección de la web es “http://www.practica.com.es”, que, aunque el nombre coincide con el nombre de la empresa, la terminación del dominio “.com.es” puede ser confuso a la hora de escribir de memoria la dirección.

A la hora de buscar la información de contacto el usuario debe dirigirse a la parte inferior de la página, donde el titular “CONTÁCTENOS” deja claro su cometido. Aún así, la forma de colocar los textos es un poco confusa al usar la mayúscula indiscriminadamente y sin un estilo que marque jerarquías en la información. Si este texto no estuviese encabezado por la pastilla roja con la fotografía de la responsable de atención al cliente, podría pasar desapercibido. Error grave.

El estilo gráfico de la web nos indica que está dirigida a un público muy amplio, aunque mayoritariamente joven/mediana edad y con un estilo contemporáneo.


ContenidoLa página principal resulta confusa al no dejar claro en qué se diferencia el contenido que se muestra aquí del que no.

Debajo del menú horizontal de navegación nos encontramos un banner muy destacado que podría estar mejor aprovechado con otro contenido más sugerente. Actualmente está destinado a un anuncio especial para Halloween y a otro anuncio sobre bombillas. Estos anuncios podrían haberse colocado en un posible lateral dedicado a anuncios y ofertas, en lugar de ocupar un lugar tan privilegiado en la página de inicio de la web, ya que no es lo suficientemente atractivo como reclamo para seguir navegando por la web. Error grave.

Debajo de este destacado se muestran una serie de productos que no tienen ningún tipo de relación entre ellos y no están acompañados

por ningún titular que dé alguna pista sobre qué son: últimos productos añadidos a la web, productos más vendidos, productos destacados, etc. Error grave.

Justo debajo de estos productos nos encontramos 3 anuncios que no tienen nada que ver los unos con los otros: Tarjeta cliente, muebles de oficina y ofertas en baño. Quizás enteresaría destacar más el anuncio de la tarjeta cliente para conseguir fidelizar al usuario, y por eso se necesitaría colocarlo en otro lugar. También el anuncio de las ofertas tendría que destacarse más en la página ya que ahora queda uno poco desapercibido entre tanto contenido. Error grave.


Otro error es la ausencia de algún elemento que nos indique que estos productos corresponden a la temporada actual o si estamos viendo algo antiguo, lo único que nos puede dar una pista es el destacado “Nuevo” que acompaña a algunos productos, pero aún así no sabemos si fueron “nuevos” en otro momento del año y estamos revisando una página antigua. Error leve.

Los textos utilizados en algunos destacados están incompletos (acabados en “...”) dando una sensación de poca seriedad por parte de la empresa y de inseguridad al usuario al no saber qué producto es. Error grave.

A la hora de acceder a los productos la información aparece más clara, aunque con errores ortográficos y gramaticales en los textos. Quizás habría que hacer que los textos de las características del producto apareciesen de una forma más destacada y con un mejor redactado. Toda esta página del producto se debería intentar rediseñar para que no tenga una apariencia tan pobre. Quizás se tendrían que añadir recomendaciones por parte de la empresa para combinar este producto con otros o productos similares al escogido. Error medio.

Solo tenemos la posibilidad de saber el nombre completo del producto al pasar el puntero del ratón por encima de la foto lo que acompaña.


Otro pequeño caos lo encontramos en la sección “Tiendas” en la que la ausencia de una retícula clara y poco cuidado al colocar los textos resulta casi imposible saber qué dirección corresponde a cada tienda. Error muy grave.

Una sección que necesita una especial atención es la del “CLUB” que, además de tener una etiqueta que no nos proporciona información sobre qué encontraremos al accecer, tiene una estructura y un estilo gráfico que se aleja completamente del resto de la web. Al ser un espacio más informal esto podría ser positivo, pero en el caso de esta web no se consigue. El formato “blog” tan dispar crea confusión al usuario que accede a esta página. Error grave.

Otro problema importante que se encuentra es que el menú de navegación de esta sección es muy confuso e incluso tiene una pestaña (“Contacto”) que no encontramos en el menú del resto de la web. Error grave.


NavegaciónEl sistema de navegación de la web lo tenemos presente en todas las páginas de la misma. En el único caso en el que cambia, como ya se ha comentado anteriormente, es en la sección “Club” que necesitaría un rediseño tanto de etiquetas como de formato para continuar con la línea del resto de la web. Como sucede en la mayoría de webs, al clicar intuitivamente en el logotipo accedemos a la pátina de inicio de la web. El menú nos permite acceder a cualquier parte del sitio web sin importar en la parte que nos encontremos (excepto desde “Club”).

Cuando se entra a una categoría de productos, como podría ser “Sofá” aparece una pantalla en la que se indica con un número la cantidad de páginas que han resultado de la elección, además de dar la posibilidad de ordenarlo según precio, nombre, fecha, etc.:

Otra forma de acceder a cualquier contenido desde cualquier sitio de la web es a través del pie de página, que incluye un acceso directo a diferentes secciones de productos, funcionando como una especie de mapa de la web, y a otras secciones de interés que no encontramos en ningún otro sitio de la web como “Contáctenos” e “Información”. Error leve.

En esta parte de la página también encontramos los iconos de acceso a los perfiles de la empresa en diferentes redes sociales.

Cuando accedes a un producto aparece un pequeño menú de navegación tipo “breadcrumbs” que sitúan al usuario en qué sección de la web se encuentra en ese momento.

Misteriosamente la única sección que también dispone de este tipo de navegación es la de “ENTREGA”. Se debería elegir si este tipo de navegación está en todas alas secciones o en ninguna. Error leve.


EtiquetadoUno de los problemas más importantes en esta web es el de las etiquetas ya que se han detectado diferentes anomalías:

¿Qué diferencia hay entre “Mi cuenta” y “Entrar/Usuario”?Realmente no tendrían que estar separados, ya que además, al acceder a cualquiera de los dos, el enlace te lleva a la misma página. Error muy grave.

No hay uniformidad al escoger las categorías de “Productos”. Se mezclan productos (“Iluminación”, “Decoración”), con estancias (“Salón”, “Cocina”) y otras categorías que no quedan muy claras (“Descanso”, “Auxiliar” y una peculiar “Otras cosas” que aún confunde más). Error muy grave.

¿Qué encontraremos al hacer clic en “Entrega” o “Club”?Serían mas adecuadas unas etiquetas como “Información” o “Blog” respectivamente. Error grave.


La página de “Club” aún tiene unas etiquetas más confusas y poco definidoras sobre su contenido:

¿Qué encontraremos al hacer clic en “Sugerencias” o “En la red”?Al ser etiquetas de un blog se podría utilizar alguna frase con vocabulario informal para indicar qué son, como “Nuestras sugerencias”, “Eventos de la empresa”, “Encontrado en la red”... Error grave.

¿Por qué el logotipo principal se repite en la cabecera y en el menú? ¿Qué diferencia hay si hago clic en “Practica” o en “Productos”? Error grave.

¿Qué diferencia hay entre “Entrar” y “Registrarse”? ¿No es lo mismo? Error muy grave.


Gráficos webNo hay una uniformidad en cuanto a la representación de los productos que se venden en la web: lo podemos encontrar sin fondo, con un fondo de color, con decoración a su alrededor, etc. Tampoco mantienen una misma perspectiva que crea confusión al usuario además de transmitir poca elegancia y escasa profesionalidad.

En una misma fila encontramos un sofá en un ambiente real, un sofá recortado sobre fondo blanco y un sofá recortado sobre un fondo degradado.

Ejemplos de la poca uniformidad gráfica en los destacados de la web. Error medio/grave.

En algunos casos, los destacados parecen tener una uniformidad gráfica, pero al final se estropean al tener el titular pisando inadecuadamente la imagen. Error grave.

Gráficamente el sitio web es un poco pobre, y el blanco que domina, en lugar de dar equilibrio, le da un toque de “inacabado” a la web.

Como ya se ha comentado anteriormente, los destacados que encabezan cada página son muy sencillos y sin un estilo gráfico definido y poco atractivo.

Los pictogramas utilizados en la sección “Mi cuenta” requieren de un texto para poder ser entendidos. Algunos iconos podrían mejorarse.


BúsquedaTanto en la web como en el blog, el campo de búsqueda se ve perfectamente en la página, ya que está situado en la cabecera de la página y en la parte derecha.

Cuando se escribe en esta casilla, aparecen algunas sugerencias que tienen que ver con la palabra escrita, aunque no aparecen todas las coincidencias que existen y puede provocar errores de búsqueda. Error medio.

Los resultados que aparecen corresponden con el titular que tienen los productos. Quizás si los productos tuvieran “meta tags” que los describieran correctamente obtendríamos unos resultados más ajustados a la palabra que se escriba en este campo. Actualmente, al buscar la palabra “cama”, además de devolvernos resultados de camas y sofás cama, también nos parecen “camareras” porque las dos palabras empiezan de la misma manera pero no tienen nada en común como productos. Error leve.


FeedbackUn error muy grave de esta web es que la página de “Servicio al cliente/Contactarnos” sólo se accede directamente a ella desde el blog, donde encontramos una pestaña en el menú. Ni en el pie, ni en otro lugar de la web, tenemos acceso a esta sección tan importante para una empresa de ventas. Error muy grave.

En la página de cada producto el usuario tiene la posibilidad de dejar su opinión, que debería ser controlado por un administrador para que no se cuelen mensajes inoportunos que dañen la imagen de la empresa.

Cuando cometemos un error a la hora de registrarnos aparece el mensaje de error pero no nos indica dónde localizarlo. Si el usuario no está acostumbrado se cansará de buscar el error y puede que no continúe con el registro. Error leve.

En el pie de la página, si buscamos en la columna de “Contáctenos” lo único que tenemos es un enlace para enviar un email desde nuestro ordenador. Si nos revisamos el resto de columnas del pie podemos observar que en la columna de “Información” hay un link directo a “Contacte con nosotros”. Error muy grave.


UtilidadDespués de visitar la web queda claro que su objetivo es vender productos (muebles).

Los servicios que ofrece la web son:

• Catálogo de productos• Contacto• Información de la empresa• Inscripción• Solicitar tarjeta • Localización de las sucursales• Blog

PAC02 / BLOQUE II. FASE DE INVESTIGACIÓN / BENCHMARkING

BENCHMARkING O ESTUDIO DE LA COMPETENCIABaltixhttp://www.baltix.com/

El estilo gráfico es muy visual y con fotografías de gran calidad. Las imágenes de la cabecera tienen mucha fuerza y transmiten un mensaje positivo.

La forma de escoger los muebles por material o por estructura me parece muy visual y acertado.

La integración de las redes sociales está muy bien conseguido. Es simple pero fácil de encontrar.


Big’shttp://www.bigsonline.com/

Los productos se muestran con foto de ambiente, cosa que le da calidez y, al crear un estilo gráfico, hace que no sea necesario que todos los productos tengan la misma perspectiva.

Ejemplo de destacados: están bien trabajados y son atractivos.

“Breadcrumb”

En la parte derecha de la cabecera encontramos una pequeña navegación que nos sirve para visualizar nuestro carro, el estado de nuestro pedido, etc.

En el menú principal aparecen los productos clasificados por estancias, y mediante un desplegable, aparecen los productos.


Drexel Heritagehttp://www.drexelheritage.com/

La página de inicio está muy bien estructurada, con fotografías de ambiente de gran calidad y con destacados a los laterales que indican ofertas o productos nuevos.

Otro elemento gráfico destacable es el pie de la página en el que aparecen pictogramas muy elegantes de productos de la web que acompañan los textos de información o de contacto.

Desplegable con un estilo muy atractivo, sencillo y efectivo.

Resultados de una búsqueda aparecen todos los productos recortados sobre fondo blanco y siguiendo más o menos la mísma estética en cuanto a perspectiva y sombreado.


Habitathttp://www.habitat.co.uk/

La web de Habitat destaca por su sencillez, sobriedad y elegancia. Todo un ejemplo a seguir.

Todo sigue una clara línea gráfica que transmite profesionalidad e invita a navegar por toda la web en búsqueda de algún producto especial.

Los anuncios son grandes y llamativos, pero siguiendo el estilo sencillo del resto de la web.

Las imágenes de ambiente son preciosas y las imágenes de producto siguen una clara línea estilística.Al entrar en una categoría de producto te dan la opción de estrechar la búsqueda a partir de valores como: precio, color, estilo, material, acabados, etc.


Recorrido que realiza un usuario por las páginas de producto

Categoría de producto

Productos de una categoría

Producto

“Goes with” y “You may also like”

Página de muestra de resultado de búsqueda


Haverty’shttp://www.havertys.com/

Variedad cromática basada en un color. A partir de matices se marcan todas las partes de la web. Un color complementario es el que nos sirve para destacar.

En la cabecera, junto al campo de búsqueda, están los iconos de acceso a las redes sociales.

Destacado sutil que sigue con el estilo de la web.

Otra forma de presentarnos la navegación de la página, en forma de pictogramas de los productos.

En el pie volvemos a tener el acceso a redes sociales.

Los productos siempre se muestran con foto de ambiente.

Tenemos dos opciones en el menú para acceder a los productos:– SHOP By ROOM– SHOP By ITEM

Ikeahttp://www.ikea.com/es/es/

El banner del destacado tiene fuerza y mantiene el estilo gráfico de la empresa.

Sistemas de navegación: “breadcrumb”, menú desplegable, índice de productos.


Página de los resultados de una búsqueda. En el lateral izquierdo aparece unos items para acotar la búsqueda por color, precio, ...

En la página del producto, además de especificar detalladamente todas las características e imágenes del producto en diferentes colores y productos se la misma colección, aparecen unas sugerencias para que el usuario siga navegando por la web y a lo mejor compre otro producto: “Productos que combinan”, “Productos complementarios”.


Los productos aparecen siempre con la misma perspectiva y el mismo recorte. Sensación de orden.

También tenemos la posibilidad de ordenar los productos por color, material, etc.


Los productos especiales están maquetados en una página de forma muy atractiva, con fotos de calidad e imitando la estructura de una revista física.

Vocabulario familiar al usuario. Da proximidad y confianza.

Cuando estás en la página de un producto, en la parte inferior, te selecciona otros productos con la frase “Seguro que te interesa”

Cuando entramos en una categoría, como por ejemplo sofá, nos aparece una página que nos recuerda a una revista de moda en la que, con imágenes de ambiente, nos presenta los diferentes tipos de sofá.



mfihttp://www.mfi.co.uk/

La estructura de esta web y su navegación la veo muy adecuada al tipo de empresa que estamos estudiando, y quizás es la más parecida en cuenta a público y contenido a la página web de Practica. Me gustaría señalar que en la barra de navegación destaca la sección “offers” al hacerlo en un color completamente diferente al resto de la página.


Mujihttp://www.muji.es/

Aunque no es una empresa dedicada únicamente al mobiliario habría que descatar su navegación local acompañada por un icono.

PAC02 / BLOQUE II. FASE DE INVESTIGACIÓN / CONCLUSIONES

CONCLUSIONES

IdentidadMejorar el contenido tanto del encabezado como del pie de la página (hay elementos que están repetidos o que no hace falta que estén en estos sitios privilegiados).

ContenidoEn la página principal, el banner debe contener imágenes de calidad.

Dar especial atención a la sección de “Contacto” porque pasa desapercibida y no está bien resuelta.

En lugar de utilizar el color rojo del logo, un negro y un verde, eliminaría el color verde que desentona mucho, y me movería entre tonalidades rojas/grises y a lo mejor, buscar un color complementario para los destacados. En último caso se debería plantear a la empresa el rediseño tanto del logo como del resto de la identidad gráfica de la empresa con un estilo más contemporáneo y con colores menos chillones.

Hacer una columna en el lateral derecho donde se colocarán los anuncios que antes aparecían en el banner, además de las ofertas y la tarjeta de cliente que antes aparecían en la parte inferior de la página.


Las imágenes de producto que aparecen en la página principal, justo debajo del banner, son confusas porque no mantienen ninguna relación y por eso se debería pensar en eliminarlas y en su lugar colocar otra forma de acceder a los productos (imágenes de ambiente, bodegones de producto de cada família, ...)

Las imágenes de los productos irán acompañados por el nombre del producto (que será el texto destacado) mientras que la descripción irá en un cuerpo inferior de tal manera que no importe que ocupe varias líneas (así no tenemos el problema de tener textos incompletos).

Arreglar las secciones de “Tiendas” (se puede añadir algún mapa para que sea más gráfico y ordenar los textos dotándolos de jerarquías en una retícula tipográfica).

La sección de “Club” se tiene que replantear por completo, ya que es la página que se desvincula más del sitio web y que más despista al usuario: pensar qué navegación se utilizará, el nombre de las etiquetas, si el usuario podrá participar con comentarios, etc.

El acceso directo a las redes sociales lo pondría con algunos iconos colocados o en la cabecera o en el pie de la página. Al ser algo muy común puede que no se necesite titular como se hace ahora.

En el pie de la página aparecen tres iconos (ordenador, tablet, smartphone) que no aportan nada a la web. Si significase que al hacer clic en ellos el aspecto de la web cambiase para adaptarse al dispositivo elegido sería lógico, pero al ser un mero objeto de decoración lo eliminaría porque frusta al usuario al no tener ninguna función.

NOMBREDescripción del producto que puede ocupar viaias líneas

Eliminar el código QR de las páginas, ya que al leerlo con un smartphone nos devuelve a la misma página. O se redireccionan los códigos QR a otra página más sencilla del producto diseñada especialmente para dispositivos móviles o se elimina.

En los anuncios, destacados y etiquetas utilizaría un vocabulario más informal (ver ejemplo de Ikea).


Etiquetado y navegaciónLo primero que se debe hacer es replantear las etiquetas que deben aparecer en el menú de navegación. Mi recomendación es que la barra de navegación se destine enteramente a las diferentes estancias de la casa como organización, además de añadir un botón extra “Todos los productos” y que nos lleve a una especie de índice de productos (ver ikea).

Además, añadiría un menú vertical (navegación local) en el lateral izquierdo de las páginas (todas menos la principal) en la que el usuario pueda acotar los productos que aparecen por: materiales, precio, acabado, estilo, etc. (ver la navegación local que encontramos en las páginas de Ikea y de Habitat).

Gráficos webEs importantísimo marcar un estilo gráfico tanto de la web como de las fotografías de los productos. Se debe escoger si se quieren los productos con fondo (foto de ambiente) o si se presentarán recortadas sobre fondo blanco (elegir si se le hace una sombra o no).

También se debe especificar la perspectiva que deben tener los productos al ser fotografiados.

Para los encabezados de cada sección (Dormitorio, Salón, Cocina) utilizaría una bonita foto de ambiente que aporte calidad a la web.

BúsquedaMejoraría el sistema de metatags para que al realizar una búsqueda los resultados obtenidos sean lo más precisos posible. Además, como ya he comentado anteriormente, en la pantalla de resultados de la búsqueda añadiría una columna en el lateral izquierdo para acotar los resultados.

Salón Dormitorio Cocina Oficina Jardín Todos los productos

Sugerencias:recomentadiones

o productos relacionados

AI PAC02: Evaluación de la arquitectura de la información de webs

Design

Transcript of AI PAC02: Evaluación de la arquitectura de la información de webs