100 SaaS-webhelyet tanulmányoztunk a tervezési trendek és a bevált gyakorlatok feltárása érdekében (Íme, amit találtunk)

Melyek a legjobb gyakorlatok a SaaS webdesignban?

Erre a kérdésre válaszoltam, miután megbotlottam a SaaS webhelyen, a SaaS webhely után, a SaaS webhely után ... Ez ugyanúgy nézett ki:

A bevált gyakorlatok megértése nagyszerű mód lehet a web-tervezők (és a SaaS alapítói) számára, hogy gondolkodjanak saját márkájuk jelenlétéről. Ez egy megközelítés, amelyet Andy Crestodina hozott néhány évvel ezelőtt, amikor az 50 legfontosabb marketing webhely internetes szabványait elemezte. Segíthet a tervezőknek, stratégáknak és alapítóknak a drótváz értelemben vett tervezési kezdeményezéseik megtervezésében és annak meghatározásában, hogy milyen kulcsfontosságú tervezési elemeknek kell lennie honlapjukon.

A Nielsen / Norman csoport közzétette az első dokumentumok egyikét a Web Design Standardok köré, és meghatározta a szabványosítás három szintjét:

  • Szabvány: a webhelyek 80% -a + ugyanazt a megközelítést használja
  • Megállapodás: A webhelyek 50–79% -a ugyanazt a megközelítést alkalmazza
  • Zavart: 49% vagy kevesebb webhely használ megközelítést

Míg eredetileg nagyon sok csalódást szenvedett a szép SaaS márkákkal; minél tovább vizsgáltam a tervezési szabványok és a bevált gyakorlatok követésének indoklását, annál jobban megértettem a következetesség előnyeit. A következő tervezési webes szabványok néhány előnye a következő:

  • A biztonság és a bizalom érzése a közös tervezési elemek látásakor
  • Pontosan tudja, hová kell mennie, amikor szüksége van valamire (pl. Otthon keresztül. Logó kattintással)
  • Nincs bizonytalanság az új ikonok, gombok és látványelemek körül
  • Nincs kihagyva egyetlen kulcsfontosságú elemet sem (azaz szerezzen be egy bemutatót)

Mindezek lehetővé teszik a felhasználói élmény simábbá és intuitívabbá tételét.

De a SaaS-téren sok olyan dolog van, amelyet úgy látszik, hogy minden jó ok nélkül megismételhető.

Tehát a SaaS Web Design Standardok jobb megértése érdekében 2019 januárjában vettük a SaaS1000.com 100 legjobb webhelyét, hogy létrehozzunk egy adatkészletet, amely megmutatta nekünk, hogy mi a dolgok vált szabványokká, mi a hagyományos és mi volt az érmelap. Itt közelebbről olvashatjuk a SaaS tervezési bevált gyakorlatait 2019-ben:

A márkajelzések mindig a bal oldalon vannak

A logó elhelyezése a weboldal bal felső sarkában a bevált tervezési gyakorlat. Ezt a megközelítést alkalmazza a legtöbb tervező a SaaS-on belül és kívül is. Logikus döntés annak felismerésével, hogy Észak-Amerika legtöbb ember balról jobbra néz egy webhelyet.

De néha (a kutatásunkban; egyszer) a tervező úgy dönt, hogy a logót valahol máshova helyezi. Míg egyetlen webhelyet sem láttuk, a jobb oldalon helyezze el logóját; Megtaláltuk a DataDog-ot, aki közvetlenül a webhelyük közepén helyezte el logóját:

Egy logóval kapcsolatos kutatás során a Venngage munkatársai azt találták, hogy az emberek 35% -a inkább a szöveges domináns és a horizontális stílusú logókat részesítette előnyben a tech-társaságok számára.

A legtöbb SaaS-webhely mobilra reagál

Mobil világban élünk.

Az érzékeny webhelyek nagyszerű módja annak, hogy biztosítsák, hogy nem nyújtanak törött élményeket az asztalon vagy a mobiltelefonon látogató emberek számára.

2018-ban a világméretű online forgalom 52,2% -át mobiltelefonokon generálták. Ezért annyira nagyszerű látni, hogy a legtöbb SaaS-társaság reagáló tervezésbe fektet be, nem pedig kizárólag asztali használatra.

A videó a webhelyeknek kevesebb, mint 55% -án található

Akár demonstrációról, akár esettanulmányról készült videó formájában az oldalak honlapján, ezeknek a webhelyeknek több mint fele választotta a megközelítést. A SaaS-társaságok többsége kihasználja a videofelvételt, de nem szignifikáns mozgástérrel, hogy ezt bevált gyakorlatnak tartja.

A kiváló minőségű videó elkészítésével járó régi költségelszámolások továbbra is visszatarthatják a márkákat ettől a beruházástól. Az illusztrált termékmagyarázók néhány évvel ezelőtt egyre népszerűbbek lettek, és népszerű szolgáltatássá váltak, például a Fiverr és az Upwork oldalakon keresztül. Ma az ilyen típusú videók iránti kereslet továbbra is meglehetősen magas (havonta több mint 14 800 keres magyarázó videókat), mégis csak egy kicsit több mint a SaaS vállalat használja őket.

A hajtás felett mindig van elsődleges cselekvési felhívás

A SaaS közösségben egyértelmű legjobb gyakorlat van, hogy a cselekvésre ösztönzésének, amely arra készteti az embereket, hogy tegyenek valamit, a hajtás felett kell lennie. A SaaS Design kutatásba bevont összes webhely több mint 90% -ának volt gombja vagy cselekvésre ösztönzése a hajtás felett.

