Arquitectura de la Informacin

[PEC 2]

Ana Cartamil Bueno

Anlisis componentes de arquitectura.

Evaluacin.

Benchmarking para escritorio y mvil.

Bloque I. Componentes de la arquitectura del sitio web escogido ...................................... 2

Tipologas de esquemas de organizacin .......................................................................... 2

Tipologas de estructuras de organizacin ........................................................................ 2

Posibles estructuras de modelo de base de datos principales ........................................... 3

Folksonomas .................................................................................................................. 3

Ejemplos de las diferentes tipologas de etiquetas ............................................................ 3

Tipologas de sistemas de navegacin ............................................................................... 5

Bloque II. Fase de investigacin ............................................................................................ 6

Evaluacin heurstica del sitio web a partir de la observacin ......................................... 6

1. Identidad e informacin. ....................................................................................... 6

2. Estructura y navegacin. ......................................................................................... 6

3. Etiquetaje. ............................................................................................................... 7

4. Contenido. .............................................................................................................. 8

5. Elementos multimedia. .......................................................................................... 8

6. Bsqueda................................................................................................................. 9

7. Utilidad y accesibilidad. ......................................................................................... 9

8. Tecnologa e interfaz. ........................................................................................... 10

Benchmarking o estudio de la competencia ................................................................... 11

1. Estructura y navegacin. ....................................................................................... 11

2. Diseo .................................................................... Error! Marcador no definido.

3. Informacin contextual ........................................................................................ 14

4. Redes sociales ........................................................................................................ 15

5. Confianza y seguridad .......................................................................................... 16

6. Multidispositivo .................................................................................................... 17

Bibliografa ........................................................................................................................... 18

El sitio web escogido para el anlisis es www.tic.com.uy, un comercio electrnico de origen

uruguayo relacionado con la compra de productos y accesorios de telefona mvil.

Tipologas de esquemas de organizacin

La web emplea un esquema de organizacin ambiguo, haciendo uso las siguientes

tipologas:

Organizacin por temas.

Muestra categoras y subcategoras. Como temas o categoras podemos tomar los

trminos del men superior (Home, Celulares, Accesorios, Tablets, Quines somos, Blog,

Contctenos) y como subcategoras los desplegables que tienen origen en algunos de

ellos.

Organizacin por tareas.

Al tratarse de un sitio web de comercio electrnico y ser los clientes los

protagonistas, ciertos contenidos y aplicaciones se agrupan en una coleccin de

procesos, funciones o tareas distribuidos en la zona superior derecha (Mi Cuenta,

Mis Favoritos, Mi Carrito, Realizar compra, Ingresar) y otras zonas o secciones

(Suscribirse, Comprar, Agregar a carrito, Comparar).

Organizacin por pblicos.

Invita a los usuarios a identificarse y, al hacerlo, les permite obtener acceso a un

reas privada relacionada con sus pedidos, suscripciones, direccin de envo y

facturacin, etc. A pesar de ello, el esquema es abierto, ya que todos los pblicos

pueden acceder a los mismos contenidos de la web.

Por otro lado, dentro del esquema ambiguo se puede apreciar un esquema de organizacin

exacto de tipo organizacin por orden alfabtico, concretamente cuando aparecen las

marcas en los desplegables del men principal, ya que esto permite que los usuarios que

busquen un producto concreto lo puedan localizar con mayor facilidad.

Tipologas de estructuras de organizacin

Las estructuras de organizacin visibles en el sitio web son dos: estructura jerrquica e

hipertexto.

Estructura jerrquica.

Hace uso de un esquema taxonmico amplio y somero en el que las reas de

contenido principales o categoras son los apartados del men principal relativos al

comercio (Celulares, Accesorios y Tablets), los cuales se dividen en subcategoras como

marca o tipo de producto en de cada una de ellas.

Hipertexto.

Existen diversos enlaces internos y externos como imgenes estticas que enlazan

con secciones concretas o con los productos de forma individual, en el primer caso,

o con la pgina de Facebook y sus seguidores mediante el widget de la red social.

Posibles estructuras de modelo de base de datos principales

