Responsive design o adaptive desing? questa era la domanda che qualche anno fa ci si poneva all’inizio di ogni progetto digitale. Poi ha “vinto” il responsive design e l’adaptive si è un po’ dimenticato ma adesso che la customer experience da mobile sta diventando sempre più importante, forse andrebbe riconsiderato.
Creare una customer experience coinvolgente è fondamentale sia per il designer che per gli utenti. Ci vogliono molte ore di lavoro per scegliere la palette colori, il font, foto e icone che unite trasmettano quel sentimento di sicurezza e calma che fa procedere le persone lungo i funnel.
Quando pensiamo alla progettazione mobile l’aspetto visuale diventa ancora più importante perché le persone sono in movimento e quindi prestano meno attenzione al testo. Solitamente fanno una scansione veloce della pagina per cercare le informazioni oppure per vedere se c’è qualcosa di interessante. È chiaro quindi che la scelta degli elementi visivi diventa ancora più importante su mobile rispetto al desktop.
Lo smartphone è al centro delle customer journey
Oggi il mobile è diventato il centro delle customer journey, perché anche se si utilizzano altri device spesso comincia tutto dallo smartphone e poi si passa ad altri device per approfondire o terminare (finalizzare acquisto).
Per progettare i contenuti per smartphone si può utilizzare principalmente 3 modalità:
RESPONSIVE DESIGN
Crea un unico design che può essere utilizzato per tutti gli schermi. Solitamente si parte a progettare a metà della risoluzione (1280 px o 1366 px di larghezza) e poi si adattano i layout in base a delle risoluzione standard che corrispondono al cambio di device: da 1023px a 768px per tablet, da 767px a 320px per smartphone.
Questa soluzione sembra la migliore per gli utenti perché il sito è unico e quindi gli elementi e i layout non cambiano molto tra i diversi device.
Per i designers è molto importante fare attenzione alla gerarchia visiva dei progetti che usano il responsive design. Spesso la visualizzazione su piccoli schermi tende ad “appiattire” tutti i contenuti su un unico livello. Risulta quindi molto importante modificare alcuni elementi per trasmettere lo stesso messaggio su più device. Si pensi ad esempio ad un blog con un articolo in primo piano e altri secondari. Su desktop la gerarchia è spesso data dalla dimensione maggiore della foto del primo articolo. Su smartphone non si può utilizzare la larghezza orizzontale per trasmettere questa gerarchia, quindi bisogna pensare o di utilizzare una maggiore altezza della foto in primo piano, oppure togliere importanza a quelli sotto (eliminando la foto ad esempio).
Un altro aspetto a favore del responsive design è la SEO: i siti che utilizzano questa modalità di progettazione sono favoriti dai motori di ricerca.
Oggi questa è la tecnologia più usata perché è quella meno costosa dal punto di vista della progettazione. Esistono sistemi di gestione del riposizionamento dei contenuti che permettono di cambiare il layout molto velocemente in più la fluidità del contenuto garantisce una buona visualizzazione delle informazioni su quasi tutti i monitor e risoluzioni.
ADAPTIVE DESIGN
Con l’adaptive design si progetta differenti siti a seconda delle risoluzioni utilizzate. Come si può capire c’è molto più lavoro dei designer e degli sviluppatori, e questo è il principale motivo per cui è stato un po’ messo da parte.
Però ha un punto di forza molto importante: si adatta molto meglio alla customer experience di oggi. Il responsive design parte sempre da un aspetto orientato al desktop, con interazioni e layout che partono dal desktop, anche se disegnate mobile first e quindi a dimensioni ridotte.
L’adaptive design implica un cambio di mindset.
Progettando con questa metodologia posso sfuttare tutte le possibilità dello smartphone.
Ad esempio se sto camminando in una strada guardando il mio smartphone, il responsive design mi permette di vedere in modo corretto le pagine del sito che sto visualizzando (testo e immagini), utilizzando l’adaptive design può intercettare dove sono e se sto passando accanto a Starbucks offrirmi un caffè gratis o darmi uno sconto per i miemi acquisti.
Con l’adaptive design posso anche progettare specifici layout per le risoluzioni più piccole e quindi progettare, il flusso del check out specifico per mobile inserendo anche quelle funzionalità specifiche dello smartphone come l’accesso alla camera, il riconoscimento facciale o dell’impronta.
Quindi possiamo dire che l’adaptive design si adatta al contesto di uso, sia del device che dell’ambiente in cui lo stai usando, quindi offre maggiori possibilità di personalizzazione e di coinvolgimento con le persone.
M.SITE
Viene creato un sito differente per la versione mobile che ha anche una sua url.
In conclusione
Possiamo quindi dire che il responsive design è diventato uno standard e va quindi considerato ad inizio progettazione in quanto i layout e gli elementi visivi scelti devono essere pensati per tutte le risoluzioni, soprattutto quelle più piccole. L’adaptive design deve essere visto come un possibile accrescimento dell’esperienza da mobile, come una tecnologia che aiuta le aziende a fornire dei servizi o dei percorsi progettati specificatamente per mobile e quindi migliorare la customer experience sia attraverso una visualizzazione e un’interazione ad hoc, sia attraverso a servizi pensati per il task che si vuole portare a termine e quindi facilitarne l’esecuzione.
Il responsive design si riferisce all’aspetto tecnico, l’adaptive design a quello più creativo e di engagement.
Reference e dove imparare di più
Interaction foundation. Corso – Mobile User Experience Design
Luke Wroblewski
Altri materiali interessanti sul suo sito https://www.lukew.com/