Il dilemma del web designer : design adattivo vs. reattivo

Condividi questo articolo:


Nelle ultime settimane, mi sono seduto con i miei colleghi per alcune interviste a bordo di nuovi designer dell’organizzazione. Mentre ascoltavo le domande e le risposte, ho continuato a pensare alle meraviglie tecnologiche che usiamo oggi per dare la migliore esperienza agli utenti che interagiscono con i prodotti che progettiamo. Progettiamo prodotti e realizziamo per diversi dispositivi e dimensioni di schermo. Di solito parliamo di fare il primo approccio mobile all’implementazione quando lavoriamo con applicazioni web-based. Gli sviluppatori di applicazioni mobili devono soddisfare diversi dispositivi quando implementano le interfacce utente. Comprendere la differenza tra design adattivo e reattivo aiuterà i progettisti a pianificare ed eseguire con obiettivi, scopi e risultati migliori.

Parliamo delle basi

Il contenuto è come l’acqua. Indipendentemente dal dispositivo che utilizziamo per visualizzare il contenuto, esso deve essere visualizzabile e accessibile a tutti gli utenti. Il contenuto dell’applicazione dovrebbe dare all’utente l’esperienza prevista senza doverla sperimentare o imparare. C’è molta confusione tra i progettisti sulle parole responsive design e adaptive design. La chiara differenza tra il responsive design e il adaptive design sembra un po’ confusa per molti designer con meno esperienza. Prima di andare avanti nello studio delle differenze, diamo un’occhiata al significato di responsive e adaptive design.

Design reattivo (o design responsive)

Il termine responsive design è una parola d’ordine nella comunità del design. La parola responsive design è stata coniata per la prima volta sul libro responsive web design, da Ethan Marcotte. Il sito web responsive mostra il contenuto in base allo spazio disponibile sul browser. I responsive design rispondono al cambiamento della larghezza del browser e modificano il posizionamento degli elementi per adattarsi allo spazio disponibile. Il contenuto si muoverà in modo dinamico per disporsi in modo ottimale per la finestra del browser. Il design reattivo è semplice. In parole povere, responsive è fluido e si adatta alle dimensioni dello schermo, indipendentemente dal dispositivo di destinazione. Responsive utilizza le media query CSS per modificare gli stili in base al dispositivo di destinazione, come il tipo di visualizzazione, la larghezza, l’altezza, ecc, e solo uno di questi è necessario per il sito per adattarsi a diversi schermi.

Design adattivo

Adaptive è utile per il retrofit di un sito esistente per renderlo più mobile. Il design adattivo permette ai progettisti di prendere il controllo del progetto e di sviluppare per più punti di vista. Il progettista può selezionare i punti di vista in base alle esigenze dell’utente e ai tipi di dispositivi utilizzati dai focus group. Adaptive Web Design è stato introdotto nel 2011 dal web designer Aaron Gustafson nel suo libro Adaptive Web Design: Realizzare ricche esperienze con il Progressive Enhancement. È anche conosciuto come un progressivo miglioramento di un sito web.
Il design reattivo si basa sul cambiamento del modello di design per adattarsi agli immobili a disposizione, il design adattivo ha più dimensioni fisse di layout. Quando il sito rileva lo spazio, seleziona il layout più appropriato per lo schermo.

Cosa scegliere per il vostro sito web? Design responsive o adattivo?

Il design reattivo è facile da utilizzare quando si pensa di lavorare con il design adattivo. I progettisti hanno meno lavoro nel controllare il layout e devono scrivere meno codice per farlo funzionare per l’utente. Attualmente, è la metodologia raccomandata per il lavoro dei progettisti.
Responsive non offre tanto controllo quanto adattivo, ma richiede molto meno lavoro sia per la costruzione che per la manutenzione. Anche i layout di Responsive sono fluidi e, mentre i layout adattativi possono e usano percentuali per dare una sensazione di maggiore fluidità durante la scalatura, questi possono di nuovo causare un salto quando una finestra viene ridimensionata. Per esempio, nell’immagine qui sotto, che mostra un layout fluido, il progettista sta usando le larghezze percentuali in modo che la vista venga regolata per ogni utente.

L’adattamento è utile per il retrofit di un sito esistente in modo da renderlo più mobile. Questo permette di prendere il controllo del progetto e di sviluppare per specifiche e multiple viste. Generalmente, si inizia con la progettazione di un viewport a bassa risoluzione e si lavora in modo da garantire che il progetto non sia vincolato dal contenuto. Come accennato in precedenza, è standard progettare per sei risoluzioni. Tuttavia, è possibile prendere una decisione più informata guardando la vostra analisi web per i dispositivi più comunemente usati e poi progettando per quelle viewport.

Pro e contro del Responsive Design e del design adattivo (takeaway)

Quando si tratta di web design, ci sono sia i pro che i contro di come lo si progetta. Sia che si tratti di Responsive o Adaptive, vi consigliamo di fare un passo indietro e di guardare ai vostri obiettivi per il sito web. È per informare la gente, o per vendere un prodotto? Ogni business è diverso e, a seconda della vostra strategia, questo potrebbe dare una risposta a ciò che si adatta meglio alla vostra azienda.

Design reattivo (Pro)

  • Abbondanza di modelli da utilizzare.
  • SEO friendly.
  • Spesso più facile da implementare

Progettazione reattiva (Contro)

  • Meno controllo della progettazione delle dimensioni dello schermo.
  • Gli elementi possono muoversi
  • Annunci persi sullo schermo.
  • Tempi di download mobile più lunghi.

Design adattivo (Pro)

  • I progettisti hanno un maggiore controllo sull’UX per i dispositivi appropriati.
  • Su dispositivi mobili, i dispositivi possono percepire l’ambiente dell’utente.
  • La pubblicità può essere ottimizzata sulla base dei dati utente dei dispositivi intelligenti.

Design adattivo (Contro)

  • Ci vuole più tempo per realizzare il sito web

I dispositivi cambiano continuamente le dimensioni dello schermo, il che potrebbe rendere o rompere il vostro progetto.
Una sfida per l’ottimizzazione dei motori di ricerca perché i motori di ricerca hanno difficoltà ad apprezzare lo stesso contenuto su più siti.

Intervista con un Web Designer: Il design adattivo è il futuro

Ci siamo seduti a chiacchierare con Dave Rodaro, responsabile del design di Net Traffic. Dave crede che il futuro del web design stia nell’adattabilità.

“Il design adattivo è la tendenza. Non è certamente il “be-all and endall”, ma da un punto di vista commerciale e di conversione, è lì che si trova il futuro”.

Il design reattivo – un layout che cambia in modo fluido a seconda delle dimensioni dello schermo – è una soluzione che deriva dai costi a spirale della manutenzione e della gestione di più siti, spiega Dave. Non nega l’importanza della reattività, dicendo che “ha il suo posto”, ma ritiene che dal punto di vista della conversione “può essere una delusione”.

Oggi, le esigenze di ogni tipo di utente di dispositivi stanno diventando talmente specifiche che la sola progettazione reattiva non è semplicemente abbastanza su misura per soddisfare queste esigenze.

Invece, ci dice Dave, la strada da seguire nel lungo periodo verrà da un design adattivo, dove ci sono “diversi layout distinti” per diverse dimensioni dello schermo – modelli diversi per ogni dispositivo, ognuno della dimensione corretta. Ogni modello è costruito per le distinte esigenze di quel dispositivo, che sia il vostro telefono, il vostro tablet o il vostro desktop.

In questo modo ci si libera dei problemi che il design reattivo porta con sé, come il tentativo di caricare immagini delle dimensioni del desktop sul minuscolo schermo del telefono. Ci siamo tutti imbattuti nel problema di un sito mobile che è incredibilmente lento e sovraffollato, anche se tecnicamente reattivo.

Tendenze nel design orientato alla conversione: Passato e presente

Per Dave, il design del sito web focalizzato sulla conversione è fondamentalmente incentrato sulla composizione e la comunicazione del messaggio, e gli unici limiti sono quelli imposti dal software, dall’hardware e, in alcuni casi, dal buon senso.

Parlando di buon senso, Dave ci dice che nei primi anni ’00, la punta di diamante del web design era “tutto in Flash”. Sapete, quella cosa che Adobe vi dice costantemente di aggiornare o installare.

Flash può fare cose incredibili oggi, ma nella sua forma precedente richiedeva molto tempo per il codice, richiedeva molte risorse, e c’erano alcuni siti web sperimentali in 3D interessanti – anche se provocano mal di testa – che probabilmente è giusto non perdere. Un altro problema di avere un sito web basato su Flash è che non tutti hanno la tecnologia per supportarlo, e non funziona sui dispositivi mobili.

Flash è controverso nel migliore dei casi. Con il mobile come astro nascente nel mondo dei siti web di hotel e delle prenotazioni online, il mondo del responsive design può volentieri lasciarsi alle spalle Flash.

Conversione – Centred Design Oggi

