Prototipos sofisticados: por qué usar Axure

“El diseño no es solo lo que parece y se siente. El diseño es cómo funciona”. –Steve Jobs

Se ha demostrado que los prototipos son invaluables para tomar mejores decisiones de diseño. Como artefactos, los prototipos son uno de los entregables centrales en el diseño y creación de prototipos de UX, y como actividad, están en el corazón del proceso de diseño centrado en el usuario. Un prototipo es una amalgama de todo el trabajo de diseño de UX anterior fusionado en un solo producto visual y funcional que se utiliza para validar hipótesis y probar diseños.

Suena bastante fácil, pero en un mundo saturado con una gran cantidad de herramientas de diseño, elegir la herramienta de creación de prototipos adecuada no es una tarea fácil que requiera una cuidadosa consideración. Los diseñadores deben tener en cuenta los costes, las funciones, la integración con otras herramientas de diseño, la curva de aprendizaje, las funciones de colaboración y la plataforma de reproducción para la revisión y las pruebas de los usuarios.

Para complicar las cosas, muchos recién llegados han irrumpido en escena recientemente. Hay herramientas solo en línea, por ejemplo, Figma, InVision, UXPin, Framer, Marvel, Principle, Origami, y algunas son software de escritorio tradicional como Sketch y Adobe XD con creación de prototipos integrada como una extensión de su funcionalidad. Todos tienen sus ventajas y desventajas, características e integraciones.

Pero lo nuevo no siempre es mejor. Todavía hay algunos viejos caballos de guerra en el campo de batalla: Axure es uno de ellos. Cuando los diseñadores quieren entregar prototipos detallados y ricos en características, Axure es digno de otra mirada. Axure ha existido por un tiempo, años antes de que nacieran las herramientas recién acuñadas mencionadas anteriormente, y muchos diseñadores lo consideran el abuelo de las herramientas de creación de prototipos y wireframing dotadas de capacidades profundas.

¿Por qué usar Axure?

Hoy en día, en su mayor parte, los diseñadores usan herramientas de creación de prototipos basadas en puntos de acceso con los que vinculan pantallas y quizás agregan algunas transiciones de pantalla. El problema es que este método no incluye pequeñas interacciones que completan la experiencia general del usuario durante la prueba. Por el contrario, Axure puede manejar fácilmente los detalles sutiles y las microinteracciones que dan vida a un prototipo.

Para explorar más profundamente cómo las personas interactuarían con un diseño específico, los diseñadores pueden construir prototipos con lógica de condición, varias entradas de usuario y animaciones dinámicas que hacen que el prototipo parezca más realista. Es una excelente manera de obtener información valiosa sobre lo que funciona y lo que no.

Tener que saltar entre demasiadas aplicaciones de diseño no integradas también presenta un problema de ineficiencia. El flujo de trabajo de diseño típico involucra a un diseñador que crea interfaces de usuario en Sketch y crea prototipos en otra herramienta como InVision o Marvel. Después de eso, el diseño se entrega a los desarrolladores utilizando otra herramienta más, como Zeplin.

Axure es una aplicación totalmente integrada que elimina la necesidad de utilizar diferentes herramientas de diseño. Por ejemplo, después de crear flujos de usuarios, mapas de viaje del cliente, personas, guiones gráficos, mapas de sitios, arquitectura de información y estructuras alámbricas, los diseñadores pueden continuar fácilmente con prototipos complejos, directamente dentro de Axure. Cuando los diseñadores entregan proyectos a los desarrolladores, pueden tener una mejor idea de cómo se debe implementar algo y pueden trabajar de manera más efectiva con los gerentes de productos para estimar el alcance y evaluar la viabilidad técnica.

El mayor impedimento para ofrecer productos y servicios bien diseñados es la falta de comprensión de nuestros usuarios. Jared Spool, UIE (Ingeniería de interfaz de usuario)

Al igual que otras herramientas de diseño, Axure se puede tomar rápidamente y poner en uso rápidamente. Los widgets incorporados con los que crear interacciones dinámicas que incluso los no programadores pueden entender pueden usarse de inmediato para interacciones impresionantes. Los diseñadores que deseen profundizar e invertir tiempo para aprender la aplicación pueden crear aplicaciones y sitios web complejos y realistas con interacciones complejas.

Ejemplos de prototipos de Axure de la vida real

Los diseñadores siempre tienen poco tiempo y necesitan demostrar cómo funcionarían los flujos de usuarios específicos en las revisiones y los diseños de productos de prueba con los usuarios. Las capacidades básicas de Axure pueden brillar en estos escenarios porque los diseñadores pueden convertir rápidamente imágenes de otras herramientas de diseño en prototipos interactivos.

En el siguiente ejemplo de producto B2B, se exportaron una serie de pantallas de OmniGraffle como PNG. Las imágenes fueron recortadas, enmascaradas y puestas en capas en Axure. A continuación, se agregaron puntos de acceso y componentes interactivos de la biblioteca de widgets de Axure, como menús desplegables y campos de formulario, para crear un prototipo completo y funcional. Luego, las características y funcionalidades del producto se probaron mediante pruebas de usuario moderadas y remotas, lo que condujo a iteraciones de diseño rápidas basadas en los comentarios de los usuarios.

En otro ejemplo, los equipos de diseño e ingeniería pudieron encontrar la mejor manera de diseñar dos widgets particularmente complicados para un producto B2B complejo. El objetivo era diseñar filtros avanzados y un selector de columnas personalizado para una tabla con muchos datos que mejoraría la facilidad de uso y también era técnicamente factible.

En este escenario, se exportaron imágenes de diferentes estados desde Sketch y se agregaron y animaron interacciones rápidas en Axure. Se agregaron componentes de la interfaz de usuario, como botones y casillas de verificación, para demostrar las interacciones y sus efectos. Los equipos pasaron por varias iteraciones que fueron revisadas y probadas. Con otras herramientas de creación de prototipos, este esfuerzo puede haber tomado mucho más tiempo.

Características y beneficios de Axure

Hace poco trabajé en una empresa que solo usaba prototipos básicos de pantalla a pantalla creados con InVision y nunca había realizado muchas pruebas de usuario. Para probar una próxima característica importante del producto, se me encomendó la creación de un prototipo detallado del producto. Mucho dependía de esta nueva característica, y las partes interesadas querían hacerlo bien.

Me tomó menos de dos días crear un prototipo detallado en Axure con diferentes estados y muchas microinteracciones que demostraron cómo se comportaría el producto en diferentes escenarios. Como beneficio inesperado, surgieron muchos casos extremos que el equipo de diseño pudo abordar.

Durante las pruebas, pudimos ver dónde los usuarios tuvieron problemas con el diseño y por qué , lo que no hubiera sido posible con un prototipo menos detallado construido con pantallas estáticas. Como resultado, pudimos abordar rápidamente los problemas que encontramos.

También pasé el prototipo a los desarrolladores para mostrarles dónde estaban los puntos de interrupción del diseño receptivo, cómo se suponía que debían verse los estados de enfoque o error y cómo se suponía que funcionaba la búsqueda predictiva.

Cuando los desarrolladores front-end pudieron tener en sus manos el prototipo, también les hizo la vida mucho más fácil. Incluso los desarrolladores de back-end apreciaron el prototipo porque pudieron ver cómo se suponía que funcionaría el producto final.

Este tipo de creación rápida de prototipos, pruebas e implementación de una nueva característica del producto fue mucho más rápido que cualquier otro desarrollo de características que hubieran realizado anteriormente, y surgieron menos problemas cuando llegó la fase de control de calidad.

Cuando todo estuvo dicho y hecho, todos en el equipo mencionaron lo útil que fue el prototipo detallado y pidieron que este tipo de proceso de creación de prototipos se hiciera con más frecuencia. La conclusión es que crear, revisar y probar un prototipo detallado puede marcar una gran diferencia. Todo el equipo pudo ver interacciones integrales esenciales que fueron significativas para los usuarios.

Axure nos permite probar todo, incluso los casos de uso más complejos. Nuestros prototipos se ven y actúan como si fueran reales. Julie, Laboratorio de experiencia del usuario

Características y fortalezas de Axure

Los diseñadores no necesitan saber codificar para crear prototipos complejos, dinámicos y ricos en funciones en Axure. Se pueden configurar interacciones sofisticadas e intrincadas utilizando su panel Interacciones con declaraciones directas de "si esto, entonces eso". A continuación se muestra una lista de algunas características adicionales de Axure:

Prototipado Básico y Avanzado

• Widgets incorporados para creación rápida de prototipos y wireframing
• Un entorno de arrastrar y soltar
• Creación de prototipos basados ​​en navegador sin codificación
• Crear interacciones a partir de recursos de Sketch
• Emulación móvil y visualización de dispositivos móviles
• Campos de formulario de trabajo que permiten la entrada del usuario
• Adición de lógica condicional, variables y expresiones
• Trabajar con contenido dinámico y vistas adaptables
• Adición de efectos de animación
• Visualización de prototipos sin conexión
• Bibliotecas de widgets personalizados
• Integración y complementos de Adobe XD
• Compartiendo prototipos en Axure Cloud que se pueden ver en un navegador

