Design reattivo: migliori pratiche e considerazioni

I siti Web responsive sono siti Web che si adattano a tutte le dimensioni e risoluzioni dello schermo, non solo su desktop ma anche su dispositivi mobili, tablet e talvolta persino TV.

Secondo Statista, il traffico mobile è stato responsabile del 52,64% di tutto il traffico globale nel 2017, il che significa che un sito Web non ben ottimizzato per i dispositivi mobili sta perdendo circa la metà del suo traffico . Entro la fine del 2018, si prevede che la quota di traffico globale per i dispositivi mobili aumenterà al 79%, un aumento eccezionale.

Le aziende senza un sito Web mobile restano indietro a un ritmo allarmante, perché 8 visitatori su 10 smetteranno di interagire con un sito Web che non viene visualizzato bene sul proprio dispositivo. È fin troppo facile per gli utenti premere il pulsante Indietro e provare invece un'attività concorrente, e Google classifica persino i siti Web che non rispondono più in basso nella loro ricerca .

Puoi fare il test ottimizzato per dispositivi mobili di Google qui.

Tutto ciò significa che il cellulare è più importante del desktop? No. L'83% degli utenti mobili afferma che dovrebbe essere in grado di continuare l'esperienza su desktop se lo desidera.

Dai un'occhiata a questa versione di eBay ottimizzata per dispositivi mobili rispetto a come sarebbe se non fosse ottimizzata per dispositivi mobili. Prenderesti in considerazione anche la versione non ottimizzata?

Per progettare siti Web in grado di competere su Internet di oggi, i web designer devono essere esperti di responsive web design (RWD). Da dove dovrebbero iniziare?

Un approccio mobile first al web design reattivo

Mobile-first web design significa progettare prima il sito web mobile e lavorare fino alla versione desktop. Ci sono una serie di ragioni per cui questo approccio funziona bene.

1. I siti Web mobili hanno più problemi di usabilità (questo è dovuto principalmente alla mancanza di spazio sullo schermo), quindi è pratico e più efficiente che l'obiettivo principale sia il design mobile.
2. È più facile aumentare la versione mobile che ridurre la versione desktop (di nuovo, a causa della mancanza di spazio sui siti Web mobili).
3. Il web design mobile-first aiuta a rivalutare ciò che è visivamente e funzionalmente necessario.

La progettazione di un sito Web come sito reattivo per dispositivi mobili costringe i progettisti a porre una serie di domande importanti perché lo spazio sullo schermo con cui lavorare è inferiore. Ecco le domande che devono essere poste:

• Questa caratteristica/funzione è davvero necessaria?
• Come possiamo progettare prima qualcosa di minimalista per i dispositivi mobili che in seguito si amplierà bene per i desktop?
• Questo effetto visivo vale il tempo necessario per il caricamento sul dispositivo mobile?
• Qual è l'obiettivo principale e quali elementi visivi aiutano gli utenti a raggiungerlo?

Daremo un'occhiata ad alcuni esempi di web design responsive tra un momento. Per ora, parliamo di quali dispositivi, dimensioni dello schermo e browser Web sono rilevanti oggi.

Quali risoluzioni dello schermo sono rilevanti per il design web reattivo?

Ecco le risoluzioni dello schermo più comuni tra gli utenti di dispositivi mobili, tablet e desktop in tutto il mondo. Come puoi vedere, esiste un'ampia gamma di risoluzioni, quindi né i dispositivi mobili, né i tablet né i desktop stanno dominando la quota di mercato in questo momento: ciò che questo ci dice è che i designer dovrebbero considerarle tutte quando pensano al web design reattivo.

• 360x640 (cellulare piccolo): 22,64%
• 1366x768 (computer portatile medio): 11,98%
• 1920x1080 (desktop grande): 7,35%
• 375x667 (mobile medio): 5%
• 1440x900 (desktop medio): 3,17%
• 720x1280 (cellulare grande): 2,74%

Proprio come con la ripartizione del dispositivo, dovremmo segmentare i dati in base alla posizione in modo che corrispondano ai dati demografici degli utenti (o ai dati demografici degli utenti previsti) del nostro pubblico di destinazione. Vale anche la pena soddisfare le risoluzioni che stanno guadagnando popolarità, perché mentre alcune dimensioni dello schermo non sono attualmente così comuni, potrebbero esserlo in futuro. Ciò aiuterà i designer reattivi a creare UX a prova di futuro che funzioneranno anche quando la quota di mercato cambia.

