1 of 110

ARQUITECTURA DE INFORMACIÓN

DISEÑO UX/UI

2 of 110

POV: El objetivo de esta etapa es desarrollar un una declaración significativa y sintética del problema, un punto de vista.

MVP: aquel producto mínimo viable que te permita validar por lo menos una parte de tu negocio. Este será el primer prototipo que llevarás al mercado para encontrar las primeras reacciones de tus clientes.

GLOSARIO:

Definir: segunda etapa de la metodología Design Thinking o Pensamiento de Diseño. En esta etapa el objetivo es Enmarcar el problema adecuado es la única manera de crear la solución correcta.

Storyboard & Storytelling: herramienta gráfica y de texto respectivamente que nos ayudarán a clarificar el POV o declaración significativa de nuestro proyecto.

3 of 110

  • Profundizar sobre los conceptos de la Arquitectura de Información.
  • Validar el diseño de la arquitectura mediante la técnica del Card Sorting.
  • Introducirnos en Whimsical y Optimal Workshop para la realización de la arquitectura y el cardsorting.

OBJETIVOS DE LA CLASE

4 of 110

MAPA DE CONCEPTOS

Empatizar

Definir

Idear

Prototipar

Evaluar

Arquitectura de Información

Cardsorting

Design Thinking

Diseño Centrado en el Usuario

Pensamiento de Diseño

Design Sprint

MVP

Analizar

Diseñar

Validar

5 of 110

¿ARRANCAMOS?

6 of 110

ARQUITECTURA DE LA INFORMACIÓN

7 of 110

Es la disciplina que consiste en organizar, jerarquizar y rotular el contenido de una interfaz.

8 of 110

“Es el estudio de la organización de la información con el objetivo de permitir al usuario encontrar su vía de navegación hacia el conocimiento y la comprensión de la información”

Richard S. Wurman, 1975

9 of 110

Diseño de interfaz

Organización de la información

Usuarios Contenido Contexto

UX

10 of 110

Tiene como objetivo facilitar al máximo los procesos de comprensión y asimilación de la información, así como de las tareas que ejecutan los usuarios.

¿PARA QUÉ SIRVE?

11 of 110

  • Estudiar y analizar el panorama completo de nuestro userflow (diagrama de usuarios).�Disponer, organizar y estructurar la información mediante interacciones y/o microinteracciones.
  • Seleccionar y presentar los datos en los sistemas interactivos y no interactivos (es decir, cuando el usuario tiene una respuesta y su feedback) así como también cuando se presentan consideraciones de su contexto.

¿QUÉ NOS PERMITE?

12 of 110

AGRUPAR

JERARQUIZAR

ROTULAR

Qué contenidos están relacionados entre sí

Cuáles contenidos están subordinados

Cómo se nombran los grupos de contenidos

13 of 110

Ejemplo de un producto de la AI: Mapa del sitio

14 of 110

¿POR QUÉ ES TAN IMPORTANTE?

15 of 110

LA ARQUITECTURA DE INFORMACIÓN ES LA DISCIPLINA CON MAYOR IMPACTO EN LA USABILIDAD DE UNA INTERFAZ

16 of 110

Describe los principales problemas de usabilidad que encontró en más de 2000 estudios de usabilidad.

Detectó las 10 principales categorías en las que clasificó los problemas.

Jakob Nielsen

17 of 110

MÉTODOS DE USER RESEARCH

  1. Análisis de comparables
  2. Arquitectura de Información
  3. Construcción de Personas
  4. Estudio de contexto
  5. Entrevistas cualitativas
  6. Card Sorting
  7. Prototipado iterativo
  8. Evaluación heurística
  9. Pruebas A/B
  10. Pruebas de usabilidad

18 of 110

LOS CONCEPTOS FUNDAMENTALES DE AI

Información

Es la materia prima de trabajo para un arquitecto de información.

Estructuración, organización, navegación y rotulado

Implica dar forma a esa información, procurando que sea fácil de encontrar.

19 of 110

LOS CONCEPTOS FUNDAMENTALES DE AI

Encontrabilidad

Es uno de los grandes problemas que resuelve la AI.

Gestión

La AI permite gestionar los contenidos de una interfaz.

Creatividad

Es lo que requiere el trabajo de un arquitecto de información.

20 of 110

CATEGORÍAS DE PROBLEMAS

  1. Búsqueda de información
  2. Arquitectura de información
  3. Legibilidad de los textos
  4. Contenido insuficiente o poco claro
  5. Información sobre los productos
  6. Nombre utilizado en las categorías
  7. Disposición de los elementos en la interfaz
  8. Flujo de navegación
  9. Formato de los links
  10. Privacidad y seguridad

