Sito Web

9 trend per un sito web nel 2020

Lo sviluppo di Internet in un enorme apparato di informazione si può desumere dalle innovazioni del design, che negli anni hanno cambiato le sembianze del World Wide Web. Soprattutto la rivoluzione mobile ha costretto i web designer a stravolgere radicalmente le proprie concezioni di sito web. Oggi devono presentare contenuti che si adattano agli schermi più piccoli, senza per questo tralasciare informazioni preziose. Ma anche sul piano più specifico del web design si possono osservare continuamente nuovi trend, che ci informano oggi su quello che sarà l’Internet di domani.

Che cosa significa web design nel 2020?

Prima di tutto si possono osservare sviluppi che risalgono all’adattamento mobile degli ultimi anni. Le pagine web devono diventare ancora più efficienti e user-friendly, per poter concorrere nel difficile mercato online, indipendentemente che si visualizzino i contenuti da PC, tablet o smartphone. I design voluminosi e leggermente sovraccaricati degli anni 2000 sono ormai da tempo acqua passata; l’occhio umano ne ha avuto abbastanza. La nuova massima impone di concentrarsi sull’essenziale.

La nuova esigenza poggia le basi nella facilità d’uso, quindi nell’usabilità delle pagine del sito web. Decisivo per questo trend è il responsive design, molto importante per il mercato mobile, che mette in evidenza la flessibilità tecnica in base al dispositivo in uso dall’utente. Un web design moderno significa quindi che una pagina Internet reagisce in modo efficiente al dispositivo dell’utente e si presenta in maniera appropriata. Il design responsive è creato consapevolmente in maniera previdente, di modo che le pagine web possano reagire abilmente a nuovi sistemi o a quelli finora meno usuali. Inoltre i web designer non sviluppano non più solo per i browser, ma molti dei fornitori di pagine web più famosi consentono un utilizzo più semplice dai dispositivi mobili, mettendo a disposizione delle app proprie.

Alcune buzzwords ce le porteremo dietro nel 2020. Tra queste ci sono da una parte l’Internet of Things, che sta alimentando una crescente digitalizzazione della vita quotidiana e offre agli utenti maggiori possibilità di interazione. Dall’altra i progressi essenziali compiuti nella ricerca IA fanno in modo che i servizi web automatizzati migliorino sempre più; i web designer potrebbero tentare di sfruttare appieno anche questo settore.

Non in ultimo ciò significa anche una concentrazione crescente sullo snackable content, che presenta i progetti web nella maniera più semplice possibile e mette al primo posto l’usabilità. Allo stesso tempo questi snack digitali mostrano un ritorno alla tendenza degli anni 2000, che prevedeva un tipo di visualizzazione sgargiante e accattivante. Se questi due trend, vale a dire priorità all’usabilità e allo snackable content, funzioneranno effettivamente in simbiosi e assieme si affermeranno altre idee coraggiose e innovative, il 2020 potrebbe rivelarsi un anno entusiasmante per i web designer.

9 trend che contraddistingueranno il web design nel 2020

In generale il web design si sviluppa sempre nella stessa direzione, prestabilita da anni: un’attenzione crescente per i dispositivi mobili (responsive design), contenuti facilmente fruibili, interfacce create in base agli scopi, e ancora interfacce reattive o interattive. Contemporaneamente gli sviluppi nell’ambito dell’Intelligenza Artificiale influenzano sempre più i web designer, di pari passo con l’accessibilità di nuove tecnologie. Ovviamente nel 2020 proseguono diversi trend del web design iniziati negli anni precedenti e il panorama digitale non cambierà radicalmente. Tuttavia alcuni trend alludono a un ulteriore miglioramento della user experience sulle piattaforme, con l’intenzione di riprogettare già oggi il web di domani.

Primo trend: la velocità/performance acquista maggiore importanza

In realtà si tratta di un principio di base delle pagine web con un buon design più che di un trend: la velocità diventa sempre più importante. Da una parte i ringraziamenti vanno alla rivoluzione mobile; infatti i gestori delle pagine web vogliono che le loro pagine siano raggiungibili facilmente anche dai dispositivi mobili, risparmiando volume dati. Più le pagine Internet si caricano velocemente, migliore sarà la user experience, così come avviene ormai da 10 anni a questa parte. Tuttavia è un trend da tenere sotto osservazione, visto che i web designer rinunciano sempre più spesso a elementi che richiedono molta memoria e lunghi tempi di caricamento, per consentire un utilizzo più veloce del sito.