Ad esempio, le risoluzioni 360x640 (che corrispondono principalmente ai dispositivi Samsung che utilizzano Android) sono aumentate del 5,43% nell'ultimo anno. I designer possono utilizzare informazioni preziose come queste per decidere i punti di interruzione reattivi chiave prima di iniziare la progettazione di un sito Web.

Quali browser Web sono popolari oggi?

Il responsive web design consiste nell'offrire un'esperienza senza interruzioni su qualsiasi dispositivo e, poiché browser Web diversi visualizzano le pagine Web in modi diversi, i siti Web devono essere testati per garantire che siano compatibili con una varietà di browser Web mobili e desktop.

Anche se la scalabilità di un sito Web ai punti di interruzione reattivi corretti è principalmente responsabilità di uno sviluppatore Web, è il progettista Web che decide esattamente come un sito Web reattivo si adatterà alle varie dimensioni dello schermo al fine di creare un'esperienza utente ottimale.

Ecco una ripartizione mondiale della quota di mercato dei browser Web per dispositivi mobili e desktop.

• Cromo: 55,04%
• Safari: 14,86%
• Browser UC: 8,69%
• Firefox: 5,72%
• Opera: 4,03%
• Internet Explorer: 3,35%

Il design reattivo non significa solo "adattare tutto", ma anche adattarsi alle capacità dell'hardware del dispositivo e del browser Web , nonché alla risoluzione del dispositivo. Un esempio potrebbe essere che, mentre Google Chrome supporta la proprietà CSS overscroll-behavior: (che definisce cosa succede quando l'utente scorre troppo forte verso il bordo del viewport), non è supportato in nessun altro browser web.

Migliori pratiche di progettazione reattiva

Elimina l'attrito

Come accennato in precedenza, un approccio mobile first al responsive web design aiuterà i designer a valutare ciò che è veramente necessario affinché l'utente raggiunga il proprio obiettivo principale.

Man mano che ci avviciniamo alla versione tablet (e successivamente alla versione desktop), possiamo quindi iniziare a pensare agli obiettivi secondari e alle microinterazioni, ai flussi utente e alle CTA (call to action) che rendono tali obiettivi utente realizzabili. Ciò che è più importante è che ci concentriamo prima sugli obiettivi primari dell'utente ed eliminiamo qualsiasi attrito non necessario che non aiuta né gli obiettivi primari né quelli secondari.

Un obiettivo primario potrebbe essere l'acquisto di un prodotto, mentre l'obiettivo secondario potrebbe essere l'iscrizione a una newsletter (che potrebbe portare ad un acquisto successivo).

Ecco un fantastico esempio di eliminazione degli attriti: poiché le interfacce utente mobili sono in genere più difficili da navigare, sarebbe meglio passare a un checkout di una pagina per i negozi di eCommerce mobile e abilitare il checkout in più passaggi solo per i negozi di eCommerce desktop.

Design per i pollici

Il design web reattivo è complicato nel senso che gli utenti interagiranno con il sito Web desktop tramite clic ma la versione mobile tramite tocchi e swipe. Ci sono anche differenze fisiche. Gli utenti desktop in genere hanno i loro computer su una superficie, mentre gli utenti mobili tengono i loro dispositivi nelle loro mani. Queste differenze cambiano in modo significativo il modo in cui i progettisti dell'interfaccia utente mobile progettano i target di tocco e altri importanti elementi dell'interfaccia utente con cui interagiscono gli utenti.

Diamo un'occhiata ad alcuni esempi:

• Le persone in genere si aspettano che la navigazione desktop principale sia in alto; tuttavia, sui dispositivi mobili, dovrebbe essere in basso. I pollici non raggiungono comodamente la parte superiore.
• Anche altri elementi interattivi dovrebbero essere facilmente raggiungibili. Ciò significa tenerli al centro dello schermo perché è più difficile per i pollici raggiungere i lati e gli angoli degli schermi del dispositivo.
• In modo che possano essere toccati con facilità, i link e le CTA importanti dovrebbero avere un'altezza di almeno 44px (i target di tocco più piccoli sono dannosi per l'usabilità).

Letture consigliate: La guida fondamentale all'usabilità mobile.

Sfrutta l'hardware nativo dei dispositivi mobili

L'hardware mobile (come la fotocamera del dispositivo o i servizi GPS) non è specificamente riservato alle app native e, come accennato in precedenza, il design web reattivo non riguarda solo "rendere tutto a posto". Si tratta anche di adattarsi alle capacità del dispositivo. Nel caso del web design mobile, poiché i dispositivi mobili dispongono di fotocamere facili da usare, alcune microinterazioni, come l'immissione di dati, sono in realtà più semplici su schermi più piccoli purché i siti Web sfruttino l'hardware nativo disponibile.

Diamo un'occhiata ad alcuni esempi:

• Scansione di carte di credito/ricarica (perché i moduli sono spesso complicati sui dispositivi mobili)
• Condivisione di foto sui social media, perché il file multimediale è già sul tuo dispositivo
• Autenticazione a due fattori (perché sei già sul tuo dispositivo mobile)
• Controllo rapido delle scorte/analisi (perché le app mobili semplificano le informazioni)
• Esecuzione di una ricerca sul Web con la voce (perché il vivavoce è più semplice della digitazione)

Rendi i layout fluidi/adattivi per impostazione predefinita

Non tutti gli utenti avranno il browser desktop ingrandito. Ciò significa che mentre i progettisti devono considerare i punti di interruzione reattivi dei dispositivi che gli utenti utilizzano oggi, devono anche tenere conto di ciò che accade tra quei punti di interruzione.

I punti di interruzione reattivi dovrebbero essere utilizzati per "ridisporre" il layout e il contenuto su un nuovo dispositivo, ma per tenere conto di tutte le dimensioni intermedie (per ogni evenienza), i layout devono essere altrimenti fluidi (ovvero, si adattano/si allungano naturalmente come il ridimensionamento del browser).

Tieni a mente questi suggerimenti quando progetti layout fluidi/adattivi:

• Le unità percentuali consentiranno agli elementi di essere fluidi.
• L'impostazione di larghezze minime e massime può abilitare lo scenario "ma non andare più piccolo/più grande di questo".
• I formati di immagine SVG possono essere ridimensionati senza perdere qualità e sono indipendenti dalla risoluzione (al contrario di JPG e PNG, che non lo sono).

Non dimenticare l'orientamento orizzontale

Abbiamo parlato di punti di interruzione reattivi specifici in precedenza, ma dobbiamo anche considerare che quelle viste mobili possono essere visualizzate anche con orientamento orizzontale. Sebbene l'implementazione di un layout fluido renderà tecnicamente adattivo il contenuto, perdere una buona parte della visualizzazione verticale può essere un ostacolo all'usabilità e all'accessibilità.

