Tus usuarios como en tu primera cita, deben saber que les aportas y como conseguir sus objetivos con tan solo viendo tu web por primera vez. La arquitectura de la información es la disciplina que se encarga de crear esquemas de organización y navegación que permitan a los usuarios moverse a través de un sitio web con eficiencia y eficacia.

1. Arquitectura de la información
IxD
2021 - 2022

2. A N T E S D E E M P E Z A R
¿Dónde nos encontramos?

3. A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N

4. A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N

5. De
fi
niendo…
A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N
“Disciplina que se encarga de crear esquemas de organización y
navegación que permitan a los usuarios moverse a través de un sitio
web con e
fi
ciencia y e
fi
cacia”
JESSE JAMES GARRETT (2003)
Contenido
satisfactoria

6. De
fi
niendo…
A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N
UX
Usabilidad
AI
¡ No podría vivir sin mi iPad!
¡ Es muy fácil de usar!
¡Todo lo encuentro donde
esperaba encontrarlo!

7. De
fi
niendo…
A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N

8. De
fi
niendo…
A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N
Tus usuarios al igual una persona en su primera cita, al principio
se fijan en lo que les aportas

9. De
fi
niendo…
A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N
Infoxicación
en 2020 tendremos 35 ZettaBytes
Más de 2000 años
retransmitiendo de tweets
de información
Más de 2100 billones
iPads de 16 Gb
(1100 veces un estadio)

10. Navegación & conteniendo
A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N
Contenido Navegación

11. Contenido

12. Introducción
C O N T E N I D O

13. Títulos
formularios
etiquetas
botones
gráficos
menús
desplegables
enlaces
ayuda
descripción de las imágenes
mensajes de error
…
Introducción
C O N T E N I D O

14. ¿Quién genera el contenido?
En el mundo imaginario o “algunas empresas”
Copywriter
C O N T E N I D O

15. ¡TODOS!
… y el becario
Copywriter
C O N T E N I D O

16. Copywriter
C O N T E N I D O

17. ¿Cómo mejoramos el contenido?
C O N T E N I D O

18. Conoce a los usuarios
BRIEF INICIAL
¿Quién utilizará tu producto?
¿Cual es su problema?¿Por qué?
¿Cuándo?¿Dónde?
…
1
¿Cómo mejoramos el contenido?
C O N T E N I D O
(pej shadowing+entrevistas)

19. Conoce a la competencia
Benchmark
¿Quién utilizará tu producto?
¿Cual es su problema?¿Por qué?
¿Cuándo?¿Dónde?
…
2Conoce a los usuarios
Benchmark
Cualitativo: Buenas y malas prácticas
Cuantitativo:
2
Busca parámetros específicos de
tu producto y compáralo
¿Cómo mejoramos el contenido?
C O N T E N I D O
(pej benchmarking, encuestas…)

20. Identifica tus usuarios
PERSONAS & ESCENARIOS
3
¿Cómo mejoramos el contenido?
C O N T E N I D O

21. El tono
4
¿Cómo mejoramos el contenido?
C O N T E N I D O

22. C O N T E N I D O
Técnicas para mejorar y
validar tu contenido

23. Técnicas - 5 second test
C O N T E N I D O
Medir la efectividad del contenido con un único
objetivo

24. Técnicas - 5 second test
C O N T E N I D O
Se explica al usuario lo que sucederá y la dinámica, se muestra una
imagen durante 5 segundos, se pregunta sobre lo que ha visto.
¿Qué recuerda? Pregunta sobre objetivo ¿Qué has sentido?

25. Técnicas - 5 second test
C O N T E N I D O
1.Piensa que página o elemento quieres evaluar
2.Captura la imagen de la página o elemento
3.Identi
fi
ca tus participantes
4.Escoge el tipo de test según lo que quieras conseguir
5.Prepara las instrucciones y las tareas
6.Realiza el test
7.Analiza los resultados
8.Itera si es necesario

