Arquitectura de la informació - Anàlisis web by Nuri EN

2014

Análisis web www.revolutum.com/ ARQUITECTURA DE LA INFORMACIÓN – PAC2 – NÚRIA ESPINOZA

Análisis web www.revolutum.com/

Núria Espinoza

Índice BLOQUE 1: COMPONENTES DE LA ARQUITECTURA DEL SITIO WEB ......................................... 2 BLOQUE 2: INVESTIGACIÓN ...................................................................................................... 4 Evaluación heurística del sitio web ........................................................................................... 4 IDENTIDAD:............................................................................................................................ 4 CONTENIDO y ETIQUETADO: ................................................................................................. 5 GRÁFICOS: ............................................................................................................................. 6 BÚSQUEDA: ........................................................................................................................... 7 MULTIDISPOSITIVO / FEEDBACK ........................................................................................... 8 Benchmarking ......................................................................................................................... 10 NAVEGACIÓN: ..................................................................................................................... 10 FICHA DE PRODUCTO: ......................................................................................................... 12 LLAMADAS A LA ACCIÓN: .................................................................................................... 14 EXPERIENCIA DE COMPRA / ATENCIÓN AL CLIENTE: .......................................................... 16 MULTIDISPOSITIVO: ............................................................................................................ 18 BIBLIOGRAFÍA .......................................................................................................................... 20

Análisis web www.revolutum.com/

Núria Espinoza

BLOQUE 1: COMPONENTES DE LA ARQUITECTURA DEL SITIO WEB

Esquema de organización Utiliza un sistema híbrido: Encontramos separación por temas (“baúles, maletas y cajas retro” o “carteles y chapas” por ejemplo), también por públicos (“para hombre”, “para mujer”) y metafórico (“locos por”). Estructura de organización Estaríamos ante un esquema “polijerárquico” debido a que, aunque inicialmente hay diferentes categorías para los objetos, muchos aparecen en varias categorías diferentes a la vez. Es un esquema amplio y plano. Estructuras de bases de datos Los elementos no están estructurados por metadatos. La categorización de los artículos está basada en el nombre de los mismos en la mayoría de los casos. Las búsquedas se realizan sólo basándose en el campo “nombre” “Folksonomias” Folksonomía estrecha, sólo los administradores saben cómo han categorizado los artículos. En muchas la categorización parece ser sólo por nombre (por ejemplo, en “billeteras”, “gemelos” todos los elementos contienen estas palabras en su nombre) y en otras han sido los administradores quienes las han categorizado (por ejemplo en “para hombre > detalles él”). Tipología de etiquetado -

Sólo un etiquetado contextual visible (“tenemos una tienda abierta para ti” en el bloque izquierdo)

En páginas de contenidos (“condiciones”, “tu compra”) los encabezados de secciones son imágenes, por lo que no hay etiquetados de encabezamiento. 2

Análisis web www.revolutum.com/

Núria Espinoza

Etiquetas en el sistema de navegación que son coherentes en todas las páginas (“inicio”, “catálogo”, “tu compra”, “condiciones”, “contacto”)

Las etiquetas como término de indexación son las mismas en todas las páginas y son muy genéricas: “Regalos divertidos, regalos originales, regalos sorprendentes, regalos para hombre, regalos para mujer”

Sistema de navegación -

Global: Barra de navegación superior fija (“inicio”, “catálogo”, “tu compra”, “condiciones”, “contacto”)

Local: menú en bloque izquierdo con categorías y otros enlaces (social, newsletter e información general)

Contextual: Barra de búsqueda en “catálogo”

Análisis web www.revolutum.com/

Núria Espinoza

BLOQUE 2: INVESTIGACIÓN Evaluación heurística del sitio web IDENTIDAD:  Falta de una identidad gráfica clara o Gravedad: Muy grave o Descripción: No existe una línea coherente que pueda servir para identificar a la marca ni para distinguirla claramente de otras: el uso de colores parece azaroso, hay demasiadas fuentes diferentes y las utilizadas no son de fácil lectura. o Ejemplo: En la imagen vemos hasta 8 fuentes y estilos diferentes para señalar los diferentes elementos de la página. Además, la fuente elegida para el logo es poco clara y cuesta diferenciar el nombre de la marca. o Solución/es: 

Redefinición del logo



Elegir una combinación de fuentes (dos como mucho) y no usar imágenes para títulos y subtítulos.

 Seguridad: o Gravedad: Muy grave o Descripción: 4

Análisis web www.revolutum.com/



Núria Espinoza

No existe aviso de uso de cookies al entrar a la página web, por lo que estaría incumpliendo una normativa legal de Ley Orgánica de Protección de Datos.



No entramos en una página segura al realizar una compra (no usa https)

o Solución/es: Aviso legal al entrar a la página con “política de privacidad” y “acepto” o “no”. El proceso de compra debe realizarse en un servidor seguro.

CONTENIDO y ETIQUETADO:  Falta de contenidos que puedan ser atractivos para los consumidores: o Gravedad: Grave o Descripción: La página es nula en elementos que sean interesantes para los usuarios: no hay uso de slides, uso de “recomendados”, geolocalización, cookies, etc. o Solución/es: Dar prioridad al usuario, centrarse en los intereses y necesidades de los usuarios para crearles interés: usar slides en la home, uso de destacados, secciones de recomendados, escribir opiniones, top ventas, etc.

 No existe información sobre actualizaciones: o Gravedad: Grave o Descripción: No vemos en ningún lado de la página algo que nos indique cuándo ha sido actualizada la página y con qué. No sabemos si ha sido actualizada ayer o el año pasado. Para saberlo, tenemos que dirigirnos a su página de Facebook, que sí es actualizada con frecuencia. o Solución/es: Un blog o apartado en el que siempre podamos consultar las últimas novedades.

 Inadecuado etiquetado de los contenidos: o Gravedad: Muy grave 5

Análisis web www.revolutum.com/

Núria Espinoza

o Descripción: Los artículos no están etiquetados adecuadamente (sólo están etiquetados con su nombre) o Ejemplo: Al buscar “cumpleaños” sólo me salen dos artículos, que incluyen la palabra en su nombre. Sin embargo, podrían aparecer también los artículos de fiesta y tarjetas de felicitación que venden en la misma tienda. Existe una gran pérdida de oportunidades en este aspecto. o Solución/es: 

Creación de una taxonomía más comprehensiva.



Inclusión de un widget de “artículos relacionados” al examinar un artículo concreto.

 Categorización confusa: o Gravedad: Muy Grave o Descripción: No existe una jerarquía adecuada en la categorización de los artículos, lo que hace que sea bastante confuso encontrar un artículo concreto. o Ejemplo: En el menú lateral, encontramos diversas categorías como “cojines divertidos”, “baúles, maletas y cajas” y luego otra llamada “hogar entretenido” que quizás podría haber incluido (por lógica) las dos categorías mencionadas. o Solución/es: Revisión de la categorización de los elementos. Decidir si se categoriza según destinatario, según temática u otros.

GRÁFICOS:  Uso excesivo de elementos gráficos: o Gravedad: Grave o Descripción: Todos los subtítulos y títulos están realizados como imágenes, por lo que tenemos un excesivo uso de imágenes en todo el site. Debemos entender por tanto que hay un uso de SEO inexistente o muy poco eficiente. 6

Análisis web www.revolutum.com/

Núria Espinoza

o Solución/es: Siguiendo una reformulación de la línea gráfica de la marca, tendremos una fuente elegida para los títulos y subtítulos y por tanto: 

Los tiempos de carga serán más rápidos (optimización del actual)



Uso de SEO mediante títulos

 No hay uso de animaciones: o Gravedad: Poco grave o Descripción: No hay elementos en la página web que destaquen sobre los demás, al estar tan recargada. Sería recomendable un uso de animaciones junto con la revisión gráfica ya mencionada. o Solución/es: Uso de banners y pequeñas animaciones para crear una página más atractiva e interesante. Ojo, esto sólo se recomienda tras una revisión en profundidad de la línea gráfica.

 No hay uso de favicon: o Gravedad: Poco grave o Descripción: El favicon usado o bien da error o bien es un ícono de una hoja en blanco. No destaca entre el resto de pestañas abiertas de un navegador. o Solución/es: Cambiar el favicon por uno relacionado con la temática de la página.

BÚSQUEDA:  El campo de búsqueda sólo aparece en dos apartados o Gravedad: Muy grave o Descripción: El campo de búsqueda sólo es visible en los apartados “Inicio” y “Catálogo”, perdiendo así la oportunidad que los usuarios busquen artículos en cualquier página en la que se encuentren. o Solución/es: Subir el campo de búsqueda a la barra de navegación superior de la página. 7

Análisis web www.revolutum.com/

Núria Espinoza

 No existe búsqueda avanzada. o Gravedad: Grave o Descripción: Sólo disponemos de una opción para filtrar los resultados: precio. No podemos realizar búsquedas más exhaustivas. o Solución/es: Tras un adecuado etiquetado de los productos, añadir un campo de búsqueda avanzado (búsqueda por “inicia por” por ejemplo o por destinatario, etc)

 El campo de búsqueda no tiene autocompletado o Gravedad: Poco grave o Descripción: El buscador no sugiere elementos de búsqueda. o Solución/es: Tras un adecuado etiquetado de los productos, permitir el autocompletado en el buscador.

 La página de resultados no sugiere. o Gravedad: Poco grave o Descripción: La página de resultados no sugiere artículos. En el caso que la búsqueda no devuelva ningún resultado, nos sale un mensaje de error y nada más. o Solución/es: Tras un adecuado etiquetado de los productos, añadir un widget de “elementos relacionados” de tal manera que al buscar un artículo siempre dispongamos de otras alternativas de compra.

MULTIDISPOSITIVO / FEEDBACK  El sitio web no es responsive. o Gravedad: Muy grave o Descripción: El sitio web no permite su correcta visualización en dispositivos móviles. o Solución/es: Redefinición del layout de la página de tal manera que se le pueda añadir el código de visualización multidispositivo. 8

Análisis web www.revolutum.com/

Núria Espinoza

 No existe una interacción adecuada con el usuario: área de clientes de difícil acceso. o Gravedad: Muy grave o Descripción: No existe la opción de entrar a tu “perfil de cliente” de manera clara y fácil. El login destaca cuando estamos en la parte final de la compra de un producto, por lo que resta importancia al usuario. Sólo te puedes crear una ficha nueva si compras un producto. No es accesible desde la home. La empresa está demostrando que el usuario/cliente sólo le interesa cuando va a comprar algo. o Solución/es: Necesario reformular el workflow de proceso de compra y de interacción con el usuario.

 Los formularios son poco atractivos. o Gravedad: Grave o Descripción: Los formularios son visualmente poco atractivos y contienen serios errores: 

El nombre de los campos a rellenar no se encuentran alineados.



Los asteriscos para campos obligatorios están incompletos, confusos o en algunos casos ni existen.



Para conocer la información sobre gastos de envío hemos de salir del formulario o abrir la página en un nuevo navegador.



No tiene autocompletado

o Solución/es: Necesario revisar el workflow del proceso de compra y realizar unos formularios tecnológicamente más desarrollados y visualmente más atractivos.

Análisis web www.revolutum.com/

Núria Espinoza

Benchmarking NAVEGACIÓN:  Destacar elementos de la barra superior de navegación mediante colores o desplegando el menú cuando abres la página (animación). Esto permitiría llamar la atención del usuario al entrar a la página y dirigir su atención hacia algo.

http://www.regalos.es/: el menú “Categorías” se despliega al abrir la página

 Centrarse en las necesidades del usuario: utilizar lenguaje y lógica del usuario en la navegación. Facilitará al usuario la compra y la experiencia de navegación en la página. Nos adelantaremos a sus necesidades e incluso le podemos sugerir cosas que todavía no son “necesidad” (por ejemplo sugerirle regalos para fiestas futuras)

http://www.cosasderegalo.com/ : el texto de las categorías es divertido y fácil de entender para su target.

Análisis web www.revolutum.com/

Núria Espinoza

http://www.gifts.com/ : se adelanta a la necesidad con su opción de “last minute gifts”(regalos de última hora)

 Barra secundaria de navegación con destacados y recomendaciones, visibles en cada página. Gracias al etiquetado podemos tener una serie de elementos siempre destacados.

http://www.thinkgeek.com/

 Destacados en las mismas pestañas de navegación: Si queremos destacar una serie de productos es una buena manera de llamar la atención del usuario.

http://www.shoppersstop.com/gift-ideas.html

Análisis web www.revolutum.com/

Núria Espinoza

 Buscador con filtros por precio, condiciones de envío, destinatario, temática, etc. Un buscador más completo permitirá una experiencia al usuario más agradable y completa.

http://www.gifts.com/search/all

 Infinite scrolling en catálogo: mejoramos la experiencia de usuario al evitarle clics para avanzar página.

http://www.cosasderegalo.com/escaparate/ : el catálogo utiliza código avanzado y se va cargando a medida que bajamos por la página.

FICHA DE PRODUCTO:  Artículos relacionados: De esta manera permitimos una navegación fluida de nuestros potenciales clientes en el catálogo de productos, sugiriéndole siempre que continúe comprando.

http://www.cosasderegalo.com/products/

http://www.thinkgeek.com/product/

Análisis web www.revolutum.com/

Núria Espinoza

https://www.regalooriginal.com/

http://www.curiosite.es/producto/mini-pales-posavasospalette-it.html

 Opiniones de clientes en cada ficha de producto, permitiendo al usuario conocer experiencias de previos compradores y sentirse parte de una comunidad. Esto además da peso a nuestra marca. Como sugerencia extra, el uso de Facebook Social Plugin.

