Design adaptive e responsive con il modello A + R.
Cosa succede se combiniamo l’approccio adaptive e responsive?
Il responsive e l’adaptive design sono due metodologie ai dispositivi di qualsiasi tipo e con qualsiasi dimensione dello schermo, fornendo la miglior esperienza a tutti gli utenti. Entrambi cercano di sfruttare al meglio lo spazio disponibile dello schermo e il metodo di interazione che gli utenti usano per interagire con il dispositivo, che sia un puntatore preciso o gestualità. Prima di parlare del modello A + R abbiamo bisogno di analizzare in breve entrambi gli approcci.
Mentre un approccio responsive al design utilizza CSS e/o JS per adattare i layouts e i contenuti basandosi su “punti di rottura” — alias breakpoints — predefiniti, il metodo adaptive fornisce invece template pre-strutturati che vengono utilizzati in base al tipo di dispositivo che si sta utilizzando. Il primo quindi cerca di prevedere e definire quando il layout e i contenuti devono cambiare in base all’orientamento, alla dimensione dello schermo, e ai contenuti stessi, il secondo invece fornisce esperienze mirate basandosi su unico fattore, il tipo di dispositivo, e quindi di utente, che sta accedendo al servizio. La principale differenza tra i due risiede nella struttura dei contenuti e del relativo HTML; Quando progettiamo in ottica responsive, l’HTML e la struttura dei contenuti rimane invariata (a meno che si utilizzi javascript per rimuovere i contenuti dalla struttura), adattandosi alle varie situazioni, mentre in ottica adaptive abbiamo strutture e layout differenti e potenzialmente anche esperienze differenti.
Nonostante le credenze popolari, nello sviluppo di applicazioni web l’approccio adaptive è molto diffuso, ad esempio creando esperienze specifiche per situazioni in movimento — dove le informazioni devono essere di facile consultazione — oppure quando siamo comodi al pc. Twitter, Github e Facebook sono i più grandi esempi sviluppati sul design adaptive.
Entrambi gli approcci sono quindi validi e utilizzati, per decidere, fatti le domande giuste:
- Quanti componenti e complessità ci sono nel progetto?
- Gli utenti hanno le stesse aspettative e interagiscono nello stesso modo di quelli desktop?
Tecniche di responsive design
Quando stiamo realizzando un’esperienza responsive, abbiamo tre approcci per gestire i layouts e i contenuti:
Reflow: Cambiamo la struttura del layout per occupare al meglio l’area disponibile. Nella maggior parte dei casi il risultato è che il contenuto viene incolonnato. Questa soluzione pigra e che non è sempre consigliata.
Resize: I componenti dell’interfaccia vengono progettati in modo da essere fluidi, esattamente come la maggior parte degli elementi HTML. Riempiono tutto lo spazio disponibile e il contenuto si adatta al nuovo spazio.
Show/Hide: Alcune parti dell’interfaccia vengono nascoste (ma continuano ad esistere) o mostrate per sfruttare lo spazio disponibile.
Adaptive Design Technique
Restructuring: L’approccio adattivo ci permette di sviluppare e distribuire differenti layouts per garantire la miglior esperienza per il contesto, ad esempio dispositivi basati solo su gestures o dispositivi touch ibridi.
Introduzione al modello A + R
Entrambi gli approcci hanno pro e contro, ma cosa otteniamo se li combiniamo? Il modello A + R ottiene il meglio dall’adaptive e dal responsive design, introducendo il concetto di breakpoint maggiore e breakpoint minori.
A sta per Adaptive
Come menzionato più su, l’approccio adaptive ci permette di differenziare le nostre esperienze, i contenuti e anche le funzionalità del nostro prodotto basandoci ad esempio sul tipo di dispositivo utilizzato o dalla dimensione dello schermo (in genere più adeguato). Abbiamo parlato di breakpoint maggiori, questo è quello che definirà appunto quale sarà il punto di rottura che definirà l’inizio di un’esperienza, e la fine di un’altra.
Definendo 960px come breakpoint maggiore (in base alle statistiche globali), possiamo immaginare qualcosa di simile:
- L’area sulla sinistra rappresenta gli schermi con dimensioni inferiori a 960px, che distribuirà un layout e dei contenuti specifici per quel tipo di esperienza
- L’area sulla destra rappresenta tutti gli schermi con dimensione maggiore di 960px, che mostrerà un’esperinza studiata per quel tipo di navigazione.
R sta per Responsive
Il breakpoint maggiore che abbiamo definito crea due esperienze che possono essere differenti l’una dall’altra, all’interno delle quali possiamo applicare invece le tecniche di design responsive. Per ognuna delle esperienze definite possiamo definire breakpoint minori per adattare il layout in base allo spazio disponibile. Per esempio, gli utenti che usano un tablet dovrebbero vedere un’esperienza ottimizzata per i dispositivi touch (adattiva), ma adattando comunque il layout in base all’orientamento del dispositivo (responsive).
Adaptive + Responsive
Combinando gli approcci Adaptive e Responsive otteniamo il modello A + R. Con la tecnica adaptive definiremo le esperienze e le funzionalità del nostro prodotto, andando a creare due contesti differenti. Mentre con la tecnica responsive gestiremo i componenti dell’interfaccia, i layout e i comportamenti legati al contesto attuale.
Quando scegliere questo modello
Questo approccio alla progettazione di un prodotto richiede che le persone coinvolte (designer e developers) conoscano e comprendano realmente le esperienze che vogliono fornire per poter scegliere se questo modello è adeguato. Generalmente questo metodo di progettare è richiesto nello sviluppo di grosse applicazioni che devono essere utilizzabili e ottimizzate (in termini di performance) sui dispositivi mobile e che richiedono quindi diverse funzionalità e layout accessibili nello spazio disponibile. Come si può immaginare otteniamo molta flessibilità e possibilità di scelta, ma anche complessità perchè potresti trovarti a gestire due differenti progetti e ambienti, anche se questo è sconsigliabile.
Se il team decide di seguire il modello A + R, ci si può concentrare su un prodotto che fornisce esperienze mirate e curate in base al tipo di utente che lo utilizza, cosa che un approccio solo responsive non può fornire, trattandosi di un compromesso.
Chi utilizza il modello A + R
Molti dei servizi online che spesso utilizziamo ogni giorno seguono questo approccio, a partire da Twitter, Facebook e GitHub che forniscono un’app dedicata sui dispositivi mobile, invece che “incolonnare” e nascondere semplicemente parti del contenuto. Se accedete a questi servizi dal vostro dispositivo mobile potrete notare come loro forniscano esperienze mirate in base alle aspettative che un utente in mobilità ha, rispetto a quelle che invece potrebbe avere una persona seduta alla scrivania.
Seguimi!
Se ti è piaciuto questo articolo, controlla il mio blog, troverai altro materiale sul design e sullo sviluppo web. Puoi anche seguirmi su Twitter. 🎉
