1. CATEDRA DE
ARQUITECTURA DE LA
INFORMACIÓN Y
USABILIDAD
CLASE 4 (Y FINAL)

2. EL PASO FINAL: PROTOTIPOS
• El prototipos una herramienta que le permite a los diseñadores
explorar, comunicar y evaluar ideas.

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

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

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

6. LASEAUS FUNNEL

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

8. EVOLUCIÓN DEL PROTOTIPADO EN EL
PROCESO DE DISEÑO
SKETCH
WIREFRAME
MAQUETA VISUAL
PROTOTIPO FUNCIONAL

9. Los prototipos no deberían estar completos.
• Deben ser fácil de modificar.
• Deben estar hechos para ser desechados.

10. STORYBOARD
Los prototipos no deberían estar completos.
• Deben ser fácil de modificar.
• Deben estar hechos para ser desechados.

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

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

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

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

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

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

17. PAPER PROTOTYPING

18. PAPER PROTOTYPING

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

20. STORYBOARD

21. STORYBOARD

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

23. WIREFRAMES

24. WIREFRAMES

25. WIREFRAMES