Nel 2017 sul web c’è stato il preannunciato sorpasso degli utenti Mobile rispetto a quelli desktop.

Che il sito debba essere responsive e progettato per mobile è ormai d’obbligo. Per essere al passo con i tempi è però importante anche aumentare le performance dei siti web su dispositivi Mobile e migliorare l’esperienza degli utenti che utilizzano questo tipo di dispositivo.

1 - Lo spazio bianco come parte integrante del design

Il web è cresciuto e maturato: design troppo ricercati, con animazioni ed effetti fini a se stessi, stanno lasciando il posto a pagine web semplici, che mettano in evidenza i contenuti.

Utilizzare pagine web con design pulito, semplice e più spazi bianchi, comporta i seguenti vantaggi:

• numero minore di immagini, con conseguente miglioramento dei tempi di caricamento
  
• gli spazi bianchi, se utilizzati nel modo corretto, evidenziano i contenuti e attirano l’attenzione dell’utente sulle Call to Action
  
• utenti più attenti (meno disturbati) tendono a generare un maggiore numero di conversioni (che solitamente consistono nella compilazione di un form).
  

Si tratta di un “design semantico”, che predilige la chiarezza delle informazioni e l'esperienza utente.
Questo modo di concepire il design delle pagine web si abbina perfettamente al concetto di progettazione “mobile first”, che prevede la preparazione di un sito web a partire da come il sito verrà visualizzato sugli smartphone, perché è così che lo vedrà la maggior parte degli utenti.

2 - Caratteri e colori: come utilizzare la tipografia

Esistono già siti web che utilizzano caratteri molto grandi e colorati, ma è una tendenza in rapida diffusione.

Ridurre invece il numero di immagini in una pagina web vuol dire affidare alla tipografia un ruolo più importante.
Il concetto alla base è il seguente: se uno slogan ha dimensioni tali da essere visto da lontano, allora riuscirà a catturare meglio l’attenzione degli utenti e a rendere chiari il contenuto e il contesto della pagina.

In ambito mobile questa è una scelta vincente: a differenza delle immagini, che aggiungono peso a una pagina, utilizzare una tipografia “importante” non influisce sulle prestazioni.

Parallelamente, l’esperienza utente migliora, poiché l’utilizzo di questo tipo di tipografia, abbinato all’utilizzo degli spazi bianchi, tende a favorire l’interazione degli utenti con gli elementi “principali” della pagina (link o call to action).

In merito alle call to action: sempre di più i pulsanti con effetti luce o pseudo 3D lasceranno il posto ad elementi dal design pulito, che ricorrono alla tipografia per distinguersi dagli altri elementi presenti nel contesto in cui sono inseriti.

3 - “Card Design”: un mosaico di tessere informative

L’esempio di Pinterest ha portato ad una crescita del numero di siti web che propongono un design basato sul principio utilizzato dal social network, ovvero la condivisione di fotografie.
Si chiama “Card Design”, cioè un design con una griglia in cui trovano posto delle “tessere” che racchiudono i contenuti da presentare.
La singola tessera consente poi l’eventuale approfondimento ad una pagina di contenuto dedicato.

Perchè utilizzare questo tipo di design?

Si ritiene che gli utenti, ormai abituati ad interagire con Pinterest, si sentano più coinvolti quando visitano un sito che presenta allo stesso modo i propri prodotti o servizi.

Al di là del concetto di “assuefazione a Pinterest”, sicuramente questo tipo di design si presta perfettamente all’approccio di progettazione “mobile first” dal quale ormai è impossibile prescindere quando si realizza un nuovo sito web.

Un altro vantaggio del “Card Design” è quello di riuscire a presentare in poco spazio le informazioni, consentendo di concentrare nella stessa pagina (o meglio “spazio geometrico”) un numero di blocchi informativi superiore a quello normalmente consentito da design di altro tipo.

Perché la diffusione del “Card Design” è destinata a crescere?

Il “Card Design” potrebbe avere ulteriori margini di miglioramento grazie all’uso di quello che si chiama “CSS Grid Layout”: un nuovo modo (questa volta “tecnico” e non legato al design) di realizzare le pagine web, che sta iniziando ad essere supportato dalle ultime versioni di tutti i Browser.
Ma è presto per parlare di questo … Stay Tuned!

4 - “Hamburger” Menu? Sì, grazie

È finalmente ora di hamburger… tuttavia, non parliamo di cibo, ma dell’icona a tre righe che compare spesso nella parte superiore delle App Mobile e, sempre più frequentemente, dei siti web.