75% de los problemas

21 of 110

75%

de los problemas de usabilidad están relacionados a mal diseño de Arquitectura de Información

22 of 110

¿CÓMO PUEDO GENERAR MI ARQUITECTURA CON INFORMACIÓN VALIDADA?

23 of 110

CARD SORTING

24 of 110

¿POR DÓNDE EMPIEZO A DISEÑAR ARQUITECTURA DE INFORMACIÓN?

25 of 110

¿QUIÉN DECIDE CÓMO SE ORGANIZAN Y ESTRUCTURAN LOS CONTENIDOS?

26 of 110

¿NOS REUNIMOS DURANTE HORAS?

¿LO DISCUTIMOS ENTRE NOSOTROS?

27 of 110

ORDENAR LOS SIGUIENTES ÍTEMS

Zanahoria

Naranja

Pimentón

Fresa

Lechuga

Sandía

Brócoli

Manzana Verde

28 of 110

UN ORDENAMIENTO POSIBLE

Zanahoria

Naranja

Pimentón

Fresa

Lechuga

Sandía

Brócoli

Manzana verde

FRUTAS

VERDURAS

29 of 110

OTRO ORDENAMIENTO POSIBLE

VERDE

NARANJA

Sandía

Naranja

Brócoli

Zanahoria

Lechuga

Manzana verde

Pimentón

Fresa

ROJO

30 of 110

El orden ideal de la información

no es el que más nos convence a nosotros.

Es aquel que responde al modelo mental de los usuarios, es decir, a cómo los usuarios esperan encontrar ordenada la información.

31 of 110

POR ENDE, EL USUARIO DEBE SER PARTE DEL PROCESO DE DISEÑO.

32 of 110

¿CÓMO RESCATAMOS EL MODELO MENTAL DE LOS USUARIOS?

REALIZANDO UN CARD SORTING.

33 of 110

CARD SORTING

Es una técnica que se basa en observar cómo los usuarios agrupan y asocian entre sí un número de tarjetas etiquetadas con las diferentes categorías/secciones de un producto o servicio digital.

Nos permite conocer el modelo mental de nuestros usuarios para organizar esta información y aplicar dicho modelo a nuestro producto. Es decir, incluye a los usuarios en el proceso de construcción de la AI, asegurando una UX más natural para ellos.

34 of 110

Técnica de ordenamiento de tarjetas

35 of 110

VENTAJAS

  • Simple
  • Económico
  • Rápido
  • Comprobado
  • Involucra a los usuarios
  • Fiable

36 of 110

DESVENTAJAS

  • No considera las tareas
  • Resultados variables
  • Análisis de datos lento
  • Puede captar características superficiales

37 of 110

¿CUÁL ES EL OBJETIVO?

38 of 110

NOS AYUDA A RESPONDER 3 PREGUNTAS

Agrupación

Qué contenidos están relacionados entre sí

Jerarquización

Cuáles contenidos están subordinados

Rotulado

Cómo se nombran los distintos grupos de contenidos

39 of 110

TIPOS DE CARD SORTING

40 of 110

Card Sorting Abierto

41 of 110

CARD SORTING ABIERTO

El usuario puede agrupar las categorías libremente en el número de conjuntos que crea necesario.

Tiene el objetivo de verificar si una clasificación de información es familiar y comprensible.

42 of 110

Card Sorting Cerrado

43 of 110

CARD SORTING CERRADO

Los grupos están predefinidos y el usuario deberá colocar cada categoría en el grupo que crea corresponda.

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

44 of 110

INDIVIDUAL

GRUPAL

Consta de hacer la práctica de forma individual.

Ideal para hacer foco en el usuario

Se realiza en grupo.

Sirve para escuchar la conversaciones entre los usuarios

45 of 110

CUALITATIVO

CUANTITATIVO

Observar a cada usuario y registrar los aspectos relativos a cómo cada usuario organiza las tarjetas.

El procesamiento estadístico de los datos. Es ideal para pruebas de muchos participantes.

46 of 110

PRESENCIAL

REMOTO

Se visualiza el valor del proceso y de los problemas que haya podido ir

encontrando el usuario.

Nos sirve cuando necesitamos hacer una prueba en alguna locación a la que no podemos acceder.

47 of 110

¿QUÉ NECESITAMOS?

Inventario de contenidos

A mano o en excel, armar una lista con todas las secciones y subsecciones que componen o pueden componer la UI. En el caso de que exista ya una AI, se debe llegar como mínimo a un tercer nivel de profundidad.

