Sui dispositivi mobili il puntatore dell'utente è solitametne il dito. Anche se questo fatto può non sembrare eccezionale, molti designer non ne prendono in considerazione le conseguenze a livello di user experience.
Un dito copre un'area più estesa dello schermo rispetto al mouse, quindi:
- una parte di interfaccia può rimanere nascosta nell'interazione
- l'area di contatto con lo schermo più ampia di quella del tradizionale puntatore, aumenta il rischio di interagire inavvertitamente con link o controlli diversi da quelli desiderati
Per questo è molto importante prevedere aree grandi e delineate almeno per quei link e quei controlli che riteniamo più importanti e più utili/utilizzati.
Realizzare un bottone
Con jQuery Mobile è molto facile realizzare un bottone di base sfruttando gli elementi grafici messi a disposizione dagli stili CSS del framework (un po' come avviene per jQuery UI):
<a href="index.html" data-role="button">Homepage</a>La cosa è ancora più semplice per quanto riguarda i bottoni di una fomr, visto che tutti gli elementi submit e gli ement input con attributo type settato a submit, reset, image o button vengono automaticamente convertiti secondo il tema dell'applicazione.
Icone per i bottoni
Sempre nell'ottica di migliorare l'esperienza utente, veicolando più rapidamente il significato e l'utilizzo di un controllo, in jQuery Mobile è stata introdotta la possibilità di associare ad un bottone anche un'icona descrittiva.
Nel framework troviamo una serie di icone predefinite da poter inserire sfruttando l'ennesimo attributo data-*. Ecco ad esempio come realizzare un bottone per tornare all'homepage, con la classica icona di una casetta (nella documentazione ufficiale del progetto ci sono anche altri tipi di icone):
<a href="index.html" data-role="button" data-icon="home">Homepage</a>Per default l'icona sarà posta a sinistra del testo, ma è comunque possibile posizionarla in modo diverso impostando l'attributo data-iconpos con i valori seguenti:
right: a destra del testotop: sopra al testobottom: sotto il testo
Un valore particolare dell'attributo data-iconpos è notext: con questa particolare configurazione il testo del bottone sparisce lasciando visibile solo l'icona, cosa che potrebbe risultare utile, ad esempio, per realizzare pulsanti di chiusura di finestre di dialogo e popup, oppure un link alla homepage poco invasivo:
<a href="index.html" data-role="button" data-icon="home" data-iconpos="notext">Homepage</a>Bottoni in linea
Per jQuery Mobile tutti i bottoni nascono come elementi block level, così si può estenrderli su tutta la larghezza dello schermo e da distanzarli dagli altri elementi dell'interfaccia.
In alcuni casi può risultare utile rendere i bottoni più piccoli, oppure metterne due sulla stessa riga. Per farlo possiamo aggiungere l'attributo data-inline="true", uproprietà per ridefinire i link al fondo dell'homepage della nostra applicazione':
<a href="credits.html"
data-role="button" data-inline="true">credits</a>
<a href="tech-spec.html"
data-ajax="false" data-role="button" data-inline="true">caratteristiche tecniche</a>
<a href="about.html"
data-ajax="false" data-role="button" data-inline="true">a proposito di Music Manager</a>Gruppi di bottoni
Un'altra tecnica per veicolare meglio la funzionalità di un bottone nell'insieme dell'interfaccia è quella di raggruppare bottoni con comandi correlati. Questo può riguardare sia controlli di form, sia la navigazione fra pagine della stessa sezione.
Per raggruppare più bottoni in jQuery Mobile basta inserirli in un contenitore con attributo data-role="controlgroup":
<div data-role="controlgroup">
<a href="#about" data-transition="slideup" data-role="button">About</a>
<a href="#mission" data-transition="slideup" data-role="button">Mission</a>
<a href="#contacts" data-transition="slideup" data-role="button">Contatti</a>
</div>Per default i bottoni sono raggruppati vericalmente, ma per rendere meglio l'idea di una barra di bottoni è conveniente raggrupparli orizzontalmente aggiungendo l'attributo data-type="horizontal":
<div data-role="controlgroup" data-type="horizontal"> <a href="#about" data-transition="slideup" data-role="button">About</a> <a href="#mission" data-transition="slideup" data-role="button">Mission</a> <a href="#contacts" data-transition="slideup" data-role="button">Contatti</a> </div>
Diversificare gli stili dei bottoni
Di default tutti i bottoni in jQuery Mobile sono dotati di stati quali premuto e attivo per dare un feedback più realistico all'utente sull'effetto delle sue azioni.
Un altro stato importante è quello di selezionato, che serve per segnalare all'utente il punto dell'applicazione in cui si trova. Per realizzare questo stato è necessario assegnare un altro tema al bottone in modo da cambiarne lo schema di colori:
<a href="#about" data-transition="slideup" data-role="button" data-theme="b">About</a>Questa stessa tecnica può essere usata per rendere più evidenti le azioni principali in un applicazione:
<!-- azione principale -->
<a href="#about" data-transition="slideup" data-role="button" data-theme="b" data-inline="true">Applica</a>
<!-- azione secondaria -->
<a href="#about" data-transition="slideup" data-role="button" data-inline="true">Annulla</a>Per rendere meglio l'idea di quanto siano importanti i bottoni in un'applicazione web mobile, vediamo quanto migliora l'intuitività dell'interfaccia della nostra applicazione di test.