Le navigazioni sono generalmente sicure (a volte sono migliori, in realtà, poiché gli utenti in genere navigano con l'orientamento orizzontale con due pollici), ma lo scorrimento diventa significativamente più difficile, il che non è ottimale poiché l'utente è tenuto a scorrere di più in orizzontale.

I progettisti potrebbero voler prendere in considerazione la progettazione anche per i punti di interruzione del paesaggio; ad esempio, gli elementi piastrellati che si impilano verticalmente sui dispositivi mobili potrebbero essere visualizzati come dispositivi di scorrimento con pulsanti di navigazione a sinistra ea destra, il che significa che l'utente non deve scorrere.

Ricorda, anche la tipografia può essere reattiva

Anche se i designer di UX in genere utilizzano le unità pixel per progettare siti Web, sul Web reale un punto non equivale più necessariamente a un pixel, perché dispositivi diversi hanno risoluzioni diverse. L'iPhone X, ad esempio, ha 458 PPI (Pixel Per Inch), quindi dove le dimensioni dei pixel stanno diventando più piccole, siamo in grado di ottenere una grafica più nitida nello stesso spazio fisico (Apple chiama questa tecnologia "Retina" e Android la chiama “hDPI”).

Ciò significa che una dimensione del carattere di 16px, ad esempio, sembrerebbe più grande o più piccola su alcuni dispositivi a seconda della sua risoluzione. Gli sviluppatori Web utilizzano in genere le unità em per definire le dimensioni dei caratteri, che sono un tipo di unità reattiva in cui 1em è uguale a 1 punto.

Strumenti di trasferimento della progettazione come Zeplin, Sympli, Marvel e InVision possono aiutare i designer a collaborare con gli sviluppatori su questioni che sono una responsabilità congiunta. Mentre i designer eseguono il design e gli sviluppatori eseguono il codice, nel complesso il flusso di lavoro di progettazione del prodotto è uno sforzo di squadra che richiede una solida comunicazione.

Suggerimenti e best practice per l'ottimizzazione delle prestazioni di progettazione reattiva

Il responsive web design non riguarda solo l'aspetto, ma anche il modo in cui si comporta e si sente. È altrettanto importante adattare i siti Web in modo che si carichino più velocemente sul dispositivo previsto.

Caricamento lento Immagini e video non vitali

Immagini e video sono ciò che costituisce una grossa fetta della dimensione totale del download di un sito Web, ma non è necessario caricarli tutti in una volta. Esistono due scenari in cui il rendering dei media può essere ritardato: il contenuto below the fold può essere caricato mentre l'utente scorre below the fold e il supporto che blocca il rendering deve essere scaricato solo dopo che il layout e il contenuto sono stati scaricati. Questa pratica è chiamata caricamento lento, in cui il caricamento di elementi pesanti e non importanti viene ritardato per migliorare le prestazioni della pagina.

Caricamento condizionale

Alcuni elementi del sito Web non sono destinati agli utenti mobili, o almeno non valgono il carico cognitivo aggiuntivo. Vogliamo che i nostri siti Web mobili siano semplici, quindi ha senso nascondere elementi in determinati scenari. Detto questo, dobbiamo assicurarci di non sprecare risorse del browser e larghezza di banda caricando questi elementi anche quando sono nascosti; quindi, è buona norma includere questi elementi solo in determinate condizioni.

Ancora una volta, uno sviluppatore può ottenere questo risultato con il codice; tuttavia, i designer possono migliorare le prestazioni della pagina comunicando le condizioni di quando e dove determinati elementi dovrebbero e non dovrebbero esistere.

Immagini reattive

Come accennato in precedenza, alcuni dispositivi visualizzano più pixel per pollice, il che può causare immagini sfocate se non vengono esportate con la risoluzione corretta. A seconda della risoluzione del dispositivo, alcuni richiederanno immagini di dimensioni doppie (@2x), triple (@3x) e persino quadruple (@4x). I browser Web ora supportano l'elemento <picture> , che sceglie la risoluzione dell'immagine corretta a seconda del dispositivo.

I designer che creano siti Web reattivi possono adattare le immagini al dispositivo corretto assicurandosi di esportare a tutte le risoluzioni utilizzate sui dispositivi odierni (se non sei sicuro, chiedi al tuo sviluppatore: la comunicazione è fondamentale quando si tratta di un web design reattivo).

Conclusione

Il wireframing può aiutare a appianare le pieghe all'inizio del processo di progettazione e questo funziona bene quando si adotta un approccio mobile first al responsive web design. Forse c'è un punto di interruzione reattivo che richiede un po' di attenzione in più, o forse c'è un concetto che semplicemente non è efficace in termini di reattività mobile. È meglio trovare i dossi sulla strada prima piuttosto che dopo (cioè, prima di aggiungere l'estetica visiva).

Strumenti di progettazione moderni come Adobe XD, Marvel e InVision consentono ai team di testare prototipi su dispositivi reali, discutere feedback nel contesto e, in generale, collaborare come una squadra finché il layout non funziona in tutti gli scenari.

L'utilizzo di un flusso di lavoro UX snello in cui il design reattivo è guidato da test interni e feedback garantirà che l'esperienza dell'utente funzioni perfettamente su tutte le piattaforme e le risoluzioni dello schermo prima di essere presentata per la prima volta a un utente reale.

• • •

Ulteriori letture sul blog di Toptal Design:

• eCommerce UX: una panoramica delle migliori pratiche (con infografica)
• L'importanza del design incentrato sull'uomo nel design del prodotto
• I migliori portfolio di designer UX: casi di studio ed esempi stimolanti
• Principi euristici per interfacce mobili
• Design anticipatorio: come creare esperienze utente magiche