Cele mai bune practici de design web SaaS: standarde și tendințe de design care merită cunoscute

Care sunt cele mai bune practici pentru design web SaaS?

Aceasta este întrebarea la care mi-am propus să răspund după ce m-am împiedicat de un site SaaS, după site-ul SaaS, după site-ul SaaS... Arătau cam la fel:

Înțelegerea celor mai bune practici poate fi o modalitate excelentă pentru designerii web (și fondatorii SaaS) de a se gândi la prezența propriei mărci. Este o abordare pe care Andy Crestodina a luat-o cu câțiva ani în urmă, când a analizat standardele web pentru primele 50 de site-uri de marketing . De asemenea, îi poate ajuta pe designeri, strategii și fondatorii să-și planifice inițiativele de proiectare folosind wireframes și identificând ce elemente cheie de design trebuie să fie pe pagina lor de pornire.

Nielsen / Norman Group a publicat una dintre primele documente despre standardele de design web și a definit trei niveluri de standardizare:

• Standard: peste 80% dintre site-uri folosesc aceeași abordare
• Convenție: 50 – 79% dintre site-uri web folosesc aceeași abordare
• Confuzie: 49% sau mai puține site-uri web folosesc o abordare

Deși inițial am avut o mulțime de frustrare cu mărcile SaaS asemănătoare, cu cât mă uitam mai departe la raționamentul pentru respectarea standardelor de design și a celor mai bune practici, cu atât mai mult înțelegeam beneficiul consecvenței. Unele dintre beneficiile care vin cu următoarele standarde web de design includ:

• Un sentiment de securitate și încredere atunci când vezi elemente comune de design
• Să știi exact unde să mergi când ai nevoie de ceva (de exemplu, Acasă prin. clic pe logo)
• Fără incertitudine în legătură cu noile pictograme, butoane și elemente de design. Nu ratați niciun element cheie (adică Obțineți o demonstrație).

Toate aceste lucruri pot face experiența utilizatorului mai lină și mai intuitivă.

Dar există o mulțime de lucruri în spațiul SaaS care par a fi replicate fără niciun motiv întemeiat.

Așadar, pentru a înțelege mai bine standardele de design web SaaS, am luat primele 250 de site-uri din SaaS 1000 pentru a crea un set de date care ne-a arătat ce lucruri au devenit standarde, ce au fost convenționale și ce a fost o monedă.

Iată o privire mai atentă asupra celor mai bune practici de proiectare SaaS care au loc în 2022:

Siglele mărcilor sunt întotdeauna pe partea stângă

Așadar, ați decis să creați un logo (sau să îl actualizați pe cel existent) și vă întrebați unde pe site-ul dvs. să îl plasați. Plasarea logo-ului dvs. în partea din stânga sus a unui site web este o practică comună de design. Am văzut chiar și o creștere cu 1% a siglelor din stânga navigației din 2019! Este o abordare pe care majoritatea designerilor o folosesc în interiorul și în afara SaaS. Este o alegere logică să recunoaștem că majoritatea oamenilor din America de Nord văd un site de la stânga la dreapta.

Dar uneori (în cercetarea noastră; o dată), un designer decide să plaseze logo-ul altundeva. Deși nu am văzut niciun site care își plasează logo-ul în dreapta; am găsit DataDog care și-a plasat logo-ul direct în mijlocul site-ului lor:

Într-un studiu de cercetare a logo -ului , cei de la Venngage au descoperit că 35% dintre oameni preferă siglele cu dominantă text și în stil orizontal pentru companiile de tehnologie.

Cele mai multe site-uri web SaaS sunt mobile responsive

Trăim într-o lume mobilă.

Site-urile mobile responsive sunt o modalitate excelentă de a vă asigura că nu oferiți experiențe deteriorate pentru persoanele de pe un desktop sau care vizitează de pe mobil.