http://www.regalos.es/regalos-romanticos/lomographyhttp://www.curiosite.es/producto/mini-pales-

fisheye-one-75622.html

posavasos-palette-it.html

Análisis web www.revolutum.com/

Núria Espinoza

http://www.thinkgeek.com/product/14a1/: ThinkGeek utiliza el Facebook Social Plugin

LLAMADAS A LA ACCIÓN:  Ofertas visibles: De esta manera el usuario se podrá sentir atraído por lo que queramos destacar

http://www.thinkgeek.com/ : Este banner está encima del menú superior, por lo que siempre es visible.

La llamada a la acción destaca en medio de la pantalla en http://www.thinkgeek.com/

 Pop-ups con destacados: al iniciar la página y en ocasiones especiales, utilizar pop-ups con mensajes destacados. 14

Análisis web www.revolutum.com/

Núria Espinoza

http://www.shoppersstop.com/gift-ideas.html

 Fidelización: Puntos / Regalos / bonos de descuento para usuarios por registrarse o compartir en redes sociales, por ejemplo. Fidelizará y a la vez difundirá nuestra tienda.

En http://www.thinkgeek.com/geekpoints/ te dan dinero por cada compra que puedes canjear en futuras compras.

https://www.jinx.com/account.aspx : Acciones como apuntarse al newsletter, comprar, recomendar la web a amigos dan puntos y regalos.

 Redes sociales destacadas: Facilitar la difusión de nuestra página en todo momento a través de las redes sociales.

Análisis web www.revolutum.com/

Núria Espinoza

https://www.threadless.com/catalog/

En http://regalador.com/ la información de redes sociales está inserta como llamada a la acción entre los artículos del catálogo

EXPERIENCIA DE COMPRA / ATENCIÓN AL CLIENTE:  “Ayudante” de compra: Gracias a un etiquetado adecuado, el “ayudante” realiza un filtro de los productos y el usuario percibe que la marca se adelanta a sus necesidades y le facilita la compra

http://www.gifts.com/

http://www.cosasderegalo.com/: Este banner está en la home

Análisis web www.revolutum.com/

Núria Espinoza

 Tiempo de demora en el proceso de compra: Para evitar abandonos del carrito de compra, una alternativa puede ser utilizar widgets (y servicios externos) como los siguientes:

https://www.msf.es/colabora/donativos-socios/hazte-socio En esta página vemos tanto el pop-up de ayuda cuando una misma ip lleva más de tantos segundos en la misma página. Por otro lado, el banner “Si lo prefieres, te llamamos”. Al hacer clic, un pop-up nos permite poner nuestro número de teléfono y recibir asistencia telefónica en menos de 1 minuto, facilitando enormemente el proceso de compra del usuario y respondiendo sus dudas en el momento.

 Carrito de compra siempre accesible: En todo momento nuestros potenciales clientes deben poder acceder fácilmente a su carrito de compra y a su ficha de usuario.

https://www.threadless.com/ La información útil del usuario (Carrito, datos personales, situación del pedido, ayuda) siempre visibles.

 Seguridad: Siempre visible información que dé certeza al usuario del uso y seguridad de sus datos personales (LOPD /Verisign/información/uso de cookies). Uso de https en el proceso de compra.

Análisis web www.revolutum.com/

Núria Espinoza

En http://www.shoppersstop.com/contact-us la información se encuentra en el footer.

https://www.regalooriginal.com/

https://www.msf.es/colabora/donativos-socios/hazte-socio En la web de Médicos Sin Fronteras, la información legal se encuentra en la parte inferior de todos los formularios de donación.

MULTIDISPOSITIVO:  App para compra: Realizar una app para que se facilite la compra desde dispositivos móviles.

Análisis web www.revolutum.com/

Núria Espinoza

https://www.threadless.com/app

Análisis web www.revolutum.com/

Núria Espinoza

BIBLIOGRAFÍA 

UOC, Checklist de comprovació de l’AI d’un web. PDF, 2014



Morville & Rosenfeld (2012) “Arquitectura de la información per al World Wide Web” (Fundació per a la Universitat Oberta de Catalunya)



Páginas web consultadas para la realización del benchmarking: a. http://www.revolutum.com b. http://www.regalos.es/ c. http://www.gifts.com/ d. http://www.thinkgeek.com/ e. https://www.regalooriginal.com/ f. http://www.curiosite.es/ g. http://www.cosasderegalo.com/ h. http://www.shoppersstop.com/ i.

http://www.dotcomgiftshop.com/

http://www.threadless.com

k. http://regalador.com/ l.

http://www.jinx.com