Arquitectura de la Información 01

Define la base para tu proyecto web

Julio de 2013

Dinámica / índice

1. El punto de partida / UCD.○ Diseño centrado en el usuario

2. Experiencia de usuario

3. Técnicas de UCD○ El escenario digital y la construcción de la identidad digital.

4. Usabilidad○ Principios generales

5. Arquitectura de la información

6. Perfil técnico: rol del arquitecto de la información

ACTIVIDADES

Proceso de diseño de la arquitectura de información.

01El punto de partida / UCD_ Diseño centrado en el usuario / User centered design.

Diseño centrado en el usuario UCD● Es una filosofía de diseño que pretende crear:

○ Experiencias, más allá de los productos y servicios.○ Un ambiente que conecte, a nivel emocional, con el usuario.

● Se basa en las necesidades e intereses del usuario, haciendo énfasis en la usabilidad y comprensión del producto:

○ Habilidades y necesidades del usuario.○ Contexto de uso.○ Tareas que va a realizar.

Objetivos UCD● El objetivo es diseñar un sitio web donde los usuarios puedan servirse de él, con un mínimo de

estrés (infoxicación) y un máximo de eficiencia. Las implicaciones de un concepto tan simple, sin embargo, son sorprendentemente complejas.

● Enfoque desde el inicio, recogiendo datos de manera estructurada, sistemática y objetiva:○ hacia los usuarios internos y externos,○ las tareas que realizarán con el producto.

● Cada etapa del proceso de diseño y desarrollo del proyecto web debiera considerar al usuario final:

○ a través de actividades que lo involucren.○ técnicas que permitan tener una clara percepción de sus necesidades y preferencias.

" Diseñar con el usuario final permanentemente en el centro de la atención.

02Experiencia de usuario

¿Qué es la experiencia de usuario?● La sensación, sentimientos y satisfacción del usuario, respecto a un producto o servicio,

resultado de interactuar con el producto y su proveedor: la marca.

● Las personas, como clientes, consumidores y usuarios, tenemos experiencias con las marcas, sus productos y servicios.

● Jesse James Garret (The Elements of User Experience) presenta la idea de manejar planos para administrar el proceso de desarrollo de la experiencia de usuario en un sitio web, tomando en cuenta cada situación a la que un usuario se podría enfrentar y también las acciones que un usuario podría o no realizar.

La superficie. Una serie de páginas con imágenes, texto y otros elementos interactivos, algunos de los cuales pueden interactuar con el usuario.

El esqueleto. Cómo están colocados los botones, pestañas, fotos y texto.

La estructura. El esqueleto es una versión más concreta de un elemento más abstracto. La estructura define los flujos de navegación del usuario dentro del sitio, qué página verá el usuario primero y cuáles serán sus siguientes opciones hasta llegar al final del proceso de navegación.

El alcance. Todas esas características y funciones constituyen el alcance del sitio. Al construir un sitio la pregunta de si una característica debería ser incluida o no debe responderse en este plano.

La estrategia. El alcance está determinado por la estrategia del sitio, la misma que debe incorporar los objetivos de los propietarios del site, sino también lo que obtendrán los usuarios, los visitantes. Los objetivos de la estrategia deben ser articulados en términos de cuál es la ganancia para cada persona (negocio, diseño, desarrollo, usuario... ).

Es fácil ver estas capas desde dos puntos de vista complementarios: como una interface de software o como un sistema de información.

En la ejecución los planos se afectan los unos a otros y lo más recomendado es no ejecutarlos por separado

Resumiendo...● La experiencia de usuario es el conjunto de percepciones y sensaciones que desarrolla un

usuario durante su relación e interacción con los elementos de tu identidad digital, y en concreto con tu sitio web.

● Homogeneización de las iniciativas online.

● Proyección de una marca única y homogénea.

● Una experiencia de usuario global satisfactoria.

Objetivos de su diseño

Nuestro espacio web● Es el reflejo de nuestra marca en internet, nuestro principal escaparate.

● La experiencia de usuario online empieza con la percepción de la marca y todo cuanto haya en un sitio web forma parte de la experiencia de usuario.

Concepto global que depende de numerosos factores.

● Utilidad y valor del producto o servicio.

● Contenidos y servicios ofrecidos.

● Transmisión de valores de la marca.

● Respuesta a las necesidades y expectativas de los usuarios.

● Creatividad / Diseño visual.

● Usabilidad / Arquitectura de la información consistente / Navegación eficiente.

● Facilidad de aprendizaje y recuerdo.

Los elementos de la experiencia de usuario.La usabilidad o "facilidad de uso" es una de las facetas fundamentales que forma parte de la UX (user experience). Y existen diversas disciplinas que interactúan conformando la usabilidad.

Hemos hablado de la perspectiva de Jesse James Garret:

● Objetivos del sitio / Necesidades del usuario● Requerimientos de contenido / Especificaciones funcionales● Arquitectura de la información / Diseño de interacción● Diseño de interfaz: navegación e información● Diseño visual. Look & feel, diseño emocional, tratamiento gráfico de los elementos de la interfaz.

La rueda de la experiencia del usuario, según Francisco Tosete Herranz.

Con las siguientes disciplinas vinculadas:

● Usabilidad

● Accesibilidad

● Diseño de información y diseño gráfico

● Buscabilidad (findabiliby)

● Arquitectura de la información

● Diseño de interacción.

Las facetas de la experiencia de usuario, según Peter Morville, el autor de "Information architecture".

● Utilidad. Sistemas útiles aplicando el conocimiento del medio.

● Deseabilidad. A través del valor de la imagen, de la identidad, de la marca.

● Valor. Ofrecer valor para el usuario.

● Credibilidad. Generar confianza.

● Encontrabilidad. Capacidad de un objeto de ser localizado:buscadores/SEO + mecanismos internos.

● Usabilidad.

La facilidad de uso es fundamental, pero es una faceta más.

● Accesibilidad. Acceso universal a la web.

03Técnicas de UCD_ El escenario digital y la construcción de la identidad digital.

1 / Técnicas de indagación y captación de insights

● Toma de requisitos

● Recogida de información subjetiva

● Preguntar y observar a los usuarios○ Experiencias○ Expectativas○ Necesidades○ Frustraciones○ Grado de satisfacción○ Contexto de uso, etc...

● A través de las siguientes técnicas:

○ Encuestas: online, rápidas y asequibles, según proyecto.

○ Entrevistas: stakeholders, usuarios, entender procesos internos, etc...

○ Focus group (grupos de discusión): reacciones producto, servicio, concepto, publicidad, idea...

○ Web 2.0 y redes sociales: Investigación de tendencias, mercado, consumidor, etc...

2 / Arquitectura de la información y diseño de interacción

● Personas

● Card sorting (ordenación de tarjetas)

● Árboles de contenidos

● Diagramas de flujo y procesos clave

● Wireframes (prototipado), navegables, baja-alta fidelidad.

PersonasCreación de los personajes y el contexto de uso. Los personajes son arquetipos de usuarios que representan los distintos patrones de comportamiento, actitudes, metas y motivaciones:

○ Con sus datos personales○ Gustos○ Experiencia en internet○ Motivaciones Ej. Quiere amueblar su casa poco a poco.○ Escenarios Ej. Busca en distintas tiendas y compara precios, estilo y calidad.○ Comportamientos Ej. Va apuntando las características, medidas y precios en un cuaderno.

Card sorting (ordenación de tarjetas)

Técnica de categorización de contenidos:○ Card sorting abierto: el usuario puede agrupar las categorías libremente en el número de conjuntos que crea necesario.

Tiene el objetivo de descubrir qué tipo de clasificación sería más correcto utilizar.

○ Card sorting cerrado: el usuario deberá colocar cada categoría en el grupo que crea corresponda. Está recomendado para verificar si una clasificación es familiar y comprensible para el usuario.

La técnica es útil para una categorización de contenidos centrada en el usuario, que proporciona una doble herramienta: como ayuda para la toma de decisiones en la etapa de diseño conceptual, y para evaluar una organización concreta de categorías en etapas de evaluación de usabilidad.

La prueba se llevará a cabo con al menos 5 participantes (de nuestro PO), en unos 20'. Se les indica que deberán agrupar por similaridad. Se les entrega las tarjetas con las categorías desordenadas. En el caso de card sorting abierto, se les puede pedir que den nombre a cada uno de los grupos creados. Existen aplicaciones para llevar a cabo la prueba de forma virtual: WebSort

Árboles de contenidos / AI

Elementos de navegación: nuestro público objetivo ya tiene cierta experiencia navegando por sitios web y espera encontrar elementos familiares que faciliten la navegación.