În 2018, 52,2% din tot traficul online la nivel mondial a fost generat prin intermediul telefoanelor mobile. De aceea, este atât de grozav să vezi că aproape toate companiile SaaS investesc într-un design responsiv și cele mai bune practici pentru paginile de destinație mobile, mai degrabă decât în ​​construirea exclusiv pentru desktop-uri.

Videoclipul poate fi găsit pe o treime dintre site-uri

Deși videoclipul a luat cu asalt canalele de social media, nu este la fel de popular pe site-urile web SaaS. Dintre site-urile web care au prezentat un videoclip pe pagina lor de pornire, majoritatea videoclipurilor au solicitat utilizatorilor să facă clic pentru a începe videoclipul. Aceste videoclipuri erau, de obicei, clipuri scurte, majoritatea sub 5 minute, care oferă context asupra istoriei companiei, propunerii de valoare sau demonstrației produsului.

Am fost foarte surprinși să constatăm că majoritatea site-urilor web nu au videoclipuri pe paginile lor de pornire și și mai surprinși să vedem o scădere cu 13% față de studiul nostru anterior din 2019.

Așteptările vechi legate de costuri care vin odată cu producerea unui videoclip de înaltă calitate ar putea încă împiedica mărcile de la această investiție. Explicațiile ilustrate ale produselor au crescut în popularitate în urmă cu câțiva ani și au devenit un serviciu popular cumpărat prin site-uri precum Fiverr și Upwork.

Astăzi, cererea pentru aceste tipuri de videoclipuri este încă destul de mare (mai mult de 14.800 de căutări de videoclipuri explicative pe lună), dar doar puțin peste jumătate dintre companiile SaaS le folosesc.

Există întotdeauna un îndemn principal la acțiune deasupra grupului

Există o practică clară în comunitatea SaaS conform căreia chemarea dvs. la acțiune care îi determină pe oameni să facă ceva trebuie să fie superioară. Peste 90% din toate site-urile care au fost incluse în această cercetare de design SaaS au avut un buton sau un îndemn la acțiune deasupra foldului.

Amplasarea CTA poate fi de obicei găsită deasupra pliului

Cele mai multe site-uri web SaaS trec la goană atunci când vine vorba de locul în care este plasat CTA. Majoritatea site-urilor web își pun CTA-ul deasupra paginii. Aceasta este o practică bună de urmat, deoarece se asigură că utilizatorii văd CTA chiar dacă nu derulează până la capăt în pagină.

Albastrul trece verde ca noua alegere pentru butoanele SaaS

Când am analizat diferitele culori ale îndemnului, a existat o tendință clară către albastru, cu CTA-urile verzi venind pe locul al doilea și portocaliu pe al treilea.

Popularitatea butoanelor albastre CTA a crescut semnificativ din 2019, depășind verdele cu aproximativ 3% (care a fost cea mai populară culoare CTA în 2019). Există un motiv întemeiat pentru aceasta: culoarea albastră este cel mai frecvent folosită pentru hyperlinkuri și este o culoare atrăgătoare.

Proba gratuită depășește Începeți ca cel mai popular CTA din SaaS

Majoritatea mărcilor SaaS folosesc limbajul îndemn la acțiune, care este muzică pentru portofelele lor: gratuit .

Majoritatea site-urilor pe care le-am examinat au optat pentru formularea „Probă gratuită” pentru îndemnul lor la acțiune. Un alt CTA pe locul secund a fost un limbaj orientat spre acțiune, care a ademenit vizitatorul să facă ceva care l-a împins mai departe în pâlnie. Unele variații includ:

• Incepe

• Solicitați o demonstrație

• Programați o demonstrație

• Inscrie-te

• Obțineți o demonstrație gratuită

• Obțineți X gratuit

