![Page 1: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/1.jpg)
CATEDRA DE ARQUITECTURA DE LA INFORMACIÓN Y USABILIDADCLASE 4 (Y FINAL)
![Page 2: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/2.jpg)
EL PASO FINAL: PROTOTIPOS
• El prototipos una herramienta que le permite a los diseñadores
explorar, comunicar y evaluar ideas.
![Page 3: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/3.jpg)
PROTOTIPOS:
Prototipear es una estrategia eficiente para hacer frente al proceso de
diseño.
• Enfocarse en el objetivo
• Poner a prueba tareas
• Evolucionar el diseño
![Page 4: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/4.jpg)
LASEAUS FUNNEL
El diseño es una elección, y hay dos lugares donde hay espacio para la
creatividad:
• En la generación de ideas: Creación de opciones distintas para elegir.
• En la selección de ideas: La definición de los criterios que permiten la
elección.
![Page 5: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/5.jpg)
LASEAUS FUNNEL
En su libro Bocetos experiencias de usuario (Sketching User
Experiences) , Bill Buxton describe el proceso de diseño como un ciclo
de elaboración y reducción.
El objetivo de la fase de elaboración es generar ideas diferentes como
sea posible, mientras que la fase de reducción está destinada a
seleccionar una de esas ideas y con mucho cuidado refinarlo.
![Page 6: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/6.jpg)
LASEAUS FUNNEL
![Page 7: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/7.jpg)
• Mientras tipifican el proceso de diseño como un todo, en la práctica el
proceso de elaboración y la reducción debe ser continuamente
repetido durante el curso de diseño.
• Desde arquitectura de la información al diseño visual, con el prototipo
funcional, cada etapa debe ser explorada en su totalidad, y luego
perfeccionado para llegar solución precisa.
![Page 8: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/8.jpg)
EVOLUCIÓN DEL PROTOTIPADO EN EL PROCESO DE DISEÑO
SKETCH
WIREFRAME
MAQUETA VISUAL
PROTOTIPO FUNCIONAL
![Page 9: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/9.jpg)
Los prototipos no deberían estar completos.
• Deben ser fácil de modificar.
• Deben estar hechos para ser desechados.
![Page 10: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/10.jpg)
STORYBOARD
Los prototipos no deberían estar completos.
• Deben ser fácil de modificar.
• Deben estar hechos para ser desechados.
![Page 11: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/11.jpg)
PAPER PROTOTYPING
• Creación de prototipos de papel es un método ampliamente
utilizado en el proceso de diseño centrado en el usuario , un proceso
que ayuda a los desarrolladores para crear software que cumpla con
las expectativas y necesidades de los usuarios.
![Page 12: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/12.jpg)
PAPER PROTOTYPING
• Es prototipado desechable e implica la creación en bruto, incluso a
mano esbozado, de dibujos de una interfaz a utilizar como prototipos
o modelos de un diseño.
![Page 13: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/13.jpg)
PAPER PROTOTYPING
• Prototipos de papel ahorran tiempo y dinero, ya que permite a los
desarrolladores para probar las interfaces de productos antes de
escribir el código o comenzar el desarrollo.
• Esto también permite la modificación fácil y de bajo costo a los
diseños existentes, que hace que este método útil en las primeras
fases de diseño.
![Page 14: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/14.jpg)
PAPER PROTOTYPING
• El uso de prototipos de papel permite que todo el equipo creativo
participe en el proceso, lo que elimina la posibilidad de que alguien
con la información clave no está involucrado en el proceso de
diseño.
• Otro de los beneficios de la creación de prototipos de papel es que
los usuarios se sienten más cómodos siendo críticos con la maqueta,
ya que esta no tiene un aspecto pulido.
![Page 15: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/15.jpg)
PAPER PROTOTYPING
¿Cuándo utilizar prototipos de papel?
• Cuando las herramientas que el diseñador desea utilizar en la
creación de un prototipo no están disponibles.
• Cuando el diseñador quiere hacer un esfuerzo sincero para que todos
los miembros de un equipo, incluyendo aquellos con habilidades
limitadas de software, para que participen en el proceso de diseño.
• Cuando las pruebas de un diseño conducen a una gran cantidad de
dibujos.
![Page 16: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/16.jpg)
PAPER PROTOTYPING
Aplicaciones:
• La comunicación en el equipo
• Test de usabilidad de usabilidad
• Pruebas de diseño
• Arquitectura de la Información
• Prototipado rápido.
![Page 17: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/17.jpg)
PAPER PROTOTYPING
![Page 18: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/18.jpg)
PAPER PROTOTYPING
![Page 19: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/19.jpg)
STORYBOARD
• Diagramas de flujo de interfaz de usuario (también llamados guiones
gráficos o storyboard, diagramas de flujo, diagramas de interfaz de
ventanas de navegación y mapas del contexto de navegación) le
permiten al diseño modelar las relaciones entre los principales
elementos de la interfaz de usuario.
![Page 20: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/20.jpg)
STORYBOARD
![Page 21: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/21.jpg)
STORYBOARD
![Page 22: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/22.jpg)
WIREFRAMES
• Baja fidelidad. Retícula o layout. Sirven para ver contenido,
elementos visuales y de navegación.
• Media fidelidad. Revisa funcionalidades, interacción, y sistema de
navegación.
• Alta fidelidad. Prototipos finales. Tiene alto nivel de detalle. Enfoque
contenido, diseño visual, estándares, y producción final.
![Page 23: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/23.jpg)
WIREFRAMES
![Page 24: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/24.jpg)
WIREFRAMES
![Page 25: Arquitectura de la Información y Usabilidad - Clase 4](https://reader033.vdocumento.com/reader033/viewer/2022052908/559531111a28ab34458b4631/html5/thumbnails/25.jpg)
WIREFRAMES