Los prototipos conectan la estructura y arquitectura con la superficie de un sitio web o aplicación móvil. Son representaciones visuales de una interfase que se utilizan para comunicar los detalles y lograr que todos los miembros de un proyecto tengan un entendimiento mutuo en lo que se está trabajando.
2. IxDA es una asociación creada para difundir la disciplina del Diseño de
Interacción, que conforma (junto a usabilidad, arquitectura de la
información y accesibilidad, entre otras) el ecosistema del Diseño de
Experiencias del Usuario.
3. Queremos mejorar la educación y divulgación de UX en español.
Queremos llegar a un nuevo estándar profesional.
Y queremos construirlo colaborativamente.
4. ¿Qué es lo primero que hacemos
para resolver el problema?
PREGUNTA ABIERTA
14. Necesidad de que todos estemos
“en la misma página”
“Me alegra que todos estemos de acuerdo”
Foto: http://www.agileproductdesign.com/ (Jeff Patton)
15. EL PROTOTIPO TAMBIÉN NOS PERMITE...
- Ahorrar tiempos de desarrollo.
- Evitar malentendidos dentro del mismo equipo.
- Validar nuestras ideas (iteraciones):
técnicamente y también en relación a los
usuarios.
16. Conocer más a nuestros usuarios
(tests con usuarios)
Foto: https://www.interaction-design.org/ux-daily/484/problem-users-in-user-testing-shy-people
17.
18. - ¿Quién interactuará con el prototipo?
- ¿Qué es lo que esperás aprender?
- ¿Cuánto tiempo tenés para crearlo?
¿CÓMO EMPEZAR A PROTOTIPAR?
Contestando las siguientes preguntas:
19. ELEMENTOS DEL
UX
Diseño visual es la última de las etapas.
Jesse James Garrett - Diseñador de experiencia de usuario, autor de
“Los elementos de la experiencia de usuario”
20. PROCESO UX
Jeff Gothelf - Lean UX Evangelist, autor de “Lean UX”
Concepto Prototipo
Validar
internamente
Testear
externamente
Aprender de
la conducta
del usuario
Iterar
Tests de
usabilidad
Jefe
Clientes
22. Todos los que trabajan en un
producto o proyecto,
sin importar el rol que cumplen
Se trata de trabajar en equipo.
23. Diseñadores UX, de
interacción y arquitectos de
información
Usan los prototipos para mostrar los flujos del
usuario entre las distintas vistas o páginas.
24. Definir las historias de usuario
Foto: http://blog.twinenginelabs.com/2013/09/tools-for-lean-ux-teams.html#.VVvrhJNVikq
26. - Utilizan los wireframes para tener una idea de cómo se
va a comportar el sistema.
- Le da al desarrollador una imagen clara de los
elementos que deberá considerar al trabajar en el
código y modelo de datos.
- Identificar riesgos y posibles problemas.
- Explorar la creatividad.
UI Developer & Desarrollador
27. Analistas de negocios &
dueños del proyecto
- Usan los prototipos para mostrar visualmente las reglas
del negocio y los requerimientos de interacción de una
pantalla.
- Deciden a qué darle más importancia: estructura,
contenido, herencia de la información, funcionalidad o
conducta.
- Se aseguran si el proyecto cumple con los
requerimientos y objetivos.
29. DIAGRAMA DE BLOQUE
Provee la información más básica y esencial: tipos de
contenido, funcionalidad
Foto: Winie Lim - The guide to wireframing
30. BLOQUES EN ESCALA DE GRISES
Hace uso de la escala de grises para enfatizar ciertos elementos
del layout sin necesidad de definir colores específicos aún.
Foto: Winie Lim, Paul Armstrong, Eu Diaz - The guide to wireframing
31. TEXTO DE “ALTA
FIDELIDAD”
El wireframe se empieza a ver más
parecido a la realidad sin
necesidad aún de implementar
estilos de diseño concretos.
Foto: https://www.behance.net/gallery/Park-Bond/2181403
32. COLOR DE “ALTA FIDELIDAD”
Otra forma de ir acercándonos cada vez más al modelo real
sin necesidad de entrar en detalles específicos.
Foto: UX Porn by UXPin - The guide to wireframing
33. INTERACCIONES DE “ALTA FIDELIDAD”
Permite visualizar comportamientos e interacciones
concretas. Permite evaluar flujos de navegación.
Foto: https://proto.io/en/demos/
34. EL CASO DE SALESFORCE
http://sfdc-styleguide.herokuapp.com/assets/S1AppGuidelines.pdf
36. La idea es presentarle un producto/prototipo pulido
que se aproxime en la mayor medida posible al
producto final.
Queremos ver reacciones.
TESTEAR NAVEGABILIDAD - USABILIDAD - REACCIONES
44. Adobe Illustrator - Sketch - Adobe Photoshop
Siempre basándonos en la grilla del framework que estemos
utilizando a nivel de Front-End
Foto: Marc Decerle - The guide to wireframing
49. Actualmente existe una gran variedad de
productos/herramientas que nos facilitan el
proceso de prototipado:
50. Gráfico: Enterprise UX - http://enterpriseux.net/schedule/friday-may-15/workshop-4/
HERRAMIENTAS
DE PROTOTIPADO
AnimaciónControles de UI
incorporados
Reconocimiento
ADV de gestos
Importa bocetos Con gifs Web móvil
Web móvilAlgunosAlgunos
Importa bocetos
Importa bocetos Web móvil
Web móvil
54. NO VAS A APRENDER
UX SENTADO EN TU
ESCRITORIO LEYENDO...
¡ES HORA DE EMPEZAR A
IMPLEMENTARLO!
55. Algunos recursos útiles y
para inspirarte...
uxporn.uxpin.com
mockupstogo.net
flickr.com/groups/ilovewireframes
wireframeshowcase.com
webwithoutwords.com
patterntap.com
uxarchive.com
pinterest.com/search/pins/?q=wireframes
android-app-patterns.com
mobile-patterns.com
Si conocés otros recursos compartilos en nuestra comunidad! facebook.com/ixdamza
gv.com/sprint proceso completo de diseño
y desarrollo(Inglés)
uxawards
http://awards.ixda.org/