Upload
ixda-mendoza
View
243
Download
0
Embed Size (px)
Citation preview
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.
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
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.
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/
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
● Se puede crear en una hora o menos.
● Se puede reubicar el contenido fácilmente.
● Es barato.
● Es divertido.
SKETCHING Y PROTOTIPO PAPEL
- Libre.- Prototipos funcionales en el navegador.- Prototipos funcionales en iPad.- Prototipos funcionales en dispositivos móviles.
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
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
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!