We hebben 100 SaaS-sites bestudeerd om ontwerptrends + praktische tips te ontdekken (hier is wat we hebben gevonden)

Wat zijn de best practices voor SaaS-webontwerp?

Dat is de vraag die ik wilde beantwoorden na het struikelen over de SaaS-site, na de SaaS-site, na de SaaS-site ... Dat zag er ongeveer hetzelfde uit:

Het begrijpen van best practices kan een geweldige manier zijn voor webontwerpers (en SaaS-oprichters) om na te denken over hun eigen merkaanwezigheid. Het is een benadering die Andy Crestodina een paar jaar terug nam bij het analyseren van webstandaarden voor de top 50 marketingsites. Het kan ook ontwerpers, strategen en oprichters helpen bij het plannen van hun ontwerpinitiatieven in de zin van wireframes en het identificeren van belangrijke ontwerpelementen op hun startpagina.

De Nielsen / Norman Group heeft een van de eerste stukjes documentatie rond Web Design Standards gepubliceerd en drie standaardisatieniveaus gedefinieerd:

  • Standaard: 80% + van de sites gebruiken dezelfde aanpak
  • Conventie: 50-79% van de websites gebruikt dezelfde aanpak
  • Verwarring: 49% of minder websites gebruiken een aanpak

Terwijl ik oorspronkelijk veel frustratie had over de lookaike SaaS-merken; hoe verder ik keek naar de redenering voor het volgen van ontwerpstandaarden en best practices, hoe meer ik het voordeel van consistentie begreep. Enkele van de voordelen van de volgende ontwerpwebstandaarden zijn:

  • Een gevoel van veiligheid en vertrouwen bij het zien van gemeenschappelijke ontwerpelementen
  • Weet precies waar je heen moet als je iets nodig hebt (bijv. Home via. Logo-klik)
  • Geen onzekerheid rond nieuwe pictogrammen, knoppen en ontwerpelementen
  • Geen belangrijke elementen (bijv. Ontvang een demo) gemist

Al deze dingen kunnen de gebruikerservaring soepeler en intuïtiever maken.

Maar er zijn veel dingen in de SaaS-ruimte die zonder goede reden lijken te zijn gerepliceerd.

Dus om SaaS Web Design Standards beter te begrijpen, hebben we in januari 2019 de top 100-sites van SaaS1000.com genomen om een ​​dataset te maken die ons liet zien welke dingen standaard geworden waren, wat conventioneel was en wat een coin flip was. Hier is een nadere blik op de SaaS-best practices voor design die in 2019 plaatsvinden:

Merklogo's bevinden zich altijd aan de linkerkant

De plaatsing van het logo linksboven op een website is een veel voorkomende ontwerppraktijk. Het is een benadering die de meeste ontwerpers gebruiken binnen SaaS en buiten SaaS. Het is een logische keuze, omdat de meeste mensen in Noord-Amerika een site van links naar rechts bekijken.

Maar soms (in ons onderzoek; een keer) besluit een ontwerper het logo ergens anders te plaatsen. Hoewel we geen enkele site hun logo aan de rechterkant zagen; we hebben DataDog gevonden die hun logo direct in het midden van hun site plaatste:

In een logo-onderzoek ontdekten de mensen van Venngage dat 35% van de mensen de voorkeur gaf aan tekst dominante en horizontale stijllogo's voor technologiebedrijven.

De meeste SaaS-websites reageren mobiel

We leven in een mobiele wereld.

Responsieve sites zijn een geweldige manier om ervoor te zorgen dat u geen gebroken ervaringen oplevert voor mensen op een desktop of mobiel.

In 2018 werd 52,2% van al het wereldwijde online verkeer gegenereerd via mobiele telefoons. Daarom is het zo geweldig om te zien dat de meeste SaaS-bedrijven investeren in een responsief ontwerp in plaats van alleen te bouwen voor desktop.

Video is te vinden op iets minder dan 55% van de sites

Of het nu een demo of een case study in de vorm van video op de startpagina voor deze sites was, meer dan de helft van deze sites volgde de aanpak. De meerderheid van SaaS-bedrijven maakt gebruik van video, maar niet met een aanzienlijke marge om het als een best practice te beschouwen.

De oude kostenverwachtingen die gepaard gaan met de productie van een video van hoge kwaliteit kunnen merken nog steeds tegenhouden van deze investering. Geïllustreerde productuitleggers zijn een paar jaar geleden enorm populair geworden en worden een populaire service gekocht via sites als Fiverr en Upwork. Tegenwoordig is de vraag naar dit soort video's nog steeds vrij hoog (meer dan 14.800 zoekopdrachten naar verklarende video's per maand), maar slechts iets meer dan de helft SaaS-bedrijven gebruiken ze.

Er is altijd een primaire call-to-action boven de vouw

Er is een duidelijke best practice in de SaaS-gemeenschap dat je oproep tot actie mensen ertoe aanzet iets te doen, boven de vouw moet zijn. Meer dan 90% van alle sites die deelnamen aan dit SaaS Design-onderzoek had een knop of call-to-action boven de vouw.

