Arquitectura de la información, Taller UX - Junio 2016
Transcript of Arquitectura de la información, Taller UX - Junio 2016
![Page 1: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/1.jpg)
APRENDIENDO A DISEÑAR PARA MEDIOS INTERACTIVOS
![Page 2: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/2.jpg)
Acerca de Taller UX
Taller UX es un modelo reproducible de microtalleres de User Experience, construido colaborativamente, con el objetivo de mejorar la educación y divulgación de UX en español.
¿Querés colaborar con el proyecto o estás interesado en reproducir el taller en tu ciudad? ¡Contactanos!
Acerca de IxDA
IxDA, la asociación de diseño de interacción, es una organización mundial voluntaria, sin fines de lucro ni costos de membresía, iniciada en 2003.
Está conformada por voluntarios que se identifican con la misión de mejorar la condición humana avanzando la práctica profesional del diseño de interacción, sin percibir retribución económica por su participación.
Por ello, todas las iniciativas de IxDA son por la comunidad, para la comunidad.
![Page 3: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/3.jpg)
Introducción a la Arquitectura de Información
Este obra está bajo una licencia deCreative Commons Reconocimiento 4.0 Internacional
Con el apoyo de
![Page 4: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/4.jpg)
Nicolás Jaureguiberry NUESTRO INVITADO
Lic. en Comunicación Social; trabaja en la industria desde 2004, desde 2011 se dedica a la experiencia de usuario habiendo formado parte del equipo Globant.
Hoy es parte del equipo de Inter-Cultura donde es consultor, diseñador de interacción e investigador.
Integra la comisión directiva de UXPA Argentina y es docente universitario en UCA y FUC.
@nicojaure // Linkedin.com/in/nicojaure/
![Page 5: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/5.jpg)
Martín Nedbal NUESTRO INVITADO
Diseñador Gráfico UBA; trabaja en diseño de medios interactivos desde 1998. Desde 2010 se especializa en diseño de experiencia de usuario donde ha trabajado para empresas como BBVA, Verizon, National Geographic, YPF y Autodesk entre otros.
Actualmente es diseñador UX y director creativo en DevSpark.
Linkedin.com/in/martinnedbal
![Page 6: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/6.jpg)
Buen dia!
![Page 7: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/7.jpg)
¿Qué es la Arquitectura de Información?
![Page 8: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/8.jpg)
Foto Unplash by Lou Levit / Concepto de Peter Morville
Foto Unplush by Lou Levit / Concepto de Peter Morville
![Page 9: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/9.jpg)
Ejercicio:
El Ajedrez Escribir qué es lo que hace a un ajedrez ser un ajedrez. 3’
![Page 10: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/10.jpg)
Foto Unplush by Lou Levit / Concepto de Peter Morville
![Page 11: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/11.jpg)
Foto Unplush by Lou Levit / Concepto de Peter Morville
![Page 12: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/12.jpg)
Foto Unplush by Lou Levit / Concepto de Peter Morville
![Page 13: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/13.jpg)
Foto Unplash by Luis Lerena
![Page 14: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/14.jpg)
Cuaderno = Notebook Español / Inglés
![Page 15: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/15.jpg)
Foto Unplash by Set Schwiet
![Page 16: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/16.jpg)
Notebook Cuaderno
Computadora
![Page 17: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/17.jpg)
Ejercicio:
Escribí rápidamente la lista de actividades que haces para cocinar fideos.
3’
![Page 18: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/18.jpg)
Modelo Mental
Los modelos mentales son representaciones internas de una realidad externa.
Son concepciones generales, que dirigen nuestros actos y que somos capaces de construir a
partir de la experiencia.
Fuente: no solo usabilidad: revista sobre personas, diseño y tecnología
![Page 19: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/19.jpg)
Entonces… ¿para qué sirve?
![Page 20: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/20.jpg)
Modelo Mental del Usuario
Diseño de Arquitectura de Información
![Page 21: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/21.jpg)
PROCESO DE DISEÑO
problema general problema específico solución específica
![Page 22: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/22.jpg)
ARMAR EL MODELO REPRESENTACIÓN
Reducción de complejidad
IDEAR Diseño de interacción
![Page 23: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/23.jpg)
REDUCCIÓN DE COMPLEJIDAD
Foto Nasa Foto Unplash by Sylwia Bartyzel
![Page 24: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/24.jpg)
REDUCCIÓN DE COMPLEJIDAD
Foto Unplash by Anna Vander Stel
![Page 25: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/25.jpg)
Diagrama mental
![Page 26: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/26.jpg)
Foto How to Make Sense of Any Mess: Information Architecture for Everybody by Abby Covert
Representación de una pizza
![Page 27: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/27.jpg)
A B
Diagrama de Ben
![Page 28: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/28.jpg)
Calidad
Precio
Diagrama de cuadrantes
![Page 29: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/29.jpg)
Mapa del sitio
![Page 30: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/30.jpg)
Foto Unplash by Galymzhan Abdugalimov
![Page 31: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/31.jpg)
¿Qué es la Arquitectura de información?
3’ ANOTEN
![Page 32: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/32.jpg)
Ordenamiento de Tarjetas (Card Sorting)
Ejercicio
![Page 33: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/33.jpg)
Foto Unplush by Lukas Budimaier
![Page 34: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/34.jpg)
Ordenar las tarjetas en grupos y colocarlas en columnas
10’
![Page 35: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/35.jpg)
![Page 36: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/36.jpg)
Agregar nombres a las columnas (se puede reordenar si es necesario)
10’
![Page 37: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/37.jpg)
Nombre Columna
Nombre Columna
Nombre Columna
Nombre Columna
Nombre Columna
Nombre Columna
Nombre Columna
Nombre Columna
Nombre Columna
![Page 38: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/38.jpg)
Pegar las tarjetas en una hoja o afiche
3’
![Page 39: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/39.jpg)
Reflexionar con otro grupo: - ¿Qué elementos se ordenaron de la misma
forma? - ¿Cuáles son las diferencias?
10’
![Page 40: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/40.jpg)
¿Conclusiones hasta al momento?
![Page 41: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/41.jpg)
¿Qué pasaría si hiciéramos esta comparación con todos los equipos?
![Page 42: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/42.jpg)
Base del Ejercicio y foto de Card Sorting de Interaction Design Foundation
![Page 43: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/43.jpg)
![Page 44: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/44.jpg)
Matriz de similitud
![Page 45: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/45.jpg)
Matriz de similitud
![Page 46: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/46.jpg)
Dendograma
![Page 47: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/47.jpg)
![Page 48: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/48.jpg)
![Page 49: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/49.jpg)
Ordenamiento de Tarjetas (Card Sorting)
![Page 50: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/50.jpg)
Ordenamiento de Tarjetas (Card sorting) “Es un método colaborativo que nos ayuda a comprender al usuario para el cual estamos diseñando. No es un método para definir la navegación.”
Donna Spencer
![Page 51: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/51.jpg)
Agrupación de conceptos por similitud semántica
![Page 52: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/52.jpg)
Abierto Cerrado
Individual Grupal
![Page 53: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/53.jpg)
Cualitativo Cuantitativo
5 personas 10/20 personas
Porque? Qué relaciones semánticas
compartidas? Que problemas /
dudas?
![Page 54: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/54.jpg)
Ventajas Desventajas
● Ignora las tareas ● No es exacto ● El análisis puede tomar
tiempo ● Puede no ser profundo
● Simple y barato ● Técnica rápida ● Centrado en el usuario ● Requiere poca explicación
![Page 55: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/55.jpg)
entonces… qué es la Arquitectura de Información?
![Page 56: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/56.jpg)
“Clarificar la complejidad”
![Page 57: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/57.jpg)
Existía antes de internet!
1970
![Page 58: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/58.jpg)
Arquitectura de Información
Consiste en ayudar a la gente a entender su entorno y encontrar lo que están buscando, en el mundo real, así como en el mundo online.
![Page 59: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/59.jpg)
Una buena Arquitectura de información es clave, también, para lograr productos accesibles
![Page 60: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/60.jpg)
Preguntas que hacemos cuando se hace arquitectura de información:
¿Qué es lo que entiende el usuario sobre este espacio? ¿Cómo se mueve dentro del producto? ¿De qué manera la aplicación ayuda al usuario a catalogar y recuperar su información? ¿Como se muestra la información presentada al usuario? ¿Ayuda esta forma de mostrar la información al cliente a tomar decisiones?
![Page 61: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/61.jpg)
¿Qué hicimos hoy?
1. Reflexionamos sobre lo que implica la Arquitectura de Información 2. Definimos algunas aplicaciones 3. Realizamos una práctica de Ordenamiento de Tarjetas o Card Sorting 4. Conocimos para qué podemos usarla y cómo facilitarla 5. Conversamos sobre la Arquitectura de Información en el proceso de diseño
![Page 62: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/62.jpg)
EVALUEMOS
¿Qué fue lo que más les sorprendió? ¿Cuál fue la cosa más importante sobre arquitectura de información? ¿Cuál es la gran pregunta?
![Page 63: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/63.jpg)
¿Preguntas?
![Page 64: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/64.jpg)
Recursos útiles
IDEO toolkit http://www.designkit.org/
El blog de Olga http://olgacarreras.blogspot.com.ar/
Standford UX https://ux.stanford.edu
NN Group http://www.nngroup.com/
Interaction Design https://www.interaction-design.org/
No Solo Usabilidad http://nosolousabilidad.com/
“Interviewing Users”. Steve Portigal
Standford Design School http://dschool.stanford.edu/
![Page 65: Arquitectura de la información, Taller UX - Junio 2016](https://reader030.fdocuments.es/reader030/viewer/2022021503/5872c9b61a28ab0c718b6f73/html5/thumbnails/65.jpg)
facebook.com/ixdalaplata
@ixdalaplata
Gracias! Se entregarán certificados de asistencia a aquellos que realicen todos los talleres.
Seguinos en nuestra comunidad local: