Kit SAP Fiori UI: para una UX empresarial brillante

¿Quieres diseñar aplicaciones web y móviles intuitivas y muy atractivas para tu equipo, al tiempo que mejoras la UX en toda tu empresa? El kit SAP Fiori UI de Justinmind es tu respuesta.

La mejora de la experiencia de usuario interna anima a los equipos a trabajar con un enfoque de sus tareas centrado en el usuario. Gracias al enfoque de la experiencia de usuario de SAP Fiori, es más fácil diseñar aplicaciones web y móviles que aumenten la productividad, introduzcan menos errores en los proyectos y reduzcan los costes de soporte. Sigue leyendo para saber cómo hacerlo con nuestra herramienta de creación de prototipos.

Sap Fiori es el principal marco de diseño para el software y las aplicaciones de SAP. Las apps de SAP Fiori se han diseñado para ayudar a las organizaciones a aumentar la productividad y la transparencia, así como para mejorar la satisfacción de los usuarios, examinando cómo trabajan los equipos y cómo priorizan los usuarios las funciones y las tareas. El Launchpad de SAP Fiori cuenta con más de 300 apps. Con un diseño mobile-first en su centro, las aplicaciones son responsivas, es decir, están disponibles para escritorio, tableta y móvil.

Hay 3 tipos de aplicaciones con las que experimentar Fiori: transaccionales (para realizar transiciones SAP en aplicaciones móviles y escritorio, por ejemplo, solicitar vacaciones), hojas informativas (por ejemplo, para ver contratos de compra centralizada) y analíticas (para mostrar medidas clave de rendimiento).

Crear prototipos de tus aplicaciones antes del desarrollo debería ser una práctica recomendada. Imagina que creas una aplicación, la lanzas a toda tu organización y falla. No sólo falla, sino que la mala experiencia de usuario ralentiza a tu equipo y disminuye su productividad. «Una mala UX disminuye la productividad de un equipo cada hora de cada día», dice Martin Wilson, Director de Bright Interactive. La creación de prototipos te permite experimentar con soluciones antes del desarrollo, para que sólo se materialice la mejor solución. Al crear prototipos de tu diseño de Fiori con Justinmind, puedes implementar la arquitectura SAP desde el principio y probarla en tu equipo sin interferir en su flujo de trabajo, procesos o herramientas reales. Crear la experiencia de usuario de SAP Fiori en un prototipo Justinmind es super sencillo. Combinando los planos, marcos y elementos de UI de la aplicación Fiori con las funciones interactivas y receptivas de Justinmind, podrás dar vida a la experiencia SAP en tus prototipos con el mínimo esfuerzo.

Los elementos UI de Sap Fiori se crearon para permitir la coherencia de diseño y marca entre las aplicaciones SAP Fiori. Se alinean con los patrones de aplicación más utilizados dentro del marco SAP Fiori. Los elementos de UI de Fiori, las plantillas de diseño y las fuentes de iconos son plantillas listas para usar para los diseños o planos de SAP Fiori (ver más abajo). Utilízalas para ayudarte a visualizar la experiencia completa del usuario SAP en tus prototipos de aplicaciones Justinmind. Las plantillas de diseño se han creado teniendo en cuenta el diseño adaptable, y están disponibles en tres variantes: escritorio (L), tableta (M) y móvil (S).

El kit de UI de Justinmind para Fiori es intuitivo y, cuando lo utilizas para construir tu prototipo de aplicación, te da una impresión realista de tu diseño final de SAP Fiori. Puedes encontrar todos los elementos e iconos de interfaz de usuario de SAP Fiori en la sección «SAP_icons» del kit de interfaz de usuario en Justinmind. Elige entre más de 200 widgets visuales e interactivos, entre los que se incluyen:

• Elementos de UI de acción que pueden utilizarse para añadir interacción a tus prototipos de aplicación. Las hojas de acción te permiten crear una lista de elementos para que el usuario complete tareas, como enviar un boletín a una lista de posibles clientes potenciales de marketing. Combina la amplia selección de botones con los eventos de Justinmind para que tus prototipos sean interactivos.

Consejo: echa un vistazo a las funciones de creación de prototipos basados en datos de Justinmind, que te permiten simular datos reales en tus prototipos de aplicaciones Fiori. Podrás presentar datos realistas y precisos cuando pruebes los prototipos.