Aparentemente, el sitio web no hace uso de ninguna estructura de modelo de base de datos,

ya que los trminos que se insertan en los campos de bsqueda son rastreados en las

distintas pginas hasta localizar coincidencias exactas o palabras que contengan el trmino

indicado.

Folksonomas

No existen folksonomas debido a que la web no permite la interaccin social ni el

etiquetado por parte de los usuarios ms all de la redaccin de opiniones sobre sus

productos. A pesar de que exista un apartado de Bsquedas populares, las palabras claves

que se muestran han sido recogidas por el sistema tomando como base las bsquedas de

los usuarios pero ellos no han relacionado determinados trminos a elementos concretos,

no los han clasificado voluntariamente de forma alguna.

Ejemplos de las diferentes tipologas de etiquetas

Etiquetas en sistemas de navegacin.

o Los ttulos de las distintas secciones de la web que aparecen en el sistema de

navegacin horizontal, el principal, incluyendo la bsqueda y la bsqueda

avanzada.

o Los nombres del sistema de navegacin secundario que se muestran como

una lista en la esquina superior derecha de la web.

Etiquetas como enlaces contextuales.

o Las distintas categoras y subcategoras del sistema de navegacin principal.

o Los anuncios del margen izquierdo que enlazan con otras ubicaciones de la

misma web.

o Diversas palabras que indican procesos, funciones o tareas para llevar a cabo

en el sitio.

o Textos a pie de pgina que enlazan con distintas pginas pertenecientes a la

misma web.

o Las distintas secciones del men superior derecho.

Etiquetas como encabezamientos.

A pesar de que no parece que se haya empleado ningn tipo de ttulos en la

redaccin del cdigo fuente de la web, algunos ejemplos de este tipo de etiquetas

son:

o Dentro de cada apartado principal de la web aparece escrito y destacado el

nombre del mismo, ya sea con un tamao de letra mayor negrita, un color

de fuente distinto de negro o varias de estas opciones de formato al mismo

tiempo.

o Los textos que se muestran sobre los distintos artculos o productos en sus

secciones correspondientes.

o Los nombres o ttulos de los distintos apartados existentes en la seccin

esttica del margen izquierdo de la web.

Etiquetas como trminos de ndice.

nicamente existen de forma invisible, en el cdigo fuente. Por un lado, en la

pgina principal como metadatos incrustados en el cdigo fuente:

o Celulares libres en TIC - Venta de equipos sin contrato en

Uruguay

o

o

o

Y, por otro lado, en el resto de pginas como trminos pertenecientes a los

distintos enlaces de la web que aparecen en el cdigo fuente.

Etiquetas con iconos.

o Bocadillos de texto (en el chat junto a TIC Consultas Online y en

Contctenos junto a Enviar!).

o Icono de carta (en el chat junto a Djanos tu mensaje cuando no hay

ninguna persona disponible).

o Stick sobre un crculo (en todos los productos catalogados, junto a

Comprar).

o Todas las imgenes de los productos y distintos elementos de su

composicin (representativas del SO, de la doble SIM).

Tipologas de sistemas de navegacin

Sistemas de navegacin integrados.

o Sistemas de navegacin globales.

o Sistemas de navegacin locales.

o Navegacin contextual.

Sistemas de navegacin suplementarios.

o ndices alfabticos del sitio (aunque al pie de pgina aparezca Mapa del sitio,

al seguir el vnculo podemos observar que no es tal; no existen jerarquas

sino orden alfabtico).

o Funcin de bsqueda.

Tras analizar el sitio web, podemos plantear un rediseo del mismo tomando como base

una relacin de errores-soluciones existentes y estudiando buenas prcticas llevadas a cabo

por otros sitios.

Evaluacin heurstica del sitio web a partir de la observacin

A continuacin planteamos los principales errores o problemas que se han localizado en la

web y posibles mejoras para los mismos:

1. Identidad e informacin.

Faltan datos relativos al contacto telefnico y postal. (Grave)

Aunque aparecen el nmero de telfono y varias direcciones postales, las personas