Dave dice che oggi il mondo del web design è tornato all’epoca delle origini: pensate ad alcuni dei siti di hotel più eleganti e belli che abbiate visto negli ultimi anni. Che aspetto hanno? (nel caso siate alla ricerca di idee, Dave ha guidato il team sul pluripremiato sito Fitzwilliam Dublin) Dave cita la scuola tedesca di design del Bauhaus quando parla di design a griglia, piatto e semplice.

Sono usciti i titoli al neon lampeggianti per le vostre pagine. Il design semplice e chiaro è in. Quando pensate a come dare un lifting al vostro hotel, pensate a dove la forma incontra la funzione, non a come sopraffare i vostri visitatori con offerte lampeggianti e decine di pagine nella barra di navigazione.

Una considerazione importante quando si desidera che il maggior numero possibile di potenziali ospiti veda il proprio sito, dice Dave, è “spogliare le interfacce utente stravaganti” per gli ospiti che potrebbero avere accesso a meno banda larga, e concentrarsi sulla reattività multi-device. Questo significa assicurarsi che il vostro sito web si carichi rapidamente anche con connessioni lente, e funzioni su desktop, mobile e tablet.

Fortunatamente, questo tipo di design “stripped-back” è esattamente ciò che i top designer e gli utenti internet di tutto il mondo stanno abbracciando come nuovo standard per un buon design orientato alla conversione.

Una parola sul mobile

Dave è fermamente convinto che costruire un buon sito mobile sia più che cercare di stipare tutto sul proprio sito desktop in un piccolo schermo, o anche nasconderne grandi pezzi.

“Dovrebbe essere un sito tutto suo”, dice, con “un concetto completamente diverso”. Oggi, le prenotazioni mobili per gli hotel sono circa un quarto di tutte le prenotazioni in 5 anni, con il modo in cui la tendenza sta esplodendo, saranno quasi certamente la maggioranza. macos/deepLFree.translatedWithDeepL.text

Per massimizzare le conversioni in loco, è importante concepire il sito mobile del vostro hotel come qualcosa di più di una versione ridotta del vostro sito attuale, insiste il progettista.

Prendete spunto da un esperto: dedicate al concetto di sito mobile tanto tempo quanto al vostro desktop.

I clienti: La comunicazione è la chiave

Abbiamo chiesto a Dave della sua esperienza di lavoro con gli albergatori. Cosa impara da loro? Cosa vuole assicurarsi che capiscano quando inizia un nuovo progetto?

In breve, come dovrebbero lavorare insieme albergatori e designer per realizzare i migliori siti web possibili?

Dave ritiene che, alla fine, la chiave sia la comunicazione. A volte un designer o un cliente arriva a un incontro con “una percezione preconcetta di un particolare progetto”. Spesso, per gli albergatori, arrivano con un design basato sul set del loro concorrente più vicino – Dave incoraggia gli albergatori a non accontentarsi.

Ogni progetto di sito web su misura dovrebbe essere adattato, per quanto possibile, a uno specifico hotel. Dave consiglia agli albergatori e ai designer di “non essere mai compiacenti con i compromessi – sforzarsi sempre di trovare un concetto migliore”. Trova un concetto con il tuo designer che sia unico per il tuo hotel, dice Dave, e assicurati che non sia un tiro alla fune, ma un incontro di idee.

Gli hotel sono diversi l’uno dall’altro e hanno cose diverse da offrire, e i loro siti web dovrebbero sforzarsi di riflettere questo, nei limiti dello stile, della reattività e di ciò che è possibile.

Il cuore del design di un sito web di successo è un cliente e un designer che lavorano insieme. Il designer educa il cliente sulla “natura reattiva del web” e su tutto il pacchetto di cose che vanno nella progettazione e nella costruzione di un sito web, mentre l’albergatore porta una conoscenza intima dell’hotel, della sua personalità e di ciò che ha da offrire.

1. Il design adattivo è più flessibile e potente del design reattivo, ed è la via da seguire.

2. Il design del sito web focalizzato sulla conversione riguarda la composizione e la comunicazione del messaggio.

3. 3. Il mondo del web design è in un periodo di ritorno alle origini: pensa a un design basato su una griglia, piatto e semplice.

4. Metteteci tanto tempo per il vostro sito mobile quanto per il vostro desktop.

5. Un sito web design di successo ha bisogno di comunicazione tra designer e cliente, e il design dovrebbe riflettere il carattere di un hotel.

6. Quali sfide ha affrontato il vostro hotel quando lavorate al vostro sito web? Dove pensi che vada il futuro del design?

 


Per ulteriori informazioni visita il sito: immagi.net

Condividi questo articolo: