2.3 Creazione di interfacce utente interattive
Un'interfaccia utente interattiva ben progettata è fondamentale per l'usabilità e l'efficienza di un'applicazione di database FileMaker. In questa esercitazione ci concentreremo su come creare elementi interattivi come elementi di navigazione (menu e pulsanti), finestre di dialogo personalizzate e popover per migliorare l'esperienza dell'utente nel vostro database. Inoltre, verranno illustrati alcuni suggerimenti di provata efficacia per migliorare l'usabilità delle interfacce utente.
Indice dei contenuti
- 2.3 Creazione di interfacce utente interattive
- Creazione di elementi di navigazione (menu, pulsanti)
- Menu e navigazione personalizzati in gFM-Business
- Finestre di dialogo e popover definiti dall'utente
- Suggerimenti per migliorare la facilità d'uso
- gFM-Business Open Source FileMaker Basis ERP Il software del corso intensivo
- Domande frequenti sulle interfacce utente interattive
Prima di iniziare a creare elementi di navigazione, è importante pensare a come si desidera che gli utenti navighino all'interno dell'applicazione. Pensate a quali layout o funzioni sono utilizzati di frequente e a come renderne l'accesso il più semplice possibile.
- Menu di navigazione principaleValutate se sia opportuno creare un menu di navigazione centrale visibile in ogni pagina. Questo menu potrebbe contenere i collegamenti alle aree più importanti dell'applicazione, come "Home page", "Clienti", "Ordini" e "Rapporti".
- Navigazione contestualePensate di aggiungere elementi di navigazione contestuali che cambiano a seconda del layout o dei dati correnti. Ad esempio, si possono aggiungere pulsanti che appaiono solo quando sono soddisfatte determinate condizioni, come la visualizzazione del pulsante "Modifica" solo per i record esistenti.
Passo 2: Creare i pulsanti
I pulsanti sono un elemento essenziale di qualsiasi interfaccia utente e consentono agli utenti di eseguire determinate azioni, come l'apertura di un layout diverso, l'esecuzione di uno script o il salvataggio di dati.
- Pulsante di aggiuntaPassare alla modalità layout e selezionare l'opzione Strumento chiave nella barra degli strumenti superiore. Fare clic nell'area del layout per aggiungere un pulsante.
- Etichettatura del pulsanteAssegnate al pulsante un'etichetta chiara e comprensibile, come "Salva", "Elimina" o "Avanti". L'etichetta deve essere breve e significativa.
- Assegnare l'azioneNel dialogo per il pulsante sotto Azione è possibile assegnare al pulsante un'azione specifica, come l'esecuzione di uno script, il passaggio a un layout diverso o l'esecuzione di una funzione personalizzata. Queste azioni vengono eseguite quando l'utente fa clic sul pulsante.
- Stile dei pulsantiUtilizzare l'ispettore per personalizzare l'aspetto del pulsante. È possibile modificare colori, caratteri e margini per integrare il pulsante nel layout generale.
Fase 3: Creare i menu
I menu rappresentano un modo strutturato e facilmente accessibile per offrire agli utenti varie opzioni o funzioni.
- Creare un menu a discesaSelezionare con il mouse il campo desiderato e passare all'ultima scheda dell'ispettore. Nell'area "Stile di controllo", utilizzare il tasto Menu a comparsa o Elenco delle dissolvenze per creare un menu. In "Valori di", selezionare un elenco di valori da visualizzare per la selezione.
- Definire le voci di menuDefinite le voci di menu come elenco di valori in [File > Definisci > Elenchi di valori]. Un elenco di valori può contenere valori statici o valori di campi o campi correlati. gFM Business utilizza spesso elenchi di valori dinamici con la funzione "MagicValueList". In questo caso, si specifica "MagicValueList" come elenco di valori e si assegna un trigger di script al campo (all'ingresso), che crea dinamicamente l'elenco di valori utilizzando la funzione [MagicValueList]. Un elenco di valori assegnato in questo modo non deve essere predefinito come elenco di valori in FileMaker.
- Assegnare azioni di menuOgni voce di menu può attivare un'azione, come i pulsanti. Utilizzate i trigger di script per specificare se deve accadere qualcosa quando un utente seleziona una voce di menu.
Una volta creati gli elementi di navigazione, testate la navigazione dal punto di vista dell'utente. Verificate che tutti i link e i pulsanti funzionino correttamente e che la navigazione sia intuitiva e fluida.
Le voci di menu della navigazione e del menu principale del software gFM Business ERP non devono essere personalizzate individualmente nei layout, ma sono predefinite nel modulo di sviluppo "Amministrazione" nelle schede [Navigazione] e [Menu principale]. Per lo sviluppatore questo ha il vantaggio che tutti gli elementi di navigazione sono identici in tutte le schermate e possono essere semplicemente copiati da un layout esistente. La versione Professional supporta anche menu principali e navigazioni multilingue.
Finestre di dialogo e popover definiti dall'utente
Le finestre di dialogo e i popover definiti dall'utente sono elementi interattivi che visualizzano informazioni aggiuntive o richiedono input all'utente senza lasciare il layout corrente.
Passo 1: Creare finestre di dialogo personalizzate
Le finestre di dialogo personalizzate sono finestre a comparsa che possono essere utilizzate per visualizzare messaggi all'utente o per richiedere input.
- Creare uno scriptPer visualizzare un dialogo definito dall'utente, è necessario creare uno script. Nel menu alla voce [Script], andate nell'area di lavoro degli script (Cmd/Ctrl+Maiusc+S) e fate clic su Nuovo script.
- Definire i dialoghiUtilizzare il comando Visualizzare la propria finestra di dialogo nello script per creare il dialogo. È possibile definire il titolo, il messaggio di testo e fino a tre pulsanti.
- Aggiungere campi di inputÈ possibile aggiungere fino a tre campi di input in cui gli utenti possono inserire i dati. Questi campi possono essere utilizzati per inserire valori che vengono poi elaborati nello script.
- Azioni basate sull'input dell'utenteUtilizzate le istruzioni condizionali (istruzioni If) nello script per eseguire azioni diverse in base all'input dell'utente o al pulsante selezionato.
Passo 2: Creare i popover
I popover sono piccole finestre che appaiono quando l'utente fa clic su un elemento e visualizzano informazioni aggiuntive o campi di immissione. Sono particolarmente utili per organizzare in modo chiaro interfacce utente complesse.
- Aggiungi popoverSelezionare la voce "Pulsante popover" nello strumento pulsante della barra degli strumenti superiore e fare clic sul layout per aggiungere un pulsante popover. Un pulsante popover ha l'aspetto di un normale pulsante, ma quando viene cliccato apre una finestra popover.
- Progettare il contenuto del popoverUna volta creato il pulsante del popover, fare doppio clic per aprire l'editor del popover. Qui è possibile aggiungere campi, testi, pulsanti e altri oggetti, proprio come in un normale layout.
- Aggiungere interazioniUtilizzare script o azioni dirette per controllare l'interattività del popover. Ad esempio, è possibile specificare che alcuni campi del popover vengano convalidati prima che l'utente possa salvare le modifiche.
- TestTestare il popover in modalità di navigazione per assicurarsi che venga visualizzato correttamente e che esegua le azioni desiderate.
Suggerimenti per migliorare la facilità d'uso
Passo 1: mantenere la coerenza
Un'interfaccia utente coerente è più facile da imparare e da usare. Utilizzate colori, caratteri e stili coerenti in tutti i layout. Assicuratevi che gli elementi di navigazione, come i pulsanti e i menu, siano posizionati nello stesso punto e funzionino allo stesso modo.
Gli utenti devono sempre sapere dove si trovano e come raggiungere le funzioni desiderate. Utilizzate un'etichettatura chiara e concisa per i pulsanti e i menu. Assicuratevi che il percorso verso le funzioni più importanti non sia mai a più di due o tre clic di distanza.
Fase 3: Feedback e conferme
Fornite sempre agli utenti un feedback sulle loro azioni. Ad esempio, visualizzare un messaggio di conferma quando i dati sono stati salvati o un avviso prima di cancellare dati importanti. In questo modo si evitano errori e si aumenta la fiducia degli utenti nell'applicazione.
Fase 4: prevenzione e gestione degli errori
Progettate l'interfaccia utente in modo che gli utenti possano inserire solo dati validi. Utilizzate menu a discesa, caselle di controllo e altre scelte predefinite per ridurre al minimo l'inserimento di errori. Se si verifica un errore, visualizzate messaggi di errore chiari e fornite le soluzioni suggerite.
Fase 5: Test con utenti reali
È importante testare l'interfaccia utente con utenti reali per assicurarsi che sia intuitiva ed efficiente. Raccogliere i feedback e apportare modifiche per migliorare continuamente l'esperienza dell'utente.
gFM-Business Open Source FileMaker Basis-ERP
Il software per il corso intensivo
Scarica gratuitamente
Domande frequenti sulle interfacce utente interattive
- Come posso creare elementi di navigazione in FileMaker per guidare i miei utenti attraverso l'applicazione?
- È possibile creare elementi di navigazione aggiungendo pulsanti e barre di pulsanti in modalità layout. Questi consentono agli utenti di passare facilmente da un layout all'altro o da una funzione all'altra. È possibile collegare i pulsanti a script che indirizzano l'utente a un altro layout, filtrano i record o eseguono un'azione specifica. La barra dei pulsanti è particolarmente utile per creare una navigazione coerente nella parte superiore o laterale del layout.
- Come si aggiunge un popover alla propria interfaccia utente?
- Un popover è un oggetto di layout che visualizza informazioni o opzioni aggiuntive quando l'utente fa clic su un pulsante. Per creare un popover, selezionare l'opzione "Pulsante popover" nella barra degli strumenti in modalità layout. Posizionando il pulsante nel layout, è possibile aggiungere contenuti come campi, testo o altri pulsanti nella finestra del popover. I popover sono ideali per informazioni sensibili al contesto o per fornire opzioni avanzate senza allontanare l'utente dal layout corrente.
- Come si creano finestre di dialogo interattive in FileMaker?
- Le finestre di dialogo sono utili per mostrare informazioni importanti agli utenti o per richiedere loro input. È possibile creare una finestra di dialogo personalizzata utilizzando uno script. Nell'editor di script, selezionate la funzione "Mostra finestra di dialogo personalizzata" e potrete aggiungere fino a tre campi di immissione e pulsanti come "OK" e "Annulla". È l'ideale per confermare le decisioni dell'utente o per inserire dati aggiuntivi prima dell'esecuzione di un'azione.
- Come posso creare flussi di lavoro interattivi con i pulsanti?
- I pulsanti sono un elemento centrale delle interfacce utente interattive. È possibile aggiungere pulsanti e assegnare loro script che eseguono azioni specifiche, come la creazione di un nuovo record, l'eliminazione di un record o la navigazione verso un layout specifico. Aggiungendo condizioni agli script, è possibile controllare i pulsanti in modo dinamico, a seconda del ruolo dell'utente o dello stato di un record di dati.
- Come si utilizzano i controlli a schede per mantenere una visione d'insieme in layout complessi?
- I controlli scheda sono un ottimo modo per organizzare i dati in aree simili a schede e aiutare gli utenti a passare da una sezione all'altra di un layout senza ricaricare l'intera pagina. È possibile aggiungere un controllo scheda in modalità layout e creare schede che visualizzano ciascuna contenuti o dati diversi. In questo modo è più facile navigare in layout complessi, visualizzando le informazioni correlate in una struttura chiara e organizzata.
- Come posso migliorare la facilità d'uso dei miei layout?
- Per migliorare l'usabilità, assicuratevi che i layout siano chiari e intuitivi. Utilizzate pulsanti grandi e facilmente visibili, etichette chiare e colori ad alto contrasto per gli elementi importanti. Riducete le informazioni superflue e concentratevi sul rendere accessibili all'utente le funzioni più importanti. Anche i tooltip (testi di aiuto) possono essere utili per fornire agli utenti informazioni aggiuntive quando passano il mouse su un oggetto.
- Come posso garantire che la mia interfaccia utente interattiva funzioni bene su diversi dispositivi?
- FileMaker supporta il design reattivo, in modo che i layout appaiano bene su dispositivi diversi come desktop, tablet e smartphone. Utilizzate le funzioni di ancoraggio nell'Inspector per determinare come gli oggetti si adattano alle dimensioni della finestra. Per i dispositivi mobili, assicuratevi che i pulsanti siano sufficientemente grandi e facili da usare. Create layout ottimizzati per i dispositivi mobili, con una navigazione semplificata e una dimensione dei caratteri adattata.
- Come si imposta la formattazione condizionale per fornire indicazioni visive agli utenti?
- Con la formattazione condizionale è possibile evidenziare visivamente i campi o gli oggetti in base a determinati criteri. Ad esempio, è possibile visualizzare automaticamente i record di dati che hanno un determinato stato in un colore diverso. In modalità layout, è possibile selezionare un oggetto e definire regole nell'ispettore alla voce "Formattazione condizionale" per modificarne dinamicamente l'aspetto. Questo aiuta gli utenti a riconoscere immediatamente le informazioni importanti.
- Come posso utilizzare i tooltip per migliorare la mia interfaccia utente?
- I tooltip sono piccole finestre di informazioni che appaiono quando l'utente passa con il mouse su un oggetto. È possibile aggiungere tooltip a qualsiasi campo, pulsante o altro oggetto di FileMaker per fornire informazioni o istruzioni aggiuntive. Nell'Inspector è possibile definire un tooltip per l'oggetto selezionato nella prima scheda "Posizione" sotto "Tooltip". I tooltip sono utili per aiutare gli utenti senza che questi debbano lasciare il layout o aprire ulteriori finestre di dialogo.
- Come ottimizzare l'interfaccia utente per ottenere interazioni rapide?
- Per consentire un'interazione rapida, è necessario evitare clic ridondanti e rendere facilmente accessibili le azioni importanti. I pulsanti devono essere posizionati vicino alle informazioni rilevanti e devono essere sufficientemente grandi da poter essere cliccati facilmente. Anche le scorciatoie e i tasti di scelta rapida possono migliorare l'efficienza. È possibile definire scorciatoie negli script per rendere più accessibili le azioni più comuni, ad esempio il salvataggio di un record di dati o l'esecuzione di una ricerca.
- Come si creano cruscotti interattivi in FileMaker?
- I cruscotti forniscono una panoramica visiva di dati e KPI importanti. È possibile creare dashboard utilizzando grafici, campi di riepilogo e pulsanti. I grafici possono essere generati dai dati per visualizzare le tendenze e le cifre chiave. I pulsanti e i popover possono essere integrati nel dashboard per consentire una guida interattiva all'utente, ad esempio per filtrare i dati o visualizzare informazioni dettagliate.
- Come posso integrare i contenuti dinamici nella mia interfaccia utente?
- I contenuti dinamici possono essere integrati utilizzando campi di calcolo, visibilità condizionale e script. Ad esempio, è possibile utilizzare i campi di calcolo per visualizzare valori dinamici che cambiano in base all'input dell'utente. Con la visibilità condizionale, è possibile mostrare o nascondere gli oggetti del layout in base alla situazione corrente, ad esempio lo stato di un record di dati. Gli script consentono di dinamizzare ulteriormente l'interfaccia utente reagendo a determinate azioni dell'utente.
