Charla de Jorge Galindo Cruces en VIII Betabeers Cádiz http://jorge.galindocruces.com/post/46696903774/charla-como-prototipar-mal-una-aplicacion-la

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
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
Plantear primero un wireframe donde visualmente se
especifican las funcionalidades es el camino del bien, amigo
Luke.

4. Te hará trabajar
MENOS
Pensar que tu “no tienes tiempo para eso”, es queridos
amigos un...
MOJÓN
¿Cuantas veces has hecho modificaciones en tiempo de
diseño de la interfaz?
¿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...
Como bien sabemos, vivimos en un país en el que muchas
veces nos cuesta que valoren el trabajo que realizamos.
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.
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.
¡La vinculación emocional del cliente con el proyecto es de
suma importancia para que el resultado sea viable!
Todo va validado por pasos con un tiempo definido de
revisión
Nos blindan del por todos conocido....
“Donde digo digorl ahora digo diegorl”

7. ¿Como hacemos las
cosas en 47º?
Vais a ver muchas formas de realizar el prototipado de un
proyecto pero la mejor forma de verlo es por ejemplos...
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.

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
Muchas veces utilizamos software para hacerlo navegable y
ver el flujo de navegación de la aplicación
Ni siquiera lo encapsulamos en maquetas móviles de iPhone
o Android para no influir en la percepción del cliente

12. Diseño
NO FORMA PARTE DEL PROCESO DE PROTOTIPADO
He querido incluirlo porque es la ultima revisión antes del
desarrollo
Se presenta una linea de diseño de las pantallas principales
Una vez aprobado (siempre con la aprobación) montamos
las demás pantallas y vamos recortando recursos.

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. ¿Que es Babylon?
• 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

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!
Hay miles, pero os vamos a recomendar algunas que hemos
probado...
• 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

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