Storyboard Navegacional

 Por: Andrés Fernando Cuéllar
Experto Técnico Apps.co AppsIcesi

Alexandre Gustave Eiffel diseñó la estructura interna de la estatua de la libertad de New York y su obra más conocida es la torre Eiffel; si el lector se toma la molestia de buscar en la web, podrá encontrar los bocetos en papel de estas grandes obras de la ingeniería y todo porque primero fueron ideas que se plasmaron en un papel, para luego ser llevadas a la realidad por medio de diferentes técnicas. Caso similar debería ser con las iniciativas empresariales de base tecnológica, que desean lanzar un producto o servicio soportado por  software.

Plasmar las ideas en papel hace que surjan nuevos caminos y que las ideas se aclaren, según Todd Zaki Warfel el objetivo es  generar una serie de conceptos, sacarlos de la cabeza lo más rápido posible, y seguir adelante; la ventaja de iniciar el proceso de prototipado en papel está en la identificación clara de la necesidad. Desde la grafología se afirma que el acto de escribir o dibujar sobre un papel estimula todos los hemisferios del cerebro, ayuda a desarrollar la creatividad, aclara los pensamientos. El Dr. Camile Streletsky afirma “Existen en nuestro cerebro y nuestro sistema nervioso relaciones funcionales, no sólo centrifugas sino también centrípetas, y los movimientos que ejecutamos escribiendo repercuten sobre nuestro centro nervioso, modificando el curso de nuestros sentimientos y pensamientos[1]

Para algunas emprendedores es bastante fácil entrar de lleno en la fase de diseño de un sitio web sin antes considerar la experiencia del usuario. De manera prematura dirigen su atención al diseño de la página y la arquitectura de la información del aplicativo, cuando inicialmente deberían centrarse en el diseño de interacción que manejará el usuario. El diseño de interacción es diferente del diseño de la información, esto es a menudo un importante punto de confusión para las startups que inician la construcción de un app, personificando así lo planteado @soyjcuadros “Existen productos tan únicos y específicos que únicamente le sirven a quien los diseñó”.

Diseño de información se refiere a la estructura general de un sitio web y la mejor forma de organizar el contenido; el diseño de interacción es el flujo real que los usuarios siguen para completar tareas como inscribirse en el boletín informativo de un sitio, navegar de una página a otra, o la selección de una serie de productos y luego pasar por el proceso de compra. Se debe pensar en todos los posibles pasos que sus usuarios tienen que tomar para completar una tarea. Debe anticiparse a sus preguntas e inquietudes de cada paso del camino, y pensar en cómo se puede facilitar la finalización con éxito. Si los pasos son demasiado complejos o la interfaz no es clara, los usuarios se pueden sentir frustrados y es probable que abandonan la tarea.

Existe una técnica bastante similar a los diagramas de navegación entre ventanas llamadas user interface flow (diagramas de flujo de interfaz de usuario) también llamados guiones gráficos, diagramas de interfaz de flujo, o mapas del contexto de navegación. El nombre que el lector prefiera no es preponderante en si, lo  importante es tener clara su función y esta es la de permitir modelar las relaciones de alto nivel entre los principales elementos de la interfaz de usuario y de esta manera resolver preguntas fundamentales de usabilidad al cliente. Estos diagramas ofrecen una vista de alto nivel de la interfaz del aplicativo, se puede obtener rápidamente una comprensión de cómo se espera que el aplicativo funcione. Esta herramienta permite validar el flujo general de la interfaz de usuario de la aplicación, además se puede usar para determinar si la interfaz de usuario será usable. Jake Knapp afirma sobre esta técnica “es un juego de planos, en el papel. Estoy convencido de que es una manera muy eficiente de pensar sobre las ideas antes de levantar un ratón”

Img1

Un user interface flow consta de una serie de dibujos que muestran cómo será la navegación en el sistema. Un prototipo de este tipo es muy útil para identificar si se está respetando el patrón de navegación que se había adoptado previamente, para acceder y verificar que cada opción del sistema no requiere más de un número predeterminado de clics, esta técnica se puede utilizar con las pantallas que se constituyeron del  prototipo, bien halla sido en papel o en digital, lo que cambiará será la definición y el nivel de detalle, así como el tiempo necesario para su materialización, repercutiendo principalmente en la percepción del usuario que observará.

Un diagramas de interfaz de flujo puede servir para mostrar un escenario particular de uso del sistema, que comprende solo una parte del prototipo creado, o bien para mostrar cómo es la navegación entre todas las pantallas del prototipo. La finalidad de estos diagramas está en mostrar las rutas posibles de navegación que puede tener la aplicación, es de aclarar que si existen diferentes tipos de usuarios, se debe crear un diagrama por perfil.

DiagramaUsos de estos diagramas

Los user interface flow generalmente suelen tener este tipo de propósitos:

  • Modelar las interacciones que tienen los usuarios con el software.
  • Proporcionar una visión general de alto nivel de la interfaz de usuario para la aplicación.
  • Generar un punto de vista arquitectónico de la interfaz de usuario (Constantine y Lockwood, 1999).
  • Obtener rápidamente una comprensión de cómo se espera que el sistema funcione.
  • Validar el flujo general de la interfaz de usuario de la aplicación.
  • Determinar si la interfaz de usuario será utilizable.

[1] CLAVIER PSYCHOLOGIQUE, nos états d’ame, leurs définitions, leurs causs, leurs effets STRELETSKI CAMILLE Dr. Editorial: Paris, 1942

 

Comentarios