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

PAC
/02

Evaluació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

FASE DE INVESTIGACIÓN

BLOQUE II

EVALUACIÓN HEURÍSTICA

O ESTUDIO DE LA COMPETENCIA
BENCHMARKING
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ón
Utiliza 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ón
La 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ías

sistemas de navegación

No 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.

Básicamente la navegación se hace a través del encabezado y del pie
de la página:

etiquetas

Navegación global

a) Iconos

b) Textuales
• Encabezamientos
• Opciones del sistema de navegación (menú)
• Términos de índice
El ú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” />

Navegación suplementaria

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

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

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

Identidad
La 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.

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.


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

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.

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.

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.

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


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.

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.

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.


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ón
El 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.


Etiquetado
Uno 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.

¿Qué encontraremos al hacer clic en
“Entrega” o “Club”?
Serían mas adecuadas unas etiquetas como
“Información” o “Blog” respectivamente.
Error 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.


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

¿Qué diferencia hay entre “Entrar”
y “Registrarse”? ¿No es lo mismo?
Error muy 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é 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.


Gráficos web
No 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.

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.
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.

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úsqueda
Tanto 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.


Feedback
Un 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.


Utilidad
Despué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 COMPETENCIA
Baltix

http://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’s

http://www.bigsonline.com/
En el menú
principal aparecen
los productos
clasificados por
estancias, y mediante
un desplegable,
aparecen los
productos.

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.

Ejemplo de destacados: están bien trabajados y
son atractivos.
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.

“Breadcrumb”


Drexel Heritage

http://www.drexelheritage.com/
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.

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.


Habitat

http://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.

Categoría de producto

Recorrido que realiza un
usuario por las páginas 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’s

http://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


Ikea

http://www.ikea.com/es/es/

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

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


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 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á.

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”


mfi

http://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.


Muji

http://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

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

Identidad
Mejorar 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).

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.
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.


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.

Nombre
Descripció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ón
Lo 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).
Salón

Dormitorio Cocina

Oficina

Jardín

Todos los productos

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 web
Es 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úsqueda

Sugerencias:

recomentadiones
o productos relacionados

Mejorarí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.

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

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

Más contenido relacionado

Similar a AI PAC02: Evaluación de la arquitectura de la información de webs (20)

Más de Bea Garcia Fernandez (8)

Último (20)

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