iPhone X e la visione periferica
Come la Safe Area di iPhone X e la visione periferica guidano il layout di un'app: zone dello schermo, margini in landscape e proporzioni rispetto a iPhone 8.
Tradotto dall’inglese con l’aiuto dell’IA e rivisto dall’autore.Leggi l’originale
Non c'è dubbio: l'argomento più discusso dei prossimi 3 mesi (forse 6) sarà iPhone X e i problemi legati allo sviluppo di applicazioni pensate apposta per questo dispositivo. Non ho resistito alla tentazione di scrivere qualcosa anche io.
Questo articolo racconta le mie esperienze e considerazioni personali, dopo aver passato le ultime due settimane ad aggiornare alcune applicazioni di clienti alle nuove linee guida Apple per iPhone X.
Quando si crea qualcosa, è importante avere una visione chiara e concreta di ciò che va fatto. Ma per avere una visione chiara e concreta di iPhone X bisogna tenerlo in mano e lavorarci. Per fortuna il simulatore di Xcode 9.1 svolge bene gran parte di questo compito: anche senza poter toccare con mano il nuovo flagship Apple fin dal primo giorno, si può già capire cosa fare.
È chiaro che il nuovo dispositivo ha un'area visibile più estesa (circa il 12% in più) rispetto al suo predecessore (iPhone 8). Allo stesso tempo eredita la larghezza di 375pt ma non l'altezza.
Quando devo parlare di questo argomento a una conferenza tecnica, mi piace partire da questo concetto: una porzione di schermo più grande che però mantiene la stessa area visibile. Un paio di anni fa Philips ha fatto qualcosa di davvero innovativo, lanciando i primi televisori che emettevano una luce soffusa sullo sfondo per fondere la luce dello schermo con quella dell'ambiente.
Cosa? Perché dovrebbe interessarci? Stiamo parlando di Apple e di iPhone X! Che c'entra? Dici sul serio? Assolutamente sì!
Gli ingegneri di Philips hanno sfruttato la visione periferica vicina, o paracentrale, per aumentare la percezione cognitiva della scena sullo schermo.
Come osservano Strasburger, Rentschler e Jüttner in Peripheral Vision and Pattern Recognition: A review (Journal of Vision, 2011), la visione paracentrale fornisce al cervello una percezione periferica immediata, che contribuisce a generare le sensazioni su cui si costruisce lo sfondo di una percezione visiva dettagliata.
In breve: un contorno delicato attorno a un dettaglio preciso aiuta a concentrare più attenzione sul dettaglio stesso. Credo che questo sia il concetto più vicino a ciò che Apple e i designer di iOS hanno avuto in mente quando hanno studiato e realizzato le linee guida dell'interfaccia che costruiscono l'esperienza di iPhone X.
Cosa significa tutto questo per gli sviluppatori e gli architetti di un'app per iPhone? Se vi siete tenuti aggiornati studiando le novità della WWDC 2017, avrete probabilmente sentito parlare di Safe Area. È il momento di unire i puntini: concetti che pochi mesi fa erano astratti, ora contano nel nuovo dispositivo Apple e nelle sue linee guida di design. Niente è stato lasciato al caso.
Con iOS 11 Apple ha introdotto il concetto di Safe Area al posto dei layout guide superiore e inferiore (Top e Bottom).
Ecco come appare la Safe Area (quella in bianco) in un'ipotetica applicazione su iPhone 8 (a sinistra) e su iPhone X (a destra). Come si vede, oltre a essere un'area più ampia che si estende verso l'alto (topAnchor), c'è anche una zona inferiore di 34 punti (bottomAnchor) sotto un'area di controllo che sostituisce il tasto Home, assente. Facciamo due conti:
-
667pt − 64pt = 603pt (altezza visibile su iPhone 8)
-
812pt − 88pt − 34pt = 690pt (altezza visibile su iPhone X)
Il concetto diventa ancora più interessante in landscape. In questa condizione, a prescindere dal fatto che la zona dei sensori (il notch) sia a destra o a sinistra, entrambi i margini rientrano con un inset di 44pt.
Notate che, nel caso di iPhone X, l'altezza in landscape non è più simile a quella di iPhone 8 (375pt) ma è un po' più piccola, a causa dell'area di controllo che sostituisce il tasto Home:
-
375 − 32 − 21 = 322 (altezza in landscape su iPhone X)
-
375 − 32 = 343 (altezza in landscape su iPhone 8)
e se calcoliamo il rapporto:
-
(667/343) ~= 1,9 (rapporto larghezza:altezza su iPhone 8)
-
(724/322) ~= 2,25 (rapporto larghezza:altezza su iPhone X)
Significa che i due dispositivi hanno proporzioni diverse, e quindi un'immagine di sfondo a tutto schermo, per esempio, va gestita con cura sui due dispositivi per offrire la stessa esperienza utente.
Questo è ciò che succederebbe se un dispositivo con il rapporto altezza/larghezza di iPhone 8 ma con le dimensioni di iPhone X venisse sovrapposto a quest'ultimo.
Un'applicazione per iPhone X deve sfruttare lo spazio disponibile in modo intelligente, per "estendere" l'area visibile oltre la Safe Area e usare queste caratteristiche per rendere i contenuti dello schermo più interessanti e diretti.
In pratica, cosa significa? Non tutto lo schermo è uguale e non tutte le aree si possono usare per le stesse cose. Diamo un'occhiata.
-
Le aree BLU e VERDE indicano zone che difficilmente verranno usate, se non per mostrare quelle estensioni visive di luce che arriva da fuori (ricordate il televisore Philips all'inizio dell'articolo?).
-
La zona VIOLA indica un'area utile per gli strumenti di navigazione e di controllo.
-
La zona ROSSA indica l'area in cui la nostra applicazione deve essere più reattiva e concreta: il cuore dell'app, dove gli utenti devono dirigere sguardo, attenzione e tocchi.
Proviamo, per esempio, a vedere come gli ingegneri Apple hanno applicato questo concetto all'app Contatti su iPhone X. Per rendere le cose più chiare, sovrapponiamo lo schema qui sopra alla schermata di Contatti.
In questo caso il concetto che abbiamo provato a esprimere sembra identico a quello usato dagli ingegneri che hanno lavorato all'app Contatti inclusa in iOS 11: l'area principale coincide con la Safe Area (quella in cui dirigere attenzione e tocchi). Tutte le altre aree hanno un ruolo più periferico, "completano" l'esperienza utente. Ottimo lavoro.