Molti altri trend del web design si basano su questo. Così il crescente minimalismo nella progettazione dei siti significa che si rinuncia ampiamente a contenuti multimediali che richiedono molto tempo e spazio per essere caricati e si preferisce scegliere dei formati più agevoli in termini di memoria. Le pagine web “long scrolling”, che posizionano tutte le informazioni necessarie su un’unica pagina “a scorrimento”, puntano al fatto che l’utente debba caricare solo questa pagina e non molte altre sottopagine. Anche il sempre più famoso “White Space” indica l’assenza di elementi, che potrebbero limitare la velocità di caricamento di una pagina web.

Internet è cresciuto molto velocemente in un tempo relativamente breve. C’è però chi lo ritiene ancora troppo lento. Soprattutto le reti di dati mobili in molte regioni non sarebbero ancora abbastanza potenti. I web designer possono però contrastare già da oggi mancanze di questo tipo, progettando le loro pagine web nella maniera più semplice possibile.

Altri trend di progettazione correnti del web design moderno, come animazioni interattive, effetti parallasse o uno sfondo dinamico, destano clamore e migliorano (se applicati correttamente) la raccolta di informazioni. Spesso però un design elaborato porta con sé degli effetti negativi, che si ripercuotono sulla performance generale del sito. I web designer devono quindi tenere attentamente in considerazione quali contenuti multimediali e interattivi offrano effettivamente un valore aggiunto per l'utente e quali, invece, rallentino inutilmente il sito web. In generale vale la regola del “less is more”, anche se con ciò non si intende per forza un ritorno al flat design.

È importante notare che la performance di un sito si ripercuote direttamente sulla user experience. In questo caso occorre distinguere tra il tempo di caricamento effettivo e quello percepito dall’utente. I ritardi sono problematici solo se l’utente li percepisce come tali. Perciò i web designer si basano sulle seguenti misure per compensare tempi di caricamento elevati:

• Barra di avanzamento: se il visitatore deve aspettare, almeno sarebbe meglio informarlo per quanto tempo. La barra di avanzamento non riduce i tempi di caricamento, ma perlomeno, se progettata in modo originale, riesce a rendere l’attesa divertente. Quantomeno l’utente non dovrebbe essere indotto a lasciare la pagina mentre aspetta. Infatti basti pensare che la pazienza dell’utente moderno diminuisce in maniera inversamente proporzionale alla velocità di connessione

• Caricare gli elementi chiave per primi: le immagini che vengono integrate con la tecnica del JPEG progressivo non vengono riprodotte dall’alto verso il basso nella risoluzione definitiva, ma si servono del processo di interlacciamento. All’osservatore viene provvisoriamente presentata un’immagine di anteprima in bassa qualità che diventa sempre più nitida fino a quando, terminato il caricamento completo dei dati, non si arriva alla qualità di immagine desiderata. Riassumendo: per i video, le foto e quant’altro, vale la stessa regola che per il contenuto, ossia devono essere di alta qualità, unici e rilevanti per l’utente. Inoltre, risulta sensato che questi contenuti vengano caricati solo quando il visitatore li visualizza. Proprio gli utenti dei dispositivi mobili o che dispongono di connessioni Internet lente beneficiano dai siti ben strutturati, privi di dati superflui

• WebAssembly: le applicazioni web sono diventate, a ragione, una parte essenziale dell'esperienza di navigazione. JavaScript permette ai visitatori di interagire con il sito web, elemento che porta a sua volta a una migliore esperienza. Tuttavia, molte applicazioni web presentano ancora basse prestazioni. Con WebAssembly (Wasm) è stato creato non molto tempo fa un linguaggio che può essere eseguito molto rapidamente nel browser grazie alla precompilazione. Anche se lo standard non è ancora così diffuso, tutti i browser moderni sono già in grado di gestire la tecnologia.

Secondo trend: elementi di sfondo dinamici

Una certezza nella creazione di siti web: CSS. Quasi ogni sito web dotato di un design accattivante si serve del linguaggio dei fogli di stile. Fortunatamente CSS viene aggiornato regolarmente, il che offre costantemente ai web designer nuove e interessanti possibilità per creare siti web di grande effetto. Gli ultimi sviluppi si concentrano sulla flessibilità di un sito web. Ciò è particolarmente importante per quanto riguarda i siti web adattati per i dispositivi mobili. Le immagini e gli altri elementi dovrebbero avere una dimensione e una forma ragionevoli su ogni display.