• Los contenedores te ayudan a agrupar y mostrar juntos varios elementos de UI, por ejemplo dentro de un carrusel o un panel. Utilízalos cuando necesites mostrar u ocultar información adicional.
• Los elementos de mensajería son ideales para proporcionar al usuario información sobre sus acciones dentro de la UI. Incluyen ventanas emergentes, mensajes de advertencia y de error.
• Las barras de herramientas ayudan a mantener la coherencia de la marca en todas las aplicaciones. Utiliza las barras de herramientas de cabecera y pie de página en tus aplicaciones SAP Fiori responsivas, para escritorio, tableta y móvil.

El Launchpad de SAP Fiori es la página de inicio de tu aplicación Fiori. El Launchpad es donde aterrizan los usuarios una vez que han iniciado sesión. Tiene un diseño estándar para todas las aplicaciones y un contenido predefinido, lo que ayuda a agilizar los procesos de implementación y a familiarizar a los usuarios con Fiori. El Launchpad puede utilizarse en ordenadores de sobremesa y móviles, aprovechando el marco de diseño adaptable.

Plano de planta es un término general que abarca los distintos tipos de diseño, la estructura de los controles utilizados y la forma de tratar los distintos casos de uso. Una aplicación contiene normalmente varias páginas, y cada página muestra un único plano. Con los planos de planta puedes crear prototipos de diferentes pantallas y diseños de sesión de UI, así como de la estructura de los controles para diferentes casos de uso. El kit de UI de Justinmind incluye los planos de planta de la página de objetos, la página inicial, el informe de lista, el asistente y la lista de trabajo de SAP Fiori. Esto es lo que puedes hacer con cada uno: Los planos de planta de la página de objetos permiten al usuario visualizar, crear o modificar un objeto. El plano contiene cabeceras flexibles y navegación con anclajes y pestañas. Su diseño flexible y responsivo te permitirá adaptar tu diseño a cualquier tamaño de pantalla de SAP Fiori (pequeña, mediana o grande), y por tanto a diferentes escenarios de usuario. Combina el plano de la página de objetos con la navegación por migas de pan de Justinmind para obtener un desglose jerárquico padre-hijo. Utiliza el plano de planta de la página Objeto para un sitio web de comercio electrónico, donde el usuario necesita revisar el producto antes de comprarlo. Los planos de planta de la página Inicial deben utilizarse como guía para guiar al usuario hasta un objeto y/o para modificarlo – este plano de planta sólo debe utilizarse para mostrar un objeto (utiliza el plano de planta del informe de lista para múltiples objetos). Utiliza el plano de la página inicial para una aplicación de escaneado de códigos de barras, en la que cada escaneado introduce un nuevo objeto y la información relacionada con cada campo de entrada. Los planos de informe de lista ayudan al usuario a navegar hasta una página con varios objetos. Desde este plano, el usuario se centra en filtrar los datos para crear una lista. Utiliza el plano del informe Lista para una aplicación de comestibles online, con cada artículo de la compra como un objeto que puede ordenarse según sea necesario. Los planos de planta de Listas de Trabajo muestran una lista que debe procesar el usuario. Normalmente, el usuario revisará cada artículo de la lista y tomará medidas. Utiliza el plano de la Lista de Trabajo para organizar un conjunto de requisitos al inicio del proyecto. Los planos de planta de los asistentes son recorridos para guiar al usuario a través de tareas largas o desconocidas, dividiendo la tarea en trozos más pequeños y ayudándole a navegar por cada trozo. Una vez completado el recorrido, aparecerá una página de resumen con toda la información en modo de sólo lectura. Este plano puede utilizarse tanto en pantalla completa como en modo de pantalla dividida. Utiliza el plano del Asistente para rellenar un cuestionario o para instalar una nueva impresora en un PC.

Hay dos tipos de marcos centrados en la experiencia de usuario disponibles en SAP Fiori:

El Analysis Path Framework (APF) es un marco de aplicación Fiori que permite un desglose interactivo y analítico para aplicaciones orientadas a gráficos. Como marco configurable, es la experiencia SAP ideal para ver y analizar indicadores clave de rendimiento, similar al panel de control de Google Analytics. Gracias al diseño altamente visual del APF, los usuarios pueden explorar fácilmente cada paso de su objetivo y filtrar la información posteriormente. De hecho, permite al usuario crear su propia ruta de análisis flexible. Las aplicaciones Fiori basadas en APF son responsivas y, por tanto, ayudan a mantener una experiencia de usuario SAP coherente en dispositivos de escritorio y tabletas. Las páginas APF constan de un área de cabecera, un área de visión general (la visualización de la ruta de análisis), un área de detalles (la visualización del paso de análisis) y la barra de herramientas de pie de página.

