Define la base para tu proyecto web.

1. Arquitectura de la
Información 01
Define la base para tu proyecto web
Julio de 2013

2. 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.

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

4. 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.

5. 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.

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

7. 02
Experiencia de usuario

8. ¿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.

9. 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... ).

10. 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

11. 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.
Objetivos de su diseño
●
Homogeneización de las iniciativas online.
●
Proyección de una marca única y homogénea.
●
Una experiencia de usuario global satisfactoria.

12. 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.

14. 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.

15. 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.

16. 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.

17. 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.

18. 03
Técnicas de UCD
_ El escenario digital y la construcción de la identidad digital.

20. 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...

21. ●
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...

22. 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.

23. Personas
Creació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.

24. 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

25. Á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.

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

27. Diagramas de flujo y procesos clave
Técnica de categorización de contenidos:
○
r una organización concreta de categorías en etapas de evaluación de usabilidad.

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

29. 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

30. 04
Usabilidad

31. Principios generales de la usabilidad
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.

32. Atributos
¿Consigo realizar la compra
correctamente?
¿Cometo algún error o
todo sale bien a la primera?
Eficacia
Eficiencia
Satisfacción
¿Cuánto tardó
en realizar la compra?
¿Me ha parecido difícil?
¿Repetiré y recomendaré esta web?
¿Me he quedado con buena sensación?

33. Eficacia
Relacionado con el número de errores que comete el usuario en la consecución de una tarea.
Eficiencia
Relacionado 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.

34. 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.

35. 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?

36. 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.

37. 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.

38. 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.

39. 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.

40. 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?

41. 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.

42. 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?

43. 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?

44. 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?

45. 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?

46. 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.

47. 05
Arquitectura de la
información

48. - 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!

49. 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.

50. ●
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

51. 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...).

52. Pilares de la arquitectura de la
información
Organizació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?

53. 06
Perfil técnico
_ Rol del arquitecto de la información

54. "
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

55. ●
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.

56. 01
Definir el objeto, propósito y fines
del sistema de información
o sitio web

57. 02
Definir el público objeto,
tareas y tecnología

58. 03
Realizar análisis competitivos y
comparativos con otros sitios web

59. 04
Realizar el diseño de interacción

60. 05
Realizar el diseño de navegación

61. 06
Etiquetar o rotular los contenidos
para acceder a la información

62. 07
Establecer la planificación, gestión
y desarrollo de contenidos

63. 08
Definir los sistemas
y la interfaz de búsqueda

64. 09
Aplicar criterios de usabilidad

65. 10
Documentar el proceso,
analizar el feedback de resultados
y plantear optimizaciones

66. Conceptos fundamentales
Arquitectura 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.

67. Bibliografía
Jesse Jame Garret – http://blog.jjg.net
Nacho Gil –Fundamentos para el diseño de la experiencia de usuario online.
Steve Krug – No me hagas pensar
Donald A. Norman – El diseño emocional
www.nosolousabilidad.com
Rodrigo Ronda León – Arquitectura de la información: análisis histórico-conceptual.
Astrolabio – Entregables en un proceso de arquitectura de información