A cselekvésre ösztönzés elhelyezése változik

Ezen oldalak mindegyikében nagyon kevés volt a következetesség a cselekvésre ösztönzés szempontjából. Néhányan a web bal bal oldalán helyezkedtek el, mások közepén holtan voltak, mások jobbra. A CTA elhelyezésének bevált gyakorlata úgy tűnik, hogy egy teljes érmebecslés a SaaS-vállalatok között.

Milyen színeket használnak a SaaS cégek a gombokhoz?

A különféle cselekvési felhívások elemzésekor egyértelmű tendencia figyelhető meg a zöld és a narancssárga gomb felé.

Az ingyenes bemutató a legnépszerűbb cselekvésre hívás

Azok a webhelyek, amelyeket megvizsgáltunk, és amelyek cselekvésre szólítják fel, általában egyértelműek, hogy azt akarják, hogy az emberek megtegyék. Legtöbbjük cselekvésorientált nyelvet használ (%%), és arra készteti a látogatókat, hogy tegyen valamit, ami tovább tolja őket a tölcsérben. Néhány változat tartalmazza:

  • Ütemezés A Demo
  • Kérjen bemutatót
  • Ingyenes demót kaphat
  • Ingyenes X-t kaphat
  • Fogj neki
  • Próbálja ki az X-et

A leggyakoribb szavak + kifejezések a cselekvésre való felhívásban: Ingyenes, bemutató, indulás, elindítás, kipróbálás és kérés ... Ezeknek a szavaknak egy része együtt jelenik meg (pl. Ingyenes bemutató vagy próbálkozzon X ingyen), de kombinációt használva ezeknek a szavaknak a jellemzője a SaaS elsődleges CTA-jaiban.

A világos háttér használata a legjobb gyakorlat

Nem gyakori olyan webhelyet látni, amelynek fekete háttérrel rendelkezik a SaaS:

A legtöbb webhely (ezek 92% -a) fehér vagy világos színeket használt webhelyeinek elsődleges háttereként.

A valódi emberek használatát csak a SaaS 56% -a használja

Valódi emberek elhelyezése a honlapon több mint fele volt. Az illusztrációkhoz képest a valódi emberek elhelyezését a honlapon általában NEM találták meg a weboldal fő részében. Időnként közvetlenül a hajtás felett jelentek meg, mint a fenti kép, ám legtöbbször az oldal lefelé mutatott, esettanulmány vagy egy adott elemre mutató hivatkozás formájában.

Nagyon nagyszerű volt látni a képválasztásban is sokféle változatosságot. Csupán hiányzott az, hogy hasonló szintű sokféleséget láttunk a „Csapatunk” oldalakon, de ez egy másik alkalom témája.

Az egyedi illusztrációk nagyon gyakoriak (70%)

Az egyedi illusztrációk növekedése viharral sújtotta a SaaS közösséget. Ez valami, ami az elmúlt 3 évben felbukkan a helyszínen a helyről a másikra. Szakmai véleményünk szerint ez tendencia, ám ez csak néhány százalékpontot jelent abban, hogy bevált gyakorlattá váljunk.

Itt van néhány webhely pillanatképe és illusztrációi:

Ez egy érdekes trend.

Mit gondolsz: Segít-e ez a tervezési megközelítés az induló vállalkozóknak, vagy eredményez-e azt? Számít? A bizalom érzetét kelti?

A SaaS márkák fele használ egy élő csevegő eszközt

Az élő csevegés és a beszélgető marketing növekedése lenyűgöző tendencia volt a figyelés szempontjából. Mivel a valós idejű beszélgetések átfogó gondolata (vagy robotok használata) továbbra is vonzóvá válik, egyértelművé vált, hogy népszerűvé válik a B2B SaaS cégek körében.

Kutatásaink azt mutatták, hogy a SaaS-oldalak közel 50% -ában van egy csevegődoboz a sarokban, amely készen áll a kapcsolattartásra. Ezen webhelyek nagy részén az Intercom vagy a Drift szolgáltatásokat használták.

Tehát be kell tartania a szabványokat?

Attól függ.

A tervezéssel történő kísérletezés nagyszerű módja annak, hogy felfedezzen valamit az ipar többi része előtt. A tervezési kísérletezés azzal a kockázattal jár, hogy a felhasználók a teljes élményt hibásnak és rosszul létrehozottnak találhatják. A flipside-on mindent megtesz a szabványoknak megfelelően, amelyeket már a SaaS webhelyein használnak szerte a világon, és könnyen beleolvadhat.

Íme néhány tennivaló, ha olyan webhelyet szeretne, amely nem olyan, mint mindenki más:

  • Ne használjon lapos ábrázolást márkája elvont ábrázolásaként
  • Ne használjon sötét narancssárga vagy sárga gombot a honlapján
  • Ne hagyja, hogy igazítsa az értékjavaslatát a webhelyen
  • Helyezze a logóját közepére vagy jobbra
  • Használjon sötét hátteret a webhelyén

Megfelel-e webhelye jelenleg ezeknek a szabványoknak?

Valami itt meglepte?

Eredetileg SaaS Web Design Best Practices: Foundation Labs néven publikálták

Ezt a történetet a The Startup, a Medium legnagyobb vállalkozási kiadványában tették közzé, amelyet +430 678 ember követ.

Feliratkozás, hogy itt kaphassa a legfontosabb történeteket.