Crea una dashboard mobile che impressionerà qualsiasi dirigente
In un precedente articolo su Creare applicazioni mobile eleganti, Abbiamo mostrato esempi di una semplice applicazione e di un pannello di controllo mobile completo, funzionanti su diversi dispositivi mobili. Gli sviluppatori di applicazioni mobili possono anche rendere più soddisfatti gli utenti finali, offrendo loro la possibilità di personalizzare l'esperienza dell'applicazione. MobileTogether consente agli sviluppatori di adattare le applicazioni multipiattaforma a ciascuna piattaforma mobile e Consentire agli utenti di personalizzare facilmente la dimensione del testo tramite un'interfaccia semplice e intuitiva.
Consentire a ciascun utente di impostare la dimensione del testo preferita in base alle proprie esigenze di visualizzazione è un gesto di cortesia nei confronti degli utenti e, allo stesso tempo, solleva gli sviluppatori dall'onere di dover determinare la dimensione del testo più adatta per il funzionamento su tutti i dispositivi.
Permetti agli utenti di scegliere la dimensione del testo
È possibile utilizzare sia due pulsanti separati che un controllo a cursore per consentire agli utenti di impostare la dimensione del testo visualizzato in un'applicazione mobile.
Due pulsanti per regolare la dimensione del testo
L'applicazione per la reportistica delle vendite aziendali, di cui abbiamo parlato in precedenza, utilizza la tecnica dei due pulsanti.
La riga inferiore dei controlli include due pulsanti per regolare la dimensione del testo, con etichette intuitive
Questi pulsanti aumentano o diminuiscono il valore di un elemento dati persistente chiamato "textSize" all'interno di un intervallo di valori compreso tra 10 e 50.
Ecco l'azione di controllo assegnata al pulsante di diminuzione:
E l'azione associata al pulsante di aumento:
L'elemento textSize viene utilizzato in una semplice funzione utente di MobileTogether per creare una stringa valida da assegnare alla dimensione del testo:
Infine, la dimensione del testo per ogni elemento testuale nell'applicazione viene impostata tramite un'espressione XPath, invece che tramite il menu a tendina delle dimensioni presente nella finestra delle proprietà
Poiché l'elemento "textSize" è definito nell'albero dei dati persistenti, la scelta della dimensione del testo effettuata dall'utente viene mantenuta per la prossima volta che l'applicazione viene eseguita su quel dispositivo.
Questo metodo a due pulsanti funziona bene per un'applicazione con poche pagine principali, come il rapporto sulle vendite aziendali, perché l'utente vede immediatamente il risultato e può adattarlo alla dimensione preferita. Di seguito sono riportati esempi del rapporto sulle vendite aziendali con testo di dimensioni ridotte e dimensioni maggiori:
Si noti che il titolo principale è più grande del testo del corpo. Questo effetto è ottenuto tramite una seconda funzione utente per il testo del titolo, che stabilisce una relazione tra le dimensioni del testo del corpo e del titolo:
Dimensione del testo (regolabile)
Un altro modo per consentire all'utente di controllare la dimensione del testo è utilizzare un controllo a cursore. Gli sviluppatori dovranno comunque creare un elemento dati persistente per la dimensione del testo, creare funzioni utente per costruire la stringa che rappresenta la dimensione e assegnare la proprietà della dimensione del testo come espressione XPath, come descritto in precedenza.
A volte, lo spazio disponibile sullo schermo potrebbe non essere sufficiente per dedicare due pulsanti alla modifica della dimensione del testo. In questi casi, è possibile utilizzare un solo pulsante per accedere a un controllo a cursore.
L'applicazione mobile "Executive Sales Dashboard" mostrata di seguito presenta dati di vendita per qualsiasi data, utilizzando diverse rappresentazioni grafiche. La barra di controllo in alto offre una varietà di selettori di data rapidi, ma lo spazio disponibile consente solo l'aggiunta di un ulteriore pulsante per regolare la dimensione del testo.
In questa applicazione, il pulsante A± apre una sottopagina che contiene un controllo a cursore che consente agli utenti di regolare il valore dell'elemento "textSize":
Il testo di esempio presente nella riga superiore viene ridimensionato in tempo reale mentre l'utente regola il cursore. Quando l'utente clicca sul pulsante "indietro", la pagina principale viene visualizzata nuovamente, con gli elementi di testo ridimensionati. Come nel caso della tecnica a due pulsanti, l'elemento "textSize" viene memorizzato come dati persistenti, e la selezione dell'utente verrà ripristinata la prossima volta che l'applicazione verrà avviata.
Alcune applicazioni possono avere diversi elementi che è opportuno salvare come impostazioni utente, come ad esempio l'unità di misura (pollici o centimetri), la valuta (dollari o euro), oppure un indirizzo predefinito o un nome file per le immagini. In questi casi, gli sviluppatori possono creare una singola pagina delle preferenze che consenta all'utente di visualizzare e modificare tutte le impostazioni persistenti in un unico punto.
MobileTogether Designer è lo strumento gratuito che consente di implementare rapidamente tutte queste funzionalità avanzate per applicazioni multipiattaforma, compatibili con Android, iOS, Windows 8, Windows 10, Windows Phone 8 e con un client basato su browser HTML-5. Scaricate una copia e iniziate subito!