El diseño de prototipos interactivos es fundamental a la hora de desarrollar un sitio web o una aplicación móvil. Si empezamos a programar desde 0 sin una planificación anterior nos llevará más tiempo y el resultado no será tan bueno. El diseño de prototipos interactivos es un proceso que nos ayudará a que nuestras interfaces sean usables, agilizarán el proceso de trabajo del programador y mejorarán el CRO de nuestra interfaz.
Un prototipo es una simulación del producto final en diferentes grados fidelidad. Trabajando con niveles de fidelidad mejoramos constantemente el trabajo realizado en el nivel anterior y reducidos el número de errores de nuestro prototipo.
En el proceso de diseño de prototipos interactivos se ha de trabajar con una serie de metodologías para mejorar el flujo de trabajo y fomentar el diseño centrado del usuario.
Es necesario crear un producto que al usuario le guste, y esto supone un problema. La mayoría de problemas, ya tienen una solución gracias a los patrones de diseño. Los patrones de diseño es una metodología en la que usamos elementos a los que usuarios ya están acostumbrados, como la iconografía o el diseño web minimalista. Existen webs de patrones como Pttrns.
Si alguna vez has programado con lenguajes como Javascript o PHP, ya conocerás la programación orientada a objetos (POO). En el mundo del diseño de prototipados emplearemos la metodología OOUX. OOUX es una metodología para estructurar un sistema digital con base en objetos reales, muy similar a la POO. Es una metodología que nos ayudará a descubrir qué es lo que busca nuestro público objetivo. Empleamos una matriz denominada “Modelo de OOUX” que nos ayudará a encontrar nuestro buyer persona.
El flujo de tareas son los pasos que ejecuta un usuario para completar una tarea en particular en un sitio web o aplicación. En el diseño de prototipos es necesario definir lo que el usuario ve y lo que tiene que hacer. Hay que identificar los objetivos del sitio web y luego generar una lista de requisitos del usuario que tenemos que traducir a una solución visual a modo de prototipo. El reto es identificar cuáles son las funcionalidades que tenemos que diseñar para comenzar a hacer nuestro prototipo.
Como hemos podido ver, estas metodologías nos ayudan en el diseño de prototipos interactivos, a agilizar procesos y sobre todo a mejorar la experiencia del usuario, ya que en todo momento es lo que se busca a la hora de diseñar un producto digital.
El árbol de contenidos es la representación gráfica de la estructura de navegación de nuestro sitio web o aplicación. Lo emplearemos para definir además la jerarquía y niveles de profundidad de nuestras páginas. Es fundamental no perder de vista los objetivos principales de nuestro producto, y darles prioridad en nuestro árbol de contenidos. Para realizar esta etapa usaremos InVision, un software de diseño de plataformas.
En el diseño de nuestro prototipo Lo-Fi primero generaremos un bocetado rápido a mano. Para hacer el boceto nos ceñimos al flujo de tareas que hicimos en el apartado de metodologías. Acto seguido, mediante InVision usamos la opción Freehand. Con esta opción empezamos a darle forma a nuestro prototipo usando Wireframes. En esta etapa de díselo de prototipos definiremos el esqueleto y la estructura de las páginas de nuestro producto final.
Después de haber definido nuestro Wireframe, empezamos con el diseño de prototipos interactivos. Existen muchos softwares de prototipado para la etapa de alta fidelidad, como Figma, Adobe XD o Sketch.
A la hora de trabajar con un programa de diseño de prototipos es muy recomendable el uso de los principios de Atomic Design. El diseño atómico es un conjunto de reglas, restricciones y principios que luego ayudarán al desarrollador a generar la interfaz de nuestro prototipado. Se ha de definir unas reglas de diseño y estructuración que luego se deberán de seguir en todos los prototipos del producto.
Cuando se haya decido el software de prototipado que se va a implementar, abrimos los wireframes generados en la etapa anterior y trabajamos encima de ellos, a modo de calco. Es fundamental trabajar siempre con las medidas reales del sitio web o de la aplicación final. A lo largo del proyecto se ha de trabajar siempre con las mismas paletas cromáticas, tipografías, iconografías, y recursos gráficos. Estas pautas nos ayudarán a generar una proporción áurea dentro de nuestros prototipos.
Cuando tengamos los mockups generados junto a sus elementos interactivos, es hora de crear el flujo de navegación interactivo. Según qué programa de prototipado que hayas empleado, encontrarás un apartado de prototipado donde, mediante el uso de nexos, conectarás cada una de las páginas que hayas creado en su mesa de trabajo. Podrás reproducir tus prototipos interactivos y visualizar la navegación como si fuese el sitio web.
Cuando tengamos nuestro prototipo generado lo abriremos desde Zeplin. Zeplin es una herramienta colaborativa entre diseñadores y programadores. En este software procesaremos nuestros prototipos de alta fidelidad. Podemos importar múltiples softwares de diseño de prototipos a Zeplin, como Figma o Sketch. Al importar nuestros prototipos, Zeplin se encarga de generar especificaciones paleta de colores, tipografías y anotaciones CSS para nuestro programador. Mediante esta herramienta podremos trabajar en paralelo con el desarrollador y acelerar el proceso de trabajo de nuestro producto final.
Como hemos podido ver, el diseño de prototipos interactivos es un proceso largo, pero si sigues las pautas de este artículo acelerarás notablemente el proceso de trabajo. Con tus prototipos interactivos desarrollarás sitios webs usables, y mejorarás tu CRO en todos los aspectos. Recuerda que desde marketINhouse podemos ayudarte a mejorar tu conversión de ventas y puedes contactar con nosotros para ayudarte a crecer en el mercado digital.
Desde que se presentaron las campañas DemandGen el año pasado, han dado mucho de que…
Dicen que hoy en día quien no tiene un podcast es porque no quiere y…
Tener visibilidad en los resultados de búsqueda no solo es útil, sino esencial para el…
Google Consent Mode V2 no es más que una actualización de Google de cara a…
En el vasto universo del marketing, cada elemento cuenta una historia. Desde el eslogan de…
Dominar Google Ads puede ser un desafío, pero también una gran oportunidad para destacar. Si…