Sergio Gago

Uno de los campos que más me gustan del mundo de internet es la Arquitectura de la información. Término que suena muy rimbombante, pero que engloba los 4 factores a mi entender, más importantes para que un proyecto Web tenga éxito.

Además, es un campo disponible para casi cualquier profesional. Desde informáticos, hasta bibliotecónomos, pasando por pedagogos incluso matemáticos!

Pero. ¿Qué es la arquitectura de la información?

“La Arquitectura de Información es la disciplina encargada de la fundamentación, planificación, análisis y estudio de la selección, organización, disposición, estructuración de espacios de información y presentación de los datos contenidos en los sistemas de información interactivos.”
Más en la Wikipedia.

Es decir, en un mundo donde lo que prima es la información, hacen falta (y cada vez más) profesionales que sepan como hacerla encontrable, clasificable, útil y usable.

Cabe decir que no es un mundo, ni mucho menos exclusivo de internet. Pero ha sido éste el salto necesario para que esta rama profesional se alce como uno de los perfiles más codiciados en las empresas Web de hoy en día.

Así pues, podríamos dividir la arquitectura de la información en 4 patas

Clasificación y ‘encontrabilidad’

Este es el campo más habitual relacionado con la ‘AI’, realizar las clasificaciones, o las categorizaciones de nuestros elementos. Desde investigaciónes y pruebas de usuario, hasta card sorting. Aunque aquí también entra todo el mundo de los metadatos asociados a ficheros (desde los ID3 de los MP3, hasta los microformatos!)

Búsquedas

Por supuesto, lo que hace la gente en Internet es buscar, cualquier cosa, de miles de formas distintas. De forma lógica, semántica, irracional… pero al fin y al cabo busca. El cómo presentemos la búsqueda, y cómo devolvamos los resultados (y qué resultados, por supuesto), forma parte de la AI. ¿Subrayaremos las keywords encontradas? ¿Mostraremos el enlace del documento encontrado? ¿Permitiremos una búsqueda avanzada por fecha?

Navegación

Imaginemos por un momento que vamos todas las semanas, rigurosamente, a la biblioteca de nuestro barrio. Que tras la segunda o tercera visita ya conocemos a nuestra bibliotecaria, sabemos donde están las novelas y dónde los ensayos… incluso conocemos el proceso para reservar un libro que no está disponible en ese momento. Ha sido dificil, pero hemos conseguido aprender a usar el sistema.
Ahora pensemos que cada Web en la que entramos es completamente diferente a la anterior, tenemos que aprender el sistema de uso una y otra vez, en cada visita, y por supuesto en escasos segundos.
De eso se trata la navegación. Utilizar elementos estándares, sencillos, fáciles de usar, y que permitan llegar rápidamente a la información que buscamos.

Diseño, usabilidad y accesibilidad

Y por último, por supuesto, el diseño del sitio. Aquí hay una clave fundamental, que se repite una y otra vez por todas las webs que hablan de este tema. No diseñes para tu ego, diseña para el usuario. Las florituras, las animaciones pesadas, y los excesos gráficos son cosa del siglo pasado. Ahora lo importante no es ni el diseño, ni la programación, sino el contenido. Hacerlo usable, accesible para cualquier persona desde cualquier sitio, y entendible, es la clave.

¿Qué parte os parece más interesante?

Cuando un usuario navega por la Web, es muy posible que sus intenciones sean buscar información, de cualquier tipo, y si llega a nuestra web pueden ocurrir dos cosas:

• Que haya sido por error: Mejor dejémosle ir, probablemente se sienta incluso estafado al pulsar alguno de nuestros anuncios que no le llevarán a nada.
• Que tengamos el contenido que está buscando, parecido, o simplemente algo que le pueda interesar: Puede que tengamos un artículo relacionado que es de su interés, produtos similares o enlaces a otros sitios donde se encuentra la información que busca.

Sin embargo cuando un usuario busca en google, se encuentra de repente una ristra enorme de resultados, tiene que elegir muy bien dónde va a hacer clic y dónde no.

Nivel 1: Título de la página:

Este elemento será clave para que el usuario pulse sobre el enlace. Debe tener algo de relación con su búsqueda y no solamente una keyword. Estar en el mismo idioma, ser de un dominio nacional (.es), y que la ruta tenga alguna descripción más.
Nivel 2: Descripción del site en google:

Si hemos pasado con éxito el miedo al título, el usuario hará un rápido escaneo en la descripción del resultado. Si lo que lee ahi le resulta adecuado habremos pasado a la siguiente fase.

Nivel 3: Entrada y aterrizaje:

Hurra! El usuario ha hecho clic! Algunos pensarían que ya está todo hecho, pero no es así. Lo primero de todo es no cansarle con el tiempo. Si pasa más de un segundo desde que ha hecho clic hasta que empieza a aparecer algo… se impacientará. Si pasa un segundo más estará a punto de irse, y en el tercer segundo probablemente ya no quede nadie. Es lo mismo que ir a un bar, pero hablando en términos de segundos en lugar de minutos! (según bares, claro!). Igual que el miedo llevaba a la ira en Star Wars, aquí el miedo y la confusión llevan al history.back() o lo que es lo mismo, al botón atrás o volver.
Nivel 4: Búsqueda de contenido:

El usuario revisará la Web buscando la información que tenía en la cabeza. Si lo encuentra todo caótico y difícil – Miedo – Botón atrás. Es importante saber el comportamiento errático que suelen tener los usuarios al “parsear” un sitio Web, este artículo de Yusef Hassan “Cómo leen los usuarios”, es bastante instructivo al respecto.

Nivel 5: (Final boss): Acceso al contenido encontrado:

Vale, tenemos lo que buscaba, y de alguna forma él lo ha encontrado. Ahora tenemos que dejarle navegar y que se pierda controladamente por nuestro sitio. Si se empieza a encontrar cosas raras, como menús que van a sitios que no deben, anuncios que parecen enlaces de la Web, o saltos de una parte a otra de la Web sin sentido, se verá perdido – miedo – botón atrás.

Conclusión:

En menos de 3 segundos tenemos que ser capaces de poner en las narices del usuario el contenido que estaba buscando. Hay mucha competencia ahi fuera, y lo habitual en el usuario es pensar que ha entrado en el enlace equivocado y volver a la búsqueda para probar otra cosa.

Todavía no había escrito nada de microformatos ni metadatos por aquí, y esta reseña en Webposible me ha brindado la oportunidad.

Básicamente Dublin Core es una serie de especificaciónes de código que pretenden dar contenido semántico a la Web. Es bastante extensible, modular y flexible, por lo que puede ser una cosa muy interesante.

Algunas de las relaciones que ofrece son el título, autor, relación, colaboradores, derechos o fechas. Pero resultaba bastante pesado ir metiendo estos metadatos en cada proyecto. Pero por suerte la gente de Webposible ha desarrollado un generador de metadatos Dublin Core, que nos ayudará en esta tarea.

La idea de ir haciendo la Web más semántica cada día es emocionante!

Logic+Emotion es un blog de marketing que suele acompañar sus artículos con imágenes explicativas bastante buenas.

Hace tiempo (cuando aun no estaba online este pequeño weblog) llegué a un artículo que nos mostraba la trinidad del diseño digital basado en la experiencia. Investigando, ví que había un precedente (y que esta era su mejora), y hace unos días he visto su evolución. Me ha parecido muy interesante ver los tres artículos en su conjunto, y entender la evolución natural. ¿Cuál será el siguiente paso?
Estas son las imágenes:

Diseño de producto, marketing e ingeniería normalmente se pegan entre si. La clave está en el centro de sus conjuntos.

Esta evolución habla de diseñar para la gente, estimular los sentidos, y contar buenas historias. Es decir, hablamos de usabilidad, de diseño para el usuario y de la excelencia del contenido.

Y la evolución es, incluir, además de lo anterior la “sostenibilidad” o lo que he preferido traducir como escalabilidad.

La colección de artículos:

Experience Design 101
Holy Trinity of digital experience design
Meet Ed: Experience Diamond

El amigo Whiskito, editor de xataca, me envía una aplicación de lo más interesante. Un validador de la “movilidad” de una Web, o lo que es lo mismo. Cómo se vería y costaría desde un teléfono móvil (celular)

Ares you mobi ready?

Además de decirte el resultado general, te hace unas gráficas con datos más que interesantes, si realmente nos interesa ofrecer contenido móvil (que no es mi caso). Desde la legibilidad en la pantalla hasta los tiempos de carga. Así, en función del peso de la página, nos da unos precios aproximados de lo que costaría navegar por esos sitios.
Os dejo una captura de los pobres resultados de este blog.

Esta semana se está hablando mucho del fenómeno life, famosa revista que ha decidido pasar de forma exclusiva al mundo online, tal y como nos cuentan en Maestros del Web.
Sobre esto ya se está hablando mucho, por lo que no voy a entrar en el tema, sino que hundiré un poco el dedo en la llaga hablando de otra revista online.

O más bien, la editorial MagWerk, que se dedica exclusivamente a la edición online de lo que podríamos llamar “revistas verticales” en un lenguaje más Web.

El concepto es curioso: Una revista hecha completamente en flash, que intenta emular la sensación de estar tirado en el parque, escuchando a los niños jugar y algún que otro pájaro, pero aprovechando los grandes conceptos de la Web, como el incrustar videos, animaciones o música. Reserva una doble página (y es que en ese formato tenemos que hablar de páginas) para un chat, otra para recomendar a un amigo, otra para incrustar el ya tradicional asteroids y el space invaders, y la contraportada para hacer publicidad entre las “revistas del grupo”.

Bien, parece un concepto de lo más innovador. Emular en la medida de lo posible una revista, con la sensación de su lectura, y añadiendo la “cuarta” o “quinta” dimensión de la red. Pero, no tienen en cuenta factores tan importantes como:

• Tiempo de carga pesado: Todo su contenido es flash. Si no tienes una gran línea de conexión, te desesperarás antes de la 4ª página.
• 0 patatero en information share: No solo no tienen RSS, ni siquiera el texto es seleccionable.
• 0 de publicidad contextual: Vale que el nicho de mercado en cada revista es muy concreto, pero al menos contextualizarla por pais de origen.
• ¿Indexación? ¿Qué es eso? ¿Para qué?
• Usabilidad: No caballeros… por mucho que lo intentéis y lo pongáis bonito, la gente no lee en el ordenador igual que en el papel.
• etc…

Parece que el problema viene de que muchos diseñadores, siguen pensando que editar contenido en una Web es lo mismo que la edición de una revista o libro en papel.

En SEOmoz tienen un artículo donde hablan de los footers más “cañeros”, que han visto ellos al menos. Es cierto que suele ser algo que se habitualmente se deja bastante abandonado. Entonces… ¿Qué debe llevar un buen footer o pié de página?

Elementos habituales que nos encontramos:

• Quiénes somos: Enlace a información referente a la empresa, o autor/es.
• Estadísticas: El habitual icono de estadísticas, o bien algo más sencillo. También pueden ser estadisticas de uso, como número de usuarios conectados, o tiempo de búsqueda.
• Reglas de uso / privacidad / información legal
• Contacto: Enlace a una forma de ponerse en contacto.
• Licencias (copyright, creative commons…)
• Sindicación: RSS, Atom, etc…
• Logos de estándares: Fue una moda muy típica, y bastante usado en páginas que no cumplían estándares, pero estuvo bien poner los logos de “cumplo con la W3C”.
• Powered by: O reconocimientos a herramientas usadas. WordPress, themes usados, plugins, o herramientas open source en general.
• Información de los creadores: Suele ser la empresa que diseña el site.
• Sitemap: Enlace a un mapa con los vínculos a todas las partes del sitio.
• Enlaces internos: Ya sea a otros sitios de la compañía, o simplemente linking interno para favorecer el tema SEO.
• Ayuda: Enlace a la ayuda o FAQs del sitio.
• Paginadores: Si los resultados de una búsqueda han dado varias páginas, posibilidad de acceder a cualquiera de las otras páginas.
• Adsense: No perder oportunidad para generar ingresos. No es el sitio más óptimo, pero también genera.
• Otra caja de búsqueda: Siempre, con el mismo término que el buscado al principio. Ayuda a enlazar rápidamente resultados obtenidos, con palabra buscada y hacer los cambios necesarios.

¿Respuesta correcta? Probablemente ninguna y todas a la vez. En función de nuestro sitio habrá cosas más óptimas y otras menos. Recomiendo, en las páginas que sean suficientemente largas, dar opciones de navegación parecidas al usuario, diferenciar siempre el área de footer y que todos los servicios que el usuario espera que estén ahi, estén verdaderamente ahi. Podemos ponerlo en otros sitios, pero también en el footer. Y siempre nos queda ver algunas

Hace días, publiqué un artículo hablando sobre una recopilación que estuvo haciendo Alejandro Karpich – Karpicius sobre educación virtual. En este conjunto de entrevistas han participado personas con muchos conocimientos, y me siento orgulloso de haber estado entre ellos.

Ahora Alejandro ha publicado el PDF agrupando todas las entrevistas. Un documento muy interesante de leer.

Educación virtual y lo que vendrá – PDF

Este post es solo una reseña rápida hacia el mismo de jmarquez.com donde tiene en pdf la presentación que hizo en imaginatica 2007. “Usabilidad y proyectos Web, la experiencia desde las trincheras“.

Recomiendo mucho ver esta presentación, ya que creo que sintetiza perfectamente y sienta muy bien las bases de la usabilidad.

En las investigaciones que se hacen en el HCI Group de la Universidad de Stanford, Manu Kumar está desarrollando una nueva forma de ver las tecnologías de Eye-Tracking.

Esto es, básicamente, un reconocimiento de la posición de los ojos, calibrada mediante sensores y software para posicionar el puntero en la pantalla. Además se pueden establecer zonas de scroll, o movimientos prefijados para clicks, doble clicks o macros determinadas.

Las técnicas de eye-tracking son muy comunes en el mundo de la accesibilidad, ya que suponen una alternativa muy buena, incluso de precio, para personas que no pueden manejar correctamente un ratón. Pero el objetivo de estos experimentos es hacer esta técnica útil y rápida para gente sin discapacidades, de forma que quizá podamos deshacernos (por fin) del mouse.

Para mejorar la precisión, el aparato utiliza el movimiento de la pupila, y lo compara con el movimiento infrarojo reflejado por la córnea, que es inmóvil así obtienen una salida mucho mejor, que cuesta 25000$ ni más ni menos.

En su Web, cuentan algunas de las aplicaciones del eyetracking, que son más que interesantes. Además de, por supuesto la navegación por el sistema operativo, puede ser un buen complemento al ratón para añadir productividad. Scrolling, selección o incluso seguridad. Si no tenemos que dejar nuestra “huella” en ningún ratón o teclado, sino simplemente mirar allá donde queremos seleccionar, es más seguro.