que no sean de Uruguay no podrn llamar si no conocen el prefijo internacional y

las que sean de otra ciudad del mismo pas pero no de Montevideo podran no

saber a qu ciudad pertenecen las direcciones postales.

Posible solucin: aadir el prefijo internacional al nmero de telfono (+598) y el

nombre de la ciudad a las direcciones postales (Montevideo).

No se hace uso de los colores corporativos en el sitio web. (Poco grave)

Los colores de la empresa parecen ser el azul y el magenta, mientras que en la web

predominan el naranja y el verde, seguidos por el azul en otra tonalidad y el

amarillo.

Posible solucin: cambiar los colores actuales de la web por los de la empresa con

la posibilidad de mantener algunos de los actuales en muy pequea medida.

2. Estructura y navegacin.

Falta de breadcrumbs en la web. (Muy grave)

No existe ningn elemento en el sitio web que permita al usuario conocer su

ubicacin exacta en el mismo ni volver atrs sin usar los botones del navegador.

Posible solucin: aadir una lnea de texto bajo el men principal o justo encima

del contenido principal de cada pgina en la que se muestre la ubicacin exacta del

usuario (categora > subcategora > etc.) y enlaces sobre cada una de sus etiquetas

previas.

El men principal siempre resalta la categora Celulares. (Muy grave)

En lugar de resaltarse la categora en la que te encuentras o no resaltar ninguna, el

sitio destaca siempre la de Celulares, lo cual puede generar mucha confusin en los

usuarios.

Posible solucin: quitar el resaltado actual en todas las pginas o cambiarlo de

forma que se resalte la categora correspondiente a la ubicacin del usuario.

No se proporciona informacin sobre la proteccin de datos de carcter personal

en ningn momento. (Muy grave)

Ni en el proceso de registro web ni en el de compra aparece informacin

relacionada con la proteccin de datos de carcter personal del usuario.

Posible solucin: aadir dicha informacin en los espacios correspondientes.

La navegacin cambia en algunas pginas. (Poco grave)

La seccin esttica que habitualmente se encuentra en el lateral izquierdo de la web

aparece en el derecho cuando se accede a las pginas de los productos como tales.

Posible solucin: cambiar el cdigo de la web para mantenerlo a la izquierda en

todas las pginas en las que se muestre.

Algunos enlaces que son imgenes tienen escrito su atributo alt de forma poco

o nada clara y no incluyen atributo title. (Poco grave)

Tanto en Plan Recambio como en Pack Dos, el atributo alt tiene escrito

Destacados del mes, y el atributo title no est especificado.

Posible solucin: cambiar los textos de los atributos alt por otros ms acordes con

sus enlaces.

3. Etiquetaje.

La bsqueda de etiquetas no da los resultados esperados (Muy grave)

Su bsqueda no conduce a pginas que las contengan, sino a productos cuyo

contenido, de alguna forma, se encuentre relacionado en la escritura.

4. Contenido.

No existe informacin alguna acerca de actualizaciones de la web. (Muy grave)

Los usuarios no pueden saber si existen nuevos terminales o accesorios a la venta

ni de cundo son las ofertas o packs que se muestran en la web, por lo que pierden

seguridad de cara a su uso con fines de compra.

Posible solucin: incluir fechas en las imgenes vinculadas a ofertas o packs, incluir

novedades en la pgina principal ya sea a modo de texto o de imagen vinculada

y/o incluir un pequeo texto a pie de pgina en el que se muestre la ltima fecha

de actualizacin del sitio.

Escasas reas de informacin importante destacada en la pgina principal. (Grave)

Se echan de menos zonas en la pgina principal en las que se muestren algn tipo

de ofertas o una pequea seleccin de los productos que ofrece la web de cada

categora en lugar de mostrar exclusivamente una seleccin concreta de telfonos

mviles.

Posible solucin: suprimir o reducir la seleccin de telfonos mviles existente,

aadir otras del resto de categoras e incluir ofertas en forma de imgenes

hipervinculadas a sus contenidos correspondientes.

Existen diversos trminos que pueden no ser conocidos. (Poco grave)

