Le cose erano molto più semplici prima che avessimo accesso a Internet sui nostri telefoni e tablet. Avere una presenza online richiedeva la creazione di un sito Web che potesse essere visto solo sullo schermo di un desktop o di un laptop. Tuttavia, ora è necessario esaminare e adattare una varietà di dimensioni dello schermo, che vanno da schermi di desktop e laptop più grandi a schermi di telefoni cellulari e tablet minuscoli, soprattutto perché se un sito Web non viene visualizzato correttamente su un determinato dispositivo, un utente se ne andrà immediatamente.
Il design reattivo e il design adattabile sono due tecniche per garantire che un sito Web sia adatto a display per dispositivi mobili, tablet, laptop e PC. Sebbene entrambi mirino ad affrontare lo stesso problema, utilizzano approcci distinti.
Conoscere le differenze tra queste due tecniche può aiutarti a determinare quale strategia è la migliore per il tuo prossimo progetto UX.
Definiremo un design reattivo e adattabile in questo post, quindi esamineremo i vantaggi e gli svantaggi di ciascuno.
1. Che cos’è il design reattivo e come funziona?
Un sito Web realizzato con un design reattivo offre lo stesso contenuto a tutti i dispositivi, ma è fluido e cambia layout e aspetto a seconda delle dimensioni e dell’orientamento del dispositivo.
Gli sviluppatori utilizzano i CSS per garantire che ogni pagina del sito possa riformattarsi in base alle dimensioni del viewport dell’utente e che il sito abbia solo una base di codice. I punti di interruzione vengono utilizzati per informare il sito quando dovrebbe cambiare per soddisfare le varie dimensioni dello schermo.
Qual è il risultato finale? Su un grande schermo di computer desktop, il sito può avere un layout a quattro colonne, un layout a tre colonne su uno schermo di laptop più piccolo, un layout a due colonne su uno schermo tablet e uno stile a colonna singola su un telefono cellulare. Scoprirai le stesse informazioni di base e lo stesso design su un sito Web reattivo, indipendentemente dal dispositivo che stai utilizzando.
Secondo Amy Schade del Nielsen Norman Group, i designer UX che lavorano su un design reattivo dovranno collaborare a stretto contatto con gli sviluppatori per garantire che il layout sia adattabile a schermi di diverse dimensioni. L’esperienza dell’utente cambierà quando cambiano i componenti della pagina, quindi spetta all’UX designer assicurarsi che il sito rimanga utilizzabile mentre cambia. Un approccio per farlo è garantire che le informazioni più critiche abbiano la priorità su tutti i dispositivi, in particolare sugli schermi più piccoli.
2. Che cos’è il design adattivo e come funziona?
Il design adattivo crea un layout del sito Web unico per lo schermo di ogni dispositivo. Il sito rileva le dimensioni dello schermo durante il caricamento e offre il layout progettato per quel viewport. In effetti, puoi progettare un’esperienza utente unica per ciascuna delle sei dimensioni dello schermo più frequenti: 320px, 480px, 760px, 960px, 1200px e 1600px.
Tuttavia, poiché la progettazione di un sito Web per sei diverse dimensioni dello schermo richiederebbe molto tempo, lo sforzo potrebbe essere limitato facendo riferimento alle statistiche degli utenti per una versione esistente del sito per stabilire le dimensioni dello schermo su cui le persone lo visitano più spesso. Ad esempio, se le statistiche rivelano che la maggior parte delle persone accede al sito tramite il proprio iPad Apple e smartphone Samsung Galaxy, creeresti l’esperienza utente esclusivamente per quelle due dimensioni dello schermo anziché per tutte e sei.
3. I vantaggi e gli svantaggi del design reattivo
Il vantaggio principale del design reattivo, dal punto di vista di un designer UX, è che richiede uno sforzo sostanzialmente inferiore per la costruzione e la manutenzione rispetto al design adattabile. Inoltre, le pagine Web reattive supporteranno un numero infinito di dimensioni dello schermo, il che è una notizia meravigliosa data la frequenza con cui vengono prodotte dimensioni dello schermo nuove e insolite. Poiché i siti reattivi sono considerati ottimizzati per i dispositivi mobili, ottengono risultati migliori nei risultati dei motori di ricerca.
I siti web responsive, d’altra parte, necessitano di codice aggiuntivo da parte degli sviluppatori e anche quando un designer UX e uno sviluppatore collaborano strettamente per garantire che il layout sia leggibile su quanti più dispositivi possibile, è difficile gestire il layout su ogni dispositivo. Di conseguenza, un sito Web potrebbe non essere progettato per fornire un’esperienza utente ottimale su determinati dispositivi. Inoltre, poiché il codice completo del sito web viene fornito indipendentemente dal dispositivo utilizzato per visualizzare il sito, il caricamento di un sito responsive potrebbe richiedere più tempo. Di conseguenza, l’esperienza dell’utente potrebbe essere danneggiata.
Il design reattivo è spesso il metodo preferibile per ottimizzare un sito Web su tutti i dispositivi grazie alla sua flessibilità, in particolare quando il sito viene costruito da zero e ha un numero elevato di pagine Web.
4. I vantaggi e gli svantaggi del design adattabile
Potrebbe essere più semplice per un designer UX costruire i layout multipli necessari per un design adattabile poiché implica solo la produzione di wireframe per la larghezza impostata di ciascuna dimensione dello schermo. L’UX designer ha quindi il controllo completo su ogni layout e può garantire che l’esperienza dell’utente sia ottimizzata per ogni dimensione dello schermo. Di conseguenza, il designer dell’esperienza utente potrebbe incorporare informazioni diverse per le varie dimensioni dello schermo, se lo ritiene opportuno.
Un sito adattato per un’attività di consegna pasti, ad esempio, avrebbe una schermata iniziale di un computer desktop con selezioni di ristoranti e categorie di cibo, nonché una capacità di ricerca della posizione del ristorante. D’altra parte, su un telefono cellulare, la home page dello stesso sito potrebbe semplicemente includere l’opzione di ricerca della posizione del ristorante.
I siti adattivi sono più semplici da costruire per gli sviluppatori e si caricano molto più velocemente dei siti reattivi poiché forniscono semplicemente il codice richiesto per le dimensioni dello schermo specificate.
Il design adattivo, d’altra parte, potrebbe essere molto da gestire per un designer UX. Sebbene sia possibile limitare lo sforzo progettando solo per due o tre delle sei dimensioni dello schermo tipiche, ciò comporterà una formattazione non corretta del sito se le persone lo visualizzano su un dispositivo per il quale non è stato preparato. Anche se tutte e sei le dimensioni dello schermo sono supportate, le dimensioni dello schermo rare rimarranno non supportate.
Il momento ottimale per applicare il design adattivo è quando stai riprogettando o migliorando il tuo sito web. Il design adattivo, ad esempio, può essere la soluzione ideale se un cliente richiede un layout mobile per un sito Web esistente che non intende modificare.
5. I più importanti da asporto
Ora dovresti avere una conoscenza fondamentale del design reattivo e adattabile, nonché i vantaggi e gli svantaggi di ciascuno. Tieni a mente queste cose quando scegli quale tecnica funzionerebbe meglio per il tuo prossimo progetto UX:
Da un gigantesco computer desktop a un minuscolo telefono cellulare, un design reattivo può modificarne il layout e l’aspetto in base alle dimensioni dello schermo del dispositivo su cui viene visualizzato.
Un design adattabile richiede la produzione di un layout unico per ogni dispositivo che visiterà il sito web.
Il design reattivo richiede meno sforzo da parte di un designer UX, ma dovrà collaborare con lo sviluppatore per garantire che il layout del sito sia utilizzabile su tutte le dimensioni dello schermo.
Il design adattivo richiede la creazione di un massimo di sei versioni separate di un singolo sito Web per schermi di dimensioni diverse. Anche se questo è un grande sforzo, consente al designer dell’esperienza utente di migliorare l’esperienza dell’utente per ciascuno dei dispositivi coperti da questi layout.
I siti più grandi che vengono costruiti da zero in genere traggono vantaggio dal design reattivo.
I siti più piccoli in fase di ristrutturazione possono trarre vantaggio da un design adattivo.
