Está en la página 1de 19

Anlisis componentes de arquitectura.

Evaluacin.
Benchmarking para escritorio y mvil.

Arquitectura de la Informacin

[PEC 2]
Ana Cartamil Bueno

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 <title>Celulares libres en TIC - Venta de equipos sin contrato en
Uruguay</title>
o <meta name="description" content="En TIC tenemos los mejores modelos
de celulares libres para que puedas cambiar tu telfono sin perder tu
nmero. Entr y mir nuestro catalogo online donde vas a poder hacer tu
pedido directo desde la web o por telfono" />
o <meta name="keywords" content="tic, celulares libres, telefonos" />
o <meta name="robots" content="INDEX,FOLLOW" />
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.

Ilustracin 4. Mens grficos de powerplanet y


Tecnologa Mvil

Ilustracin 5. Men de navegacin


principal de Movilonia

El diseo claro y sencillo de diversas pginas web (bq store, Superandroide, TMobile), 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 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>