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.
Tabla de Contenidos
Diseño de prototipos: Pautas principales
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.
Niveles de fidelidad
- Árbol de contenidos: El árbol de contenidos es uno de los pasos más importantes dentro de la arquitectura web de tu producto final. Con él, definimos la estructura de navegación de un sitio web y los niveles de profundidad de cada página, además de como se conectan entre ellas. Esta etapa es fundamental para definir un diseño de navegación óptimo, usable e intuitivo.
- Baja Fidelidad: En el diseño de prototipos de baja fidelidad empezamos nuestra primera toma de contacto con el prototipado. Son un borrador de lo que será nuestro producto final. Definen el esqueleto de nuestras páginas y nos ayudar a ver la estructura que obtendrá nuestro producto final. Los realizaremos mediante Wireframes con el software InVision.
- Alta Fidelidad: En etapa de diseño de prototipos, trabajamos con los prototipos de baja fidelidad, y es cuando empezamos a otorgarle un diseño visual, definimos colores, tipografías o iconografía. En la etapa de diseño de prototipos de alta fidelidad obtenemos el producto final. Es el producto más cercano a la realidad y es aquí donde le integramos la interactividad. En esta etapa trabajamos con softwares de prototipado como Figma o Zeplin.
Metodologías
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.
Patrones de diseño
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.
OOUX: UX Orientado a Objetos
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.
Definición de Flujo de Tareas
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.
Etapas de prototipado
Árbol de contenidos
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.
Diseño de Prototipos de Baja Fidelidad
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.
Diseño de Prototipos de Alta Fidelidad
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.
Zeplin
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.