• CSS Grid e CSS Flexbox: a partire dal CSS3 il linguaggio dei fogli di stile integra le due tecniche Grid e Flexbox. Entrambi i metodi rendono relativamente semplice la creazione di progetti che si adattano alle dimensioni dello schermo. Così facendo, si affida la distribuzione e il ridimensionamento degli elementi a un sistema intelligente senza rinunciare completamente al controllo. Ad esempio, i web designer hanno la possibilità di definire dimensioni minime e massime.

• SVG: il formato immagine SVG non è veramente nuovo, ma offre dei vantaggi che stanno diventando sempre più importanti. Questo garantisce che un file mantenga dimensioni contenute, è flessibile e scalabile (cosa che rende il formato un trend del web design 2020) e può essere formattato con CSS. Dato che SVG è fondamentalmente un formato di file XML, il codice sorgente (e quindi la grafica stessa) può essere modificato direttamente con il linguaggio del foglio di stile. Questa combinazione permette ai web designer di incorporare nel sito web grafiche che possono essere adattate in modo flessibile al display utilizzato o addirittura modificate direttamente dagli utenti.

Terzo trend: micro interazioni

Con micro interazioni si intende un trend dello UX design, in cui determinate interazioni tra gli utenti vengono accompagnate da piccoli effetti animati. Può trattarsi, ad esempio, di un pulsante per il “Mi piace”, il quale ricompensa il clic dell’utente con un simpatico effetto in movimento oppure con una vibrazione dello smartphone. Per l’esperto di UX Dan Saffer sono proprio i dettagli che fanno la differenza in termini di esperienza d’uso.

Quarto trend: scorrimento infinito o long scrolling

L’approccio “Mobile First” non si applica solo alle viewport (che corrispondono all’area di visualizzazione) e alla rappresentazione dei contenuti web senza perdita di qualità sui diversi dispositivi mobili. In futuro la tendenza dei dispositivi mobili avrà sempre più influenza sui contenuti web. In questo contesto uno degli sviluppi più importanti consiste nel passaggio dal cliccare allo scorrere. Essenzialmente il sito “a scorrimento” è un vecchio conoscente, ma i concetti di design come lo scorrimento infinito e l’effetto parallasse continuano a essere molto popolari e rimarranno in voga anche nel 2020.

• Lo scorrimento infinito: lo scorrimento infinito (in inglese: “infinite scrolling”) consente al visitatore di un sito di accedere a nuovi contenuti, scorrendo invece di cliccare. Quando si è raggiunta la fine di una parte informativa, segue immediatamente quella successiva. I social network come Facebook, Instagram, Reddit e Quora ricorrono già da tempo a questo metodo, per presentare agli utenti il contenuto in un feed continuo di notizie. Anche nei blog lo scorrimento infinito è di casa da molto tempo e giocherà un ruolo importante anche in futuro. Lo scorrimento infinito è adatto per i siti con una vasta quantità di informazioni. Mentre un blog con 100-200 elementi può ancora essere impaginato facilmente, nei progetti web di grandi dimensioni in cui il numero delle informazioni è in continuo aumento, la suddivisione in pagine viene utilizzata sempre meno. Infatti è improbabile che un utente visualizzi volutamente la pagina 812 su un totale di 5.782 sottopagine. Al contrario, lo scorrimento infinito viene utilizzato solitamente con algoritmi sofisticati, che prefiltrano le informazioni e presentano per primi gli articoli più rilevanti agli utenti. Tuttavia i gestori dei siti web che nel 2020 intendono seguire il trend dello scorrimento infinito dovrebbero prestare attenzione a un'implementazione che sia adatta per i motori di ricerca. All'inizio per Google era difficile scansionare i siti web che ricorrevano a questa tecnica, ma oggi, grazie alle direttive di progettazione dettagliate fornite dal leader del mercato dei motori di ricerca, si può optare per questa soluzione senza impedimenti. Tuttavia è bene prendere in considerazione i seguenti aspetti:

1. URL personalizzati per ogni sottopagina

2. nessuna sovrapposizione dei contenuti

3. il visitatore deve individuare facilmente gli elementi ricercati

4. tempi di caricamento adeguati

• Effetto parallasse: anche lo scorrimento parallasse non è una novità tra i trend del web design, ma continuerà a essere importante. L’effetto parallasse in movimento viene utilizzato già da alcuni anni come componente basilare dei siti moderni. Ne risulta un effetto di percezione della profondità, dato che i singoli livelli del sito si muovono diversamente. Nel migliore dei casi, oltre all’effetto di movimento, il sito presenta anche elementi che incitano i visitatori a compiere una determinata azione. Lo scorrimento parallasse si può quindi combinare in maniera ottimale con lo storytelling interattivo. Ad esempio la pagina “Every Last Drop” illustra questo trend molto chiaramente.

Quinto trend: user experience personalizzata

La presentazione dei contenuti web a seconda del target si annovera tra i principi di base del web design moderno. In particolar modo nell’e-commerce la selezione dei contenuti e la loro presentazione dovrebbe essere orientata alle esigenze dei potenziali clienti. Mentre finora l'attenzione era concentrata su gruppi astratti di persone, nel 2020 il focus continuerà a essere sull'esperienza d’uso del singolo individuo.

Mentre funzioni come "Potrebbe piacerti…" non dovrebbero mancare in nessun negozio online, fornitori come il servizio di streaming musicale Spotify e il portale video on demand Netflix fanno un ulteriore passo avanti e adattano la gamma di informazioni, prodotti e modalità di presentazione direttamente all'individuo. Perciò è improbabile che due utenti vedano la stessa selezione personalizzata di prodotti e ciò si verifica già a partire dalla pagina iniziale del rispettivo portale. Un trend del web design nel 2020 sarà il sito web personalizzato, in cui i visitatori vedranno contenuti che corrispondono alle loro abitudini d'uso. La base di dati per un'interfaccia utente personalizzata è fornita da strumenti di analisi web come Google Analytics o Matomo, i quali consegnano ai fornitori di contenuti un quadro completo di come gli utenti della rete interagiscano con i contenuti web.

Sesto trend: WebXR

La maggior parte degli utenti conosce la realtà virtuale (VR) dal settore dell'intrattenimento: l'industria dei giochi per computer, in particolare, sta investendo molto nello sviluppo di occhiali per la realtà virtuale e rispettivi giochi. Nel settore degli smartphone, invece, stanno arrivando sul mercato sempre più applicazioni che si basano sulla Realtà Aumentata (AR), cioè la fusione dell'ambiente reale con le informazioni digitali presenti sul dispositivo. Ora anche il World Wide Web sta facendo questo passo. Con WebXR, il W3C ha creato un'interfaccia che sostituisce la tecnologia WebVR esistente, non priva di errori, e permette ai browser di visualizzare i contenuti VR e AR. Se si dispone di occhiali VR, un sito web programmato di conseguenza può essere visitato in tre dimensioni. Come in una stanza, ci si muove avanti e indietro tra le voci del menu e i contenuti. Questo potrebbe essere di particolare interesse per il settore dell’e-commerce in futuro. I negozi online possono così avvicinarsi un po' di più all'esperienza di un negozio. Chi ha gli occhiali adatti, può già provare WebXR su una pagina di prova di Mozilla.

Settimo trend: chatbot

I programmi che svolgono compiti di comunicazione non sono certo una novità. I chatbot derivano dal settore di ricerca dell’Intelligenza Artificiale (IA) e già al giorno d’oggi se ne fa uso su siti web aziendali o su negozi online. Di norma si tratta di una piccola finestra di dialogo che accetta domande poste dagli utenti e che fornisce risposte generate automaticamente, personalizzabili grazie ad algoritmi di apprendimento automatico (machine learning). L’utente ha così l’impressione che il suo interlocutore sia umano. I chatbot sono utilizzati in veste di assistenti virtuali per lo shopping oppure come alternativa alle classiche FAQ.

I chatbot sono così raramente invadenti e si attivano spesso tramite piccoli elementi interattivi. L’utente ha così l’impressione che a rispondergli in tempo reale sia un dipendente del servizio web. Spesso ha la possibilità di rispondere alla richiesta senza abbandonare la pagina visualizzata. La diffidenza nei confronti di un interlocutore controllato tramite IA dovrebbe essersi affievolita da quando spopolano Siri, Alexa, Cortana e simili. Nella maggior parte dei casi i chatbot non sono però più delle barre di ricerca che reagiscono in maniera più dinamica ai termini di ricerca inseriti. Quindi resta da vedere fin dove i chatbot verranno sviluppati nel 2020.

