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

Melyek a legjobb gyakorlatok az 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 várt néhány évvel az öt legfontosabb marketing webhely internetes szabványainak elemzésekor. 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, ha 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 bármilyen 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 az érmelap. Az alábbiakban részletesebben ismertetjük 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ézi a webhelyet.

De néha (kutatásunkban; egyszer) a tervező úgy dönt, hogy a logót valahol máshova helyezi. Bár nem látott egyetlen webhelyet sem, jobbra helyezze el a logójukat; Megtaláltuk a DataDog-t, aki közvetlenül a webhelyük közepén helyezte el logóját:

A lognikai 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 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ódszer annak biztosítására, hogy az asztalon vagy a mobiltelefonon látogató embereknek ne biztosítson törött élményeket.

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 inkább reagáló tervezésbe fektet be, nem csupán asztali építkezésre.

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

Akár bemutatóról, akár esettanulmányról készült videó formájában az ezen oldalakon található weboldalon, a webhelyek több mint fele alkalmazta 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ésre ösztönző üzenet

A SaaS közösségben egyértelműen bevált gyakorlat szerint a cselekvésre ösztönző, az embereket valami cselekvésre ösztönző felhívásának a hajtás feletti helynek 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 helye változik

A webhelyek mindegyikében nagyon kevés volt a konzisztencia a cselekvésre ösztönzés helyében. 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 ösztönző üzenet

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 következőkben szólnak: ingyen, bemutató, indulás, elindítás, kipróbálás X é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, de a 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 az, ami az elmúlt 3 évben felbukkan a helyszínen, helyről oldalra. 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ásoknak, vagy eredményez-e azt, hogy beleolvadnak? 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 ösztönzése a kilátásokkal (vagy botok felhasználásával) továbbra is vonzóvá válik, ez egyértelműen 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, készen áll a kapcsolatba lépésre. 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át a márka 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éké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 teszik közzé, amelyet +430 678 ember követ.

Iratkozzon fel, hogy itt kapja a legfontosabb történeteket.