Best practice per la progettazione Web SaaS: standard e tendenze di progettazione che vale la pena conoscere

Quali sono le migliori pratiche per il web design SaaS?

Questa è la domanda a cui ho deciso di rispondere dopo essere inciampato in un sito SaaS, dopo il sito SaaS, dopo il sito SaaS... Sembravano più o meno gli stessi:

Comprendere le migliori pratiche può essere un ottimo modo per i web designer (e i fondatori di SaaS) di pensare alla presenza del proprio marchio. È un approccio che Andy Crestodina ha adottato qualche anno fa analizzando gli standard web per i primi 50 siti di marketing . Può anche aiutare designer, strateghi e fondatori a pianificare le loro iniziative di progettazione utilizzando wireframe e identificando quali elementi chiave di progettazione devono essere presenti sulla loro home page.

Il Gruppo Nielsen / Norman ha pubblicato uno dei primi documenti sugli standard di progettazione Web e ha definito tre livelli di standardizzazione:

• Standard: oltre l'80% dei siti utilizza lo stesso approccio
• Convenzione: il 50 – 79% dei siti web utilizza lo stesso approccio
• Confusione: il 49% o meno dei siti Web utilizza un approccio

Sebbene all'inizio fossi molto frustrato per i marchi SaaS simili, più ho esaminato il ragionamento per seguire gli standard di progettazione e le migliori pratiche, più ho capito il vantaggio della coerenza. Alcuni dei vantaggi offerti dai seguenti standard web di progettazione includono:

• Un senso di sicurezza e fiducia quando si vedono elementi di design comuni
• Sapere esattamente dove andare quando hai bisogno di qualcosa (ad esempio, Home tramite. clic sul logo)
• Nessuna incertezza su nuove icone, pulsanti ed elementi di design. Nessun elemento chiave (ad es. Ottieni una demo) è sfuggito

Tutte queste cose possono rendere l' esperienza dell'utente più fluida e intuitiva.

Ma ci sono molte cose nello spazio SaaS che sembrano essere replicate senza una buona ragione.

Quindi, per comprendere meglio gli standard di progettazione Web SaaS, abbiamo preso i primi 250 siti del SaaS 1000 per creare un set di dati che ci mostrasse quali cose erano diventate standard, cosa erano convenzionali e cosa era un lancio di moneta.

Ecco uno sguardo più da vicino alle best practice di progettazione SaaS in atto nel 2022:

I loghi del marchio sono sempre sul lato sinistro

Quindi, hai deciso di creare un logo (o aggiornare quello esistente) e ti stai chiedendo dove posizionarlo sul tuo sito web. Il posizionamento del tuo logo in alto a sinistra di un sito Web è una best practice di progettazione comune. Dal 2019 abbiamo persino visto un aumento dell'1% dei loghi a sinistra della navigazione! È un approccio che la maggior parte dei designer sfrutta all'interno e all'esterno di SaaS. È una scelta logica riconoscere che la maggior parte delle persone in Nord America visualizza un sito da sinistra a destra.

Ma a volte (nella nostra ricerca; una volta), un designer decide di posizionare il logo da qualche altra parte. Anche se non abbiamo visto alcun sito posizionare il proprio logo sulla destra; abbiamo trovato DataDog che ha posizionato il proprio logo direttamente al centro del proprio sito:

In uno studio di ricerca sui loghi , la gente di Venngage ha scoperto che il 35% delle persone preferiva i loghi con testo dominante e in stile orizzontale per le aziende tecnologiche.

La maggior parte dei siti Web SaaS è mobile responsive

Viviamo in un mondo mobile.

I siti reattivi per dispositivi mobili sono un ottimo modo per assicurarti di non offrire esperienze interrotte per le persone su un desktop o che visitano su dispositivi mobili.

Nel 2018, il 52,2% di tutto il traffico online mondiale è stato generato tramite telefoni cellulari. Ecco perché è così bello vedere che quasi tutte le aziende SaaS stanno investendo in un design reattivo e nelle migliori pratiche per la pagina di destinazione mobile piuttosto che costruire esclusivamente per desktop.

Il video può essere trovato su un terzo dei siti

Sebbene il video abbia preso d'assalto i canali dei social media, non è così popolare sui siti Web SaaS. Dei siti Web che presentavano un video sulla propria home page, la maggior parte dei video richiedeva agli utenti di fare clic per avviare il video. Questi video erano generalmente brevi clip, la maggior parte inferiori a 5 minuti, che fornivano un contesto sulla storia dell'azienda, sulla proposta di valore o sulla dimostrazione del prodotto.

Siamo rimasti molto sorpresi di scoprire che la maggior parte dei siti Web non ha video sulle loro home page e ancora più sorpresi di vedere un calo del 13% rispetto al nostro precedente studio nel 2019.

Le aspettative sui costi legacy che derivano dalla produzione di un video di alta qualità potrebbero ancora trattenere i marchi da questo investimento. Gli esplicativi illustrati dei prodotti sono diventati popolari alcuni anni fa e sono diventati un servizio popolare acquistato tramite siti come Fiverr e Upwork.

Oggi, la domanda per questi tipi di video è ancora piuttosto elevata (più di 14.800 ricerche di video esplicativi al mese), ma solo poco più della metà delle aziende SaaS li utilizza.

C'è sempre un invito all'azione principale above the fold

C'è una chiara best practice nella comunità SaaS secondo cui il tuo invito all'azione che spinge le persone a fare qualcosa deve essere above the fold. Oltre il 90% di tutti i siti inclusi in questa ricerca sul design SaaS aveva un pulsante o un invito all'azione above the fold.

