Design adaptive e responsive con il modello A + R.

Cosa succede se combiniamo l’approccio adaptive e responsive?

Mattia Astorino
Jul 3, 2019 · 6 min read
Image for post
Image for post
Illustrazione di Diego Pavan

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.

Image for post
Image for post

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.

Image for post
Image for post

Show/Hide: Alcune parti dell’interfaccia vengono nascoste (ma continuano ad esistere) o mostrate per sfruttare lo spazio disponibile.

Image for post
Image for post

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.

Image for post
Image for post
Different experiences, different usage

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:

Image for post
Image for post
  • 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).

Image for post
Image for post

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.

Image for post
Image for post

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. 🎉

Image for post
Image for post
Storie di design, esseri umani e interazioni.

Sharing is caring:

Se hai trovato questo articolo interessante, lasciaci qualche applauso 👏👏👏👏👏👏👏👏👏👏 e condividilo con qualcuno! 😊

UX Tales è una pubblicazione aperta: se vuoi proporre un tuo articolo, scrivici su Twitter o su Facebook

UX Tales

Storie di design, esseri umani e interazioni.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store