Cele mai frecvente cuvinte și expresii din îndemnul la acțiune tind să fie: Gratuit, Demo, Începeți, Încearcă X și Solicitare... Unele dintre aceste cuvinte au apărut împreună (de exemplu, Demo gratuită sau Încercați X gratuit), dar folosind o combinația acestor cuvinte tinde să apară cel mai mult în CTA primare SaaS.

Utilizarea unui fundal deschis este cea mai bună practică

Nu este obișnuit să vezi un site care are un fundal negru în SaaS:

Majoritatea site-urilor (92% dintre ele) au folosit culori albe sau deschise ca fundal principal pentru site-urile lor.

Utilizarea de oameni reali este folosită de 80% dintre SaaS

Plasarea oamenilor reali pe pagina de start a fost opțiunea favorabilă pentru majoritatea mărcilor SaaS. Plasarea persoanelor reale pe pagina de pornire a fost de obicei găsită în secțiuni asociate cu mărturii și materiale de conținut. Ocazional, acestea apăreau direct deasupra pliului din antet, ca în exemplul de mai jos, dar de cele mai multe ori, imaginile cu persoane reale au fost prezentate mai jos pe pagină.

Acesta este un salt URIAȘ față de același studiu pe care l-am efectuat în 2019 . Cu doar 3 ani în urmă, doar 56% dintre site-uri web foloseau persoane reale pe paginile lor de pornire, ceea ce reprezintă o creștere uimitoare de 24%.

A fost, de asemenea, grozav să vedem destul de multă diversitate în selecția imaginilor. Singurul lucru care lipsea era să vedem un nivel similar de diversitate pe acele pagini „Echipa noastră”, dar acesta este un subiect pentru altă dată.

Ilustrațiile personalizate sunt foarte frecvente (70%)

Creșterea ilustrațiilor personalizate a măturat comunitatea SaaS cu furtună. În ultimii 3 ani, este ceva care a apărut pe site după site. Părerea noastră profesională este că aceasta este o tendință, dar este la doar câteva puncte procentuale să devină o bună practică.

Iată un instantaneu al unora dintre site-uri și ilustrațiile acestora:

Aceasta este o tendință interesantă.

Ce părere aveți: această abordare a proiectării ajută startup-urile să iasă în evidență sau are ca rezultat amestecarea lor? Conteaza? Emite un sentiment de încredere?

Jumătate dintre mărcile SaaS folosesc un instrument de chat live

Creșterea chatului live și a marketingului conversațional a fost o tendință fascinantă de urmărit. Utilizatorii vor răspunsuri și le doresc rapid. Pe măsură ce această idee de a îmbrățișa conversațiile în timp real cu potențialii potențiali (sau de a folosi boți) continuă să prindă acțiune, devine în mod clar populară în rândul companiilor B2B SaaS.

Cercetarea noastră a constatat că puțin peste 5% dintre site-urile SaaS au o casetă de chat în colț gata pentru a fi implicată. Pe majoritatea acestor site-uri, serviciile utilizate au fost Intercom sau Drift.

Deci, ar trebui să urmați standardele?

Depinde.

Experimentarea designului este o modalitate excelentă de a descoperi ceva înaintea restului industriei. Acestea fiind spuse, riscul experimentării designului este că utilizatorii ar putea găsi întreaga experiență ruptă și prost creată. Pe de altă parte, dacă respectați standardele care sunt deja utilizate pe site-urile web SaaS din întreaga lume, vă puteți integra cu ușurință.

Iată o listă de sfaturi pentru design de site -uri web dacă doriți un site care să nu fie ca toți ceilalți:

• Nu utilizați ilustrația plată ca o reprezentare abstractă a mărcii dvs
• Nu utilizați butoane portocalii închise sau galbene pe pagina dvs. de pornire
• Nu lăsați să vă aliniați propunerea de valoare pe site
• Puneți logo-ul în mijloc sau în dreapta
• Utilizați un fundal întunecat pentru site-ul dvs

Site-ul dvs. îndeplinește în prezent aceste standarde? Te-a surprins ceva aici?