Aunque una bsqueda rpida en internet puede resolverlo, personas poco

habituadas a determinados trminos o acrnimos, como algunos relativos a las

especificaciones de los dispositivos, podran tener problemas para comprender lo

que se quiere decir.

Posible solucin: aadir un apartado de ayuda, FAQ o similar en el que se definan

determinados trminos que puedan generar confusin en los usuarios.

5. Elementos multimedia.

La web se encuentra sobrecargada de imgenes. (Grave)

Se hace uso de demasiadas imgenes y variaciones de color en un espacio pequeo,

haciendo que se pierda la calidad y, en consecuencia, la atencin o inters del

comprador potencial. Adems, dentro del catlogo de cada seccin, las etiquetas de

cada producto son muy pequeas en comparacin con sus imgenes.

Posible solucin: ampliar el tamao de las etiquetas de los productos y/o reducir el

de las imgenes de los mismos, as como emplear unas combinaciones de colores

ms sencillas. Otra opcin posible es hacer que los productos se muestren en su

forma de lista, tal y como se puede elegir cuando se realiza una bsqueda.

6. Bsqueda.

Los resultados de las bsquedas no son totalmente satisfactorios. (Muy grave)

Cuando se realiza una bsqueda de uno o varios trminos, los resultados que se

esperan son elementos relacionados con dichos trminos, pero en este caso no se

termina de cumplir.

Posible solucin: hacer uso de bases de datos mediante anillos de sinnimos o

tesauros.

Los resultados no se agrupan. (Poco grave)

Cuando realizas una bsqueda te aparecen todos los resultados seguidos sin orden

ni relacin aparente.

Posible solucin: agrupar los resultados por categoras (p.e.: celulares, tablets,

accesorios).

No asiste al usuario en caso de no poder ofrecerle resultados para una consulta

dada (Poco grave)

Si no se encuentra ningn tipo de resultado para una bsqueda determinada, la

pgina nicamente te dice Su bsqueda no devolvi resultados, sin tratar de

ofrecer vas alternativas.

Posible solucin: mostrar, junto al mensaje actual, algn consejo como Asegrese

de que escribi el trmino correctamente y mostrar un vnculo a la bsqueda

avanzada por si las opciones existentes en su apartado ayudan al usuario a encontrar

lo que busca.

7. Utilidad y accesibilidad.

Apartados con contenido exclusivo de tipo grfico. (Muy grave)

En Plan Recambio y Pack Dos slo se presentan imgenes para ofrecer la

informacin, sin incluir ningn tipo de enlace ni posibilidad de compra.

Posible solucin: mantener las imgenes existentes pero aadirles zonas interactivas

que enlacen con los productos individuales y permitan su compra.

Seccin sin funcionamiento. (Muy grave)

La seccin Blog no funciona, probablemente porque se haya eliminado el sitio

web o servidor en el que se encontraba alojado.

Posible solucin: arreglar el enlace (volver a crear la pgina del blog si es necesario)

o eliminar la seccin de la barra de navegacin del sitio web.

Falta de contraste entre el color de fuente y el fondo. (Muy grave)

Los textos de la esquina superior derecha del sitio web son de un color apagado que

no genera apenas contraste con el fondo que tiene tras de s, impidiendo su lectura

casi totalmente.

Posible solucin: cambiar el color de fuente o colocar un recuadro con algo o nada

de transparencia entre el fondo y el men.

Tamao de la fuente pequeo. (Grave)

El tamao de la fuente de texto ms usada en la web es demasiado pequeo.

Posible solucin: ampliar en uno o dos puntos, al menos, el tamao de las fuentes

de texto para favorecer la comodidad del usuario durante su navegacin.

Formulario que no funciona. (Grave)

El formulario de la seccin Contactenos del men principal, a diferencia del existente

en el lateral de la web, da error cuando se intenta emplear diciendo Imposible

procesar su solicitud. Por favor, intntelo ms tarde.

Posible solucin: suprimir el apartado completamente en el men principal y

mantener el que funciona de la seccin lateral izquierda.

8. Tecnologa e interfaz.

Problemas en Internet Explorer. (Grave)

El sitio web funciona muy lento en IE y no se muestra el widget de Facebook.

Posible solucin: suprimir el widget o agregar un cdigo alternativo para IE.

Cuando se produce un error se informa de forma algo alarmista. (Poco grave)

Hace uso de colores rojos para texto y fondo y, en ocasiones, de un icono circular

del mismo color con una exclamacin en dentro.

Posible solucin: eliminar el fondo rojizo de detrs del texto y hacer uso de colores

e iconos algo menos llamativos o usar en su lugar textos de tamao mayor para

llamar la atencin sin alarmar necesariamente.

Benchmarking o estudio de la competencia

A partir del anlisis anterior podemos realizar una propuesta visual para la mejora del sitio

web tomando como base para ello los de otras empresas.

1. Estructura y navegacin.

En Phone House se muestra claramente a los usuarios cules son las novedades al

comienzo del contenido de la pgina de inicio. Esta forma tan directa de mostrarlas

permite que sean vistas y ledas por el mayor nmero de compradores potenciales

posible, convencindoles para seguir los hipervnculos y seguir informndose.

Ilustracin 1. Novedades de Phone House en su pgina principal

Superandroide ofrece un mapa del sitio distribuido en cuatro apartados diferentes:

nuestras ofertas, su cuenta, categoras y pginas, que pueden resultar muy tiles en

funcin de si el usuario busca un producto determinado, una oferta, informacin

sobre el sitio web o su empresa, etc.

Ilustracin 2. Mapa del sitio web Superandroide

Colocar enlaces relevantes en el pie de pgina o sobre ste, de forma fija, acerca del

sitio-empresa o relacionados de alguna forma con el mismo. Cada empresa realiza

un planteamiento diferente, pero todas ellas ayudan a mejorar la interaccin del

usuario con el sitio, sobre todo si al llegar al final de la web no ha encontrado algo,

ya que a veces le permite descubrir nuevas vas de bsqueda.

Movilonia enlaza a pginas amigas externas, de la revista LOOQ, que permiten al

usuario realizar bsquedas sobre la misma temtica de su web en otros sitios o

cambiar a otra actividad diferente. A diferencia de esta, T-Mobile, Superandroide y

Phone House ofrecen enlaces internos a: informacin sobre contacto y asistencia,

informacin muy relevante del sitio para usuarios registrados y no registrados, e

informacin sobre los distintos productos y servicios ofrecidos pero categorizados

de una forma que puede resultar ms prctica para determinados usuarios,

respectivamente.

Ilustracin 3. Pies con vnculos a pginas internas o externas desde Movilonia, T-Mobile, Superandroide y PhoneHouse

Los sitios powerplanet y Tecnologa Mvil plantean un men basado en imgenes

de las diferentes compaas, lo cual permite a los usuarios acceder a los productos

que buscan sin necesidad de recordar el nombre exacto de la marca, ya que las

imgenes se suelen relacionar con mayor facilidad o se pueden comprobar de un

vistazo rpido a los dispositivos cercanos.

En Movilonia la navegacin principal se lleva a cabo a travs de un men lateral

que se organiza segn las categoras o marcas a las que pueden perteneces los

productos que el usuario est buscando. Es de gran ayuda cuando el usuario busca

algn producto o servicio concreto.

El diseo claro y sencillo de diversas pginas web (bq store, Superandroide, T-

Mobile), tendente al flat design, fomenta la navegacin fluida de los usuarios por el

sitio y convierte su tiempo de dedicacin en algo calmado, sin el estrs que se genera

a veces cuando existe demasiada informacin o esta se encuentra muy solapada.

Ilustracin 5. Men de navegacin principal de Movilonia

Ilustracin 4. Mens grficos de powerplanet y Tecnologa Mvil

Ilustracin 6. Diseo claro y sencillo de bq store, Superandroide y T-Mobile

2. Informacin contextual

Por si un usuario no sabe qu hacer, se encuentra perdido, Telecor le invita a

descubrir qu busca y lo traslada a la ubicacin ms adecuada dentro de la web.

