Immagini, icone e pulsanti degli strumenti nelle applicazioni per dispositivi mobili

Abbiamo già scritto in precedenza su l'integrazione di API e applicazioni mobile per creare un'esperienza utente ricca e coinvolgente. Da quando abbiamo pubblicato il nostro articolo precedente, abbiamo continuato a migliorare l'applicazione dimostrativa GPS, aggiungendo il supporto per ulteriori API per ottenere informazioni sulle condizioni meteorologiche attuali e sugli eventi programmati nelle vicinanze.

Una delle sfide nell'offrire tutte queste funzionalità su un piccolo schermo mobile è fornire agli utenti un sistema di navigazione chiaro, coerente e facile da usare in tutte le sezioni dell'applicazione.

L'utilizzo di immagini iconiche come pulsanti nelle app per dispositivi mobili può creare un menu di navigazione elegante e raffinato, soprattutto se le icone sono scelte in base a convenzioni riconoscibili e ampiamente accettate. Ad esempio, una freccia che punta a sinistra indica spesso la funzione "indietro", e l'icona di un floppy disk rappresenta frequentemente la funzione "salva", anche quando la destinazione finale potrebbe non essere un nuovo file o un disco.

In questo articolo, descriveremo come utilizzare icone di immagini per creare menu di navigazione multipiattaforma con pulsanti di funzionalità nelle applicazioni mobile, utilizzando MobileTogether.

Le schermate che seguono mostrano l'applicazione "Where Am I" in esecuzione su dispositivi Apple iOS e telefoni Android.

In ogni schermata, l'utente ha appena ottenuto le coordinate GPS correnti e gli vengono presentate le stesse opzioni, rappresentate da pulsanti

• Visualizzare una foto satellitare della località, in base al livello di zoom selezionato
• Invia un messaggio di testo contenente la posizione attuale
• Aprire l'applicazione di mappe predefinita, visualizzando la posizione corrente
• Eseguire una ricerca web generale basata sulla posizione attuale
• Visualizza le condizioni meteorologiche attuali nella località specificata
• Visualizza un elenco degli eventi imminenti nelle vicinanze
• Utilizzare l'API di ricerca MapQuest per esplorare l'area circostante

I pulsanti degli strumenti vengono definiti e configurati all'interno dell'applicazione utilizzando MobileTogether Designer, lo strumento di sviluppo di app visuale che consente agli sviluppatori di visualizzare il layout dell'app e testare la logica di esecuzione complessa in qualsiasi momento durante lo sviluppo.

Il nostro menu di navigazione è strutturato come una serie di tabelle, come si può vedere nell'immagine qui sotto, che mostra la finestra di progettazione "Page Design" di MobileTogether:

Ci sono diverse considerazioni da tenere a mente quando si crea un menu con icone, soprattutto per garantire un'esperienza utente prevedibile e coerente su una vasta gamma di dispositivi mobili con dimensioni dello schermo e risoluzioni diverse.

Innanzitutto, è importante che ogni immagine comunichi in modo efficace la funzione che verrà eseguita quando viene cliccata.

In secondo luogo, le immagini devono essere abbastanza grandi da essere facilmente utilizzabili da utenti con dita di diverse dimensioni. Spesso sentiamo gli utenti di dispositivi mobili giustificare clic accidentali attribuendoli alla "goffaggine delle mie dita". Ma è davvero l'utente ad essere goffo, oppure la disposizione dell'app è troppo piccola e complessa da utilizzare?

Infine, per le applicazioni che mostrano più schermate con diversi pulsanti di strumenti, una struttura e una funzionalità coerenti tra le diverse pagine rendono l'applicazione molto più intuitiva da utilizzare.

La nostra app dimostrativa "Where Am I" combina strategicamente le funzionalità di due proprietà di controllo per gestire le dimensioni e la disposizione delle icone degli strumenti.

Impostare la larghezza di controllo per ogni icona su "fill_parent" ci permette di utilizzare un unico file immagine per tutte le dimensioni dello schermo. Nella nostra applicazione, ogni icona è un file immagine .png di 192x192 pixel, e "fill_parent" ridimensionerà automaticamente l'immagine per adattarla alla larghezza della colonna su ogni dispositivo mobile utilizzato dagli utenti finali.

Le larghezze delle colonne della tabella per ogni icona degli strumenti sono definite tramite espressioni XPath. Abbiamo utilizzato un elemento nell'albero dei dati persistenti per specificare la larghezza delle colonne per le icone degli strumenti. Questo ci ha permesso di sperimentare con diverse dimensioni su vari dispositivi, modificando il valore nell'albero dei dati invece di dover modificare le proprietà di larghezza di ogni colonna per ogni test. In totale, abbiamo utilizzato tre dimensioni diverse per le icone nell'applicazione. Ecco la parte dell'albero dei dati in cui sono memorizzate le larghezze delle colonne:

La tabella include anche colonne vuote per creare margini attorno a ciascuna icona degli strumenti. La larghezza delle colonne per i margini è lasciata vuota, il che significa che tutto lo spazio rimanente non assegnato viene distribuito equamente tra di esse. Abbiamo aggiunto un controllo dello spazio tra le righe di icone per creare il margine verticale tra le righe.

È possibile scegliere di incorporare il file dell'immagine dell'icona dello strumento direttamente nel file dell'applicazione, oppure caricare le immagini separatamente sul server MobileTogether.

Definizione delle azioni associate ai pulsanti degli strumenti nelle applicazioni mobile

Definire le azioni da eseguire quando si fa clic sull'icona di uno strumento è semplice. MobileTogether permette di rendere cliccabile qualsiasi elemento, proprio come un pulsante. Le azioni associate a un elemento vengono definite tramite il menu contestuale che si apre con il tasto destro del mouse:

Il pulsante selezionato in precedenza è progettato per aprire l'applicazione mappa predefinita sul dispositivo mobile, centrata sulle coordinate GPS. Tuttavia, lo script di azione è stato migliorato con definizioni separate per un tocco, o un clic normale, e un tocco prolungato.

A seconda delle preferenze dell'utente, un clic potrebbe riprodurre un suono proveniente dalla libreria audio integrata di MobileTogether. Un clic normale apre la mappa, mentre un clic prolungato apre semplicemente una finestra di messaggio che spiega la funzione del pulsante.

Dimensioni variabili per i pulsanti degli strumenti nelle applicazioni mobile

Avevamo bisogno di pulsanti per gli strumenti di dimensioni più ridotte, per le situazioni in cui il pulsante dello strumento condivide lo spazio con testo o altri elementi di controllo sulla pagina, ad esempio nelle pagine di ricerca e nei risultati di ricerca mostrati qui

Le icone degli strumenti presenti in queste pagine sono state definite utilizzando colonne e l'elemento "larghezza icona" più piccolo, all'interno dell'albero dei dati persistenti.

Scopri di più e provalo tu stesso

Se avete perso il nostro precedente articolo sull'integrazione delle API nelle applicazioni mobile, potete leggerlo qui. Oppure, se siete nuovi su MobileTogether, visitate la pagina Dimostrazioni di MobileTogether che contiene link a video, tutorial e altre applicazioni dimostrative.

Potete esaminare più da vicino la nostra app dimostrativa per vedere esattamente come abbiamo implementato i pulsanti degli strumenti nelle app mobile, oppure per consultare le API per la mappatura, la ricerca, le previsioni del tempo e gli eventi. Scaricate semplicemente il software MobileTogether Designer, che è gratuito, e ottenete una copia della nostra app su GitHub in questo repository: https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I