En este artículo:
La función de Interacciones se utiliza para crear prototipos aplicando interactividad a cualquier objeto de una página de Moqups.
Cuando añades una interacción a un objeto, haces posible que ese objeto responda a una variedad de desencadenantes mientras está en el modo Vista Previa.
Los dos principales casos de uso de las interacciones son:
- Prototipos, donde las interacciones se utilizan, durante la fase de diseño y prueba, para imitar la experiencia final del usuario del producto desarrollado, ya sea una aplicación o un sitio web.
- Gestión de Proyectos, donde las interacciones se utilizan para organizar información vinculando cualquier elemento individual de un diseño, diagrama, storyboard, mapa del sitio, o la página en su totalidad, a páginas posteriores. Esto ayuda a los miembros del equipo a saltar entre secciones específicas de un proyecto complejo para ver especificaciones, notas, requisitos o detalles relevantes.
Hay dos tipos de interacciones que se pueden aplicar a un objeto:
- Una Interacción de Página se usa para la navegación y vincula objetos designados a otras páginas dentro del propio proyecto de Moqups, o a URLs que están fuera del proyecto.
- Una Interacción de Objeto se usa para imitar la transformación de objetos en la página, como cambiar estados de botones, abrir menús desplegables, mostrar el menú contextual al hacer clic derecho, abrir diálogos modales, etc., simulando la forma en que un usuario experimentará el producto final.
Ambas interacciones pueden aplicarse a cualquier tipo de objeto: Stencil, Icono, Imagen o Plantilla.
Pero también existe un objeto interactivo dedicado, llamado Hotspot, que puede usarse para designar áreas específicas de una página como interactivas.
En este artículo, te mostraremos dónde encontrar el Panel de Interacciones y proporcionaremos más detalles sobre cómo se usan las interacciones tanto en la Creación de Prototipos como en la Gestión de Proyectos. También explicaremos cómo usar el modo Vista Previa para activar las interacciones.
Luego, en los artículos siguientes de esta sección, explicaremos cómo aplicar Interacciones de Página e Interacciones de Objeto, y cómo añadir Hotspots.
Panel de Interacciones
Para abrir el Panel de Interacciones, ve a la Barra Lateral Derecha y haz clic en la Pestaña de Interacciones. La pestaña se volverá azul y abrirá el panel. Allí puedes:
- Ver todas las interacciones que se han aplicado a un objeto
- Crear una nueva interacción
- Añadir un hotspot
En los artículos siguientes de esta sección, demostraremos cómo usar el Panel de Interacciones para añadir tanto Interacciones de Página como Interacciones de Objeto. Pero, por ahora, aquí tienes una breve orientación.
Una vez que hayas hecho clic en el objeto al que deseas aplicar la interacción:
-
Elige un Desencadenante del menú desplegable superior: Al hacer clic o tocar, Al hacer clic derecho, Al hacer doble clic, Entrada del ratón, Salida del ratón.
-
En el segundo menú desplegable, selecciona una Acción de la lista de Interacciones de Página o Interacciones de Objeto.
-
Establece un Objetivo, usando el menú desplegable o el botón de punto de mira, para seleccionar un objeto o una página como destino final de la interacción.
-
Haz clic en Listo para aplicar la interacción.
-
Puedes usar la Vista Previa para ver cómo funciona tu interacción.
-
También puedes usar la sección de Hotspots que aparece a continuación para añadir Hotspots.
-
La sección de Opciones te permite controlar cómo se muestran las interacciones:
- Mostrar hotspots: Muestra los hotspots en los que se puede hacer clic en el modo de edición.
- Mostrar indicadores de interacción: Añade un distintivo luminoso a los objetos con interacciones, en la página y en el Panel de Esquema, cuando estás en el modo de edición.
- Revelar objetivo de interacción: En el modo Vista Previa, muestra un tooltip con la acción y el objetivo cuando pasas el cursor sobre un objeto.
Interacciones en la creación de prototipos
El uso principal de las interacciones es convertir diseños en prototipos. Este paso suele ser la última etapa del diseño de aplicaciones y webs antes de que se lleve a cabo la codificación e implementación.
El proceso de diseño generalmente comienza con un diagrama que representa el flujo del usuario, o con un mapa del sitio para un sitio web. Estas visualizaciones ayudan a transmitir ideas abstractas y generalizadas sobre el flujo de datos y la arquitectura de la información de un proyecto.
Y, a medida que se añaden más detalles, esos diagramas generan storyboards. Los storyboards son visualmente más ricos que los diagramas y pueden ayudar a transmitir los detalles específicos de las pantallas y su flujo de navegación.
Luego, cada elemento de esos storyboards se convierte en páginas propias que contienen wireframes o mockups más detallados que representan el diseño de esa pantalla o página web.
Un wireframe o mockup finalmente se convierte en un prototipo cuando se añade interactividad a esas páginas individuales. La adición de interactividad significa que, antes de que se realice ninguna codificación real, el diseño puede imitar el producto final respondiendo a la entrada del usuario en forma de clics, hovers (entrada y salida del ratón), selección de elementos y navegación de páginas.
Aunque un prototipo no está activo ni es completamente funcional, las interacciones imitan suficientemente la UI eventual para que todas las partes interesadas puedan hacerse una idea del UX final. Los diseñadores, desarrolladores y gestores de producto pueden iterar libremente, probar diferentes versiones y, lo más importante, construir consenso antes de que el producto final entre en el ciclo de producción.
Cuando se completa la fase de creación de prototipos y pruebas, el diseño se entrega a los desarrolladores, tras lo cual cualquier cambio en el diseño resulta costoso e intensivo en trabajo. Usar un prototipo para previsualizar el UX, antes de que los desarrolladores comiencen siquiera a escribir el código, puede ahorrar a tu equipo tiempo, dinero y frustración.
Interacciones en la gestión de proyectos
La función de Interacciones, y especialmente su capacidad para proporcionar enlaces y navegación, tiene muchos usos más allá de la Creación de Prototipos formal dentro del flujo de trabajo de diseño. Muchos usuarios, incluidos Analistas de Negocios, Arquitectos de Sistemas, Gestores de Producto y Desarrolladores, usan Moqups como un espacio creativo compartido donde todas las partes interesadas pueden colaborar y construir consenso.
Para todo tipo de trabajos de diseño y gestión de productos, Moqups puede usarse para crear proyectos rápidos específicos a problemas, o para construir proyectos a gran escala con múltiples usuarios y decenas, o incluso cientos, de páginas. Pero, independientemente de la escala del proyecto, todos tienen varias necesidades en común:
- Organizar información compleja, en una variedad de formatos, y actualizarla en tiempo real
- Proporcionar acceso a una amplia gama de partes interesadas para crear, editar y comentar contenido
- Visualizar requisitos, transmitir contexto y comunicar especificaciones claras
Típicamente, uno de estos proyectos puede incluir diagramas de flujo, storyboards de UX, mapas del sitio, mapas mentales, organigramas, casos de uso y diagramas de arquitectura de información, junto con wireframes, mockups y prototipos.
Con la función de Interacciones, puedes vincular todos esos elementos entre sí y habilitar la navegación instantánea dentro de las páginas del propio proyecto de Moqups, o más allá de Moqups, a Google Drive, Dropbox, Slack, Trello o cualquier URL. Las interacciones también pueden usarse para aplicar Interacciones de Objeto, cuando sea necesario, para demostrar requisitos o especificar elementos de diseño.
Por ejemplo, en un único proyecto de Moqups, podrías tener un diagrama de flujo de trabajo que muestre el proceso de desarrollo de una nueva función para tu aplicación. Con las interacciones, puedes hacer que cada elemento del diagrama sea interactivo para que, cuando los miembros de tu equipo hagan clic en él, sean redirigidos a una nueva sección del diagrama, una página completa de detalles de diseño o una ubicación externa relevante. De esta manera, puedes asegurarte de que cada miembro del equipo conozca el contexto exacto de su tarea y que tenga toda la información necesaria para ejecutarla de forma rápida, independiente y efectiva.
En este tipo de proyecto, todas las partes interesadas pueden navegar, crear, verificar, comentar y contribuir. Y, lo más importante, pueden añadir sus propios enlaces, tanto internos como externos, para proporcionar requisitos actualizados y una única fuente de verdad.
Usar el modo Vista Previa para activar las interacciones
Las interacciones están diseñadas para añadirse a los objetos en el modo de edición, pero experimentarse en el Modo Vista Previa.
Cambiar a Vista Previa activará todas las interacciones del proyecto para que simulen la interactividad del producto eventual, una vez que haya sido desarrollado.
Lee más sobre el Modo Vista Previa aquí.