Questa icona ha assunto il significato intrinseco "clicca qui per vedere il menu" ed è quindi una metodologia di navigazione estremamente intuitiva per l’utente e comoda da inserire nel layout della pagina web.

La novità interessante per il futuro riguarda la collocazione di questa icona: in un numero crescente di siti web la si vedrà nella parte bassa dello schermo invece che nella parte alta.

Il motivo di questo cambio di tendenza è causato dal fatto che sempre più le App Mobile prevedono una navigazione che parte dal basso dello schermo.

Poiché l’utilizzo delle App Mobile finisce con influenzare le abitudini degli utilizzatori, è probabile che un numero sempre maggiore di siti web, per uniformità di comportamento, presenterà l’icona a tre righe nella parte bassa dello schermo dello smartphone.

5 - Form? Grandi e semplici da usare

Nei siti web uno dei metodi più usati per la raccolta di richieste di contatto è l’utilizzo dei form.

La tendenza attuale è predisporre dei form che riescano a mettere a proprio agio l’utente che li compila, esattamente come se stesse facendo una semplice telefonata per richiedere informazioni.

Le linee guida generali per realizzare dei form che riescano a perseguire tale obiettivo sono:

• I form devono essere grandi, i campi ben visibili e corredati di etichette sufficientemente esplicative
  
• Non deve sussistere il minimo dubbio su quali campi è obbligatorio inserire e quali no.
  

Le ultime tendenze suggeriscono di:

• utilizzare form che si aprano a “tutto schermo” e “sopra” la pagina che ha consentito di attivarli; ovviamente non deve mancare la consueta “X” che consenta all’utente la chiusura del form stesso nel caso in cui cambi idea
  
• evitare il re-indirizzamento a pagine di ringraziamento separate, ma utilizzare messaggi di ringraziamento e/o informazioni direttamente “sopra” il form
  
• questi messaggi di ringraziamento devono indicare chiaramente tutte le informazioni relative alle modalità attraverso le quali l’utente riceverà la risposta a quanto richiesto
  

Se nella progettazione dei form si seguono questi consigli, è probabile che l’utente:

• continui ad analizzare la pagina che stava consultando (e che l’ha portato a richiedere le informazioni) scoprendo altre informazioni che potenzialmente possono essergli sfuggite in un primo momento
  
• percepisca una maggiore serietà e non abbia dubbi sul fatto che la sua richiesta avrà quanto prima un’esauriente e certa risposta.

6 - Più conversioni con le Scroll-Animation

L’utilizzo di animazioni innescate dallo scorrimento della pagina è una buona tecnica di design quando l’obiettivo di una pagina web è raccontare una storia, descrivere un prodotto o, più concretamente, generare conversioni.

Le animazioni assumono quindi un ruolo strategico: possono essere utilizzate per portare l’utente a compiere un’azione prefissata, o per illustrare i dettagli di funzionamento di un dato servizio/prodotto, mantenendo vivo l’interesse del visitatore che sta vedendo la pagina.

Per non influire sulle prestazioni, questo tipo di animazione sarà sempre più declinato in un’ottica minimalista ed essenziale.

Nel corso del 2018 l’utilizzo di questi elementi di design continuerà a crescere.

7 - Aumentare il coinvolgimento degli utenti con le micro-interazioni

Studi di usabilità dimostrano che gli utenti prediligono le pagine web che consentono un’interazione e che permettono di “influenzare” i contenuti stessi della pagina o il modo in cui questi vengono presentati.

Le micro-interazioni, come l’aggiunta di una recensione ad un prodotto o il “consiglia ad un amico”, se ben progettate, aumentano il senso di coinvolgimento dell’utente e contribuiscono alla sua fidelizzazione.

Una micro-interazione ben progettata è un’interazione che consente all’utente di “dire la sua” in modo veloce e naturale: quindi senza uscire dalla pagina che stava visualizzando o attendere ricaricamenti della pagina stessa.

L’utilizzo di micro-interazioni di questo tipo continuerà a crescere nel corso del 2018.

8 - I testi sono sempre più importanti

Il design minimale di cui abbiamo detto sopra ha lo scopo di porre l’attenzione sui contenuti delle pagine.

Gli algoritmi di indicizzazione usati da Google continuano a dare sempre più importanza ai contenuti presenti nelle pagine, perché testi di qualità e utili forniscono un servizio migliore all’utente del motore di ricerca, obiettivo delle attività di Google.

È quindi più importante che mai produrre contenuti utili, accurati, originali, chiari e comprensibili per gli utenti.

9 - Le immagini? “Autentiche” e di alta qualità

