Feedback visivo nelle applicazioni mobili

Il feedback visivo nelle applicazioni mobile offre un'esperienza utente più piacevole, e le app mobile che sono divertenti da usare vengono lanciate più frequentemente rispetto alle app statiche e noiose. MobileTogether, la piattaforma di sviluppo rapido di applicazioni mobile (RMAD) di Altova, integra tutti gli strumenti necessari per sviluppare applicazioni mobile multipiattaforma con funzionalità di feedback visivo accattivanti.

La palette di controlli "trascina e rilascia" all'interno del software MobileTogether Designer include un controllo a pulsante che cambia automaticamente il suo aspetto quando viene cliccato. È inoltre possibile definire delle condizioni che aggiungono o modificano testo, immagini o altre funzionalità di qualsiasi pulsante durante l'esecuzione dell'applicazione.

Inoltre, è possibile definire molti altri controlli che possono funzionare come pulsanti, eseguendo una o più azioni quando il controllo viene cliccato. Abbiamo già scritto in precedenza riguardo a Utilizzare immagini di icone come pulsanti degli strumenti nelle applicazioni per dispositivi mobili, per creare un menu di strumenti elegante e raffinato. In questo articolo, aggiungeremo interattività alle immagini degli strumenti, in modo da fornire un feedback visivo accattivante per ogni clic.

La schermata qui sotto mostra una pagina dell'applicazione "Where Am I" che abbiamo creato per dimostrare come utilizzare le immagini come pulsanti.

Ogni immagine blu nella sezione inferiore dello schermo rappresenta un pulsante che fornisce ulteriori informazioni sulla posizione, sia recuperando dati tramite un'API, sia aprendo una pagina web esterna. Un breve tocco su qualsiasi pulsante esegue l'operazione corrispondente, mentre un tocco prolungato apre una finestra di messaggio che fornisce informazioni sul pulsante stesso

Il pulsante delle previsioni del tempo, situato nell'angolo in basso a sinistra dello screenshot, è evidenziato con un colore per indicare che è stato premuto. Con un breve tocco, l'immagine viene temporaneamente colorata prima che l'operazione venga eseguita.

Un semplice clic sul pulsante meteo invia una richiesta all'API OpenWeather e apre una sottopagina che mostra i dati meteorologici in formato grafico e testuale

Definizione del feedback visivo nelle applicazioni mobile

Il feedback visivo per un clic dell'utente su qualsiasi immagine viene implementato modificando brevemente il colore di sfondo dietro il pulsante dell'immagine. Le immagini nella nostra applicazione sono organizzate in tabelle, come si può vedere in questa visualizzazione parziale di MobileTogether Designer:

Ogni cella di una tabella possiede un insieme di proprietà che possono essere definite individualmente, tra cui il colore di sfondo della cella. Ogni immagine, inoltre, ha una definizione specifica delle azioni che vengono eseguite quando l'immagine viene cliccata.

Possiamo registrare un numero di indice nell'elemento denominato "userButton" quando viene cliccata l'immagine della previsione del tempo. Successivamente, possiamo modificare il colore di sfondo della cella in base al contenuto dell'elemento "userButton", come definito nell'espressione XQuery presente nella proprietà "Colore di sfondo".

Ecco l'elenco delle azioni disponibili per lo strumento di previsioni meteorologiche:

Innanzitutto, il valore dell'elemento denominato "userButton" viene aggiornato.

Successivamente, vengono eseguite le azioni che modificano effettivamente l'aspetto dell'immagine. Poiché queste azioni saranno necessarie ogni volta che viene cliccata un'immagine, vengono memorizzate in un gruppo di azioni dedicato chiamato "Button Flash".

MobileTogether esegue automaticamente l'azione "Aggiorna visualizzazione" una volta alla fine di qualsiasi sequenza di azioni. Per implementare un feedback visivo, vogliamo eseguire "Aggiorna visualizzazione" all'inizio della sequenza per modificare il colore di sfondo, mettere in pausa brevemente, reimpostare il valore del pulsante utente e, infine, eseguire nuovamente "Aggiorna visualizzazione" per cancellare il colore di sfondo.

