Il design one page: tutt’altro che una sola pagina

Il design e il layout sono sempre fattori importanti per il successo nel business online. Il design non definisce solo in modo determinante la corporate identity (l’identità aziendale) ma si occupa anche di offrire un valore centrale di qualità facilmente riconoscibile. Questo è ancora il fattore più importante nella comunicazione con i clienti, indipendentemente dal fatto che avvenga su di un e-commerce o con un fornitore di servizi.

Per questo il sito web deve innanzitutto essere configurato in maniera professionale ed attrattiva. In quanto vetrina online di un’azienda è il primo punto di riferimento quando un potenziale cliente cerca informazioni e offerte. A seconda del settore sono applicabili soluzioni di design più o meno innovative. A chi la configurazione convenzionale del sito web non basta, potrebbe piacere il design single page, che offre molti vantaggi in quanto alternativa alle soluzioni standard.

Di regola i siti web sono costruiti in maniera simile alla classica carta stampata: l’utente, alla ricerca di informazioni e contenuti, passa da una pagina all’altra; come sulla carta stampata sfoglia il magazine, online clicca tramite la barra di navigazione.

Nel design one page, detto anche single page o pageless design, si viene meno a questa abitudine di passare da una pagina all’altra e sceglie un’altra struttura: l’impostazione del sito web si limita ad una singola pagina. Tutte le informazioni importanti, che si trovano di solito su diverse sottopagine, sono collocate su di una sola. Senza bisogno di ulteriori clic, gli utenti vedono tutti i contenuti importanti ed una navigazione semplice li guida in maniera intuitiva grazie al concept del sito in una singola pagina.

Un sito web realizzato con un design one page consiste in un singolo documento HTML. I contenuti vengono caricati in maniera dinamica. Di regola, nei siti web classici si hanno molti documenti HTML, che sono collegati tra loro. Per far sì che la navigazione d’uso comune tra sottopagine venga meno, si ha bisogno nei siti web one page di un concept di navigazione speciale che accompagni gli utenti e gli permetta un uso intuitivo.

• Una barra di navigazione fissa appartiene alla maggior parte dei siti one page. La navigazione resta sempre fissa nell’immagine, mentre l’utente può in ogni momento passare ad un altro elemento della pagina.

• Grazie agli inviti all’azione o ad altre call to action (CTA), l’utente salta inoltre entro il documento HTML in diversi punti.

• Con l’aiuto di scrollspy l’utente sa in qualsiasi momento in quale punto del sito web si trova.

• Attraverso lo smooth scroll (effetto scorrimento verticale morbido) il passaggio tra diversi elementi o indietro all’inizio della pagina non sembra brusco. Una demo dell’effetto la trovate qui.

• Spesso infografiche interattive e animazioni sono al centro di un sito web con design one page. Un buon esempio per grafiche interattive è Olympic Story, il sito web sulla storia dei giochi olimpici.

• Spesso si inserisce anche il parallax scrolling. Contrariamente allo scrolling tradizionale i singoli elementi e livelli del sito web si muovono a ritmo diverso. I siti web dovrebbero ricevere maggiore profondità attraverso l’uso di questa tecnica. Un esempio classico per il parallax scrolling è questa pagina del sito web tedesco Aktion Mensch.

• Anche il flat design si usa spesso in combinazione con il design one page. Qui, in quanto web designer, si rinuncia consapevolmente ad ombre, movimenti, elementi tridimensionali e grafiche che sembrano realistiche in generale. Il flat design dovrebbe rafforzare il carattere ridotto e minimale del layout one page, mettendo al centro i pochi contenuti nella loro semplicità e strutturabilità. Inoltre, il design ridotto porta a tempi di caricamento più brevi e a migliori performance del sito web. Un buon esempio di flat design è la pagina iniziale del sito web di Microsoft.

La struttura semplice e ad una pagina porta molti vantaggi con sé, ma non è adatta per tutti i tipi di siti web. Chi dovrebbe prendere in considerazione di usare il web design più trendy del momento?

Il primo fattore decisivo è il contenuto. Se si desidera presentare molte informazioni, eventualmente anche in diverse categorie, un sito one page è probabilmente inadatto. Qui si consiglia di creare una struttura e una navigazione con sottocategorie e sottopagine chiara per mettere a disposizione dell’utente le informazioni in maniera panoramica. Un portale di notizie sarebbe ad esempio difficilmente configurabile con il design one page, soluzioni generali multipagina hanno più senso sulla base dell’ampiezza di informazioni e categorie.

A parte la quantità di informazioni, dipende anche quale sia l’intenzione nascosta dietro al sito. I siti one page si adattano molto bene quando si ha come scopo soprattutto la vendita. Con un sito web aziendale realizzato con design single page si ha la possibilità ideale di trasmettere in maniera chiara e panoramica ai visitatori i punti fondamentali e le competenze di base. Se le informazioni sono preparate in un ordine sensato, il potenziale cliente non deve racimolare le singole informazioni su diverse sottopagine, ma invece ha tutto quello che è rilevante sotto gli occhi.

Idealmente si guida il visitatore in una direzione: direttamente alla conversione. Perciò, alla fine della pagina realizzata con design one page si trova quasi sempre la rispettiva CTA (Call to action), che esorta all’acquisto, all’iscrizione, all’ordine, alla partecipazione o simili. Per portare gli utenti nella direzione desiderata, i contenuti devono anche essere preparati in maniera adatta e avere una connessione tra loro. La parola chiave è storytelling: chi vuole convincere gli utenti, deve raccontare una storia. I design one page offrono una possibilità eccellente di raccontare la storia di un prodotto, un’applicazione o una campagna. La fusione di testo e contenuti multimediali crea una user experience particolare, che non interrompe il flusso di lettura. Come si combini lo storytelling con l’interattività, Mercedes l’ha mostrato con questa campagna pubblicitaria. Con diversi elementi cliccabili ed interattivi e video, l’azienda porta gli utenti insieme al protagonista della storia in un viaggio.