26. Técnicas - 5 second test
C O N T E N I D O

27. https://app.usabilityhub.com/preview/6a6c62feca26
UsabilityHub
Técnicas - 5 second test
C O N T E N I D O

28. Técnicas - First Click Test
C O N T E N I D O
¿Saben las personas dónde hacer clic
cuando llegan a su sitio web?
First Click nos ayuda saber en qué
parte de una interfaz la gente haría
clic primero para completar una
tarea.
Si el primer cick de un usuario “es correcto”, el 87% de los usuarios acabará
realizando su tarea, en vez del 46% si no es correcto.
https://webusability-com.translate.goog/firstclick-usability-testing/?_x_tr_sch=http&_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es

29. Técnicas - First Click Test
C O N T E N I D O
Sabiendo donde pulsaría por primera vez un usuario nos permitirá tomar decisiones sobre nuestra web o app:
- El contenido y los elementos visuales para priorizar para nuestra audiencia.
- Nuestras etiquetas, enlaces y el contenido en la página de entrada de nuestrxs users.
- Donde situar elementos como botones, elementos recurrentes, menú...
Al igual que con todas las pruebas de usabilidad, es mejor asegurarse de que los
participantes provengan de las audiencias objetivo de tu sitio.
• Crea tareas orientadas a resolver tareas: "Está interesado en saber cuánto ...
cuántos ... dónde ..." para fomentar una interacción más natural con el sitio.
• Asegúrate de conocer y haber documentado la ruta correcta para completar cada
tarea. Esto simpli
fi
cará la toma de notas y la transcripción.
• Sigue todos los click.
• Mide el tiempo que tarda el usuario en hacer este clic.
Analiza más que un click…
• Después de cada tarea, evalúa si los participantes sienten que pudieron encontrar la información correcta utilizando
una escala de satisfacción o con
fi
anza.
• A continuación, evalúa la facilidad o di
fi
cultad de completar cada tarea.

30. Técnicas - First Click Test
C O N T E N I D O

31. C O N T E N I D O
Técnicas - First Click Test

32. Test A/B
C O N T E N I D O

33. Test A/B
C O N T E N I D O

34. Test A/B
C O N T E N I D O
ttps://www.optimizely.com

35. Otras técnicas parecidas
C O N T E N I D O
Click test Preference test
Question test

36. Navegación
AI

37. Formas de navegación
N A V E G A C I Ó N
Alfabética

38. Formas de navegación
N A V E G A C I Ó N
Cronográfica

39.
Menús
Formas de navegación
N A V E G A C I Ó N

40.
Navegación contextual
Formas de navegación
N A V E G A C I Ó N

41.
Navegación facetada
Formas de navegación
N A V E G A C I Ó N

42.
Procesos lineales
Formas de navegación
N A V E G A C I Ó N

43.
Pestañas
Formas de navegación
N A V E G A C I Ó N

44. Buscadores
Formas de navegación
N A V E G A C I Ó N

45. Accesos directos
Formas de navegación
N A V E G A C I Ó N

46. Wording
N A V E G A C I Ó N
Como denominamos a las cosas importa, y mucho.
Contacta con
nosotros
Inicio Productos Tiendas
Pantalla principal Mercancías
Buscador de
tiendas
Contacto

47. ¿Cómo mejoramos la navegación?
Conoce el modelo mental de
tus usuarios
1
N A V E G A C I Ó N

48. CardSorting (ordenación de tarjetas)
Técnica que facilita la organización de
contenidos y nos ayuda con la
“encontrabilidad”
¿Qué es?
Su principal finalidad consiste en
agrupar etiquetas que tienen una
etiqueta del contenido y una
funcionalidad
¿Cómo?
¿Cómo mejoramos la navegación?
N A V E G A C I Ó N

49. El usuario puede agrupar las categorías
libremente en el número de conjuntos
que crea necesario y les pone un
nombre.
Abierto
Nuevos proyectos con muchas etiquetas
a organizar, de esta forma aprendemos a
categorizar el contenido
Cardsorting - Abierto
N A V E G A C I Ó N

