Home page: il biglietto da visita del tuo business

Enrico Comentale
TIDE
Published in
6 min readJan 4, 2021

--

L’home page è il nostro biglietto da visita. Migliorarne l’usabilità e il design vuol dire migliorare il valore dell’intero prodotto.

Le prime impressioni contano

Con il precedente articolo ci siamo allenati sulla creazione di un’esperienza utente ottimale in fase di registrazione.

Ma come facciamo a ottenere la fiducia dei visitatori? Come facciamo a far si che scelgano noi tra una marea di competitor (diretti e indiretti) presenti sul mercato?

Considerando che l’attenzione media di una persona online è di 15 secondi (nngroup), abbiamo davvero poco tempo per far breccia nel cuore dell’utente prima che decida di abbandonare il nostro sito.

Il 75% degli utenti ammette di giudicare la credibilità di un’azienda basandosi sul design del rispettivo sito.

Standford Web Credibility Research

Essendo la home page la pagina principale del sito, il primo punto di partenza per l’esperienza dei nostri utenti, nel progettarla è necessario il rispetto e l’applicazione di alcune regole di usabilità (in sinergia con una progettazione visiva e contenutistica) per costruire esperienze di qualità e, di conseguenza, conquistare la fiducia degli utenti.

Tra i tanti aspetti essenziali per la progettazione dell’home page, abbiamo voluto selezionarne alcuni come i principali a cui dare attenzione: scorriamoli insieme e vediamo qualche esempio :)

Accogliere e contestualizzare

Outcrowd on Dribbble.com

All’atterraggio sulla home page, provenienti magari da una pagina di ricerca Google, gli utenti non sanno cosa aspettarsi dal nostro sito, ma sicuramente sanno quello che cercano. Il nostro compito è cercare di rispondere alla loro domanda (se siamo in grado, certo).

Nell’esempio sopra, probabilmente stiamo programmando una vacanza in Sicilia. Arrivati su questa pagina, avremo sicuramente un sacco di domande e la pagina qua sopra ci dà davvero poche risposte: che tipo di offerta viene proposta? Si sta parlando di case in affitto? Alberghi? O magari sono pacchetti che includono oltre l’alloggio attività guidate. Ma prima ancora di tutto ciò, la vera domanda è: chi sono?

La mancanza di testi non aiuta, facendo perdere valore anche a quella CTA “Discover more” posizionata sotto al titolo. Senza un contesto, è difficile addirittura comprendere il fine dei tasti posti in basso.

L’obiettivo è guadagnare l’interesse e la fiducia dell’utente, e per farlo dobbiamo partire da chi siamo e cosa facciamo. E magari anche cosa ci rende migliori dei nostri competitors.

Quindi, a meno che non siate già affermati sul web, pensate ad un titolo e una breve descrizione che faccia percepire all’utente la vostra identità e il vostro obiettivo. Ovviamente non serve inondare la home page di informazioni: se avete voglia di raccontare più nel dettaglio chi siete e cosa fate potete sempre aggiungere una sezione dedicata a questo tipo di informazioni sotto il nome, per esempio, di “About”.

Piccolo consiglio extra: iniziate i vostri testi con parole inerenti al vostro business, in modo da essere indicizzati e categorizzati di conseguenza su internet.

Incuriosire e rivelare

DStudio® on Dribbble.com

In questo esempio il titolo e la descrizione, seppur in poche parole, ci fanno intendere l’obiettivo della pagina e del prodotto in questione: organizzare una raccolta fondi per un regalo comune. Classica scena per compleanni di amici, no? La CTA sotto è più che parlante e ci invita a creare subito una lista. Molto meglio del solito inefficace «scopri di più»

Ma come funziona davvero questa lista? Tutti possono aggiungere un contributo? È necessario scaricare un’applicazione o avere un account per partecipare?

Qui mancano alcuni dettagli sulla proposta del sito, dettagli che potrebbero fare la differenza nella scelta tra questo e un altro sito per lo stesso tipo di servizio.

Non stiamo chiedendo di inserire il manuale di utilizzo del prodotto, quello sarebbe controproducente, però qualche caratteristica chiave in più potrebbe esser raccontata. Magari proprio quell’elemento caratterizzante, distintivo, che gli altri non hanno.

