Creo muchas interfaces de usuario usando JSL, algunas simples y otras mucho más complicadas, pero la mayoría siguen principios similares: los scripts usan plantillas similares, tienen un diseño similar en el lanzador, los informes se ven similares, etc.
En esta presentación, muestro cómo uso JSL para crear interfaces de usuario similares a JMP, qué tipo de plantillas suelo usar y las decisiones que tomo al desarrollar dichas plataformas. También muestro diferentes cuadros de visualización, cómo crear una interfaz de usuario con JSL, plantillas de script, el proceso de decisión que utilizo al crear scripts de interfaces de usuario y algunos consejos y prácticas recomendadas para la creación de scripts en JMP.
Bienvenidos a mi presentación en póster sobre la creación de interfaces de usuario con JSL estructurado. Les contaré un poco sobre mi experiencia. Trabajo en una empresa de electrónica en Finlandia y soy especialista en integración y ciencia de datos en un equipo de integración de datos. Uno de mis trabajos es crear aplicaciones JMP personalizadas, y cómo las creo, o mejor dicho, cómo estructuro mi contenido en ellas, es el tema de este póster. Originalmente, iba a ser un artículo, así que tuve que leerlo rápidamente, pero debería estar bien.
Comencemos. Creo que lo más importante de este póster es que intentes imitar las plataformas JMP. Esto se debe a que los usuarios están muy familiarizados con ellas. Si puedes organizar tu contenido de forma similar a JMP, les resultará mucho más rápido empezar a usar tus herramientas.
Aquí tenemos un ejemplo de la plataforma JMP. En este caso, se trata de una distribución muy simple. A la izquierda, tenemos el lanzador y a la derecha, el informe. Tanto en el lanzador como en el informe, teníamos el icono del título de la ventana. JMP organiza el contenido en cuadros de panel. A la izquierda, se generan selectores de columnas en el selector de columnas de filtro. Debajo, a veces, se encuentran estas opciones adicionales.
En el centro, se encuentran estos botones. Los dos siguientes botones contienen cuadros de lista de columnas, donde el usuario puede recopilar las columnas que desea analizar o con las que desea realizar acciones. Este nombre predeterminado también indica para qué se utilizan estas columnas. En el lado derecho, se encuentran los botones de acción.
En los informes, la estructura suele ser muy vertical. En este caso, incluyo estatutos para facilitar mi comprensión. El contenido se estructura en una estructura padre-hijo, una estructura jerárquica, y se ha creado con cuadros de esquema con triángulos rojos. Estamos probando este tipo de estructura porque los usuarios pueden acceder a la arquitectura y los análisis desde estos triángulos rojos. El contenido, los cuadros de diseño, los cuadros de tabla, etc., tienen cierta organización. Sin embargo, los usuarios de JMP están familiarizados con este tipo de estructuras.
Al pensar en su herramienta y sus usuarios, piense en cómo la usarán. Para ello, puede usar guiones gráficos, por ejemplo. No tiene que parecerse a este diagrama. Puede tenerlo en formato cómic si lo desea. También tenemos este tipo de vista: primero, luego hacen clic en algo, luego en la siguiente vista, y así sucesivamente.
Al desarrollar esto, es útil pensar en cómo funcionaría la plataforma JMP para recuperar la familiaridad. No voy a explicarlo en detalle. Este es solo un ejemplo de cómo se podría hacer.
Algunos ejemplos de maquetas. Una demostración rápida o un primer diseño inicial que podrías tener para tu interfaz. Aquí tengo una versión en papel muy sencilla. Me gusta empezar con ella. Son muy fáciles de modificar, actualizar si es necesario y, si encuentras algún problema, puedes recrearla. Normalmente recurro rápidamente a alguien de JMP. Esta es muy simple, pero puedo probarla. Esto funciona y esto no, y modificarla si es necesario. Quizás pueda usar mi plantilla para hacer una más limpia y ver cómo se vería en la realidad.
Siguiente maqueta. Área similar, comenzando con papel. Luego usé una herramienta aparte. En este caso, se llama Excalidraw. Crea una maqueta. Podría incluir notas adicionales, etc., y un prototipo JMP un poco más avanzado, una demostración. Esto ya está en la aplicación del prototipo, pero podrías hacerlo parcialmente.
Tiene un filtro de datos y un generador de gráficos. Esto puede ser totalmente independiente. Contiene imágenes de algún lugar. Si acabas de configurar este diseño, toma esas imágenes y muévelas a herramientas independientes. Probablemente usaré PowerPoint. Es fácil moverlas allí. Puedes estructurarlo allí y luego obtener una mejor visión general de cómo se vería la interfaz de usuario.
A continuación, considere usar plantillas y no olvide la experiencia de usuario. Tengo mis propias plantillas de estilo script. La razón por la que las tengo y las uso es para crear aplicaciones más rápido. Son más robustas y tienden a tener un aspecto más profesional. Una nota adicional: no diseño mis interfaces de usuario para resoluciones mayores ni menores que Full HD, ya que la mayoría de los usuarios aún las usan para resoluciones mayores.
La experiencia del usuario. Dado que JMP es una herramienta muy interactiva, creo que también es importante considerar la experiencia del usuario. No solo la interfaz. Tengo algunos ejemplos de mala experiencia de usuario. Uno de ellos son las ventanas de modelo. Por ejemplo, para compartir la LAN de la plataforma, al ser una ventana de modelo, el usuario no puede volver a la tabla de datos y ver qué columnas debe usar. Primero tendrá que cerrar el lanzador, cerrar la tabla y volver a ejecutarlo. En mi opinión, eso es una mala experiencia.
Otro problema es que las ventanas tienden a redimensionarse si se tienen cuadros de contorno plegables, etc. Intento mantener tamaños de ventana estáticos después de crear la ventana, y luego se utiliza un cuadro de desplazamiento para desplazarse. Por último, no se ocultan las barras de herramientas ni los menús al usuario, ya que en JMP se pueden iniciar plataformas independientes. Se puede tener una plataforma abierta. Ir al menú de la barra de herramientas e iniciar la siguiente plataforma, lo que agiliza mucho el análisis.
Comparando mis plataformas con las plataformas JMP. En la parte superior, tenemos las plataformas JMP. En este caso, es una plataforma estrecha y, en la parte inferior, se ve bastante similar. Selectores de columna a la izquierda y listas comunes donde el usuario las agrega; acciones a la derecha. Creo que la mayor diferencia con el lanzador, en este caso, es que tengo el nombre de la tabla, que se está analizando. En las plataformas de maniobra, es posible que el nombre de la aplicación también sea visible, pero en este caso no.
Pero ahí tengo diferencias más importantes que en nuestros informes. No tengo mis cuadros, porque prácticamente ya tengo todas las opciones definidas para el usuario. No necesitan acceder a los menús triangulares rojos. En las plataformas JMP, sí se necesita acceder a ellos. Puedo usar esos cuadros de página y de hoja.
Creo que lo mejor es que puedo... Organizo mi contenido horizontalmente porque tenemos pantallas más anchas y altas. Muchas plataformas JMP tienden a ser muy largas. Prefiero que sean más anchas porque son pequeñas y ocupan menos espacio. Además, aquí también se ven la tabla y el nombre de la aplicación.
Aquí tengo un ejemplo de aplicación. Vamos a tener dos ejemplos, pero ya los he explicado brevemente. Básicamente, se trata del script que el usuario ejecutaría para ejecutar mi aplicación. He separado las diferentes partes del script con sus respectivas responsabilidades. La configuración, las utilidades y la interfaz de usuario están en su propio script para facilitar su gestión, en mi opinión.
Luego, el script. Este script principal tiene un texto inicial si la tabla está abierta, si la ventana ya está abierta y si todas estas rutas están completas, la aplicación se está ejecutando. Dependiendo de la comprobación, podría generar un error de ventana de modelo al usuario. Por ejemplo, si la ventana ya está abierta (no es una ventana modal), simplemente traeré la aplicación al frente para que el usuario pueda seguir trabajando con ella.
A continuación se muestra básicamente la ventana principal tras ejecutar la aplicación. Esto crea la ventana de la aplicación. Estas también se han separado en expresiones independientes. Es mucho más fácil gestionar expresiones más pequeñas fuera de esta nueva ventana que tener una ventana muy larga (que podría tener cientos de líneas). Normalmente es difícil de gestionar. Estas son más fáciles de manejar.
A veces, puede que tengas que hacer alguna evaluación y muchas habilidades, pero, en general, creo que esto es mejor. Puedes encontrar este ejemplo de la comunidad y algunos ejemplos adicionales de una presentación que hice en un grupo de usuarios finlandés en 2023.
Un breve resumen de este póster. Imite los lanzamientos e informes de la plataforma JMP, ya que los usuarios ya están familiarizados con ellos. Les resultará más rápido familiarizarse con la herramienta. Considere cómo usarán los usuarios su aplicación. Cree guiones gráficos y maquetas rápidamente para ver cómo se vería. Agregue una plantilla. Puede crear una aplicación robusta y profesional con bucles. Familiarícese con los cuadros de visualización más comunes y cómo organizar el contenido en JSL.
Dado que JMP es una herramienta muy interactiva, no olvide la experiencia del usuario, ya que la interactividad de JMP es fundamental. Considere la experiencia del usuario y la interfaz de usuario. Gracias.