50. Los grupos o conjuntos están
predefinidos y etiquetados y el usuario
únicamente deberá colocar cada
categoría en el grupo que crea
corresponda.
Cerrado
Verificar si una clasificación de
información es familiar y comprensible
para el usuario
Cardsorting - Cerrado
N A V E G A C I Ó N

51. De forma individual los usuarios organizan el contenido
dependiendo del cardsorting cerrado o abierto
Individual
Un grupo de usuarios ordena las tarjetas
consensuando cada agrupación
Colectivo
Cardsorting
N A V E G A C I Ó N

52. 1.- Piensa tipo de cardsorting
antes
2.- Recluta y cita a tus participantes
(mínimo 15 usuarios, “no más de 50”)
3.- Identifica y rotula las diferentes
etiquetas
(entre 30 a 50)
Cardsorting - Preparación
N A V E G A C I Ó N

53. durante
5.- Comunica que van hacer a los usuarios
6.- Deja claro que no les estas evaluando, ellos te
evalúan a ti y hay diferentes resultados posibles
7.- Reparte las tarjetas para que empiecen a
clasificarlas
8.- No des pistas y dedícate a observar que hacen y por
que lo hacen
Cardsorting - Preparación
N A V E G A C I Ó N

54. Cardsorting
N A V E G A C I Ó N
• Quienes somos
• Vuelos
• Escapadas de fin de semana
• Hoteles
• Mis reservas
• Coches
• Contacto
• Atención al cliente
• Viajes de aventura
• Regístrate
• Ofertas del mes
• Trabaja con nosotros
• ¿Tienes alguna duda?
• Teléfono de reservas
• Apartamentos
• Ocio

55. Cardsorting
N A V E G A C I Ó N
5’
Analizad y agrupar las diferentes categorías
(Individualmente)

56. 9.- Deja que se expliquen
11.- Identifica los puntos débiles
10.- Busca los patrones de los diferentes
1. Tarjetas que no se entienden
2. Tarjetas que pueden permanecer a diferentes grupos
3. Rutas alternativas para llegar a un mismo sitio
4. Detecta las tarjetas “superficiales”
ThinkingAloud
Cardsorting - Resultados cualitativos
N A V E G A C I Ó N

57. Cardsorting
N A V E G A C I Ó N
10’
Analizad el resultado de cada persona y intentad
hacer una agrupación final.
(Grupo)

58. Tabla de co-ocurrencias
Cardsorting - Resultados cuanti
fi
cativos
N A V E G A C I Ó N

59. Dendograma
Cardsorting - Resultados cuanti
fi
cativos
N A V E G A C I Ó N

60. Escalamiento multidimensional
Cardsorting - Resultados cuanti
fi
cativos
N A V E G A C I Ó N

61. 1. Simple
2. Barata
3. Rápida
4. Estándar
5. Los usuarios se sienten
involucrados
6. Base para organizar tu contenido
1. No se tiene en cuenta las casos de uso
2. Resultados muy amplios
3. Análisis puede durar tiempo
4. Tarjetas “superficie”
Cardsorting - Ventajas & Desventajas
N A V E G A C I Ó N

62. TreeTest
Una especie de evolución del Cart sorting pero para un
árbol de contenido. Antes de crear un sitio entero pruebo
con usuarios si se entiende y la gente es capaz de
desarrollar con eficacia.
Demo Treetest
¿Cómo veri
fi
camos?
N A V E G A C I Ó N

63. Resultados de las tareas Análisis de navegación
TreeTest Results
N A V E G A C I Ó N
Test Ejemplo: https://bananacom.optimalworkshop.com/treejack/bananacom-demo-survey
Resultados: https://app.optimalworkshop.com/treejack/bananacom/bananacom-demo-results/shared-results#/t/analysisTools/taskResults