El marco de desglose SAP Smart Business es una aplicación analítica de Fiori. Este marco permite al usuario ver y analizar los datos de un único indicador clave de rendimiento (en lugar de varios, como con el APF). Al igual que las aplicaciones basadas en APF, el marco Smart Business también es responsivo y puede utilizarse en ordenadores de sobremesa y tabletas. El diseño consiste en una cabecera y áreas de gráficos.

Combina estas aplicaciones con el prototipado basado en datos de Justinmind para obtener un prototipo web o de aplicación muy potente y analítico.

Empezar a diseñar aplicaciones funcionales con el kit de UI de SAP Fiori de Justinmind es pan comido. Sólo tienes que seguir estos sencillos pasos:

1. Descarga la herramienta de creación de prototipos Justinmind
2. Descarga SAP Fiori desde nuestra página de kits de UI
3. Abre Justinmind y crea un nuevo prototipo web
4. Importa el kit de UI a Justinmind
5. ¡Diviértete diseñando aplicaciones SAP Fiori!

Con Justinmind, puedes crear prototipos de aplicaciones SAP Fiori muy realistas sin necesidad de código. Esto te ahorrará tiempo, recursos y estrés.

Lo primero que tienes que hacer es tener una idea de lo que quieres construir, y de los elementos de diseño y datos que necesitarás para crear el prototipo. Por ejemplo, vamos a crear un directorio de personal online en el que se puedan realizar búsquedas. Necesitaremos una lista con los nombres de cada miembro del personal, su cargo y su ubicación, que luego importaremos a Justinmind.

De acuerdo con la experiencia SAP, tu aplicación debe basarse en roles. Esto significa pensar en quiénes son tus usuarios y cuáles son sus necesidades. Crear user persona te ayudará a contextualizar tu prototipo y a visualizar a tu público clave. Considera quién va a utilizar este directorio y para qué. Una vez que hayas dado con tu user persona, tendrás que decidir qué tamaño de prototipo vas a construir. ¿Será para escritorio, tableta o móvil? Con Justinmind y SAP Fiori, puedes diseñar fácilmente para los tres tipos de dispositivos.

Una vez que hayas definido los elementos de tu prototipo, es hora de pasar al wireframing. Lo primero que debes hacer es wireframear las páginas de tu aplicación, creando una pantalla diferente en Justinmind para cada página. A continuación, puedes añadir un plano Fiori a cada pantalla. Por ejemplo, puedes utilizar un plano de informe de lista para enumerar todos los miembros del personal que el usuario puede clasificar.

Ahora es el momento de añadir algunos detalles a nuestro wireframe y darle vida. El kit de UI de SAP Fiori en Justinmind tiene una impresionante colección de elementos de UI para hacer tu wireframe más visual. Utiliza hojas de acción para crear una lista de miembros del personal. El usuario podrá añadir, eliminar y duplicar las entradas según sea necesario. No te preocupes todavía de rellenar las entradas, ya llegaremos a eso. Utiliza el control Cargar colección para añadir avatares a las entradas de personal, una barra de filtro para ayudar al usuario a ordenar las entradas, o incluso un árbol para mostrar la jerarquía de un departamento.

Utiliza las funciones de contenido reutilizable de Justinmind: maestros y plantillas. Te serán útiles cuando necesites colocar contenidos o estilos similares o idénticos en distintas pantallas o prototipos.

Utiliza prototipos basados en datos para importar datos reales en tu aplicación SAP Fiori. Imagina que el usuario quiere ver cuántos miembros del personal de toda la organización tienen formación en Microsoft Excel. Podrías ayudarle a visualizarlo en el prototipo de la aplicación utilizando un Fiori Smart Business Framework e importando en él datos sin procesar de una base de datos. Añadir eventos a tu prototipo de app dará vida a tu experiencia SAP. Elige entre cientos de animaciones, efectos de transición y gestos móviles. Después, simula tu prototipo y obsérvalos en tiempo real.

Sap Fiori ayuda a las organizaciones a mejorar su experiencia de usuario en todos los equipos y departamentos, centralizando la información, las herramientas y los procesos, y aumentando la transparencia. Al diseñar soluciones para optimizar tu experiencia de usuario, la creación de prototipos debe ser una actividad central. Diseñar tus aplicaciones SAP Fiori con un prototipo Justinmind te ayudará a validar tus hipótesis de diseño, así como a evitar costosos errores de UX en el futuro.