Análisis componentes de arquitectura. Evaluación. Benchmarking para escritorio y móvil.
Arquitectura de la Información Información [PEC 2] Ana Cartamil Bueno Bueno
Bloque I. Componentes de la arquitectura del sitio web escogido ...................................... ...................................... 2 Tipologías de esquemas de organización .............................................. .......................................................................... ............................ 2 Tipologías de estructuras de organización ............................................ ........................................................................ ............................ 2 Posibles estructuras de modelo de base de datos principales ........................................... ........................................... 3 “Folksonomías” .......................................... .......................................................................... .................................................................... ....................................... .... 3
Ejemplos de las diferentes tipologías de etiquetas ............................................................ ............................................................ 3 Tipologías de sistemas de navegación .............................................. ............................................................................... ................................. 5 Bloque II. Fase de investigación ................................................................ ............................................................................................ ............................ 6 Evaluación heurística del sitio web a partir de la observación ......................................... ......................................... 6 1. Identidad e información. ............................................................................ ....................................................................................... ........... 6 2. Estructura y navegación.................................................................... ......................................................................................... ...................... 6 3. Etiquetaje. ......................................................................................... ............................................................................................................... ...................... 7 4. Contenido................................................................... .................................................................................................... ............................................ .......... 8 5. Elementos multimedia. .................................................................................... .......................................................................................... ...... 8 6. Búsqueda......................................................... Búsqueda........................................................................................... ........................................................ ...................... 9 7. Utilidad y accesibilidad. ............................................................. ......................................................................................... ............................ 9 8. Tecnología e interfaz. ....................................................................................... ........................................................................................... .... 10 Benchmarking o estudio de la competencia .................................... ................................................................... ............................... 11 1. Estructura y navegación.................................................................... ....................................................................................... .................... 11 2. Diseño ................................................................... ..................................................................... ¡Error! Marcador no definido. 3. Información contextual .............................................. ............................................................................... .......................................... ......... 14 4. Redes sociales............................................................. ............................................................................................... ........................................... ......... 15 5. Confianza y seguridad ...................................................................... .......................................................................................... .................... 16 6. Multidispositivo.......................................................................... .................................................................................................... .......................... 17 Bibliografía ................................................................ ................................................................................................. ........................................................... .......................... 18
El sitio web escogido para el análisis es www.tic.com.uy es www.tic.com.uy , un comercio electrónico de origen uruguayo relacionado con la compra de productos y accesorios de telefonía móvil.
Tipologías de esquemas de organización
La web emplea un esquema de organización ambiguo, haciendo uso las siguientes tipologías: Organización por temas.
Muestra categorías y subcategorías. Como temas o categorías podemos tomar los términos del menú superior (Home, Celulares, Accesorios, Tablets, Quiénes somos, Blog , Contáctenos) y como subcategorías los desplegables que tienen
origen en algunos de
ellos. Organización por tareas.
Al tratarse de un sitio web de comercio electrónico y ser los clientes los protagonistas, ciertos contenidos y aplicaciones se agrupan en una colección 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 ).). Organización por públicos.
Invita a los usuarios a identificarse y, al hacerlo, les permite obtener acceso a un áreas privada relacionada con sus pedidos, suscripciones, dirección de envío y facturación, etc. A pesar de ello, el esquema es abierto, ya que todos los públicos pueden acceder a los mismos contenidos de la web. Por otro lado, dentro del esquema ambiguo se puede apreciar un esquema de organización exacto de tipo organización por orden alfabético, 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. Tipologías de estructuras de organización
Las estructuras de organización visibles en el sitio web son dos: estructura jerárquica e hipertexto.
Estructura jerárquica .
Hace uso de un esquema taxonómico amplio y somero en el que las áreas de contenido principales o categorías son los apartados del menú principal relativos al comercio (Celulares, Accesorios y Tablets), los cuales se dividen en subcategorías como marca o tipo de producto en de cada una de ellas. el las. Hipertexto.
Existen diversos enlaces internos y externos como imágenes estáticas que enlazan con secciones concretas o con los productos de forma individual, en el primer caso, o con la página de Facebook y sus seguidores mediante el widget de la red social. Posibles estructuras de modelo de base de datos principales
Aparentemente, el sitio sitio web no hace hace uso de de ninguna estructura de modelo modelo de base base de de datos, datos, ya que los términos que se insertan en los campos de búsqueda son rastreados en las distintas páginas hasta localizar coincidencias exactas o palabras que contengan el término indicado. “Folksonomías”
No existen folksonomías debido a que la web no permite la interacción social ni el etiquetado por parte de los usuarios más allá de la redacción de opiniones sobre sus productos. A pesar de que exista un apartado de Búsquedas populares, las palabras claves que se muestran han sido recogidas por el sistema tomando como base las búsquedas de los usuarios pero ellos no han relacionado determinados términos a elementos concretos, no los han clasificado voluntariamente de forma alguna. Ejemplos de las diferentes tipologías de etiquetas
Etiquetas en sistemas de navegación. o
Los títulos de las distintas secciones de la web we b que aparecen en el sistema de navegación horizontal, el principal, incluyendo la búsqueda y la búsqueda avanzada.
o
Los nombres del sistema de navegación secundario que se muestran como una lista en la esquina superior derecha de la web.
Etiquetas como enlaces contextuales. o
Las distintas categorías y subcategorías del sistema de navegación 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 página que enlazan con distintas páginas 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 ningún tipo de títulos en la redacción del código 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 tamaño 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 artículos o productos en sus secciones correspondientes.
o
Los nombres o títulos de los distintos apartados existentes en la sección estática del margen izquierdo de la web.
Etiquetas como términos de índice.
Únicamente existen de forma invisible, en el código fuente. Por un lado, en la página principal como metadatos incrustados incrustados en el código fuente: o
Celulares >Celulares libres en TIC - Venta de equipos sin contrato en Uruguay>
o
<meta name="description name="description"" content="En content="En TIC tenemos los mejores modelos de celulares libres para que puedas cambiar tu teléfono sin perder tu número. Entrá y mirá nuestro catalogo online donde vas a poder hacer tu pedido directo desde la web o por teléfono" teléfono " />
o
<meta name="keywords name="keywords"" content="tic, content="tic, celulares libres, telefonos" telefonos" />
o
<meta name="robots name="robots"" content="INDEX,FOLLOW content="INDEX,FOLLOW " />
Y, por otro lado, en el resto de páginas como “términos” pertenecientes a los distintos enlaces de la web que aparecen en el código fuente.
Etiquetas con iconos. o
Bocadillos de texto (en el chat junto a “TIC Consultas Online” y en Contáctenos junto a “Enviar!”).
o
Icono de carta ( en el chat junto a “Déjanos tu mensaje” cuando no hay ninguna persona disponible).
o
Stick sobre un círculo (en todos los productos catalogados, junto a “Comprar”).
o
Todas las imágenes de los productos y distintos elementos de su composición (representativas del SO, de la doble SIM).
Tipologías de sistemas de navegación
Sistemas de navegación integrados. o
Sistemas de navegación globales.
o
Sistemas de navegación locales.
o
Navegación contextual.
Sistemas de navegación suplementarios suplementarios. o
Índices alfabéticos del sitio (aunque al pie de página aparezca Mapa del sitio, al seguir el vínculo podemos observar que no es tal; no existen jerarquías sino orden alfabético).
o
Función de búsqueda.
Tras analizar el sitio web, podemos plantear un rediseño del mismo tomando como base una relación de errores-soluciones existentes y estudiando buenas prácticas llevadas a cabo por otros sitios. Evaluación heurística del sitio web a partir de la observación
A continuación continuación planteamos los principales errores errores o problemas problemas que se han han localizado en la web y posibles mejoras mejoras para los mismos: 1. Identidad e información.
Faltan datos relativos al contacto telefónico y postal. (Grave)
Aunque aparecen el número de teléfono y varias direcciones postales, las personas que no sean de Uruguay no podrán llamar si no conocen el prefijo internacional y las que sean de otra ciudad del mismo país pero no de Montevideo podrían no saber a qué ciudad pertenecen las direcciones postales. Posible solución: añadir el prefijo internacional al número de teléfono (+598) y el nombre de la ciudad a las direcciones postales (Montevideo). No se hace uso uso de los colores corporativos en el sitio web. 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 solución: cambiar los colores actuales de la web por los de la empresa con la posibilidad de mantener algunos de los actuales en muy pequeña medida. 2. Estructura y navegación.
Falta de breadcrumbs en la web. (Muy grave)
No existe ningún elemento en el sitio web que permita al usuario conocer su ubicación exacta en el mismo ni volver atrás sin usar los botones del navegador. Posible solución: añadir una línea de texto bajo el menú principal o justo encima del contenido principal de cada página en la que se muestre la ubicación exacta del usuario (categoría > subcategoría > etc.) y enlaces sobre cada una de sus etiquetas previas.
El menú principal siempre resalta la categoría Celulares . (Muy grave)
En lugar de resaltarse la categoría en la que te encuentras e ncuentras o no resaltar ninguna, el sitio destaca siempre la de Celulares, lo cual puede generar mucha confusión en los usuarios. Posible solución: quitar el resaltado actual en todas las páginas o cambiarlo de forma que se resalte la categoría correspondiente a la ubicación del usuario. No se proporciona información información sobre sobre la protección protección de datos de carácter personal en ningún momento. (Muy grave)
Ni en el proceso de registro web ni en el de compra aparece información relacionada con la protección de datos de carácter personal del usuario. Posible solución: añadir dicha información en los espacios correspondientes. La navegación cambia en algunas páginas. (Poco grave)
La sección estática que habitualmente se encuentra en el lateral izquierdo de la web aparece en el derecho cuando se accede a las páginas de los productos como tales. Posible solución: cambiar el código de la web para mantenerlo a la izquierda en todas las páginas en las que se muestre. Algunos enlaces que son son imágenes tienen escrito su atributo atributo “alt” de forma poco o nada clara y no incluyen atributo “title”. (Poco grave) Tanto en “Plan Recambio” como en “Pack Dúos”, el atributo “alt” tiene escrito “Destacados del mes”, y el atributo “title” no está especificado .
Posible solución: cambiar los textos de los atributos “alt” por otros más acordes con sus enlaces. 3. Etiquetaje.
La búsqueda de etiquetas no da los resultados esperados (Muy grave)
Su búsqueda no conduce a páginas que las contengan, sino a productos cuyo contenido, de alguna forma, se encuentre relacionado en la escritura.
4. Contenido.
No existe información alguna alguna acerca de actualizaciones de la la web. (Muy grave) grave)
Los usuarios no pueden saber si existen nuevos terminales o accesorios a la venta ni de cuándo 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 solución: incluir fechas en las imágenes vinculadas a ofertas o packs, incluir novedades en la página principal ya sea a modo de texto o de imagen vinculada y/o incluir un pequeño texto a pie de página en el e l que se muestre la última fecha de actualización del sitio. Escasas áreas de información importante destacada en la página principal. (Grave)
Se echan de menos zonas en la página principal en las que se muestren algún tipo de ofertas o una pequeña selección de los productos que ofrece la web de cada categoría en lugar de mostrar exclusivamente una selección concreta de teléfonos móviles. Posible solución: suprimir o reducir la selección de teléfonos móviles existente, añadir otras del resto de categorías e incluir ofertas en forma de imágenes hipervinculadas a sus contenidos correspondientes. Existen diversos términos que pueden no ser conocidos. (Poco grave)
Aunque una búsqueda rápida en internet puede resolverlo, personas poco habituadas a determinados términos o acrónimos, como algunos relativos a las especificaciones de los dispositivos, podrían tener problemas para comprender lo que se quiere decir. Posible solución: añadir un apartado de ayuda, FAQ o similar en el que se definan determinados términos que puedan generar confusión en los usuarios. 5. Elementos multimedia.
La web se encuentra sobrecargada de imágenes. (Grave)
Se hace uso de demasiadas demasiadas imágenes y variaciones variaciones de color en un espacio pequeño, haciendo que se pierda la calidad y, en consecuencia, la atención o interés del comprador potencial. Además, dentro del catálogo de cada sección, las etiquetas de cada producto son muy pequeñas en comparación con sus imágenes.
Posible solución: ampliar el tamaño de las etiquetas de los productos y/o reducir el de las imágenes de los mismos, así como emplear unas combinaciones de colores más sencillas. Otra opción posible es hacer que los productos se muestren en su forma de lista, tal y como se puede elegir e legir cuando se realiza una búsqueda. 6. Búsqueda.
Los resultados de las búsquedas no son totalmente satisfactorios. (Muy grave)
Cuando se realiza una búsqueda de uno o varios términos, los resultados que se esperan son elementos relacionados con dichos términos, pero en este caso no se termina de cumplir. Posible solución: hacer uso de bases de datos mediante anillos de sinónimos o tesauros. Los resultados no se agrupan. (Poco grave)
Cuando realizas una búsqueda te aparecen todos los resultados seguidos sin orden ni relación aparente. Posible solución: agrupar los resultados por categorías (p.e.: celulares, tablets, accesorios). No asiste al usuario en caso c aso de no poder ofrecerle resultados para una consulta dada (Poco grave)
Si no se encuentra ningún tipo de resultado para una búsqueda determinada, la página únicamente te dice “Su búsqueda no devolvió resultados”, sin tratar de
ofrecer vías alternativas. Posible solución: mostrar, junto al mensaje actual, algún consejo como “Asegúrese de que escribió el término correctamente” y mostrar un vínculo a la búsqueda
avanzada por si las opciones existentes en su apartado ayudan al usuario a encontrar lo que busca. 7. Utilidad y accesibilidad. contenido exclusivo de tipo gráfico. gráfico. (Muy grave) Apartados con contenido En “Plan Recambio” y “Pack Dúos” sólo se presentan imágenes para ofrecer la
información, sin incluir ningún tipo de enlace ni posibilidad de compra.
Posible solución: mantener las imágenes existentes pero añadirles zonas interactivas que enlacen con los productos individuales y permitan su compra. Sección sin funcionamiento. (Muy grave) La sección “Blog” no funciona, probablemente porque se haya eliminado el sitio
web o servidor en el que se encontraba encontraba alojado. Posible solución: arreglar el enlace (volver a crear la página del blog si es necesario) o eliminar la sección de la barra de navegación 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 solución: cambiar el color de fuente o colocar un recuadro con algo o nada de transparencia entre el fondo y el menú. Tamaño de la fuente pequeño. (Grave)
El tamaño de la fuente de texto más usada en la web es demasiado pequeño. Posible solución: ampliar en uno o dos puntos, al menos, el tamaño de las fuentes fu entes de texto para favorecer la comodidad del usuario durante su navegación. Formulario que no funciona. (Grave)
El formulario de la sección Contactenos del menú principal, a diferencia del existente ex istente en el lateral de la web, da error cuando se intenta emplear diciendo “Imposible procesar su solicitud. Por favor, inténtelo más tarde”.
Posible solución: suprimir el apartado completamente en el menú principal y mantener el que funciona de la sección lateral izquierda. 8. Tecnología e interfaz.
Problemas en Internet Explorer. (Grave)
El sitio web funciona muy lento en IE y no se muestra el widget de Facebook. Posible solución: suprimir el widget o agregar un código 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 exclamación en dentro.
Posible solución: eliminar el fondo rojizo de detrás del texto y hacer uso de colores e iconos algo menos llamativos o usar en su lugar textos de tamaño mayor para llamar la atención sin alarmar necesariamente. Benchmarking o estudio de la competencia
A partir del del análisis anterior podemos realizar una propuesta visual para la mejora del sitio web tomando como como base para ello los de otras otras empresas. 1. Estructura y navegación.
En Phone House se muestra claramente a los usuarios cuáles son las novedades al
comienzo del contenido de la página de inicio. Esta forma tan directa de mostrarlas permite que sean vistas y leídas por el mayor número de compradores potenciales posible, convenciéndoles para seguir los hipervínculos y seguir informándose.
Ilustración 1. Novedades de Phone House en su página principal
Superandroide ofrece un mapa del sitio distribuido en cuatro apartados diferentes:
nuestras ofertas, su cuenta, categorías y páginas, que pueden resultar muy útiles en función de si el usuario busca un producto determinado, una oferta, información sobre el sitio web o su empresa, etc.
Ilustración 2. Mapa del sitio web Superandroide
Colocar enlaces relevantes en el pie de página 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 interacción 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 vías de búsqueda. Movilonia enlaza a páginas “amigas” externas, de la revista LOOQ, que permiten al usuario realizar búsquedas sobre la misma temática de su web en otros sitios o cambiar a otra actividad diferente. A diferencia de esta, T-Mobile T-Mobile,, Superandroide Superandroide y y Phone House ofrecen enlaces internos a: información sobre sobre contacto y asistencia, información muy relevante del sitio para usuarios registrados y no registrados, e información sobre los distintos productos y servicios ofrecidos pero categorizados de una forma que puede resultar más práctica para determinados usuarios, respectivamente.
Ilustración 3. Pies con vínculos a páginas internas o externas desde Movilonia, T-Mobile, Superandroide y PhoneHouse
powerplanet y y Tecnología Tecnología Móvil plantean un menú basado en imágenes Los sitios powerplanet de las diferentes compañías, 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 imágenes se suelen relacionar con mayor facilidad o se pueden comprobar de un vistazo rápido a los dispositivos cercanos. cercanos. En Movilonia la navegación principal se lleva a cabo a través de un menú lateral
que se organiza según las categorías o marcas a las que pueden perteneces los productos que el usuario esté buscando. Es de gran ayuda cuando el usuario busca algún producto o servicio concreto.
Ilustración 4. Menús gráficos de powerplanet y Tecnología Móvil
Ilustración 5. Menú de navegación principal de Movilonia
store, Superandroide Superandroide,, T El diseño claro y sencillo de diversas páginas web (bq store, Mobile)), tendente al flat design, fomenta la navegación fluida de los usuarios por el Mobile sitio y convierte su tiempo de dedicación en algo calmado, sin el estrés que se genera a veces cuando existe demasiada información o esta se encuentra muy solapada.
Ilustración 6. Diseño claro y sencillo de bq store, Superandroide y T-Mobile
2. Información contextual
Por si un usuario no sabe qué hacer, se encuentra perdido, Telecor le invita a
descubrir qué busca y lo traslada a la ubicación más adecuada dentro de la web.
Ilustración 7. Información basada en la cuestión "¿Qué quieres hacer?" en Telecor
como Jumpy móvil ofrecen información completa acerca de cada tipo de Sitios web como Jumpy 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 términos o si les sirven los productos que están encontrando.
Ilustración 8. Información completa sobre categorías y subcategorías en Jumpy móvil
Telecor hace uso de vocablos originales inventados como “accesorízate” y de términos extranjeros como “free” para atraer la atención de los usuarios , sobre todo
de los más jóvenes, y educarlos en términos actuales.
Ilustración 9. Uso de vocablos curiosos por parte de Telecor
3. Redes sociales
T-Mobile,, Telecor Telecor y y Movilonia Movilonia poseen un pie de página fijo en el Sitios web como T-Mobile 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 mínima pueden producir resultados muy positivos.
Ilustración 10. Pies de página con iconos vinculados a redes sociales de Movilonia, Telecor y T-Mobile
Sitios web como powerplanet han adaptado la interacción social de los usuarios a
las redes sociales, de forma que los usuarios pueden seguir enviando sus opiniones como hasta el momento y también comentar a través del plug-in social de Facebook siempre y cuando tengan la sesión iniciada.
Ilustración 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 más familiar y suponer un incremento positivo de la confianza depositada en el sitio, ya que algunos usuarios se sienten más seguros sabiendo que no es un ordenador el que hace las cosas sino personas físicas.
Ilustración 12. Algunos de los componentes del equipo de powerplanet
Adjuntar información relativa a los pagos y a las entregas, incluyendo premios
otorgados a la web y verificaciones, tal y como hace Lazada Lazada,, supone que los clientes se sientan más seguros al realizar sus compras en el sitio web.
Ilustración 13. Pie de página de Lazada en el que se muestran informaciones importantes sobre seguridad
5. Multidispositivo
La web Lazada dispone de aplicaciones móviles para sistemas
operativos de Apple, Android y Windows, enlazadas al pie de todas sus páginas. A través de ellas, los usuarios pueden realizar acciones como búsqueda, visualización y compra de productos de la web de forma sencilla.
Ilustración 14. Acceso a las aplicaciones móviles de Lazada desde su sitio web
Argus Center for Information Architecture (2000). Evaluating Information Architecture
[documento en línea]. [Fecha de consulta: 16 de octubre de 2014]. < http://argus-acia.com/whit http://argus-acia.com/white_papers/evaluating_ia e_papers/evaluating_ia.pdf> .pdf> Hassan, Yousef; Martín, Francisco (2003). Guía de Evaluación Heurística de Sitios Web
[artículo en línea]. [Fecha de consulta: 16 de octubre de 2014]. < http://www.nosolousabilidad.com/a http://www.nosolousabilidad.com/articulos/heuristica rticulos/heuristica.htm> .htm> Manchón, Eduardo (2005). Un caso real:evaluación heurística de renfe.es [artículo en
línea]. [Fecha de consulta: 16 de octubre de 2014]. < http://www.gestiopolis.com/canales5 http://www.gestiopolis.com/canales5/ger/ainda/32.htm> /ger/ainda/32.htm> Márquez, Joaquín (2006). Guía para evaluación experta [documento en línea]. [Fecha de
consulta: 16 de octubre de 2014]. < http://www.jmarquez.com/documento http://www.jmarquez.com/documentos/jm_checklist.p s/jm_checklist.pdf> df> Rosenfeld, Louis (2004). Information Architecture Heuristics [artículo en línea]. [Fecha de
consulta: 16 de octubre de 2014]. < http://louisrosenfeld.com/home/bloug_a http://louisrosenfeld.com/home/bloug_archive/000286.h rchive/000286.html> tml>