Definir el perfil del usuario

País, ciudad, edad, sexo, ubicación, etc.

48 of 110

¿QUÉ NECESITAMOS?

Imprimir las tarjetas

El listado del inventario en tarjetas o post-it a razón de un módulo por tarjeta.

Preparar las planillas

También en Excel, para ir registrando los resultados de cada prueba. Los datos que nos interesan son la cantidad de veces que una tarjeta aparece relacionada con otras en un determinado lugar (patrón)

49 of 110

¿QUÉ NECESITAMOS?

Reclutar usuarios

Como mínimo deberán ser 15, y deberán coincidir con el perfil elegido anteriormente

La prueba podrá ser individual o en grupo de 4 personas.

Cada uno con un grupo de tarjetas.

50 of 110

Entregar Tarjetas

A cada usuario se le dará un grupo de tarjetas y se le pedirá que las agrupe, jerarquice, y nombre según consideren más apropiado.

Preguntar

Una vez finalizado, el moderador podrá hacer preguntas para entender ciertas decisiones.

1

2

AHORA SI, REALIZAR LA PRUEBA

51 of 110

Registrar

Se registra la disposición final de las tarjetas

Extraer conclusiones

Creando un listado ordenando las tarjetas de mayor a menor según el porcentaje de veces que hayan aparecido en una categoría.

3

4

AHORA SI, REALIZAR LA PRUEBA

52 of 110

EXTRAER CONCLUSIONES

53 of 110

Este diagrama ayuda a detectar grupos de datos, o grupos de tarjetas que los usuarios han emparejado con mayor frecuencia. Muestra la proporción de veces que se produjeron emparejamientos de tarjetas específicas durante la actividad y muestra el número exacto al pasar el mouse (optimal workshop).

MATRIZ DE SIMILITUD

54 of 110

Extraer conclusiones : Matriz de similitud (Optimal Workshop)

55 of 110

Extraer conclusiones : Matriz de similitud (Optimal Workshop)

La matriz de similitud de Optimal Workshop muestra que las 'sandalias planas' y los 'zapatos de corte' fueron emparejados por el 91% de los participantes (31 veces) en este estudio de ejemplo.

56 of 110

Los dendrogramas también son excelentes para obtener una idea general de cuán similares (o diferentes) fueron los tipos de tarjetas de sus participantes entre sí. Permite visualizar los grupos de contenidos y las etiquetas principales de los participantes en la prueba de Card sorting. A través del dendograma podemos obtener mayor claridad y confianza para tomar decisiones futuras sobre la arquitectura de información.

DENDROGRAMA AAM

57 of 110

Extraer conclusiones : DENDROGRAMA AAM (Optimal Workshop)

58 of 110

Extraer conclusiones : DENDROGRAMA AAM (Optimal Workshop)

El ejemplo que se muestra tenía 34 tipos de tarjetas completadas y el dendrograma de AAM muestra que el 77% de los participantes estuvo de acuerdo en que las tarjetas resaltadas en verde pertenecen juntas y un nombre sugerido para ese grupo es 'Bling'. La información sobre herramientas muestra uno de los posibles nombres de categoría para este grupo.

59 of 110

La información obtenida puede servir para la elaboración de un mapa de sitio, donde muestre la arquitectura de información, identificando secciones principales, subsecciones y las relaciones entre ellas.

EN RESUMEN

60 of 110

¿CÓMO ARMAR LA ARQUITECTURA A PARTIR DE UN CARDSORTING?

VAMOS CON UN EJEMPLO….

61 of 110

TRAMITES

MAPA

FIESTAS

EVENTOS

AGENDA

BARRIOS

SALUD

HISTORIA

DECRETOS

MUSEO

TEATRO

NOTICIAS

ENTRADAS

FOTOS

REGISTRO

CENTRO

OPINIONES

REDES

TURNOS

EMPLEO

MICROS

CONTACTOS

CATEDRAL

CULTURA

JEFATURA

TURISMO

MEDIOS

PARQUES

62 of 110

A PARTIR DE ESAS TARJETAS SE REALIZÓ UN CARDSORTING Y ESTOS FUERON LOS RESULTADOS

63 of 110

RESULTADOS: Dendrogramas AAM (Optimal Workshop)

64 of 110

VEAMOS UNA DE LAS RAMAS DEL DENDROGRAMA. A PARTIR DE AHÍ PODEMOS UBICAR EL NOMBRE DE LAS SECCIONES PRINCIPALES...

65 of 110

RESULTADOS: Dendrogramas AAM (Optimal Workshop)

66 of 110

