CRECE CON INTERNET T Arquitectura de la información: Garantiza una buena experiencia de usuario 2 Más allá de la usabilidad: La Experiencia de Usuario ......................................................................3 Definición de Experiencia de Usuario ............................................................................................... 4 Modelos explicativos de la Experiencia de Usuario ................................................................5 Metodología del diseño centrado en el usuario y documentación generada .................9 Les Etapas de la Experiencia de Usuario .............................................................................................9 La Estrategia .....................................................................................................................................................12 El Alcance .......................................................................................................................................................... 16 La Estructura.................................................................................................................................................... 19 El Esquema ....................................................................................................................................................... 24 La Superficie ....................................................................................................................................................30 La Arquitectura de la información .............................................................................................................. 31 Principios de Arquitectura de la Información ..................................................................................... 34 Sistemas de organización............................................................................................................................ 34 Esquemas de clasificación .................................................................................................................... 34 Estructuras organitzativas .....................................................................................................................36 Estructura jerárquica ............................................................................................................................36 Estructura hipertextual ....................................................................................................................... 37 Estructura de bases de datos......................................................................................................... 37 Estructura secuencial ..........................................................................................................................38 Sistemas de Etiquetage ................................................................................................................................38 Enlaces contextuales ...........................................................................................................................39 Títulos ..............................................................................................................................................................39 Opciones del sistema de navegación .......................................................................................39 Sistemas de Navegación ...............................................................................................................................41 Guía de Recursos ..................................................................................................................................................... 42 3 Más allá de la usabilidad: La Experiencia de Usuario “Los productos tecnológicos que no funcionan de la manera que las personas esperan las hace sentir estúpidas –aun cuando efectivamente hayan logrado lo que se propusieron”, Jesse James Garett (2002) Jesse James Garett es uno de los expertos más reconocidos en el campo de la Experiencia de Usuario y autor del famoso libro “The Elements of User Experience”, que nos servirá de guía para explicar la metodología de trabajo a seguir para garantizar una buena experiencia de usuario en un sitio web. En su web (www.jjg.net) se pueden encontrar recursos sobre Experiencia de Usuario (EU) y Arquitectura de la Información (AI). Una buena experiencia de usuario en el sitio web es una necesidad de supervivencia para cualquier empresa en el actual mercado de Internet. Pensad que tenéis mucha competencia y que ésta se halla a un clic de distancia y, por otro lado, el usuario se encuentra sólo ante la web, es decir, que las webs y aplicaciones se han de explicar por sí mismas a todos los niveles. - pérdida de ventas (e-commerce) disminución de la productividad (intranet) frustración por parte del usuario (web) - aumento de la fidelización de usuarios aumento del porcentaje de conversión (usuarios a clientes) aumento del tiempo de navegación de los usuarios mejora de la imagen de marca Las características y funcionalidades de un sitio web o de una aplicación son importantes, pero la experiencia del usuario tiene un mayor efecto sobre la fidelización de los clientes. Una de las formas más habituales de medir el ROI (Return of Investment) de un sitio web es con la ratio de conversión de los usuarios. Esta ratio mide los porcentajes de visitantes que realizan una acción previamente planificada: subscribirse a un boletín, comprar un producto, personalizar la interfaz, enviar un formulario ... La ratio de conversión es una forma de medir la efectividad de la experiencia del usuario. 4 Definición de Experiencia de Usuario Jesse James Garret la define como “la manera como un producto se comporta y es utilizado por el usuario”. La Wikipedia la define como “el conjunto de factores y elementos que determinan la interacción satisfactoria del usuario con un entorno o dispositivo concretos y son capaces de generar en él un conjunto de emociones positivas sobre el sitio y su uso”. En la Experiencia de Usuario intervienen la Arquitectura de la Información, el Diseño de Interacción, la Usabilidad, la accesibilidad, el diseño gráfico, la estética, la psicología cognitiva, y la extrapolación de principios del mundo del márketing, etc. Nathan Shedroff (http://www.nathan.com/) extiende el concepto de Experiencia del usuario más allá de la Web planteando su Teoría Unificada del Diseño que articula en torno a los conceptos clave de diseño de información, sensorial e interacción. “La Arquitectura de la Información es una parte específica del marco global más amplio que es la Experiencia de Usuario”.utilitzat per l’usuari”. Los límites entre unas disciplinas y otras no siempre están bien delimitados y podemos hablar de zonas grises en las que distintas disciplinas se mezclan. 5 Modelos explicativos de la Experiencia de Usuario La colmena de Peter Morvill Desde el punto de vista del usuario, el siguiente diagrama explica gráficamente aquellas calidades que son fundamentales para que un producto o servicio consiga construir una buena Experiencia de Usuario. Peter Morville es un conocido consultor de experiencia de usuario y arquitectura de la información y creó un diagrama para explicar a sus clientes la importancia de la experiencia de usuario y la necesidad de ir más allá de la usabilidad. Tal y como él explica en su artículo, este diagrama sirve para poner de manifiesto los diferentes aspectos de la experiencia de usuario, así como para definir prioridades con los clientes: ¿qué es más importante para el cliente, que su web sea deseable o accesible. The User Experience Honeycomb Fuente: http://semanticstudios.com/publications/semantics/000029.php 6 A continuación la explicación de Peter Morville de cada una de las facetas o cualidades de la experiencia de usuario: Útil: Debemos tener el coraje y creatividad para preguntar si nuestros productos y sistemas son útiles, y aplicar nuestro profundo conocimiento de la materia y del medio para definir soluciones innovadoras que sean más útiles. Usable: La facilidad de uso sigue siendo vital, y sin embargo la interfaz centrada en los métodos y las perspectivas de la interacción humano-ordenador no se aplican a todas las dimensiones del diseño web. En resumen, la usabilidad es necesaria pero no suficiente. Deseable: Nuestra búsqueda de la eficiencia debe tener en cuenta la importancia y valor de la imagen, identidad, marca, y otros elementos de diseño emocional. Localizable: Hemos de esforzarnos por diseñar sitios web navegables y objetos localizables, para que los usuarios puedan encontrar lo que necesitan. Accesible: Igual que nuestros edificios disponen de ascensor y rampas, nuestros sitios web deben ser accesibles para las personas con discapacidad (más del 10% de la población). Hoy en día es un buen negocio y éticamente lo que hace falta por hacer. Con el tiempo, se convertirá en ley. Creíble: Gracias al Proyecto de Credibilidad web, estamos empezando a comprender los elementos de diseño que influyen en la confianza de los usuarios versus lo que les decimos. Para más información sobre este punto consultad Stanford Guidelines for Web Credibility: http://credibility.stanford.edu/guidelines/index.html Valioso: Nuestros sitios web han de ofrecer valor a nuestros patrocinadores. Si no hay ánimo de lucro, la experiencia de usuario ha de avanzar hacia este objetivo. Si hay finalidad lucrativa, debe contribuir a los resultados así como mejorar la satisfacción del cliente. 7 Los Elementos de Jesse James Garret Desde el punto de vista del diseñador, el modelo que mejor explica cómo construir webs y aplicaciones para que la Experiencia de Usuario sea positiva es el de Jesse James Garret. Este modelo es el hilo conductor de su libro “*The Elements of User Experience” y podéis encontrar en su web el segundo capítulo del libro en pdf: http://www.jjg.net/elements/pdf/elements_ch02.pdf En su libro, Jesse James Garret explica que la única manera de conseguir una experiencia de uso satisfactoria es tener al usuario como centro de todo el proceso de conceptualización y desarrollo del producto o servicio, es decir, usar una metodología de diseño centrada en el usuario. Una buena experiencia de usuario solamente se consigue con un proceso de diseño centrado en el usuario. El proceso de implementación de la experiencia de usuario no debe dejar nada al azar. Este proceso se puede dividir en cinco etapas y, en todas ellas, las posibles acciones del usuario así como sus expectativas han de haber sido contempladas. Para clarificar todo el proceso, Jesse James Garret lo descompone en sus elementos principales y hace una diferenciación crucial: la web orientada a la información y la web orientada a las tareas. Este modelo lo estudiaremos en detalle más adelante. Los Elementos de la Experiencia de Usuario: Fuente: http://www.jjg.net/elements/translations/elements_es.pdf 8 La Rueda de Magnus Revang Otro modelo que también se usa para ilustrar el concepto de experiencia de usuario es la Rueda de Magnus Revang: http://userexperienceproject.blogspot.com/2007/04/user-experience-wheel.html. En este modelo se intenta mostrar tanto las calidades de la experiencia de uso de un interactivo como el proceso de conceptualización y producción del mismo. Es un modelo de síntesis. 9 Metodología del diseño centrado en el usuario y documentación generada Para explicar esta parte usaremos de hilo conductor el modelo de los Elementos de la Experiencia de Usuario de Jesse James Garret, y ampliaremos la información con el libro de Louis Rosenfeld y Peter Morville ("Information Architecture for the World Wide Web: Designing Large-Scale Web Sites") así como de otros artículos y recursos que se encuentran en Internet y que citaremos en su día. Lo primero que hace falta saber es que el proceso de implementación de la experiencia de usuario no debe dejar nada al azar. Este proceso se puede dividir en cinco etapas, y en todas ellas, las posibles acciones del usuario así como sus expectativas han de haber sido contempladas. Las decisiones que se toman en una etapa determinada del proceso afectan el resultado final del mismo. Les Etapas de la Experiencia de Usuario Superficie como el resultado final gráfico y visual del producto o servicio. Esquema como concreción concreción de la ubicación de elementos en pantalla (botones, imágenes, textos…) Estructura como forma de visualizar la relación que los diferentes elementos del sitio tienen entre ellos y como se comportarán. Alcance como concreción de la estrategia: ¿de qué tipo de producto hablamos y cuáles serán sus características, funcionalidades y requerimientos. Estrategia como la base de todo: qué quiere conseguir la empresa y qué querrán los usuarios. 10 A continuación veremos los elementos que componen cada una de estas etapas para darnos cuenta que las etapas y sus elementos son un todo. Jessi James Garret introduce una distinción importante en su modelo que afecta los elementos que componen cada una de las etapas en función de la naturaleza del producto o servicio a diseñar. Internet tiene una naturaleza dual: es una fuente de información y es una herramienta, y esta dualidad la representa J. J. Garret partiendo de su modelo y mostrando los diferentes elementos que componen cada etapa en el caso de que el producto/servicio a diseñar esté orientado a la información o a las tareas. Fuente: http://www.jjg.net/elements/translations/elements_es.pdf 11 12 La Estrategia - Objetivos del producto/servicio - Necesidades de los usuarios Las necesidades del usuario y los objetivos del producto o servicio son los dos elementos que conforman la estrategia, y determinarán la toma de decisiones a lo largo de todo el proceso de diseño de la experiencia de usuario. En esta etapa lo más importante es definir y formular con claridad y concisión tanto las necesidades de los usuarios como los objetivos del producto. Objetivos del producto / servicio - ¿Qué objetivos busca conseguir el producto? - Priorizar los objetivos - ¿Qué espera el cliente? - ¿Qué mensaje se quiere hacer llegar al usuario? - ¿Cómo se medirá el éxito del producto? - ¿Qué limitaciones técnicas existen? El briefing es el documento que define los objetivos de un producto o servicio. En ocasiones el briefing lo proporciona el propio cliente o, si no es el caso, se ha de elaborar con él. Pero antes de poder formular los objetivos del producto o las necesidades del usuario hemos de poner en marcha un proceso de investigación que será más o menos exhaustivo según el producto del que se trate o el cliente para el que se trabaje. Para entender los objetivos de la organización y el contexto en que el producto/servicio debe funcionar, lo que se hace es leer la documentación disponible (organigramas, estudios, etc.), reunirse con los diferentes equipos (directivo, técnico, contenido) y entrevistarse con las personas implicadas y los líderes de opinión. Estas reuniones y entrevistas generan aliados dentro de la organización y siempre ponen sobre la mesa temas y objetivos interesantes y que, quizás, de otra manera no hubieran salido a la luz. 13 Necesidades del usuario - ¿Quiénes son los usuarios del producto o servicio? ¿Hay un único usuario o hay más de un tipo de usuario? - ¿Qué necesidades tienen? - ¿Cuáles son sus prioridades? - ¿Cuáles son sus modelos mentales? - ¿Qué objetivos buscará conseguir el usuario en nuestro sitio web?¿ Y qué comportamiento de búsqueda tendrá? - ¿Qué lenguaje usa? - ¿En qué contexto consumirá el producto/servicio? Un proceso de diseño centrado en el usuario quiere decir comprender aquello que los usuarios necesitan, cómo piensan, y cómo se comportan, e incorporar este conocimiento en todos los aspectos del proceso. Y una buena arquitectura de la información debe ser el reflejo de cómo piensa el usuario. Pasos a seguir: 1. 2. 3. 4. 5. ¿Quiénes son tus usuarios? Segmentación de audiencia. Averigua sus necesidades (métodos de investigación de usuarios) Diseña el sitio para ellos Prueba un prototipo con ellos (pruebas de usuario) Cambia el diseño en función de aquello aprendido en las pruebas de usuario 6. Prueba el nuevo diseño con ellos (pruebas de usuario) 7. Vuelve a hacer cambios y pruebas de usuario hasta que veas que los usuarios se sienten cómodos en tu producto y lo encuentran sencillo de utilizar. Lo primero que hace falta hacer es una segmentación de nuestros usuarios para entender mejor sus necesidades al dividir la audiencia en grupos que comparten características y necesidades. Esta segmentación se puede realizar con criterios demográficos o en función de la actitud ante un tema determinado o nuestro producto. Un par de factores más a tener en cuenta en esta segmentación son la actitud ante la tecnología y el conocimiento del usuario sobre el tema en cuestión. Los métodos de investigación de usuarios los podemos dividir en dos grupos: los que sirven para recopilar información más genérica sobre las actitudes y percepciones generales de los usuarios como las encuestas, entrevistas o grupos focales. Otras herramientas como los estudios de campo o los tests de usuarios son más adecuadas para entender aspectos específicos del comportamiento de los usuarios y su manera de interactuar con el sitio web. 14 Métodos de investigación de usuarios más empleados: Análisis de logs de búsqueda y estadísticas Cuando se trata del rediseño de un sitio. En este caso lo primero que debemos saber es cómo la gente ha utilizando el sitio y dónde lo abandonaban o tenían problemas. El análisis de logs de búsqueda nos permite saber qué palabras o conceptos de búsqueda han utilizado los usuarios. Entrevistas con los potenciales usuarios Pruebas de usuario Las pruebas de usuario son el método más empleado. A veces se hacen sobre el sitio web una vez acabado y otras sobre diferentes tipos de prototipos o sobre un tema. Una prueba de usuario consiste en poner un usuario ante el sitio web que se quiere probar y pedirle que busque un tipo de información determinado o que realice una tarea X. El usuario debe tratar de razonar en voz alta todo el rato y el investigador debe tomar buena nota de lo que dice y a dónde va, dónde se equivoca, etc. Es una muy buena opción grabar en vídeo la sesión. El experto que más claramente habla sobre este tema es Steve Krug, consultor en usabilidad y conocido por ser el autor del libro “No me hagas pensar”. Steve Krug ha publicado un nuevo libro dónde explica cómo llevar a cabo tus propios tests de usuarios con el estilo claro y sintético que lo caracteriza. En el siguiente enlace podéis encontrar una muestra de una transcripción de un test de usuario así como de otros rescursos relacionados: http://www.sensible.com/rocketsurgery/index.html Personas y escenarios Las personas son usuarios ficticios que representan un grupo de usuarios del sitio y que se usan a lo largo de todo el proceso de diseño como referencia para tomar decisiones y no perder de vista las necesidades y comportamiento de un tipo de usuario. Se deben crear tantas personas como modelos de usuario tiene el sitio. Las personas son imaginadas por el equipo de diseño en escenarios con el objetivo de definir requerimientos más ajustados a los usuarios y ayudarnos a entender cómo navegará el usuario el sitio, así como aportar nuevas ideas. Los escenarios son historias cortas y sencillas inventadas para intentar imaginarse qué proceso seguiría la persona para satisfacer una determinada necesidad. 15 Fuente: “Data Driven Design Research Personas”. Una presentación muy sintética y visual del consultor que podéis encontrar en Slideshare Todd Zaki Warfel (http://www.slideshare.net/toddwarfel/data-driven-design-research-personas) 16 El Alcance - Requerimientos de contenido - Especificaciones funcionales En esta etapa lo que se hace es definir el alcance del producto: qué debe tener y qué podrán hacer los usuarios con él, es decir, de qué producto estamos hablando y qué características tendrá. Estas características son lo que se denomina especificaciones funcionales y requerimientos de contenido. El alcance permite concretar los objetivos estratégicos (necesidades del usuario y objetivos del sitio) mediante un listado de requerimientos específicos que describen el contenido, las características y las funcionalidades que ofrecerá el sitio web a los usuarios para intentar así satisfacerles. Es importante también estudiar los productos y servicios de la competencia (benchmarking) para conocer lo que s está haciendo en estos momentos en el sector y coger ideas. En esta etapa ya debemos diferenciar entre webs orientadas a tareas (interfaz de software) y webs orientadas a información (sistema hipertextual). Especificaciones funcionales Si estamos ante una interfaz de software lo que hemos de elaborar son las especificaciones o requerimientos funcionales, que serán un listado priorizado de las funcionalidades y características que tendrá el producto o servicio. En el momento de redactarlas se debe ser muy específico en su formulación, así como evitar la subjetividad. Definir el alcance de un proyecto mediante las especificaciones funcionales priorizadas es fundamental, pues es la manera de que todos los interesados sepan qué se debe crear y cuándo hemos acabado el proyecto. De lo contrario se van incluyendo nuevas funcionalidades o se van variando las existentes y llega un punto que ya no sabemos en qué momento se puede cerrar el proyecto ni qué proyecto tenemos entre manos. Los casos de uso son una técnica del campo de la ingeniería del software que se usa para capturar los requisitos potenciales de un sistema. Cada caso de uso proporciona uno o más escenarios que indican cómo debería interactuar el sistema con el usuario para conseguir un objetivo específico. A continuación veremos un ejemplo de caso de uso diseñado para un sitio web gestionado íntegramente con un gestor de contenidos: 17 18 Requerimientos de contenido Si el proyecto es el rediseño de un sitio, debemos conocer la naturaleza del contenido existente, qué se quiere usar y qué no, cómo está organizado y su volumen, así como la velocidad de crecimiento del mismo. Y parar conseguirlo lo mejor es hacer un inventario del contenido. Lo mejor es hacer el inventario en un hoja de cálculo o en una base de datos para después poder filtrar en función de lo que nos interese consultar: - Categoría y subcategoría a las que la página pertenece - Título de la página y URL - Tipo de documento - Otros elementos presentes (pdf’s, vídeos, etc.) - Breve descripción del contenido de la página - Autor y persona responsable de la página - Fecha de creación, revisión y expiración de la página (si existe) - Status: mantener, eliminar, revisar, redactándose... - Notas: cualquier dato relevante que se quiera añadir Si el proyecto es construir un nuevo sitio, debemos saber qué contenido queremos incluir en él, de qué disponemos porque ya existe, qué se debe generar de nuevo y quién lo hará, diferentes media disponibles... Una vez disponemos de los requisitos de contenido, podemos empezar a trabajar 2 o 3 muestras de cada tipo de contenido para estudiarlo y ver las relaciones que puedan surgir, las jerarquías que se pueden establecer, los grupos, si conseguimos detectar algún tipo de patrón, qué criterios de búsqueda se pueden usar para localizar el contenido... Es una aproximación de abajo arriba que complementa perfectamente la que se hará en la siguiente etapa de la estructura, donde el objetivo será generar un árbol de contenido. 19 La Estructura - Arquitectura de la información - Diseño de la interacción En esta etapa se trabaja cómo funcionará el producto, de qué manera se articularán los diferentes elementos entre ellos para crear un sitio web consistente y coherente. El desarrollo conceptual de la estructura del sitio se realiza a través de dos disciplinas: la arquitectura de la información (sistemas hipertextuales) y el diseño de la interacción (interfaz de software). Se trata de entender qué pautas de comportamiento tienen los usuarios, cómo piensan y trabajan para así ser capaces de buscar modelos y secuencias para presentar las diferentes opciones a los usuarios con el objetivo de ayudarles a realizar las tareas (diseño de la interacción) o localizar la información (arquitectura de la información) de una manera sencilla y lo más intuitiva posible. El diseño de la interacción trata de anticipar como se comportará el usuario ante la interfaz de software para definir cómo se adaptará y responderá el sistema al comportamiento del usuario. La arquitectura de la información trata de diseñar, organizar, etiquetar y crear sistemas de navegación y búsqueda que ayudan los usuarios a encontrar y gestionar la información de una forma sencilla y intuitiva. Tanto si el proyecto es un sistema hipertextual como si es una interfaz de software, en esta etapa de la estructura se trata de representar visualmente mediante un diagrama los elementos que forman parte del sistema y las relaciones que entre ellos se establecen. Los diagramas de flujos (blueprints) sirven para marcar los flujos o itinerarios posibles del usuario en la aplicación. El objetivo es mostrar de una manera visual y fácilmente entendedora la estructura y el funcionamiento del producto. El diagrama de flujos ideal es una especificación clara y fácil de seguir de las categorías temáticas, los niveles, los enlaces del proyecto, los procesos que se realizan en la aplicación o los servicios que se ofrecen al usuario. Estos diagramas dan forma al contenido porque la gente se haga una idea del funcionamiento real del producto. Es un documento vivo que puede ser modificado a lo largo del proyecto, pero es la única forma de ver rápidamente las partes afectadas por modificaciones en el contenido, la interactividad, la navegación y las funcionalidades. 20 En el caso de un diagrama de flujos de una interfície de software, lo que se representa son la estructura y el comportamiento del sistema interactivo ante las acciones del usuario. En el ejemplo que veremos a continuación se ha diagramado el proceso de instalación de una aplicación al ordenador del usuario. Fuente: http://www.softwaretestinghelp.com/2007/08/ 21 En este otro ejemplo podemos ver un diagrama de las tareas habituales de un usuario en un cliente de correo, y su división en tareas principales y secundarias. Fuente: http://www.slideshare.net/mantruc/taller-de-arquitectura-de-informacion En el caso de un diagrama de flujos de un web se representa la relación existente entre las páginas y otros elementos de contenido, y permite ver cómo se organizará el contenido, cómo se navegará y cómo se etiquetará. A continuación veremos algunos ejemplos de diagramas de flujos de un sitio web: 22 Este diagrama se realizó para el diseño de la primera versión del sitio web de la Porta del Delta: www.portadeldelta.cat Fuente: Artículo “La diagramación en la arquitectura de la programación” (http://www.nosolousabilidad.com/articulos/diagramacion.htm) 23 Existe un vocabulario visual muy empleado por los arquitectos de la información y los diseñadores de la interacción para confeccionar diagramas de flujos de sus aplicaciones y webs. Jesse James Garret es el autor de este vocabulario visual que podéis encontrar en la siguiente dirección de su sitio web traducida al castellano por Javier Velasco: http://www.jjg.net/ia/visvocab/spanish.html. Al final de la pantalla encontraréis librerías para usar en diferentes programas. Los sistemas para diagramar se componen de símbolos geométricos, cajas, flechas y líneas. 24 El Esquema - Diseño de la interfaz - Diseño de la navegación - Diseño de la información En esta etapa el objetivo es concretar la ubicación de los diferentes elementos (botones, imágenes, textos...), organizarlos visualmente, en cada una de las pantallas principales1. Se identifican aspectos específicos de la interfaz, navegación y diseño de la información que permiten concretar la abstracción de la estructura antes de pasar a la etapa definitiva y última del diseño visual. La etapa de la estructura define cómo funciona el sistema, mientras que la etapa del esquema define qué forma tendrá aquella funcionalidad en cada una de las pantallas principales. Pasamos de dibujar el sistema a dibujar pantallas concretas, a mostrar cómo presentaremos la información en estas pantallas y cómo navegaremos a través del sistema (diseño de la navegación) o realizaremos las tareas en la aplicación (diseño de la interfaz). El diseño de la interfaz es la disciplina encargada de conseguir que la interacción del usuario con la aplicación sea lo más intuitiva y eficiente posible para poder lograr sus objetivos. Para conseguirlo, los diseñadores de interfaces han de escoger entre los diferentes elementos (checkbox, desplegable, radiobuttons...) cuál será el que más facilite completar la tarea al usuario, a la vez que el usuario es capaz de entender su significado y funcionamiento. Se denominan pantallas tipos o pantallas principales aquellas pantallas que hacen de “plantilla” o modelo, es decir, son la base para generar nuevas pantallas en que sólo cambiará el contenido. Por ejemplo, la ficha final de un producto: una vez diseñada esta pantalla se generarán muchas (el catálogo entero de productos) en que solamente cambiará la información. 1 25 El diseñador de la interfaz también debe saber transmitir qué elementos son los más importantes cuando el usuario mira por primera vez una interfaz, cuáles están relacionados entre ellos y qué no. Existen unos Principios de diseño de la interfaz de usuario que podéis consultar aquí: http://ca.wikipedia.org/wiki/Principis_de_disseny_de_la_interf%C3%ADcie_d%27 usuari El diseño de la navegación es el encargado: - de conseguir que el usuario pueda acceder a todas las pantallas del lugar de una forma sencilla mediante los elementos necesarios (menús, botones, enlaces...). - de comunicar la relación existente entre los elementos de navegación (grupos, jerarquías...) así como entre los elementos de navegación y la pantalla que el usuario está consultando. 26 El diseño de la información es el encargado de pensar de qué manera se debe presentar la información para que el usuario la pueda entender y usar de manera sencilla y efectiva. Se trata de agrupar y organizar los diferentes elementos informativos con el objetivo de que ayuden los usuarios a realizar sus tareas y conseguir sus objetivos. Los datos o la información se deben presentar de la forma que tenga más significado para el usuario y comunique mejor: en algunos casos será un listado, en otras una gráfica, etc. Tanto si el proyecto es un sistema hipertextual como si es una interfaz de software, en esta etapa se trata de representar visualmente mediante un esquema la distribución de los diferentes elementos en las pantallas principales del sitio. Los wireframes (también denominados maqueta o prototipo) son los diagramas que sirven para visualizar el contenido de las pantallas y la disposición de los elementos en pantalla. Son un esquema visual que muestra el esquema o layout organizativo de la interfaz que será la base para que diseñadores y programadores trabajen cada pantalla principal. En el momento de hacer los esquemas de las pantallas principales es importante recordar que el sistema debe mantener una coherencia interna, así como ajustarse a las convenciones existentes en Internet porque así facilitaremos al usuario la comprensión de nuestro producto. A continuación se muestran algunos ejemplos de wireframes: Wireframe de la home del sitio web de Fundacionteknon 27 Wireframe de la primera home del sitio web de AccióNatura. Si el wireframe tiene mucho detalle empezará a parecerse al look and feel (aspecto visual) definitivo del interfaz, y por este motivo puede ser interesante que el diseñador gráfico lo diseñe algo antes de mostrarlo al cliente con el objetivo de que sirva para aprobar la distribución de elementos en pantalla así como empezar a explorar los gustos del cliente a nivel gráfico. 28 Fuente: http://benmcneil.com/orr.html 29 El siguiente wireframe tiene muy poco detalle y es bastante esquemático para ilustrar que el nivel de detalle depende de lo que se quiera representar en el esquema y de lo avanzada que esté la arquitectura de la información. Fuente: http://wireframes-usability.com/2009/10/05/are-wireframes-outdated/ 30 La Superficie - Diseño visual El diseño visual de la interfaz es la última etapa del proceso de diseño centrado en el usuario y consiste en dar un tratamiento gráfico consistente y atractivo a los diferentes elementos de la interfaz. La gráfica (el “look & feel”) debe tener consistencia interna y externa. Consistencia interna entre las diferentes pantallas del interactivo para que el usuario sepa en todo momento que continúa en el mismo sitio y que todo lo que ha aprendido hasta el momento del sitio es válido. Con respecto a la consistencia externa, el diseño visual añade atractivo y creatividad al esquema visual de la interfaz diseñado en la etapa anterior y concretado en un wireframe. Las diferentes disciplinas y profesionales que trabajan juntos a lo largo de un proceso de diseño centrado en el usuario deben recordar que su trabajo es aportar sus conocimientos y su profesionalidad al proceso, que todo el mundo debe estar alineado con los objetivos y las necesidades de los usuarios definidos en la primera etapa y que se trata de ir articulando todos los elementos de forma que el resultado final sea un producto o servicio consistente con la estrategia planteada y que haya tenido al usuario como punto de referencia en todo momento. Cada una de las etapas debe reforzar la anterior, y el diseño visual no es ninguna excepción. El diseñador gráfico puede darle el tratamiento gráfico que considere e introducir cambios en el wireframe si lo cree necesario, pero el estilo que escoja y la gráfica final de la interfaz deben ser coherentes con el usuario del producto y los objetivos de la empresa. El diseño gráfico debe destacar aquello que se considera importante y debe servir para guiar al usuario a través del producto o servicio, mostrándole las posibilidades existentes y jerarquizando la información para que el usuario pueda reseguir un itinerario comprensible y hacerse una idea del contenido del interactivo. Habitualmente se realizan dos propuestas de interfaz para presentarlas al cliente, y una vez aprobada una, se puede pasar a diseñar las pantallas principales de la aplicación. Este documento, la propuesta gráfica de la inferficie, se denomina maqueta. A veces se presenta únicamente la pantalla principal, y en otras la pantalla principal y alguna interior, en función del proyecto y el cliente. El diseño visual es lo primero que todo el mundo juzga de un producto o servicio porque es lo primero que vemos, y nos causa una impresión positiva, negativa o neutra. Nuestro acercamiento al interactivo está condicionado por el aspecto gráfico del mismo. 31 La Arquitectura de la información “Algunos sitios web proporcionan estructuras lógicas que nos ayudan a encontrar respuestas y completar tareas. Otros no disponen de una organización inteligible y frustran nuestros intentos para navegar a través de ellos. No podemos encontrar el producto que necesitamos; no podemos localizar el informe que encontramos la semana pasada; nos perdemos en el carrito de la compra.” Louis Rosenfeld & Peter Morville (1998) Los padres de la disciplina son Louis Rosenfeld y Peter Morville, que en 1998 publican el conocido libro "Information Architecture for the World Wide Web: Designing Large-Scale Web Sites". La nueva disciplina quedaba definida y un nuevo perfil profesional emergía en el mundo de las Nuevas Tecnologías. Para saber más sobre los orígenes del término, disponéis de un artículo muy exhaustivo en la publicación No Sólo Usabilidad: “Arquitectura de Información: análisis histórico-conceptual” http://www.nosolousabilidad.com/articulos/historia_arquitectura_informacion.ht m El primer capítulo del libro de Louis Rosenfeld y Peter Morville lo tenéis traducido al castellano y disponible gratuitamente en la siguiente dirección: http://iainstitute.org/es/translations/arquitectura_de_la_informacion_para_la_re d_capitulo_1.php Louis Rosenfeld y Peter Morville definen de la siguiente manera la disciplina de la Arquitectura de la Información: 1. Diseño estructural de entornos de información compartida. 2. Combinación de sistemas de organización, rotulado, búsqueda y navegación en sitios web e intranets. 3. Arte y ciencia de dar forma a productos y experiencias de información para apoyar la usabilidad y la buscabilidad. 4. Disciplina y comunidad de práctica emergentes centradas en trasladar los principios del diseño y la arquitectura al territorio digital. Aun cuando los autores mencionados huyen de dar una definición corta y sintética de la disciplina porque quieren demostrar la complejidad de trabajar con el lenguaje y la representación... “La arquitectura de la información es el diseño, organización, etiquetado, navegación y sistemas de búsqueda que ayudan a los usuarios a encontrar y gestionar la información de manera eficaz” Los sitios web con una navegación intuitiva no la tienen por casualidad, al igual que las webs usables tampoco lo son por casualidad o porque sean muy sencillas. 32 Un sitio web es fácil de navegar o es usable porque los profesionales que están detrás han estudiado detenidamente qué esperaba el usuario y han sido capaces de diseñarlo de la manera más transparente y natural para él. El arquitecto de la información es el profesional encargado de llevar a cabo y verificar el proceso de diseño del sitio y que trabaja estrechamente con los diseñadores gráficos y los responsables del backend para definirlo. Está integrado en un equipo y sus tareas abarcan desde la fundamentación del proyecto hasta el rediseño, verificación y testado del producto durante todas las fases de desarrollo hasta la obtención del resultado final. (Fuente: Wikipedia) Diagrama de la Arquitectura de la Información El siguiente diagrama se usa habitualmente para representar las relaciones y dependencias existentes entre los usuarios, el contenido y el contexto. Los Tres Círculos de la Arquitectura de la Información Cada proyecto tiene sus propias características y singularidades. Para crear una arquitectura de la información efectiva necesitamos entender los objetivos empresariales del sitio web y los recursos de los que dispondremos, así como ser conscientes de la naturaleza y volumen del contenido existentes y de la velocidad de su crecimiento; y, por último, debemos conocer las necesidades, expectativas y comportamiento en el momento de buscar de nuestros usuarios. La arquitectura de la información es una parte fundamental del diseño de la experiencia de usuario; sin la creación de una arquitectura de la información que refuerce la estrategia del producto el usuario no podrá encontrar respuestas a sus preguntas en nuestro sistema ni completar la tarea que ha empezado, pues, la organización de la información no es entendedora y el usuario se pierde dentro de la aplicación. 33 La arquitectura de la información proporciona el contexto para el contenido, y nos informa de qué podemos hacer y dónde podemos ir en la aplicación. La pantalla de inicio debe responder a las preguntas con las que el usuario llega al sitio web: - ¿Dónde estoy? ¿Qué puedo encontrar en este sitio? Sé lo que quiero, ¿cómo lo busco en este sitio? ¿Dispongo de otro canal de comunicación con esta empresa? ¿Qué me ofrece esta empresa? ¿Esta empresa tiene algún contenido especialmente interesante? ¿Cómo vuelvo a la pantalla principal? Sé lo que busco porque ya navegué por la web en otra ocasión, ¿cuál es el camino más corto para llegar? 34 Principios de Información Arquitectura de la Siguiendo a Louis Rosenfeld y Peter Morville y su libro “Information Architecture for the World Wide Web: Designing Large-Scale Web Sites”, podemos dividir los componentes de la Arquitectura de la Información en las siguientes categorías: - Sistemas de organización - Sistemas de etiquetage - Sistemas de navegación Sistemas de organización Los arquitectos de la información pueden hacer una aproximación al contenido de arriba abajo o de abajo arriba. Y aproximarse de las dos maneras es la mejor opción para contrastar si la clasificación propuesta funciona. Una aproximación de arriba abajo significa generar las categorías (el árbol de contenido) y después buscar la información que las rellenará. Tenemos claros los objetivos del sitio y las necesidades del usuario y generamos las categorías que las satisfagan. Es una aproximación más rápida y permite empezar a pensar formas de organizar el contenido. Una aproximación de abajo arriba significa trabajar todo el contenido que se quiere incluir en el interactivo y buscar la estructura interna, natural y propia del material. A medida que trabajamos con los materiales se nos irá revelando su estructura interna. Sin embargo, hace falta tener en cuenta que no todas las listas que podamos confeccionar producen categorías naturales. Parte del trabajo del arquitecto de la información es fabricar categorías para aquellos elementos que quedan descolgados. Posibilidades existentes en la organización la información: Esquemas de clasificación Esquemas de clasificación exactos que dividen la información en secciones bien definidas y mutuamente excluyentes: - Alfabético - Cronológico - Geográfico Estos tipos de esquemas son los adecuados cuando los usuarios saben exactamente lo que buscan. 35 Esquemas de clasificación ambiguos que dividen la información en categorías que rehúyen una definición exacta: - Temática (propia de la mayoría de webs e intranets) Por tareas (propia de las aplicaciones) Por pefiles (cuando hay una clara segmentación de la audiencia y transmite personalización del contenido) Metáforas (cada vez se usan menos porque no son escalables y pueden llevar a confusión). Estos tipos de esquemas son los adecuados cuando los usuarios no saben exactamente qué están buscando y lo que hacen es navegar y realizar un aprendizaje asociativo durante el proceso que les permite ir definiendo qué buscan exactamente. Esquemas de clasificación híbridos son los que usan más de un esquema de clasificación a la vez. Es un caso habitual en las webs: una clasificación híbrida por perfiles y temas como la del ejemplo, por temas y tareas con muchas herramientas de internet... 36 Estructuras organitzativas La estructura de la información define de qué manera el usuario puede moverse a través de ella. Las estructuras organizativas aplicadas al contenido pueden ser: - Jerárquica - Hipertextual - Bases de datos - Secuencial Estructura jerárquica Una buena arquitectura de la información suele fundamentarse en una jerarquía o taxonomía bien diseñada, que debe tener en cuenta lo siguiente: - Buscar un buen equilibrio entre profundidad y amplitud: evitar ofrecer al usuario demasiadas opciones en una misma pantalla. - Escalabilidad: plantear categorías lo suficientemente genéricas para incluir nuevos ítems en el futuro. - Las categorías jerárquicas no son mutuamente excluyentes: se debe buscar el equilibrio entre exclusión e inclusión. Fuente: http://www.goodpic.com/mt/archives2/2009/06/post_247.html 37 Estructura hipertextual Este tipo de estructura no puede crear un modelo mental de cómo está organizada la información porque los enlaces hipertextuales son subjetivos y personales, pues la relación que una determinada persona observa entre dos elementos puede no ser evidente para otras personas. Aún cuando no es adecuada para organizar contenidos, es la que se usa en las redes sociales para conectar gente. Fuente: http://www.hipertexto.info/documentos/estructura.htm La ventaja de este tipo de estructura es que es muy flexible y permite la exploración y descubrimiento de cosas inesperadas. Estructura de bases de datos El modelo de base de datos determina de qué manera los datos pueden ser almacenados, organizados y manipulados en un sistema. Una estructura de base de datos permite estructurar y homogeneizar el contenido de webs e intranets que, por definición, es heterogéneo y desestructurado. Para clasificar la información se deberá usar un esquema de metadatos, que no es una tarea sencilla, pero esta estructura permite etiquetar datos que después podrán buscarse, navegar por ellos y recuperarse de muchas formas por parte del usuario. Fuente: http://arantxa.ii.uam.es/~jpenas/Docencia/SI1_20062007/resources/MaterialPracticas.htm 38 Estructura secuencial Esta forma de organizar la información es propia del mundo offline y del ámbito de la narración: una película, un programa de radio, un cuento, etc. Fuente: http://www.goodpic.com/mt/archives2/2009/06/post_247.html Sistemas de Etiquetaje Si los usuarios no entienden el etiquetado que se usa en un sitio web o una aplicación no podrán hallar la información ni realizar las tareas aunque la organización del contenido se hubiera realizado de una manera muy próxima a como los usuarios piensan sobre el tema en cuestión. Una etiqueta es un término que representa un nodo de información (una sección, una página, un documento...). El etiquetado es la terminología o nomenclatura que se usa en un interactivo. El etiquetado que se usa en un sitio web debe hablar el mismo lenguaje que los usuarios del sitio y reflejar el contenido existente. Una técnica que se usa mucho entre los arquitectos de la información para contrastar el árbol de contenidos propio con el generado por los usuarios es el Card Sorting. Esta técnica consiste en utilizar los usuarios potenciales para que organicen el contenido del sitio mediante fichas, agrupándolo y categorizándolo según sus esquemas mentales. Lo que se consigue es que la estructura final sea más próxima a la que el usuario espera encontrar. Para más información sobre cómo llevar a término una sesión de card sorting (en inglés): http://www.usability.gov/methods/design_site/cardsort.html 39 Hay diferentes categorías de etiquetas: Enlaces contextuales Enlaces dentro del texto de una pantalla que apuntan a otro lugar. Estos tipos de etiquetas son muy fáciles de crear y no se desarrollan de manera sistemática porque el autor las genera en el momento que lo necesita y la asociación existente entre el enlace y el recurso enlazado es personal y heterogénea. Este tipo de etiquetes han de explicar el recurso que enlazan mediante el texto y el contexto de la pantalla en que están situadas. Títulos Se usan para explicar el texto que va a continuación y en este caso disponemos de recursos visuales como el tamaño del texto, color, sangrado... para poder establecer el estilo, la relación jerárquica entre títulos o la secuencia de un proceso (en este caso resulta muy útil la utilización de números). Opciones del sistema de navegación Estas etiquetas reclaman una aplicación consistente a lo largo de todo el interactivo y deben ser probadas y desarrolladas de manera sistemática porque cualquier problema de usabilidad o etiquetado se magnifica por su repetida exposición al usuario en todas las pantallas. Indicaciones - Las etiquetas deben ser representativas del contenido y se deben diferenciar claramente unas de otras. - El etiquetado debe estar centrado en el usuario y no en un argot: debe usar un lenguaje unívoco y estandarizado. - El etiquetado debe ser profesional y rico para mantener la confianza del usuario en la organización. - Las etiquetas deben ser cortas y claras. 40 Fuente: http://www.ge.com/ 41 Sistemas de Navegación El sistema de navegación debe informar claramente los usuarios de dónde están y dónde pueden ir. La mayoría de sitios web disponen de más de un sistema de navegación en cada pantalla: - navegación global (menú principal) - navegación local (submenú) - navegación complementaria (mapas del sitio, índice y demos) - navegación contextual (enlaces en el contenido) Fuente: Louis Rosenfeld i Peter Morville El sistema de navegación debe mostrar la estructura de la jerarquía informativa de manera clara y consistente, así como indicar al usuario dónde se encuentra en todo momento. De esta manera el usuario dispondrá de un modelo mental del esquema organizativo del sitio que le facilitará la navegación y le hará sentir cómodo en la toda la “site”. Jennifer Flemming, autora del libro “Web Navigation: Designing the User Experience” comenta en su libro que una navegación que funcione debería: - Ser fácilmente aprendida - Mantenerse consistente a lo largo de todo el interactivo - Dar feedback - Aparecer en contexto (en qué sitio web me encuentro?) - Ofrecer alternativas - Requerir una economía de acción y tiempo - Usar etiquetas claras y entendedoras - Ser adecuada a los objetivos del sitio - Apoyar los objetivos y comportamientos de los usuarios - 42 Guía de Recursos RECURSOS Nombre Diseño de la Experiencia de usuario Stanford Guidelines for Web Credibility Página Javier Velasco URL http://semanticstudios.com/publications/s emantics/000029.php http://credibility.stanford.edu/guidelines/i ndex.html www.mantruc.com Taller de Arquitectura de la Información Instituto para la Arquitectura de la Información http://www.slideshare.net/mantruc/tallerde-arquitectura-de-informacion http://iainstitute.org/es Cadius http://www.cadius.org/ Cómo diseñar útiles y usables webs http://www.usability.gov NSU: Revista electrónica No Sólo Usabilidad What is information architecture? Vocabulario Visual para diagramar La técnica del Card sorting http://www.nosolousabilidad.com/ Dia Diagram Editor http://dia-installer.de/ The Elements of User Experience. UserCentered Design for the Web Information Architecture for the World Wide Web: Designing Large-Scale Web Sites http://www.steptwo.com.au/papers/kmc_ whatisinfoarch http://www.jjg.net/ia/visvocab/spanish.ht ml http://www.usability.gov/methods/design_ site/cardsort.html http://iainstitute.org/es/translations/arqui tectura_de_la_informacion_para_la_red_ca pitulo_1.php Observaciones Artículo de Peter Morville Conocido arquitecto de la información chileno Autor: Javier Velasco Documentación, recursos, herramientas y una comunidad de arquitectos de la información. Comunitat sobre Arquitectura de la Informació i Usabilitat Web del gobierno de los EEUU con gran cantidad de recursos Publicación electrónica Un artículo muy completo de Iain Barker El vocabulario visual de Jesse James Garret Una buena explicación de cómo llevar a cabo una sesión de card sorting Software libre de diagramación Jesse James Garret. Ed. New Riders Publishing, 2003. Louis Rosenfeld & Peter Morville. Ed. O’Reilly, 1998