Non pensate solo a righe di testo descrittivo: raccontare un prodotto vuol dire anche mostrarlo! Usare foto, screenshot o mockup per presentare il contenuto è un ottimo modo per definire bene il proprio obiettivo e generare dinamismo visivo nella pagina.

Nello shot qua sopra, l’immagine posta a fianco al titolo non è solamente riempitiva: evidenzia la possibilità di condividere la propria lista con amici, rappresentati dagli avatar presenti sulla carta.

Ma occhio, non sprecate tutte le cartucce subito: lasciare qualcosa da scoprire per l’utente è sempre ingaggiante e aumenta l’interesse. Create i giusti agganci per catturare l’interesse dell’utente e indirizzarlo verso le altre sezioni del sito ;)

Abbiamo detto incuriosire, non sovraccaricare

http://arngren.net/

Attenzione a non esagerare: troppe informazioni allo stesso momento non aiutano ma anzi stressano l’utente, non più in grado di giudicare razionalmente l’offerta proposta e, probabilmente sopraffatto dalla scarica di informazioni, non prenderà proprio alcuna scelta ma semplicemente abbandonerà il sito.

Cercate di fornire all’utente le info di cui ha bisogno solo nel momento in cui ne ha bisogno!

Gerarchia visiva e interattività

Broklin Onjei on Dribbble.com

Anche l’occhio vuole la sua parte.

Questo però non vuol dire seguire ciecamente trend visivi o inserire foto stock da alternare alle scritte in pagina.

L’aspetto visivo di una pagina, oltre che abbellirla, deve evidenziarne l’interattività, fornendo chiari suggerimenti su cosa è interattivo e cosa no, guidando l’utente in un vero e proprio percorso attraverso tutto il sito.

Qui sopra la scelta stilistica apportata al sito è abbastanza confusionale. Cosa devo guardare prima? Qual è il contenuto di primaria importanza, l’informazione che prima devo processare per contestualizzare il resto del contenuto?

Difficile da capire.

Colori, forme, dimensioni e mappatura dei controlli non danno una grossa mano all’utente, che ora sarà su un altro sito a completare l’acquisto della camicetta che stava cercando.

Responsive, responsive e responsive

Outcrowd on Dribbble.com

Ok ragazzi, siamo a fine del 2020 e ancora molti siti non sono ottimizzati per la vista su smartphone.

Con l’aumento sproporzionato dell’utilizzo degli smartphone (quasi il 10% in più di rispetto l’anno scorso, https://www.statista.com), non avere un sito fruibile dai piccoli schermi è una forte mancanza.

Se prima si aspettava di tornare a casa ed accendere il proprio computer per controllare qualche informazione online, ora tutto viene fatto (o almeno ci si prova) direttamente da smartphone, mentre si prende l’autobus di ritorno dal supermercato, tra un impegno e l’altro.

La mancanza di un sito ottimizzato per la visualizzazione da cellulare si traduce in malfunzionamento della piattaforma e in mal di testa della persona, che frustrata per la pessima esperienza, non prenderà più in considerazione quel determinato sito.

Conclusione

Come detto inizialmente, queste riportate sono alcune direttive che abbiamo voluto selezionare in quanto necessarie per un buon design in home page.

Sul tema ci sono davvero tanti spunti e consigli da sfruttare per migliorare ogni volta un po’ di più la propria presenza online, grazie ad un’home page che davvero attira e convince gli utenti.

Per essere precisi, sono state scritte ben 113 linee guida a riguardo. Nonostante siano datate 2001, sono ancora oggi più che attuali in ambito di user experience and visual design.

Tra queste 113 pensi che ce ne siano alcune super importanti che ci siamo lasciati indietro? Faccelo sapere con un commento qua sotto!

That’s it! This is Digital Experience.

Se pensi anche tu che questo articolo sia una digital experience, lasciaci qualche 👏 claps 👏👏👏 e condividilo con la tua rete! 😊
TIDE è una community fatta da giovani esperti digital.

Hai una Digital Experience da raccontare? Proponi subito il tuo articolo, scrivendoci su thisisdigitalexperience@gmail.com

--

--

Enrico Comentale
TIDE

User Experience and Interaction Designer || Ux/Ui designer and Writer @TIDE || Plant Lover