Diagramas de flujo / diseño de interacciones (procesos clave)

Diagramas de flujo y procesos claveTécnica de categorización de contenidos:

○ r una organización concreta de categorías en etapas de evaluación de usabilidad.

Wireframes (prototipado), navegables, baja-alta fidelidad

3 / Medición y evaluación de la experiencia de usuario y usabilidad

● Inspección heurística por experto.

● Test de usuario.

● Eye tracking.

● Análisis de clicks (clicktale, clickheat...)

● Predicción de atención visual (attentionwizard.com)

● Testeos de reconocimiento y recuerdo (5 second test)○ fivesecondtest○ usabilla

04Usabilidad

La clave de un sitio usable es, que quien navega por él consiga:- Entender su estructura.- Realizar con satisfacción aquello que pretendía realizar.

La usabilidad se basa en no molestar ni hacer pensar en exceso al navegante (Krug, 2001) y en hacerle fácil y grata la experiencia en el sitio web.

Definición informal: Usabilidad se define como facilidad de uso, ya sea de una página web, una aplicación informática o cualquier otro sistema que interactúe con un usuario.

Formal (ISO/IEC): Usabilidad es la efectividad, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico.

Principios generales de la usabilidad

Atributos

Eficacia Eficiencia

Satisfacción

¿Consigo realizar la compra correctamente? ¿Cometo algún error o todo sale bien a la primera?

¿Cuánto tardó en realizar la compra?

¿Me ha parecido difícil? ¿Repetiré y recomendaré esta web?¿Me he quedado con buena sensación?

EficaciaRelacionado con el número de errores que comete el usuario en la consecución de una tarea.

EficienciaRelacionado con el tiempo empleado por el usuario para la consecución de la tarea.

Satisfacción de uso● Percepción del usuario respecto a la dificultad de acometer la tarea. ● Relacionado con que el sitio web sea subjetivamente agradable. ● Por satisfacción se entiende la ausencia de incomodidad y la actitud positiva en el uso del

producto.

Los principios heurísticos de la usabilidad

heurístico, ca.(Del gr. εὑρίσκειν, hallar, inventar, y ‒́tico).1. adj. Perteneciente o relativo a la heurística.2. f. Técnica de la indagación y del descubrimiento.3. f. Busca o investigación de documentos o fuentes históricas.4. f. En algunas ciencias, manera de buscar la solución de un problema mediante métodos no rigurosos, como por tanteo, reglas empíricas, etc.

01¿Se comunica de manera inmediata y clara el propósito, objetivo y funciones de la página?

● ¿El propósito u objetivo del sitio web es claro y obvio? ¿Con un simple vistazo sabemos para qué sirve?

● ¿Se muestra de forma clara qué contenidos y servicios, funcionalidades y acciones ofrece el sitio?

02¿Se ofrecen al usuario mecanismos y referencias

claras que le permitan orientarse fácilmente (dónde están y qué están haciendo)?

¿Se mantienen informados a los usuarios acerca de lo que está ocurriendo?

● Títulos: páginas, secciones...● Ubicación de la página dentro de la estructura de información● Rutas de navegación / migas.● Proceso: número de pasos y pasos restantes.● Vínculos claramente identificables.● Feedback: realizado con éxito o no.

03¿La página se adecua a los objetos mentales del

usuario, su lógica de la información, su terminología y lenguaje?

¿La información se muestra en un orden lógico y natural?

● Estructura y presentación de la información comprensible vs interna de la organización.● Metáforas e iconos.● Nivel de conocimientos expuesto en la página vs usuario.● Palabras, frases y conceptos familiares. No utiliza jergas ni tecnicismos.● Lenguaje claro y sencillo, una idea por párrafo.● La disposición de la información es asequible y de lectura rápida.● Información estructurada con títulos, negritas y viñetas.

04¿El sitio web permite al usuario interactuar

de una manera fácil y productiva?

● Ver y seleccionar mejor que recordar y escribir.● ¿Toda la información necesaria para la interacción se encuentra en la página? (La página no

requiere recordar información de páginas previas para interactuar con ella.)● ¿Es fácil reencontrar información previamente encontrada?● Iconos que refuercen textos/contenidos.● Información previamente seleccionada para evitar la petición de información de nuevo.

05¿Tiene el usuario control y libertad sobre la interfaz?

¿Se han evitado las acciones intrusivas que lo limiten?