Ilustracin 7. Informacin basada en la cuestin "Qu quieres hacer?" en Telecor

Sitios web como Jumpy mvil ofrecen informacin completa acerca de cada tipo de

producto, marca, etc. De esta forma, los usuarios poco experimentados o con

escasos conocimientos en la materia pueden ser capaces de comprender qu

significan determinados trminos o si les sirven los productos que estn

encontrando.

Ilustracin 8. Informacin completa sobre categoras y subcategoras en Jumpy mvil

Telecor hace uso de vocablos originales inventados como accesorzate y de

trminos extranjeros como free para atraer la atencin de los usuarios, sobre todo

de los ms jvenes, y educarlos en trminos actuales.

Ilustracin 9. Uso de vocablos curiosos por parte de Telecor

3. Redes sociales

Sitios web como T-Mobile, Telecor y Movilonia poseen un pie de pgina fijo en el

que aparecen iconos vinculados con el perfil del mismo en distintas redes sociales

como Facebook y Twitter. Son muy tiles debido a la fuerte influencia actual de las

redes sociales en las vidas de las personas y, si se emplean adecuadamente y se

actualizan con una frecuencia mnima pueden producir resultados muy positivos.

Ilustracin 10. Pies de pgina con iconos vinculados a redes sociales de Movilonia, Telecor y T-Mobile

Sitios web como powerplanet han adaptado la interaccin social de los usuarios a

las redes sociales, de forma que los usuarios pueden seguir enviando sus opiniones

como hasta el momento y tambin comentar a travs del plug-in social de Facebook

siempre y cuando tengan la sesin iniciada.

Ilustracin 11. Plug-in social de Facebook en powerplanet

4. Confianza y seguridad

En la web de powerplanet presentan a los componentes de su equipo. Esto puede

ayudar a que la experiencia de usuario se vuelva ms familiar y suponer un

incremento positivo de la confianza depositada en el sitio, ya que algunos usuarios

se sienten ms seguros sabiendo que no es un ordenador el que hace las cosas sino

personas fsicas.

Ilustracin 12. Algunos de los componentes del equipo de powerplanet

Adjuntar informacin relativa a los pagos y a las entregas, incluyendo premios

otorgados a la web y verificaciones, tal y como hace Lazada, supone que los clientes

se sientan ms seguros al realizar sus compras en el sitio web.

Ilustracin 13. Pie de pgina de Lazada en el que se muestran informaciones importantes sobre seguridad

5. Multidispositivo

La web Lazada dispone de aplicaciones mviles para sistemas

operativos de Apple, Android y Windows, enlazadas al pie

de todas sus pginas. A travs de ellas, los usuarios pueden

realizar acciones como bsqueda, visualizacin y compra de

productos de la web de forma sencilla.

Ilustracin 14. Acceso a las aplicaciones mviles de Lazada desde su sitio web

Argus Center for Information Architecture (2000). Evaluating Information Architecture

[documento en lnea]. [Fecha de consulta: 16 de octubre de 2014].

< http://argus-acia.com/white_papers/evaluating_ia.pdf>

Hassan, Yousef; Martn, Francisco (2003). Gua de Evaluacin Heurstica de Sitios Web

[artculo en lnea]. [Fecha de consulta: 16 de octubre de 2014].

< http://www.nosolousabilidad.com/articulos/heuristica.htm>

Manchn, Eduardo (2005). Un caso real:evaluacin heurstica de renfe.es [artculo en

lnea]. [Fecha de consulta: 16 de octubre de 2014].

< http://www.gestiopolis.com/canales5/ger/ainda/32.htm>

Mrquez, Joaqun (2006). Gua para evaluacin experta [documento en lnea]. [Fecha de

consulta: 16 de octubre de 2014].

< http://www.jmarquez.com/documentos/jm_checklist.pdf>

Rosenfeld, Louis (2004). Information Architecture Heuristics [artculo en lnea]. [Fecha de

consulta: 16 de octubre de 2014].

< http://louisrosenfeld.com/home/bloug_archive/000286.html>