Il posizionamento del CTA può essere solitamente trovato above the fold

La maggior parte dei siti Web SaaS va al sodo quando si tratta di dove è posizionato il CTA. La maggior parte dei siti Web mette il proprio CTA above the fold. Questa è una buona pratica da seguire perché garantisce che gli utenti vedano il tuo CTA anche se non scorrono fino in fondo la pagina..

Il blu passa al verde come nuova scelta per i pulsanti SaaS

Analizzando i vari colori dell'invito all'azione, è emersa una chiara tendenza verso il blu, con i CTA verdi al secondo posto e l'arancione al terzo.

La popolarità dei pulsanti CTA blu è cresciuta in modo significativo dal 2019, superando il verde di circa il 3% (che era il colore CTA più popolare nel 2019). C'è una buona ragione per questo: il colore blu è più comunemente usato per i collegamenti ipertestuali ed è un colore accattivante.

La versione di prova gratuita supera Inizia come la CTA più popolare in SaaS

La maggior parte dei marchi SaaS utilizza il gergo dell'invito all'azione che è musica per i loro portafogli: gratis .

La maggior parte dei siti che abbiamo esaminato ha optato per la frase "Prova gratuita" per il loro invito all'azione. Un altro CTA secondo classificato era un linguaggio orientato all'azione che invogliava il visitatore a fare qualcosa che lo spingesse ulteriormente nella canalizzazione. Alcune varianti includono:

• Iniziare

• Richiedi una demo

• Pianifica una demo

• Iscrizione

• Ottieni una demo gratuita

• Ottieni X gratuitamente

Le parole + frasi più comuni all'interno dell'invito all'azione tendono ad essere: Gratuito, Demo, Inizia, Prova X e Richiedi... Alcune di queste parole sono apparse insieme (ad esempio, Demo gratuita o Prova X gratis), ma utilizzando un la combinazione di queste parole tende a comparire maggiormente nelle CTA primarie SaaS.

L'uso di uno sfondo chiaro è la migliore pratica

Non è comune vedere un sito con uno sfondo nero in SaaS:

La maggior parte dei siti (92% di essi) utilizzava il bianco o i colori chiari come sfondo principale per i propri siti.

L'utilizzo di persone reali è utilizzato dall'80% di SaaS

Il posizionamento di persone reali sulla home page era l'opzione favorevole per la maggior parte dei marchi SaaS. Il posizionamento di persone reali sulla home page è stato solitamente trovato in sezioni abbinate a testimonianze e risorse di contenuto. Occasionalmente apparivano direttamente above the fold nell'intestazione, come nell'esempio seguente, ma la maggior parte delle volte le immagini di persone reali erano presenti più in basso nella pagina.

Questo è un ENORME salto rispetto allo stesso studio che abbiamo condotto nel 2019 . Solo 3 anni fa, solo il 56% dei siti Web utilizzava persone reali sulle proprie home page, rappresentando un enorme aumento del 24%.

È stato anche bello vedere un po' di diversità nella selezione delle immagini. L'unica cosa che mancava era vedere un livello simile di diversità su quelle pagine del "Nostro Team", ma questo è un argomento per un'altra volta.

Le illustrazioni personalizzate sono molto comuni (70%)

L'ascesa delle illustrazioni personalizzate ha travolto la comunità SaaS. Negli ultimi 3 anni, è qualcosa che è apparso su un sito dopo l'altro. La nostra opinione professionale è che questa sia una tendenza, ma mancano solo pochi punti percentuali dal diventare una best practice.

Ecco un'istantanea di alcuni dei siti e delle loro illustrazioni:

Questa è una tendenza interessante.

Cosa ne pensi: questo approccio alla progettazione aiuta le startup a distinguersi o le porta a fondersi? Importa? Trasmette un senso di fiducia?

La metà dei marchi SaaS utilizza uno strumento di chat dal vivo

L'ascesa della chat dal vivo e del marketing conversazionale è stata una tendenza affascinante da tenere d'occhio. Gli utenti vogliono risposte e le vogliono rapidamente. Poiché questa idea di abbracciare conversazioni in tempo reale con potenziali clienti (o utilizzare bot) continua a prendere piede, sta chiaramente diventando popolare tra le aziende SaaS B2B.

La nostra ricerca ha rilevato che poco più del 5% dei siti SaaS ha una chat box nell'angolo pronta per essere coinvolta. Nella maggior parte di questi siti, i servizi utilizzati erano Intercom o Drift.

Quindi dovresti seguire gli standard?

Dipende.

Sperimentare con il design è un ottimo modo per scoprire qualcosa prima del resto del settore. Detto questo, il rischio della sperimentazione del design è che gli utenti possano trovare l'intera esperienza interrotta e mal creata. D'altra parte, se aderisci agli standard già in uso nei siti Web SaaS di tutto il mondo, potresti facilmente integrarti.

Ecco un elenco di suggerimenti per la progettazione di siti Web se desideri un sito che non sia come tutti gli altri:

• Non utilizzare l'illustrazione piatta come rappresentazione astratta del tuo marchio
• Non utilizzare pulsanti arancione scuro o gialli sulla tua home page
• Non lasciare allineare la tua proposta di valore sul sito
• Posiziona il tuo logo al centro o a destra
• Usa uno sfondo scuro per il tuo sito

Il tuo sito attualmente soddisfa questi standard? Qualcosa qui ti ha sorpreso?