Ottavo trend: interfaccia ordinata

Un aspetto che ricorre sempre tra i trend del web design è che un buon layout, organizzato in modo intelligente, viene spesso imitato. Le interfacce utente di molti siti e web app si orientano per la progettazione e l’organizzazione dei contenuti sempre più a pratiche consolidate, così il layout continua a influenzare l’usabilità di un sito web.

In genere se si sceglie una User Interface (UI) ordinata è difficile sbagliarsi. Allo stesso modo ci si può tranquillamente rifare al design di portali conosciuti da tempo, nel caso di siti più grandi, o a quello dei blog, nel caso di piccole pagine. Recentemente sono emersi due trend nel web design riferiti al layout, che si potranno riscontrare su molte interfacce grafiche anche nel 2020.

• Hamburger menu: questo fenomeno si è affermato in fretta, tanto da rappresentare già per molti utenti una certezza nella struttura dei menu: il piccolomenu a pulsante, che viene denominato in inglese anche “hamburger menu icon” (indicato in italiano anche come “icona ad hamburger”) o “hamburger button”. Inizialmente veniva usato soprattutto per i menu a discesa delle pagine e delle app mobili; ora questo simbolo, che ricorda gli strati di un hamburger e viene spesso rappresentato con il simbolo matematico “≡” (che significa in realtà per “uguale”), contrassegna anche per molte versioni desktop il pulsante del menu.

• Card layout: il secondo trend del web design riguarda la presentazione grafica dei contenuti. I card layout (denominati anche “card-based design”, cioè “design basato su schede” in italiano) vengono utilizzati sempre più: in questo caso vengono presentati contenuti basati su testo e/o immagini o pulsanti di “Call to action” in diversi box, distribuiti su tutta l’interfaccia utente. I vantaggi sono molteplici: oltre alle molte possibilità di progettare un sito in maniera più chiara e otticamente più accattivante, il card layout nel web design ha anche dei benefici da un punto di vista pratico. Infatti, poiché i singoli box o le singole schede fungono da contenitori per i contenuti web, si possono spostare facilmente le griglie all’interno del sito. In particolare, nel caso di un layout responsive, la ridistribuzione dei contenuti delle pagine avviene in maniera più semplice. La popolarità del card layout è da attribuire soprattutto a servizi web di immagini, come Pinterest, o a piattaforme di web design, come Dribbble.

Nono trend: dark mode

Una tendenza che non attraversa solo il web, ma l'intero settore del software: la dark mode. Sempre più utenti attribuiscono importanza ad avere un'alternativa al classico display luminoso. Le interfacce luminose sono particolarmente fastidiose in condizioni di scarsa illuminazione ambientale. Mentre molti programmi e app possono ora facilmente passare a questa modalità, la maggior parte dei siti web salta ancora all’occhio con un bianco predominante, che non è per forza necessario.

Avere successo con i trend del web design

I trend del web design nel 2020 si svilupperanno all’insegna dell’usabilità. Inoltre in futuro i siti web dovrebbero essere progettati in modo sempre più interattivo e permettere allo stesso tempo di accedere velocemente ai contenuti. Così i contenuti web non vengono adattati separatamente per i diversi dispositivi, ma vengono ottimizzati per essere rappresentati su tutti i tipi di dispositivi nell’ambito del design responsive.

Le moderne tecniche web offrono ai web designer nuove possibilità di creare siti coinvolgenti, senza però risultare sovraccaricati. Ma non bisogna mai dimenticare: le tendenze stanno cambiando, stanno emergendo nuove tecnologie, ma l'utente rimarrà sempre in primo piano anche in futuro. La presentazione deve quindi essere sempre adeguata al target e ai contenuti offerti.

Chi al momento sta progettando il proprio sito web oppure vorrebbe aggiornarne uno già esistente dovrebbe sicuramente prendere ispirazione da alcuni di questi trend del web design che domineranno la scena nel 2020. Così oggi si allestisce un sito che sia già in grado di rispondere alle esigenze e aspettative di domani.

Articolo tratto da: https://www.ionos.it/digitalguide/siti-web/web-design/tendenze-del-web-design/