Como prototipar MAL una aplicación. La importancia del Wireframe

Es la presentación sobre prototipado que dí en el VIII Betabeers Cádiz.

Le di este nombre para recalcar lo mal que se puede llegar a hacer una app sin el uso del prototipado antes del diseño. Empiezo hablando del porqué hacerlo y poco a poco desarrollo el proceso que utilizamos en 47 Degrees.

Por favor, sentidse libre de comentar o preguntar lo que sea!

Enjoy!

Transcript

1. Como prototipar MAL una aplicación La importancia del wireframe Jorge__Galindo de @47deg_es
2. ¡Atención Pregunta! • ¿Que es un prototipo? • ¿Que es un wireframe? • ¿y un storyboard? • ¿y un mockup? ¿y un Sketching? Baja, alta fidelidad... • ¿De donde venimos? ¿Donde estoy? ¿¡Que es toda esta movida!?
3. Salto cualitativo Plantear primero un wireframe donde visualmente se especifican las funcionalidades es el camino del bien, amigo Luke. Yo empecé en el lado oscuro de la fuerza... Era Darth Vader y atraía movidas chungas a mi existencia haciendo las cosas sin prototipar... Las metodologías de trabajo son parte de lo que Yoda enseña en lo alto de las piedras y te harán mejorar tu proyecto
4. Te hará trabajar MENOS ¿Cuantas veces has hecho modificaciones en tiempo de diseño de la interfaz? Pensar que tu “no tienes tiempo para eso”, es queridos amigos un... MOJÓN ¿Cuantas veces el cliente “te la ha colado”, metiendo una nueva funcionalidad? Es el tiempo mejor invertido de todo el timing de tu proyecto
5. Te hará ponerte en tu sitio... La única forma de hacerlo es hacer que partícipe el cliente y que sea consciente de cuanto tiempo se invierte en el desarrollo de un proyecto. Como bien sabemos, vivimos en un país en el que muchas veces nos cuesta que valoren el trabajo que realizamos. Hacer partícipe = Validación del proceso Pasemos a ver como hacemos esto en 47 Degrees...
6. Compartimentos estancos No se pasa al siguiente punto de actuación a nivel de prototipado hasta que no se aprueba el anterior. Nos blindan del por todos conocido.... “Donde digo digorl ahora digo diegorl” Todo va validado por pasos con un tiempo definido de revisión ¡La vinculación emocional del cliente con el proyecto es de suma importancia para que el resultado sea viable!
7. ¿Como hacemos las cosas en 47º? Nuestra metodología esta adaptada a proyectos móviles Esto es un poco como el desarrollo ágil... Hay muchas formas de hacerlo y nosotros tenemos una metodología propia que es la que mejor nos funciona adaptada a nuestro equipo. Vais a ver muchas formas de realizar el prototipado de un proyecto pero la mejor forma de verlo es por ejemplos...
8. 1º Brainstorming Brainstorming del equipo y definición de funcionalidades Es importante tener el foco y el target claro de la aplicación antes de empezar Los usuarios móviles (es nuestro caso) son muy impacientes y necesitan tener la información muy clara y enfocada.
9. 2º Diagrama de flujo No tiene que ser de toda la aplicación, pero si del flujo de usuario más importante. Es imprescindible para bocetar saber a donde y de donde viene el usuario en esa pantalla
10. 3º Boceto Hay muchas herramientas a utilizar pero la más importante (y productiva) es el lápiz y el papel. Este proceso es intentar plasmar todas las ideas recogidas en reuniones en algo concreto. El ensayo y el error es el proceso. Llévate una goma, porque vas a borrar.
11. 4º Wireframe NO CONTIENE DISEÑO DE NINGÚN TIPO Nos basamos en prototipos de bajo nivel para no influir en el producto final Ni siquiera lo encapsulamos en maquetas móviles de iPhone o Android para no influir en la percepción del cliente Muchas veces utilizamos software para hacerlo navegable y ver el flujo de navegación de la aplicación
12. Diseño Una vez aprobado (siempre con la aprobación) montamos las demás pantallas y vamos recortando recursos. Se presenta una linea de diseño de las pantallas principales NO FORMA PARTE DEL PROCESO DE PROTOTIPADO He querido incluirlo porque es la ultima revisión antes del desarrollo
13. ¡Y ahora a programar! Dejaos ya de tonterías y de tiki-tiki y poneos al lío del montepío! Después de la revisión de diseño se realizan revisiones de versiones Alpha y Beta (depende de la magnitud del proyecto) Muchas veces una vez realizado el wireframe ya se pueden ir montando las pantallas aunque se prefiere tener diseño para no ir pisando desarrollo y recursos
14. • Funcionalidades en tiempo de diseño • No revisar el prototipo con el equipo de desarrollo • No identificar bien el target de usuarios • No hacer un estudio de usabilidad de la aplicación • Implementar diseño en wireframes que coaccione la linea de diseño final. • Desvincular al cliente del proyecto ¿Que es Babylon?
15. ¿Sabéis que es lo mejor? Que esto no te asegura un éxito de la aplicación ya que.... El feedback con los usuarios es la ultima frontera Las aplicaciones mutan según el uso de los usuarios, puedes “jartarte” de MVP, estrategias, estudios del target pero como la salida a producción no hay nada! Cuanto más amplio sea tu mercado más impredecible es, en apps móviles muchas veces la salida es global. Es muy difícil prever el uso de tu app a nivel global.
16. ¡Herramientas! • Pencil Project. OpenSource a todo Confort • Gliffy. Herramienta gratuita para diagramas de flujo. • OmniGraffle. De pago pero para nuestro gusto de las más completas del mercado • Prototyper Pro: Muy buena para hacer prototipos de alta fidelidad navegables. Es #MadeinSpain • PopApp: App móvil para hacer tus prototipos navegables en el móvil. Muy útil para presentaciones en cliente Hay miles, pero os vamos a recomendar algunas que hemos probado...
17. Enlaces onFire • Estupendo enlace que habla de alterar el proceso de etapas para alternar el prototipado, el diseño y el desarrollo • Enlace de nuestro amigo Lousfera hablando de distintas herramientas de prototipado • Seguir el Twitter y el blog de Olga Carrera. Hace poco posteé un video suyo muy bueno sobre prototipado. • Consejos de como empezar a diseñar para Android • Grupo en LinkedIn sobre Diseño y prototipado de Apps y Comunidad en Google Plus sobre Diseño de Interfaces
18. Enjoy! @Jorge__Galindo | @47deg_es