La UX (User Experience) es cada vez más importante a la hora de crear un proyecto Web o una APP y es por eso que en las fases preliminares hacer un mockup interactivo marcará la diferencia. Actualmente existen muchas formas de presentar un proyecto para crear una Web e infinidad de herramientas para hacerlo. Pero, dependiendo de la envergadura del mismo, es esencial que decidamos bien cómo trabajaremos, sobre todo en las fases preliminares.
De hecho, una evolución habitual en proyectos muy grandes suele ser la de iniciar un wireframe para sentar las bases del proyecto y los elementos que entran en juego, presentar el look&feel en estático y por último trabajar la UX con el mockup interactivo o prototipo. Existen muchas herramientas que nos permiten realizar estos mockups interactivos, pero éstas son las más destacadas:
- Sketch: Quizá la más famosa y extendida en el mercado dirigida al ecosistema Mac.
- Adobe XD: Una potente herramienta de la casa Adobe, que permite interacción completa con herramientas como Illustrator, pudiendo importar un proyecto completo por capas y preparado para empezar el prototipado.
- Moqups: Herramienta rápida y con gran cantidad de elementos prediseñados de gran utilidad.
- Balsamiq: Otra de las más populares, sencilla y rápida.
- Axure: Quizá la más compleja de utilizar, pero sin duda de las más completas del mercado.
- InVision: Con una gran capacidad para trabajar de manera colaborativa, ofrece una versión gratuita prácticamente perfecta para diseñadores individuales.
- Figma: Muy similar a la anterior, cuenta con una interfaz colaborativa y una versión gratuita bastante interesante.
Pero, ¿qué ventajas tiene presentar un mockup interactivo en la fase inmediatamente anterior al desarrollo?
Empezar a desarrollar sin dudas
El tiempo en la fase de desarrollo es oro y, ya que es la fase más costosa y en la que cualquier variación supone grandes consecuencias, lo mejor es llegar a ésta con las ideas lo más claras posible y con el proyecto, en fase de diseño, completamente aprobado por todas las partes. Para ello, lo mejor es que el cliente final haya podido navegar y probar la experiencia de una manera realista y lo más cercana a cómo será una vez finalizado el proyecto.
Los programas de prototipado, o mockups interactivos, tienen un papel esencial en el tiempo invertido y en el coste final del proyecto.
Betatesting interactivo
La capacidad de trabajo colaborativo de casi todas las herramientas nos permite testear el prototipo casi a tiempo real, consiguiendo llegar a la versión final con todos los posibles problemas detectados previamente.
Test de usabilidad con público real
La usabilidad hoy en día es uno de los factores que afectan directamente al SEO de la Web o la APP. Por tal motivo, hacer un test previo al desarrollo con un público controlado sobre la usabilidad del proyecto es una ventaja valiosísima de los mockups interactivos. Una vez realizada la prueba con un público preliminar, se valoran todas las observaciones y propuestas de cambio, se aplican en el mockup y esto llega directamente a la fase de desarrollo ya implementada.
La eficacia, ante todo
El mockup interactivo o prototipado es una fase previa al desarrollo en la que se sientan las bases del diseño y los estilos posteriores que irán en la fase final. Por lo tanto, es interesante que ese trabajo adelantado pueda pasar a desarrollo en su mismo idioma.
Todas las herramientas que sirven para crear el prototipo del proyecto tienen la opción de convertir cualquier elemento en una información vectorial (Exportación a SVG) o de generar el estilo correspondiente para su posterior implementación (Código CSS). Además de ahorrar tiempo, esto supone un valor espectacular para los desarrolladores, quienes ya no tienen que averiguar los estilos del proyecto, sino que directamente los sacan del mockup sin posibilidad de error por su parte.
Comunidad de desarrollo (plugins)
Es tanto el interés que despierta este tipo de herramientas que se ha generado una comunidad inmensa de desarrollo de plugins que amplían funcionalidades a las mismas.
En la mayoría de las herramientas estos plugins están activos en una sección del programa donde decides cuál quieres instalar y de manera natural se implementa como una pieza más de la herramienta. Mapas de localización, integración de vídeo, exportación del mockup en HTML o integración de formularios con validación de credenciales son algunas de las funciones que los plugins pueden ampliar a nuestras herramientas.
El SEO desde el principio
La posibilidad de trabajar la estrategia SEO desde una representación del proyecto final supone trasladar al equipo que se encarga de esta tarea la posibilidad de implementar ciertos cambios visuales para que vean cómo puede afectar la estrategia SEO al diseño.
Responsive
Desde las herramientas no se puede preparar el diseño responsive. Sin embargo, es esencial que puedan crearse diferentes tamaños y observar las diferencias de interacción entre sí, ya que no es lo mismo una navegación en escritorio que en una tableta o un dispositivo móvil.
Una Web vista en escritorio admite mucha menos gamificación o experiencias a la hora de interactuar con los elementos. En cambio, la versión móvil de la misma sí pide simplificar los procesos y utilizar los movimientos de arrastre, touch e incluso sensores internos del dispositivo (como giroscopios) para crear una experiencia mucho más completa y amigable, que consiga mantener al usuario más tiempo en nuestra APP o Web. La posibilidad de testear todo esto antes de entrar a desarrollo es absolutamente esencial, ya que cualquier implementación de este tipo es un esfuerzo nada desdeñable.
Conclusión
Saltarse la última fase de diseño, en la que la experiencia de usuario y la usabilidad son los protagonistas, revierte directamente en el tiempo final de desarrollo, la calidad y el coste de cualquier proyecto Web o APP. Las posibilidades que nos ofrecen estos diseños en las fases preliminares son absolutamente esenciales y mucho más cuanto más grande sea el proyecto.