La guida ufficiale di Apple diretta agli sviluppatori iPhone è online da qualche giorno, in questo post facciamo un approfondimento del primo capitolo dedicato alla comprensione dell’interazione tra iPhone e utente.
Più precisamente tratteremo la periferica di input dell’iPhone che, come viene simpaticamente sottolineato, è già in possesso dell’utente: si tratta delle dita della mano (due per la precisione).
Le dita sono differenti dal mouse, infatti, possono essere lunghe, corte, magre, etc… E queste naturali periferiche di input (dal punto di vista dell’iPhone) dovranno interagire direttamente con le pagine web che invece sono state progettate per ricevere mouse event (come il click, il mouse over, etc…) e non finger event!
La guida continua spiegando che le dita sono meno precise del mouse e che hanno capacità differenti, ad esempio il mouse può cliccare mentre le dita possono “pizzicare”.
Qui di seguito ecco la lista degli eventi che possono produrre le dita della mano:
- Double tap (doppio colpetto): ingrandisce il blocco corrente e lo centra;
- Touch and hold (tocca a tieni a contatto): mostra un’informazione;
- Drag (trascina): muove il pannello;
- Flick (buffetto): scorre in alto o in basso, dipende dalla direzione del movimento;
- Pinch open: ingrandisce;
- Pinch close: rimpicciolisce.
La guida precisa che:
- non esistono movimenti delle dita per copiare, tagliare, incollare, trascinare il testo o selezionarne una porzione;
- la dimensione di un dito limita la quantità di link che possono trovarsi in una pagina: due link troppo vicini potrebbero creare problemi all’utente che volesse cliccare su uno dei due.
Personalmente sono abituato ad usare i mouse event ma sentir solo accennare il concetto di finger event mi ha fatto sorridere. Fortunatamente Safari per iPhone si occupa di tradurre i finger event elencati qui sopra in click event, in questo modo qualsiasi pagina web continuerà a funzionare correttamente.
Un’altra caratteristica che bisogna tenere a mente è che OS X su iPhone non ha finestre. Per uno sviluppatore abituato a progettare interfacce per le moderne applicazioni può essere destabilizzante riuscire a pensare senza finestre, l’iPhone non fornisce neanche barre di scorrimento o controlli per il ridimensionamento.
Più semplicemente permette all’utente di concentrare l’attenzione su un determinato blocco della pagina usando il Double tap che (come accennavo poco fa) cerca il più piccolo tag html contenente la zona dell’evento, lo ingrandisce il più possibile e lo centra.
Ad esempio se un utente sta visualizzando questo post ed esegue due colpetti sull’immagine qui sopra, allora Safari per iPhone individua il tag IMG, quindi ingrandisce l’immagine il più possibile (in modo che sia visualizzata interamente) e la centra. Semplice no?
Infine un consiglio: evitate blocchi di testo eccessivamente larghi perché l’utente dovrebbe leggerli scorrendo in continuazione la pagina avanti e indietro.