De plaatsing van de oproep tot actie varieert

Op al deze sites was er weinig consistentie in waar de oproep tot actie werd geplaatst. Sommigen van hen waren uiterst links op de webpagina geplaatst, sommigen waren dood neer in het midden en anderen waren ver naar rechts. De beste praktijk als het gaat om plaatsing van de CTA lijkt een complete muntenwissel te zijn bij SaaS-bedrijven.

Welke kleuren gebruiken SaaS-bedrijven voor knoppen?

Bij het analyseren van de verschillende call-to-actions was er een duidelijke trend naar groene en oranje knoppen.

Gratis demo is de meest populaire oproep tot actie

De sites die we hebben beoordeeld en die een call-to-action hebben, hebben meestal een duidelijke functie die ze willen dat mensen doen. De meerderheid van hen gebruikt actiegericht taalgebruik (%%) en duwt de bezoeker om iets te doen dat hen verder in de trechter duwt. Sommige variaties zijn onder meer:

  • Plan een demo
  • Vraag een demo aan
  • Ontvang een gratis demo
  • Ontvang X gratis
  • Begin
  • Probeer X

De meest voorkomende woorden + zinnen in de call to actions waren: Gratis, Demo, Get, Start, Try X en Request ... Sommige van deze woorden kwamen samen voor (dwz. Gratis Demo of Try X gratis) maar met een combinatie van deze woorden komen meestal voor in SaaS primaire CTA's.

Een lichte achtergrond gebruiken is de beste praktijk

Het is niet gebruikelijk om een ​​site met een zwarte achtergrond in SaaS te zien:

De meeste sites (92% van hen) gebruikten witte of lichte kleuren als primaire achtergrond voor hun sites.

Het gebruik van echte mensen wordt alleen door 56% van SaaS gebruikt

De plaatsing van echte mensen op de startpagina was meer dan de helft. In vergelijking met de afbeeldingen werd de plaatsing van echte mensen op de startpagina meestal NIET in het hoofdgedeelte van de site gevonden. Soms verschenen ze direct boven de vouw, zoals de afbeelding hierboven, maar meestal was het verderop op de pagina in de vorm van een getuigenis, case study of verwijzing naar een functie.

Het was ook geweldig om behoorlijk wat diversiteit in de beeldselectie te zien. Het enige wat ontbrak was het zien van een vergelijkbaar niveau van diversiteit op die “Ons Team” -pagina's, maar dat is een onderwerp voor een andere keer.

Aangepaste illustraties zijn heel gebruikelijk (70%)

De opkomst van aangepaste illustraties heeft de SaaS-gemeenschap stormenderhand veroverd. Het is iets dat de afgelopen 3 jaar op site na site opduikt. Onze professionele mening is dat dit een trend is, maar het is maar een paar procentpunten om een ​​best practice te worden.

Hier is een momentopname van enkele van de sites en hun illustraties:

Dit is een interessante trend.

Wat denk je: Helpt deze benadering bij het ontwerpen van startups op of resulteert het erin dat ze opgaan? Maakt het uit? Geeft het een gevoel van vertrouwen af?

De helft van de SaaS-merken gebruikt een Live Chat-tool

De opkomst van livechat en conversatiemarketing is een fascinerende trend om naar te kijken. Omdat dit idee van het omarmen van realtime gesprekken met prospects (of het gebruik van bots) steeds meer aandacht krijgt, wordt het duidelijk populair bij B2B SaaS-bedrijven.

Uit ons onderzoek bleek dat bijna 50% van de SaaS-sites een chatbox in de hoek hebben die klaar staat om te worden gebruikt. Op de meeste van deze sites waren de services die werden gebruikt Intercom of Drift.

Dus moet je de normen volgen?

Het hangt er van af.

Experimenteren met design is een geweldige manier om iets te ontdekken voor de rest van de industrie. Dat gezegd hebbende, het risico van ontwerpexperimenten is dat gebruikers de hele ervaring kapot en slecht gemaakt kunnen vinden. Aan de andere kant, alles doen volgens de normen die al worden gebruikt op SaaS-websites over de hele wereld die je misschien heel gemakkelijk kunt gebruiken.

Hier is een lijst met dingen die u kunt doen als u een site wilt die niet zoals iedereen is:

  • Gebruik geen platte illustratie als een abstracte weergave van uw merk
  • Gebruik geen donkeroranje of gele knoppen op uw startpagina
  • Lijn uw waardepropositie niet uit op de site
  • Plaats uw logo in het midden of aan de rechterkant
  • Gebruik een donkere achtergrond voor uw site

Voldoet uw site momenteel aan deze normen?

Heeft iets je hier verrast?

Oorspronkelijk gepubliceerd als SaaS Web Design Best Practices: Foundation Labs

Dit verhaal is gepubliceerd in The Startup, de grootste publicatie over ondernemerschap van Medium gevolgd door +430.678 mensen.

Abonneer u om onze topverhalen hier te ontvangen.