● Evitar el inicio automático de iniciar acciones no ordenadas explícitamente por el usuario.● Animaciones no controladas por el usuario.● Salida de la página, del proceso o de la estructura de información: desconectar, cancelar,

inicio...● Vínculo que permite volver a la página de inicio.● En caso de ser un proceso de varios pasos: posibilidad de volver al paso/s anteriores.

06¿Se mantiene la consistencia en las diferentes

páginas/secciones, etc. del sitio?¿Se siguen los estándares "de facto“: la estructuración

páginas, buscador, logo, etc.?

● ¿Las etiquetas de los vínculos tienen los mismos nombres que los títulos de las páginas a las que se dirigen?

● ¿Las mismas acciones llevan a los mismos resultados?● ¿La misma información (texto) se expresa de la misma forma en toda la página?● ¿La información está organizada y es mostrada de manera similar en cada página?● ¿Las áreas de navegación, herramientas de búsqueda, controles... siguen los estándares

comunes de mercado?

07¿El sitio web trata de prevenir posibles errores?

● ¿Se mantiene informado al usuario de lo que ocurre en el sitio/aplicación? Por ejemplo, si el usuario tiene que esperar hasta que se termine una operación, la página debe mostrar un mensaje indicándole lo que está ocurriendo y qué debe esperar.

● ¿Se dan ejemplos o proporciona ayuda sobre cómo introducir información en campos problemáticos?

● Priorizar la selección de información en campos donde podrían darse errores de escritura.

08¿La interfaz facilita y optimiza el acceso y la interacción de los usuarios con el sistema?

Flexibilidad y eficiencia de uso

● ¿La página no requiere volver a escribir la información ya solicitada en páginas anteriores?● ¿Es posible repetir una acción ya realizada anteriormente de manera sencilla?● ¿Cuando es pertinente la página permite al usuario personalizar acciones frecuentes?● ¿Se utilizan mecanismos eficientes de relleno/validación de campos de formulario?

09¿El sitio ofrece información y un diseño minimalista?

¿Se ha evitado el uso de elementos irrelevantes?

● ¿El texto es fácil de ojear, está bien organizado y las frases no son demasiado largas?● ¿Las fuentes son legibles y tienen un tamaño suficiente?● ¿Las fuentes usan colores con suficiente contraste con el fondo?● ¿La información es corta, concisa y precisa?● ¿Cada elemento de información se distingue del resto y no se confunde con otros?

10¿Los mensajes de error ayudan a los usuarios a reconocer, diagnosticar y solucionar errores?

● ¿Los mensajes de error informan de manera comprensible y no alarmista, están escritos en lenguaje común y no con códigos o lenguaje técnico?

● ¿Los mensajes de error dan soluciones o sugerencias para solucionar el presente error?● ¿Informan de la causa del error de manera que se pueda evitar su repetición en el futuro?● ¿La situación de error permite, de una forma evidente, volver a la situación anterior al error?

11¿En caso de que sea necesario, se ofrece una sección de ayuda y documentación orientada a la resolución de

problemas del usuario?

● ¿La sección de ayuda es visible y fácil de encontrar?● ¿Se ofrece ayuda contextual en tareas complejas?● ¿La documentación de ayuda está orientada a los objetivos y necesidades del usuario

(generalmente a la resolución de problemas)?● ¿La documentación de ayuda utiliza ejemplos y explicaciones cortas?● ¿La página dispone de un apartado de preguntas frecuentes?

Nuestro espacio web● Es el reflejo de nuestra marca en internet, nuestro principal escaparate.

● La experiencia de usuario online empieza con la percepción de la marca y todo cuanto haya en un sitio web forma parte de la experiencia de usuario.

05Arquitectura de la información

- Sociedad sobresaturada de información. - Buscamos el acceso rápido a la información. - Necesitamos tomar decisiones y gestionar conocimiento día a día.

¡Infoxicación!

Algunas definiciones● La arquitectura de información hace fácil lo complicado.

● “Es la disciplina que se encarga de estudiar, organizar y rotular sitios web usables, accesibles y encontrables”.

● El diseño estructural de un espacio de información que facilite la finalización de tareas y el acceso intuitivo a los contenidos.

● La ciencia de estructurar y clasificar los contenidos de sitios web para ayudar a las personas a encontrar y gestionar la información.

● Análisis y planificación de:○ Clasificación de contenidos○ Rotulado○ Sistemas de navegación

