Creo molte interfacce utente utilizzando JSL, alcune semplici e altre molto più complicate, ma la maggior parte segue principi simili: gli script utilizzano modelli simili, hanno un layout simile sul launcher, i report hanno un aspetto simile, ecc.
In questa presentazione, mostrerò come utilizzo JSL per creare script di interfacce utente simili a JMP, quali tipi di template tendo a utilizzare e le decisioni che prendo durante lo sviluppo di tali piattaforme. Mostrerò anche diverse finestre di visualizzazione, come creare un'interfaccia utente con JSL, template di script, il processo decisionale che utilizzo per lo scripting delle interfacce utente e alcuni suggerimenti e best practice per lo scripting JMP.
Benvenuti alla mia presentazione poster sulla creazione di interfacce utente utilizzando JSL strutturato. Un po' di contesto. Lavoro per un'azienda di elettronica in Finlandia e sono uno specialista in integrazione dati e data science nel team di integrazione dati. Uno dei miei compiti è creare applicazioni JMP personalizzate e il modo in cui le creo, o meglio come strutturo i miei contenuti in esse, è l'argomento di questo poster. Inizialmente doveva essere un articolo, quindi ho dovuto leggerlo molto velocemente, ma dovrebbe andare bene.
Cominciamo da qui. Credo che la cosa più importante in questo poster sia cercare di imitare le piattaforme JMP. Uno dei motivi è che gli utenti le conoscono molto bene. Se riesci a organizzare i tuoi contenuti in modo simile a JMP, sarà molto più facile per loro iniziare a utilizzare i tuoi strumenti.
Ecco un esempio della piattaforma JMP. In questo caso, si tratta di una distribuzione, in quanto molto semplice. Sul lato sinistro, abbiamo il launcher e sul lato destro il report. Sul launcher e anche nel report, abbiamo l'icona del titolo della finestra; JMP organizza il contenuto in riquadri. Sul lato sinistro, si generano i selettori di colonna nel selettore di colonna filtro. Sotto, a volte, sono presenti queste opzioni aggiuntive.
Al centro si trovano questi pulsanti. I due pulsanti successivi contengono caselle di riepilogo delle colonne, in cui l'utente può selezionare le colonne che desidera analizzare o su cui eseguire azioni. Il nome predefinito indica anche a cosa servono queste colonne. Sul lato destro si trovano i pulsanti di azione.
Nei report, la struttura è solitamente molto verticale. In questo caso, ho utilizzato degli statuti perché è più facile esprimere la mia opinione. Il contenuto è strutturato in una struttura padre-figlio, una struttura gerarchica, ed è stato creato con riquadri di contorno con questi triangoli rossi. Stiamo provando questo tipo di struttura perché gli utenti possono avviare l'architettura e le analisi da questi triangoli rossi. C'è una certa organizzazione con il contenuto, riquadri di creazione, riquadri di tabella e così via. Ma questo tipo di strutture è familiare agli utenti JMP.
Quando pensi al tuo strumento e ai tuoi utenti, pensa a come lo useranno. Per questo, puoi usare gli storyboard, ad esempio. Non deve necessariamente avere l'aspetto di questo diagramma. Puoi anche visualizzarlo in un formato a fumetti, se preferisci. Anche noi abbiamo questo tipo di visualizzazione: prima, poi si clicca su qualcosa, poi si passa alla visualizzazione successiva e così via.
Quando si sviluppa questo progetto, è utile pensare a come funzionerebbe la piattaforma JMP, perché in questo modo si torna alla familiarità. Non mi dilungherò su questo aspetto. Questo è solo un esempio di come potrebbe essere realizzato.
Alcuni esempi di mockup. Una dimostrazione rapida o un primo progetto iniziale che potresti avere per la tua interfaccia. Qui ho una versione cartacea molto semplice. Mi piace iniziare da questa. Sono molto veloci da modificare, aggiornare se necessario e poi puoi ricrearne una nuova, se c'è qualcosa che non va. Di solito mi rivolgo subito a qualcuno che si occupa di JMP. Questo è molto semplicistico, ma posso provarlo. Questo funziona, questo no, e modificarlo, se necessario. Magari posso usare il mio template per crearne uno un po' più pulito per vedere come apparirebbe nella realtà.
Prossimo mockup. Area simile, inizio con la carta, poi ho usato uno strumento separato. In questo caso, si chiama Excalidraw. Crea un mockup. Potrei aggiungere note aggiuntive qui e così via, e un prototipo JMP un po' più avanzato, una dimostrazione. Questo è già tratto dall'applicazione prototipo, ma potresti farlo in parte.
Avere un filtro dati, quindi un generatore di grafici. Questo può essere completamente separato. Contiene alcune immagini da qualche parte. Se hai appena configurato questo layout, prendi quelle immagini e spostale in strumenti separati. Probabilmente userò PowerPoint. È facile spostarle lì. Puoi strutturarle lì e poi avere una panoramica migliore di come potrebbe apparire l'interfaccia utente.
Successivamente, valuta la possibilità di utilizzare dei template e non dimenticare l'esperienza utente. Io stesso ho i miei template come stile di scripting. Il motivo per cui li ho e li uso è per creare app più velocemente. Sono più robusti e tendono ad avere un aspetto più professionale. Un'ulteriore nota: non progetto le mie interfacce utente per risoluzioni maggiori o addirittura inferiori al Full HD, poiché la maggior parte degli utenti continua a utilizzarlo per risoluzioni più elevate.
L'esperienza utente. Dato che JMP è uno strumento molto interattivo, ritengo sia importante considerare anche l'esperienza utente. Non solo l'interfaccia. Ecco alcuni esempi di esperienze utente negative. Una di queste sono le finestre modello. Ad esempio, per la condivisione LAN della piattaforma, si tratta di una finestra modello: l'utente non può tornare alla tabella dati e vedere quali colonne utilizzare. Dovrà prima chiudere il launcher, chiudere la tabella e poi rieseguire il launcher. Questa, a mio avviso, è un'esperienza negativa.
Un altro problema è che le finestre tendono a ridimensionarsi se si hanno riquadri di contorno comprimibili e così via. Cerco di avere dimensioni statiche delle finestre dopo la loro creazione iniziale, e poi di usare una casella di scorrimento per spostarle. L'ultima cosa da fare è non nascondere barre degli strumenti e menu all'utente, perché in JMP è possibile avviare piattaforme separate. È possibile avere una piattaforma aperta, andare al menu della barra degli strumenti e avviare la piattaforma successiva, il che rende l'analisi molto più rapida.
Confronto le mie piattaforme con quelle JMP. In alto, abbiamo le piattaforme JMP. In questo caso, si tratta di una piattaforma stretta e in basso. L'aspetto è abbastanza simile. Selettori di colonna a sinistra e poi elenchi comuni in cui l'utente li aggiunge, azioni a destra. Credo che la differenza principale rispetto al launcher, in questo caso, sia che ho questo nome di tabella, che è attualmente in fase di analisi. Nelle piattaforme di manovra, potrei avere anche il nome dell'applicazione visibile, ma non in questo caso.
Ma lì ci sono differenze più grandi rispetto ai nostri report. Non ho le mie caselle, perché ho già praticamente tutte le opzioni definite per l'utente. Non è necessario accedere ai menu con il triangolo rosso. Nelle piattaforme JMP, è necessario accedervi. Posso usare quelle caselle di pagina e quelle di foglio.
Penso che la cosa più importante sia che posso... organizzo i miei contenuti in orizzontale perché abbiamo schermi più ampi e alti. Molte piattaforme JMP tendono ad avere dimensioni molto grandi. Mi piace renderli più ampi perché sono più piccoli, più spazio in questo modo. Inoltre, qui, la tabella è visibile anche qui e il nome dell'applicazione.
Ecco un esempio di applicazione. Ne faremo due, ma ho già approfondito un po'. Questo è fondamentalmente lo script che l'utente dovrebbe eseguire per eseguire la mia applicazione. Ho separato le diverse parti dello script, con le relative responsabilità. Configurazione, utilità e interfaccia utente sono in uno script separato, per facilitarne la gestione in questo modo, a mio parere.
Poi lo script. Questo script principale ha un testo iniziale se la tabella è aperta, se la finestra è già aperta e se tutti questi percorsi sono presenti, allora l'applicazione è in esecuzione. A seconda del controllo, potrei segnalare all'utente un errore di finestra modello. Ad esempio, se la finestra è già aperta, non è una finestra modale, porterò semplicemente l'applicazione in primo piano, in modo che l'utente possa continuare a lavorarci.
Di seguito è riportata sostanzialmente la finestra principale dopo l'esecuzione dell'applicazione. Questa operazione crea la finestra dell'applicazione. Anche queste sono state separate in espressioni separate. È molto più facile gestire espressioni più piccole al di fuori di questa nuova finestra rispetto a quelle molto lunghe, che potrebbero contenere centinaia di righe. Solitamente difficili da gestire. Queste sono più facili da gestire.
A volte potrebbe essere necessario effettuare una valutazione e mettere alla prova molte abilità, ma in generale, penso che sia meglio così. Potete trovare questo esempio dalla community e alcuni esempi aggiuntivi dalla presentazione che ho tenuto a un gruppo di utenti finlandese nel 2023.
Un breve riassunto per questo poster. Simula i lanci e i report della piattaforma JMP, poiché gli utenti li conoscono già. In questo modo, si abitueranno più velocemente al tuo strumento. Considera come l'utente utilizzerà la tua applicazione. Crea storyboard e mockup rapidamente per vedere come potrebbe apparire. Aggiungi un modello. Puoi creare un'applicazione in loop robusta e professionale. Acquisisci familiarità con i box di visualizzazione più comuni e con l'organizzazione dei contenuti in JSL.
Poiché JMP è uno strumento altamente interattivo, non bisogna dimenticare l'esperienza utente, perché l'interattività di JMP è fondamentale. Considerate l'esperienza utente e l'interfaccia utente. Grazie.
