Del curso: Experiencia de usuario (UX) avanzado

Prototipando wireframes

Un prototipo es una especie de montaje con los diseños de tu producto imitando la navegación y funcionalidades que tiene. Los prototipos pueden ser de todo tipo, ya sea en papel o en digital. En papel, deberías esbozar cada pantalla e interacción por separado y explicar en vivo y en directo cómo es la comunicación entre pantallas. Para realizar el prototipo en digital, por otro lado, necesitarás un sotware que te permita crear prototipos utilizando tus diseños. En mi caso, estoy utilizando la funcionalidad de Prototipo, como puedes ver aquí, de Adobe XD. Clicando en alguna pantalla, por ejemplo esta, verás las diferentes conexiones que he creado entre los diseños. Estas conexiones funcionan de modo que, cuando yo clique a un elemento que haya marcado como una conexión, dicho elemento me redirigirá a otra pantalla imitando la funcionalidad de la plataforma. Te voy a mostrar el prototipo que yo he construido siguiendo estos wireframes. Me dirigiré a la parte superior derecha y haré clic en el botón de Play para ver el prototipo en acción, este de aquí. Lo pondré en pantalla completa y a continuación, solo tengo que navegar por el diseño hasta que el puntero del ratón cambie de forma indicándome que ahí existe una conexión. Te recuerdo que esta conexión hará que el diseño cambie. Estas conexiones, las he colocado, por ejemplo, para enviar un mensaje o para ver una fotografía. Te voy a mostrar cómo funciona. Como ves, al clicar la conexión, la pantalla y el diseño han cambiado. Funciona de la misma manera al enviar un mensaje. Los prototipos son muy útiles para hacernos a la idea de cómo será la navegación y funcionalidades de nuestro producto. Se deben mostrar al equipo y a los departamentos involucrados para que todo el mundo pueda validarlo y aportar su perspectiva y sugerencias. Al ser sencillo de construir y no requerir desarrollo ni código, te recomiendo hacer tantos prototipos como necesites antes de lanzarte al desarrollo real de tu producto.

Contenido