● Ayudar a las personas a encontrar y gestionar la información.

● Beneficios:

○ Información más rápida de encontrar○ Interfaz gráfica más cómoda al usar○ Lenguaje común más sencillo de entender○ Contenidos más fáciles de acceder○ Sitios web más factibles de escalar

La usabilidad de los sitios en Internet está determinada porque los contenidos y los servicios que brindan sean de fácil comprensión y acceso por parte de los usuarios.

La arquitectura de la información se encuentra íntimamente ligada con la usabilidad, ya que determina la forma en la cual se estructuran los contenidos.

Una buena arquitectura hace que el usuario tenga una experiencia de navegación satisfactoria.

Diseñar y construir los elementos que harán útil el espacio digital:● Separando distintos ambientes.● Distribuyendo por habitaciones y plantas.● Colocando ventanas y puertas que comuniquen los distintos espacios (sistemas de navegación,

mapas web, motores de búsqueda...).

Pilares de la arquitectura de la informaciónOrganización:

- ¿Cómo se representará la información?- ¿Alfabéticamente, por tiempo, por temas...?

Navegación:- ¿Cómo encontrarán los visitantes lo que buscan?- ¿Cómo navegarán por el sitio?- ¿Cómo sabrán dónde están?

Presentación:- ¿Cómo se presentará la información?- ¿Con palabras, con gráficos, ilustraciones, fotografías, vídeo, una combinación de todos?

Cambio:- ¿Cómo se comportarán los distintos elementos del sitio web a lo largo del tiempo?- ¿Aguantará la estructura el crecimiento del sitio?- ¿Funcionará de la misma forma la navegación cuando se añada o se borre contenido?

06Perfil técnico_ Rol del arquitecto de la información

" Su misión es organizar grandes cantidades de información para que el usuario pueda manejarlos, navegar por ellos fácilmente y satisfacer sus necesidades de información.

Yussef Hassan Montero y Ana Nuñez Peña

● Participa en la determinación de contenidos y funciones del sitio.

● Planifica las formas a través de las que los usuarios encontrarán la información.

● Trabaja en aspectos relativos a:○ La organización de contenidos.○ El diseño de sistemas de navegación inteligentes.○ El diseño de sistemas de etiquetas.

● Planifica cómo el sitio se adecuará a los cambios que puedan sucederse en el futuro y a su crecimiento natural.

En relación al usuario:Debe ser capaz de ponerse en el lugar del usuario y ser sensible a sus necesidades.

En relación a la organización:Debe entender las necesidades comerciales y los objetivos del cliente.Debe conocer a qué tipo de audiencias apunta y la forma de trabajo interna de la organización.

01Definir el objeto, propósito y fines

del sistema de información o sitio web

02Definir el público objeto,

tareas y tecnología

03Realizar análisis competitivos y

comparativos con otros sitios web

04Realizar el diseño de interacción

05Realizar el diseño de navegación

06Etiquetar o rotular los contenidos

para acceder a la información

07Establecer la planificación, gestión

y desarrollo de contenidos

08Definir los sistemas

y la interfaz de búsqueda

09Aplicar criterios de usabilidad

10Documentar el proceso,

analizar el feedback de resultados y plantear optimizaciones

Conceptos fundamentalesArquitectura de la información:Análisis y planificación de la clasificación de contenidos, el rotulado y los sistemas de navegación para ayudar a las personas a encontrar y gestionar la información.

Diseño de interacción:Desarrollo del flujo de las aplicaciones, de la interactividad, para facilitar las tareas del usuario, definiendo cómo el usuario interactúa con la funcionalidad del sitio. Ej. proceso de compras.

Diseño de la navegación: Diseño de elementos de interfaz para facilitar el movimiento de los usuarios a través de la arquitectura de la información. Ej. menús de navegación.

Diseño de información: Diseño de la presentación de la información para facilitar el entendimiento. Ej. áreas de las páginas (cajas), encabezados, jerarquización de la información.

BibliografíaJesse Jame Garret – http://blog.jjg.netNacho Gil –Fundamentos para el diseño de la experiencia de usuario online.Steve Krug – No me hagas pensarDonald A. Norman – El diseño emocionalwww.nosolousabilidad.comRodrigo Ronda León – Arquitectura de la información: análisis histórico-conceptual.Astrolabio – Entregables en un proceso de arquitectura de información