Coautoría y colaboración

• Axure RP y Axure Cloud permiten que varias personas trabajen en el mismo proyecto al mismo tiempo.

Activos compartidos

• Cree y comparta bibliotecas de componentes interactivos e importe activos desde Sketch.

Entrega del desarrollador

• Publique diseños desde RP y Sketch a Axure Cloud para líneas rojas automáticas más CSS y exportación de imágenes.

Documentación y especificaciones

• Cree flujos de procesos, desmontajes de productos y especificaciones visuales.

Mini caso de estudio de creación de prototipos de Axure

Para mostrar las capacidades de Axure que van más allá de los prototipos simplistas de pantalla a pantalla, creé algunas pantallas con interacciones sutiles para Zalando, un sitio de comercio electrónico existente. Una vez finalizadas, todas estas secuencias prototipo se exportaron a HTML y cualquier persona, en cualquier lugar, podía revisarlas en un navegador utilizando Axure Cloud.

Primero, creé algunas interacciones en el sitio demostrando un mega menú, búsqueda, desplazamiento horizontal a través de productos, favoritos y suscripción a un boletín informativo.

En una página de listado de productos, creé efectos de desplazamiento en las miniaturas debajo de la imagen principal del producto para mostrar el producto en diferentes colores (intercambiando imágenes al pasar el mouse). También agregué un producto como favorito nuevamente y un widget desplegable para filtrar la página de listado de productos al establecer un rango de precios.

A continuación, en la misma línea que en la pantalla anterior, quería demostrar el intercambio de diferentes imágenes de productos al pasar el mouse sobre las imágenes en miniatura en una página de detalles del producto. También agregué otra funcionalidad de desplazamiento para que los compradores pudieran ver la descripción del producto, información sobre el tamaño y el ajuste, la entrega y las reseñas. Por último, incorporé un selector de tallas y añadí el producto al carrito de la compra.

Ilustrando el siguiente flujo de usuario, quería mostrar cómo funcionaría la administración de un carrito de compras, por ejemplo, eliminar un producto del carrito, usando sutiles diapositivas, fundidos y animaciones de reemplazo de elementos. No se utilizó ningún código para crear estas microinteracciones sutiles.

Por último, pero no menos importante, quería mostrar transformaciones sutiles de la interfaz de usuario en la pantalla de inicio de sesión cuando las personas ingresan información de inicio de sesión incorrecta y qué mensaje de error se muestra.

Estas interacciones sutiles y las transformaciones de la interfaz de usuario son útiles cuando se prueban las características del producto porque los diseñadores y los investigadores de usuarios pueden realizar pruebas de usuario más detalladas y obtener información más profunda sobre las reacciones de las personas a un sitio de comercio electrónico. Demuestran una apariencia específica y sofisticada que no sería posible o podría resultar muy difícil de crear con otras herramientas de creación de prototipos.

Resumen

En la búsqueda de las últimas y mejores herramientas de creación de prototipos y creación de esquemas, los diseñadores a veces pasan por alto herramientas establecidas y capaces que han resistido la prueba del tiempo.

Los diseñadores deberían darle otro vistazo a Axure. Debido a su profundidad, conjunto de características y flexibilidad, Axure es una herramienta robusta y capaz en comparación con otras soluciones, y la empresa continúa actualizándola para mantener su relevancia como herramienta de diseño.

Se puede descargar una versión de prueba gratuita de Axure. Los diseñadores pueden exportar interfaces de usuario desde Sketch, importar a Axure y crear prototipos de aspecto realista. También hay muchos tutoriales disponibles para cada tipo de proyecto (en YouTube y en el sitio de Axure), y los widgets de Axure listos para usar también están ampliamente disponibles para descargar (gratis y de pago).

• • •

Lectura adicional en el blog de diseño de Toptal:

• Perfeccione su proceso de diseño de UX: una guía para el diseño de prototipos
• Los 10 entregables de UX que usan los mejores diseñadores
• Mitos de UX: creación de prototipos, pruebas de usuario y entregables de UX
• Tutorial de Framer: Cómo crear impresionantes prototipos interactivos
• Domina tu oficio con estas herramientas UX superiores