Aunque a ciertos directivos y managers les parezca que desarrollar aplicaciones o herramientas web es cuestión de COPIAR y PEGAR, la realidad dista mucho de esta absurda simplificación.
El desarrollo de aplicaciones de calidad, aunque resulte difícil de creer para la dirección, necesita en primer lugar tener claros los conceptos y requiere de una parte de investigación, otra de planificación y finalmente de suficientes recursos de desarrollo. Todo esto sin duda significa una gran cantidad de tiempo y dedicación.
Desgraciadamente nuestros jefes siempre necesitan las aplicaciones y los desarrollos para ayer y si puede ser antes mejor.
¿Cuál sería el proceso o ruta ideal?
La respuesta a esta pregunta podría ser : SWMP
Un poco críptico soy consciente, pero ahora te explico…
¿Por qué esta ruta?
La necesidad de seguir un proceso de diseño es realmente una cuestión de ahorro. ¿Cuántas veces tenemos que rehacer sistemas? ¿Cuántas veces los productos terminan por no usarse?
Seguir un proceso de diseño nos ayudará a clarificar los objetivos, nos ahorrará re-procesos y nos permitirá optimizar el tiempo de desarrollo. Al principio podría parecer que vamos más despacio, pero la interacción con los usuarios y su constante validación nos permite obtener herramientas realmente útiles y descartar los desperdicios en etapas tempranas del diseño.
¿Cuáles son las etapas de esta ruta?
Las etapas son las siguientes:
- Sketch.
- Wireframe. Podemos añadir Wireflow.
- Mockup.
- Prototype. También denominados como Maquetas.
Un Sketch es un dibujo rápido generalmente realizado con lápiz y papel en el cual plasmamos las ideas principales de un desarrollo. En esta fase lo principal es la creatividad y aplicar la experiencia del diseñador.
Este primer borrador se puede trabajar en conjunto con el cliente o mostrarle nuestras ideas en base a la conversación y los requerimientos recogidos en las especificaciones.
La idea es tener una primera validación de conjunto ya que quizás el producto final sea diferente a esta propuesta inicial.
Así pues, se trata de un diseño de muy bajo nivel y donde como decía antes los elementos fundamentales son la creatividad y la imaginación.
Un Wireframe es la representación de la estructura básica de nuestra aplicación o página web. Se trata de un mapa, no tiene componentes gráficos, ni elementos de diseño como tipos de letras o colores.
Se trata de diseños estáticos y sin ninguna interacción pero que muestran la estructura de la información que tiene que representar el producto final. Por lo general en desarrollos web, se suele crear un Wireframe para la página principal y uno o varios para las páginas de contenidos.
La información que tiene que contener un Wireframe es la siguiente:
- Zonas de contenido y su estructura: Qué contiene y dónde se coloca cada elemento en la página.
- Elementos: Cabeceras, pies de página, formularios, menus, imágenes …
Existen también los Wireflows. Se trata de un conjunto de Wireframes estructurados en un flujo que nos indican el comportamiento y la navegación de la aplicación.
Los expertos indican que esta fase del diseño es una tarea interna del equipo de desarrollo y que mostrar los Wireframes a los clientes puede hacerles pensar que el diseño final del producto sea ese.
Así pues, se trata de un diseño de bajo nivel y que se utiliza en las primeras fases de diseño. Algunas herramientas para la generación de Wireframes son las siguientes:
Comentaba antes que los wireframes con una primera aproximación del diseño que no es atractiva para nuestro cliente y es que el siguiente paso sería la realización de un Mockup. Un Mockup es una representación del diseño de nuestro producto con una calidad media / alta. Aunque por lo general los Mockup no tienen interactividad, sí que se puede dotar de ella.
Los Mockups son diseños en los cuales ya se incluyen imágenes, tipografía y colores. En definitiva se trata de un diseño perfectamente preparado para obtener la validación de nuestro cliente.
Existen multitud de herramientas para la generación de Mockups y entre ellas podemos destacar:
- PowerPoint. Una herramienta de carácter general para la realización de presentaciones pero que se puede utilizar. Existen paquetes de imágenes destinadas a este efecto.
- Balsamic Mockups
- Moqups.com
Un prototipo o maqueta es generalmente una representación navegable de nuestro producto en la cual no están desarrolladas las funcionalidades pero que nos permite ver el flujo de trabajo.
Normalmente se desarrolla en HTML o en un formato de animación navegable. La clave está en permitir la interacción del usuario con la interfaz y que se simulen los procesos del producto final.
Así pues, se trata de un diseño de alta calidad y con el cual podremos validar la Experiencia de Usuario con total garantía.
Una página interesante para acelerar…
Es evidente que lo más importante es tener siempre cerca a nuestro usuario e intentar disponer de su validación en las etapas más tempranas del diseño.
Si queremos ir más rápidos y queremos dar cuanto antes un diseño navegable que puedan validar nuestros usuarios, aquí os dejo el enlace a una aplicación que con tan solo unos dibujos en papel nos permite generar el prototipo: popapp.in
Vídeo Final
Lo cierto es que en muchas ocasiones todas estas etapas se confunden y entre los propios diseñadores se pueden encontrar los conceptos mezclados. Con el objetivo de aclarar un poco más los conceptos os dejo un corto vídeo que creo es bastante ilustrativo:
Don't Give up! 