Le immagini non scompariranno del tutto dai siti web ma, nella maggior parte dei casi, si ridurranno di numero.

E cosa dire delle immagini superstiti?

Le attuali tendenze circa l’utilizzo delle immagini all’interno dei siti web suggeriscono di utilizzare immagini di qualità.

Il modo più semplice per reperire delle immagini di qualità è utilizzare una delle tante Image Bank presenti su Internet.

Il modo più complesso (e che garantisce il risultato migliore) è fare uso di immagini “originali” realizzate da professionisti del settore.

Se non si è in grado di utilizzare immagini originali, la scelta dovrebbe cadere su immagini che siano:

• assolutamente contestualizzate all’argomento presente nella pagina in cui sono inserite
  
• spontanee e “reali”
  
• accompagnate da una didascalia di descrizione.
  

Anche seguendo queste due regole, quando si utilizza un’immagine da Image Bank c’è il rischio potenziale di trovare la stessa immagine utilizzata su un sito web di un competitor: è quindi opportuno attingere a fonti alternative rispetto a quelle più comunemente utilizzate.

10 - I Video? Di qualità, full-screen, interattivi e che forniscano risultati statistici

Gli utenti guardano sempre di più video, perché sono più immediati della lettura di un testo e perché il cervello umano elabora le immagini ad una velocità superiore.
Utilizzare un video all’interno di una pagina web porta quindi spesso ad un aumento del coinvolgimento dell’utente che la sta visitando.

Ma quali sono i suggerimenti per utilizzare i video in maniera efficace?

Un video che sia in grado di aumentare il coinvolgimento dell’utente e che allo stesso tempo sia utile dal punto di vista del marketing deve:

• essere di qualità
  
• essere utile e non fine a se stesso
  
• essere visualizzato possibilmente a piena finestra e perfettamente inserito nel design del sito web
  
• fornire risultati statistici sul grado di coinvolgimento degli utenti che lo vedono.
  

Se per i primi tre punti non c’è molto da aggiungere, l’ultimo aspetto merita una breve spiegazione.

Il modo più semplice per misurare il grado di coinvolgimento degli utenti che visitano una pagina contenente un video è analizzare il numero di utenti che la visitano e il tempo di permanenza sulla pagina stessa.

In molti casi questo dato è sufficiente per valutare l’efficacia del video dal punto di vista del marketing. È quindi sufficiente caricarlo su YouTube, condividerlo all’interno del sito web ed affidarsi al monitoraggio fornito da Google Analytics.

Tuttavia è possibile integrare queste informazioni utilizzando dei servizi ad-hoc che sono in grado di:

• misurare il numero di visualizzazioni
  
• geo-referenziare gli utenti
  
• valutare esattamente quali sono le parti del video che vengono viste
  
• inserire nel video dei controlli che consentono di attivare degli eventi sincronizzati con il video stesso (aperture di popup, aggiornamento di contenuti della pagina, visualizzazioni di Call to Action, etc).
  

Nel prossimo futuro sarà in crescita il numero di siti web che integreranno nel loro design dei video realizzati secondo queste modalità e che cercheranno di aumentare il grado di coinvolgimento degli utenti che li visiteranno. Il gestore del sito web trarrà benefici, in termini di marketing, dall’analisi statistica dei dati che saranno in grado di fornire.

11 - Pagine web “sicure” per una migliore esperienza utente

Il 2017 ha visto la crescita di fenomeni che hanno lasciato il segno sulla fiducia degli utenti web.

La diffusione su larga scala di malware (Ransomware per esempio) ha determinato un aumento della soglia di attenzione dei navigatori che oggi sono più attenti a tutto quello che può apparire “insolito” mentre navigano.

In questo contesto si inserisce perfettamente l’adeguamento dei siti web al protocollo HTTPS (certificati SSL) caldamente suggerito da tutti gli addetti ai lavori e “spinto” e supportato anche dalle ultime versioni dei vari browser, che avviseranno gli utenti con messaggi di vario tipo quando troveranno siti web che raccolgono dati sensibili senza fare uso di questo protocollo sicuro.

I costi da sostenere per adeguare il proprio sito web al protocollo HTTPS è irrisorio rispetto al valore della fiducia del visitatore che si è riusciti ad attrarre e che si rischia di perdere nel momento in cui il browser lo avvisa con un messaggio del tipo “sito non sicuro” o simile.

Una navigazione sicura e l’immissione di dati sensibili, con la certezza che questi navigheranno sulla rete mediante protocolli cifrati virtualmente inviolabili, sono due aspetti che sempre più contribuiranno a fare crescere la reputazione di un sito web e dell’azienda che rappresenta.