La funzione XQuery sleep() imposta la durata della pausa in millisecondi. Dopo il lampeggio del pulsante, l'esecuzione continua con il gruppo di azioni "Ottieni previsioni meteo". Questo gruppo di azioni genera una query per un'API di previsioni meteo per ottenere le previsioni per i prossimi 5 giorni, specificando latitudine e longitudine, e quindi apre la sottopagina meteo mostrata in precedenza.

Vogliamo anche ricevere un feedback visivo quando si esegue un tocco prolungato su qualsiasi immagine. MobileTogether ci permette di definire azioni separate per un tocco prolungato, come si può vedere qui:

Il risultato della pressione prolungata viene mostrato nella seconda immagine qui sopra, dove la finestra di messaggio descrive la funzione del pulsante "Ottieni previsioni meteo".

Per il tocco prolungato, abbiamo bisogno solo di un'azione "Aggiorna visualizzazione" per cambiare il colore di sfondo, e non è necessario utilizzare la funzione "sleep()" per una pausa dedicata. Un'azione "Aggiorna visualizzazione" viene eseguita automaticamente quando l'utente chiude la finestra del messaggio, quindi lo sfondo dell'immagine verrà ripristinato.

Feedback visivo nelle applicazioni mobile che utilizzano tabelle con righe ripetute

Non possiamo utilizzare la stessa tecnica di indicizzazione per identificare le icone degli strumenti nelle pagine in cui presentiamo elenchi basati sui dati ricevuti da query API. Ad esempio, lo screenshot qui sotto mostra i risultati della ricerca per hotel e motel vicino a una determinata località:

Pagine simili vengono presentate per gli avvisi sul traffico e gli eventi culturali nelle vicinanze, e desideriamo un feedback visivo per le immagini degli strumenti presenti in ogni voce, come si può vedere qui, con un clic prolungato su un'immagine di un telefono:

Ogni insieme di risultati per queste pagine è definito come una tabella scorrevole con righe ripetute, in cui vengono visualizzate le informazioni ottenute tramite interrogazioni all'API:

MobileTogether include una funzione di estensione XQuery chiamata mt-rowgroup-index( ) che offre una soluzione efficace per identificare le immagini in ogni riga. Possiamo combinare questa funzione con un valore per identificare la colonna all'interno della tabella, consentendo di manipolare singolarmente ogni immagine. L'immagine del telefono evidenziata sopra ha questa definizione di colore di sfondo:

Le prime azioni eseguite quando l'utente clicca sull'immagine del telefono per aggiornare i risultati modificano il valore dell'elemento "userButton" ed eseguono il gruppo di azioni "Button Flash":

Abbiamo aggiunto 300 all'indice del gruppo di righe per indicare la terza colonna di immagini all'interno della riga. La nostra query all'API di ricerca richiede un massimo di 50 risultati, quindi, a seconda del numero di riga del risultato selezionato, il valore dell'elemento "userButton" per questa immagine potrebbe variare da 301 a 350. Il feedback visivo viene applicato solo a questa singola immagine, come determinato dalla funzione mt-rowgroup-index() nella definizione del colore di sfondo della cella della tabella.

MobileTogether include numerose altre funzioni aggiuntive che possono essere utilizzate nelle espressioni XPath/XQuery, consentendo agli sviluppatori di evitare la necessità di creare funzioni personalizzate per estendere le librerie standard di XPath, XQuery e XSLT, e di semplificare così lo sviluppo di applicazioni mobile per attività comuni.

Scopri di più e provalo tu stesso

Se siete pronti a iniziare a integrare elementi visivi interattivi nelle applicazioni mobile, scaricate gratuitamente il software MobileTogether Designer. E non dimenticate di visitare la pagina MobileTogether Demos, che contiene link a video, tutorial e altre applicazioni dimostrative. Potete esaminare l'applicazione descritta in questo articolo scaricandola da GitHub, nel seguente repository.