ok

Diseñando Apps: Arquitectura, Wireframes & Prototyping.

Uno de los peores errores que puede cometer un dev shop es omitir o ignorar algunos de las fases en el diseño y análisis de una Aplicación Móvil, ya sea con el propósito de “acelerar” el proceso (con toda intención) y/o por falta de conocimiento.

Las consecuencias de tal acción puede significar la perdida de mucho tiempo, dinero, propuestas no reales, programadores molestos, pérdida de clientes y de seguro el comienzo del final del negocio, ya que la pérdida de clientes por falta de comunicación = mala publicidad (“Word of mouth”) = No Business.

Lo importante es llevar al cliente de la mano en cada etapa o fase del proyecto; Sé de casos que con tan solo unos bullet points van directo al dev team, no quiero contarles la triste historia del resultado pero si les explicaré como lograr mantener a un cliente feliz, satisfecho y presto a continuar haciendo negocios con usted.

 

Arquitectura

La estructura de contenido es el paso inicial y más importante de todas para así conocer los diferentes elementos y su jerarquía a un nivel global. La arquitectura de información puede representarse con una estructura de árbol “tree object” o como un organigrama.

Un diagrama de estructura de contenido bien analizado ayudara al cliente a visualizar los módulos que ayudarán a resolver su problema. En esta fase lo más importante es establecer los objetivos, navegación, contenido y planificación.

 

Wireframes

La utilidad de crear MockUps o Wireframes es determinar los componentes visuales del App. Aquí entra el tema de “Usability” y “User Behaviour”, donde se podrá diseñar y corregir fácilmente que funciona y que no (What?, Where?, How?).

Dibujar Wireframes NO DEBE consumir mucho tiempo, su creación es solo para ayudar al “brainstorming” y usualmente estos se crean utilizando colores en matices negros, grises y blanco.

Antes de empezar a dibujar Wireframes, es importante conocer la audiencia del app (que tipo de personas serán los end-users), objetivo del App y también en qué contexto lo utilizarán, es decir, si abrirán el App en la mañana tomándose un café, en el gym, en la sala de casa, etc. todo esto ayudara en el UX (User Experience) que se aplicará al Prototype.

 

Prototyping

Una vez los Wireframes estas aprobados, hay que llevar los mismos a la vida real (aún sin programación o backend code). Llevarlo a la vida real significa utilizar elementos visuales digitales para llevar lo que tenemos en papel a componentes más reales y/o muy parecidos al resultado final. Su propósito es que el cliente pueda experimentar las interacciones y experiencia de usar el Front-End.

Crear prototipos requiere un tiempo adicional, pero si lo piensas bien vas a perder más tiempo si omites los Wireframes y/o ignoras crearle prototypes al cliente.. ya que el resultado final quizás no sea el esperado ..lo que significa: cliente no satisfecho “…and back to the drawing board”.

NOTA: estos prototipos no contienen los elementos visuales que se trabajará con el artista grafico o app designer. Si trabajas con un “Full-Stack Dev” entonces tienes lo mejor de todo en uno!

Al final, el cliente podrá apreciar el nivel de profesionalismo en tu trabajo y feliz por dos razones: lo hiciste parte de la dinámica en la creación de su App y segundo, quedara súper satisfecho porque el resultado será exactamente lo que se planificó desde sus principios …para evitar a toda costa las cajas de pandora!

Éxitos and Happy Prototyping!