AHORA LAS SUBSECCIONES Y LAS RELACIONES ENTRE ELLAS

67 of 110

RESULTADOS: Dendrogramas AAM (Optimal Workshop)

68 of 110

VEAMOS SU ANATOMIA

69 of 110

Arquitectura Final

SECCIONES O CATEGORÍAS

70 of 110

Arquitectura Final

SUB-SECCIONES O SUB-CATEGORÍAS

71 of 110

Arquitectura Final

RELACIONES

ENTRE ELLAS

72 of 110

¡PARA PENSAR!

Para realizar una arquitectura de información necesito agrupar, jerarquizar y…..

COMPLETAR LO QUE FALTA

73 of 110

AHORA SI! ¿CÓMO REALIZO MI PRIMER CARDSORTING PARA DEFINIR LA ARQUITECTURA DE INFORMACIÓN?

74 of 110

VAMOS A USAR UNA PLATAFORMA:

OPTIMAL WORKSHOP

75 of 110

OPTIMAL WORKSHOP + WHIMSICAL

76 of 110

ARMANDO LA ARQUITECTURA

Paso a paso

77 of 110

Usar la herramienta OPTIMAL WORKSHOP

Descubra cómo las personas organizan su contenido de una manera que tenga sentido para ellos ejecutando una clasificación de tarjeta abierta, cerrada o híbrida.

1

ELEGIR HERRAMIENTA

78 of 110

Se trata de crear tarjetas según los contenidos del sitio web. Posteriormente se les solicitará a los usuarios participantes de la prueba que las agrupen para ayudarnos a comprender sus modelos mentales.

2

INTRODUCIR LAS TARJETAS

79 of 110

80 of 110

3

Hay que configurar las opciones y preguntas que se realizarán antes y después de realizar la prueba en cuestión. Este tipo de preguntas deben de ayudarnos a poder segmentar por demografía, psicografía, etc.

CONFIGURA LA PRUEBA

81 of 110

82 of 110

4

Esta herramienta proporciona un enlace de la prueba que se puede enviar por correo electrónico a los usuarios y clientes, publicarla en una web o lanzarla a través de las redes sociales.

ENCONTRAR PARTICIPANTES

83 of 110

84 of 110

5

Usar los dendrogramas o la matriz de similitud para sacar conclusiones y estar listo para armar la arquitectura de información

SACAR CONCLUSIONES

85 of 110

86 of 110

OPTIMAL WORKSHOP

ACCEDER

87 of 110

MANOS A LA OBRA, AHORA QUE TENEMOS NUESTRO CARDSORTING VAMOS A HACER NUESTRA ARQUITECTURA EN WHIMSICAL

88 of 110

Herramientas para editar las formas geométricas

89 of 110

Armado de la arquitectura.

90 of 110

WHIMSICAL

ACCEDER

91 of 110

ANTES DE EMPEZAR REFRESQUEMOS CUAL ES EL MVP DE ESTE PROYECTO

ARQUITECTURA DE INFORMACIÓN

92 of 110

Buscar Alquiler

Usuario que desea alquilar

  • Buscar alquiler por ubicación y fechas o ofertas
  • Reservar alquiler por un mediano plazo

Versión

Lanzamiento

Publicar alojamiento

Usuario que desea poner una propiedad para alquilar

  • Publicar alojamiento
  • Aceptar reserva de alquiler

Conectar Usuarios

Chat

  • Chat entre inquilino y anfitrión

93 of 110

Armando la arquitectura

de información

Iremos desarrollando cada una de las partes más importantes en la definición de la arquitectura de información. Primero tomaremos las conclusiones del cardsorting realizado en Optimal Workshop (en este caso el dendrograma AAM). A partir de ahí observaremos cómo se fueron relacionando las tarjetas. Como primer paso definiremos las categorías para, en una segunda instancia, colocar las subcategorias. Por último definiremos los contenidos relacionados a la sub-categoría.

ARQUITECTURA DE INFORMACIÓN

94 of 110

VEAMOS LOS RESULTADOS

DEL CARDSORTING

95 of 110

Cardsorting

96 of 110

DEFINAMOS LAS CATEGORIAS

97 of 110

HOME

PERFIL

CHAT

BUSCAR ALQUILER

MIS RESERVAS

98 of 110

DEFINAMOS LAS SUBCATEGORIAS

99 of 110

Cardsorting

100 of 110

HOME

PERFIL

CHAT

BUSCAR ALQUILER

MIS RESERVAS

RECOMENDACIONES

FILTROS

101 of 110

DEFINAMOS LOS CONTENIDOS RELACIONADOS A LA SUBCATEGORÍA

102 of 110

HOME

PERFIL

CHAT

BUSCAR ALQUILER

MIS RESERVAS

RECOMENDACIONES

FILTROS

- POR UBICACIÓN: ubicación específica, ofertas a cualquier lugar.

- POR FECHAS: fecha especifica, oferta del mes.

- POR CANTIDAD DE HUÉSPEDES: adultos, niños, bebés.

- POR TIPO DE ALOJAMIENTO: casa, departamento, cuarto.

103 of 110

Cardsorting

104 of 110

HOME

PERFIL

CHAT

BUSCAR ALQUILER

MIS RESERVAS

RECOMENDACIONES

FILTROS

- POR UBICACIÓN: ubicación específica, ofertas a cualquier lugar.

- POR FECHAS: fecha especifica, oferta del mes.

- POR CANTIDAD DE HUÉSPEDES: adultos, niños, bebés.

- POR TIPO DE ALOJAMIENTO: casa, departamento, cuarto.

DETALLE DE ALOJAMIENTO

- TIPO DE ALOJAMIENTO

- UBICACIÓN

- CAPACIDAD

- COMODIDADES

- REGLAS

- DESCRIPCIÓN

- FOTOS

- DISTRIBUCIÓN

- PERFIL

- COMENTARIOS

- PRECIOS

105 of 110

HOME

PERFIL

CHAT

BUSCAR ALQUILER

MIS RESERVAS

DATOS PERSONAS

MIS MEDIOS DE PAGO

MEMBRESIA

SER ANFITRIÓN

- NOMBRE

- APELLIDO

- PAIS

- PROFESION

- DEBITO

- CREDITO

- EFECTIVO

- MONEDA ELECTRONICA

- CALENDARIO DE RESERVAS

- MIS PUBLICACIONES

- FREE

- PREMIUM

HISTORIAL DE CONVERSACIONES

NUEVO CHAT

- ARCHIVOS

- ELIMINADOS

- FINALIZADOS

- ULTIMOS CONTACTOS

RECOMENDACIONES

FILTROS

- POR UBICACIÓN: ubicación específica, ofertas a cualquier lugar.

- POR FECHAS: fecha especifica, oferta del mes.

- POR CANTIDAD DE HUÉSPEDES: adultos, niños, bebés.

- POR TIPO DE ALOJAMIENTO: casa, departamento, cuarto.

DETALLE DE ALOJAMIENTO

- TIPO DE ALOJAMIENTO

- UBICACIÓN

- CAPACIDAD

- COMODIDADES

- REGLAS

- DESCRIPCIÓN

- FOTOS

- DISTRIBUCIÓN

- PERFIL

- COMENTARIOS

- PRECIOS

106 of 110

WHIMSICAL

ACCEDER

107 of 110

LLEGÓ EL MOMENTO.. VAMOS A CREAR NUESTRA PROPIA ARQUITECTURA DE INFORMACIÓN

108 of 110

ARQUITECTURA DE INFORMACIÓN

Realizar la arquitectura de información de tu proyecto partiendo de la actividad de Cardsorting que deberás realizar.

109 of 110

ARQUITECTURA DE INFORMACIÓN

Formato: Whimsical (herramienta sugerida para armar la arquitectura de de información), Optimal Workshop (herramienta sugerida para realizar el Card Sorting). Seguir los pasos del ejemplo en vivo.

Sugerencia: activar comentarios en el archivo.

>> Consigna: Realizar la arquitectura de información de tu proyecto partiendo del Card Sorting qué deberás realizar. Tendrás que hacer el cardsorting con al menos 15 personas para obtener información relevante. Para las conclusiones trabajar con la matriz de similitud y/o el dendograma AAM para su armado.

110 of 110

ARQUITECTURA DE INFORMACIÓN

Aspectos a incluir en el entregable del Proyecto de Aula:

  1. Realizar la actividad de Card Sorting abierto para observar cómo los usuarios organizan los contenidos. Recuerda armar cada una de las instancias de la actividad (saludo inicial, reglas, el paso a paso y el saludo final).

  1. El uso correcto de por lo menos 3 jerarquías de información:
    1. Categorías / Secciones
    2. Subcategorías / Subsecciones
    3. Detalle de subcategoría / subsecciones
  2. Usar la Matriz de similitud o Dendrogramas AAM para extraer conclusiones.
  3. Con la información y las conclusiones del Card Sorting construye tu arquitectura de información. Recuerda primero definir las categorías, luego las subcategorías y por último los contenidos relacionados a las subcategorias.

VER EJEMPLO