Cómo prototipar exitosamente tu proyecto
56
PROTOTIPAR PARA EMPRENDEDORES, DISEÑADORES, PROJECT MANAGERS, INGENIEROS Y TODA PERSONA QUE PARTICIPE EN UN PROYECTO. TU PROYECTO CÓMO EXITOSAMENTE
-
Upload
ixda-mendoza -
Category
Internet
-
view
242 -
download
0
Transcript of Cómo prototipar exitosamente tu proyecto
PROTOTIPAR
PARA EMPRENDEDORES, DISEÑADORES, PROJECT MANAGERS, INGENIEROS Y TODA PERSONA QUE PARTICIPE EN UN PROYECTO.
TU PROYECTO
CÓMO
EXITOSAMENTE
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.
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.
¿Qué es lo primero que hacemos para resolver el problema?
PREGUNTA ABIERTA
LO QUE PENSÓ EL DISEÑADORCUANDO LO VIÓ...
LO QUE PENSÓ EL DEVELOPERCUANDO LO VIÓ...
LO QUE PENSÓ EL CLIENTECUANDO LO VIÓ...
ME ENCANTA!¡Con esta idea conquistamos el mundo!
LO QUE PENSÓ EL USUARIO REALCUANDO LO VIÓ...
¿Y AHORA?
Necesidad de que todos estemos “en la misma página”
“Me alegra que todos estemos de acuerdo”Foto: http://www.agileproductdesign.com/ (Jeff Patton)
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.
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
- ¿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:
ELEMENTOS DEL UXDiseñ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”
PROCESO UX
Jeff Gothelf - Lean UX Evangelist, autor de “Lean UX”
Concepto Prototipo Validarinternamente
Testearexternamente
Aprender de la conducta del usuario
Iterar
Tests de usabilidad
JefeClientes
¿Quién usa los prototipos?PREGUNTA ABIERTA
Todos los que trabajan en un producto o proyecto,
sin importar el rol que cumplen
Se trata de trabajar en equipo.
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.
Definir las historias de usuario
Foto: http://blog.twinenginelabs.com/2013/09/tools-for-lean-ux-teams.html#.VVvrhJNVikq
- 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
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.
ESTILO DEL WIREFRAMENIVELES DE FIDELIDAD
DIAGRAMA DE BLOQUEProvee la información más básica y esencial: tipos de
contenido, funcionalidad
Foto: Winie Lim - The guide to wireframing
BLOQUES EN ESCALA DE GRISESHace 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
TEXTO DE “ALTA FIDELIDAD”El wireframe se empieza a ver más parecido a la realidad sinnecesidad aún de implementar estilos de diseño concretos.
Foto: https://www.behance.net/gallery/Park-Bond/2181403
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
INTERACCIONES DE “ALTA FIDELIDAD”Permite visualizar comportamientos e interacciones
concretas. Permite evaluar flujos de navegación.
Foto: https://proto.io/en/demos/
EL CASO DE SALESFORCEhttp://sfdc-styleguide.herokuapp.com/assets/S1AppGuidelines.pdf
¿CUÁNDO INVOLUCRAMOS AL USUARIO REAL?
ITERACIONES - TEST EXTERNO
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
LLEGÓ LA HORA DEL BREAK!
HERRAMIENTAS¿CÓMO ARMO EL WIREFRAME/PROTOTIPO?
SKETCHING Y PROTOTIPO PAPEL
● Se puede crear en una hora o menos.
● Se puede reubicar el contenido fácilmente.
● Es barato.
● Es divertido.
SKETCHING Y PROTOTIPO PAPEL
Foto: Taller de Prototipado Rápido - IxDA Mendoza
- Libre.- Prototipos funcionales en el navegador.- Prototipos funcionales en iPad.- Prototipos funcionales en dispositivos móviles.
SOFTWARE DE DISEÑO
Adobe Illustrator - Sketch - Adobe PhotoshopSiempre basándonos en la grilla del framework que estemos
utilizando a nivel de Front-End
Foto: Marc Decerle - The guide to wireframing
INTERACTIVO & “CLICKEABLE” Prototipo Interactivo
AXURE - Servicio pago- Desde el boceto al prototipo detallado.
- 1 proyecto gratis- Sincronización con Sketch y Dropbox
- Prueba gratis (15 días)- Animaciones / elementos UI- Feedback
Actualmente existe una gran variedad de productos/herramientas que nos facilitan el
proceso de prototipado:
Gráfico: Enterprise UX - http://enterpriseux.net/schedule/friday-may-15/workshop-4/
HERRAMIENTASDE PROTOTIPADO
AnimaciónControles de UIincorporados
Reconocimiento ADV de gestos
Importa bocetos Con gifs Web móvil
Web móvilAlgunosAlgunos
Importa bocetos
Importa bocetos Web móvil
Web móvil
ENTONCES...¿CÓMO ARMAMOS UN PROTOTIPO EXITOSO?
SE TRATA DETRABAJO EN EQUIPO :P
Foto: https://www.flickr.com/photos/yamagatacamille/4799648425
NO VAS A APRENDERUX SENTADO EN TU
ESCRITORIO LEYENDO...
¡ES HORA DE EMPEZAR A IMPLEMENTARLO!
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/
Silvana Corvalá[email protected]
@sileleo
Analía [email protected]@anagraphics
www.ixdamza.com.ar¡GRACIAS!
