Vi studerte 100 SaaS-nettsteder for å avdekke designtrender + beste praksis (her er hva vi fant)

Hva er den beste fremgangsmåten for SaaS webdesign?

Det er spørsmålet jeg stilte opp for å svare på etter å ha snublet på SaaS-nettstedet, etter SaaS-nettstedet, etter SaaS-nettstedet ... Det så omtrent det samme ut:

Å forstå beste fremgangsmåter kan være en fin måte for webdesignere (og SaaS-grunnleggere) å tenke på sin egen merkevarepresentasjon. Det var en tilnærming Andy Crestodina tok noen år tilbake da han analyserte nettstandarder for de 50 beste markedsføringssidene. Det kan også hjelpe designere, strateger og grunnleggere med å planlegge designinitiativene sine i betydningen av wireframes og identifisere hvilke sentrale designelementer som må være på hjemmesiden deres.

Nielsen / Norman Group publiserte en av de første dokumentasjonene rundt Web Design Standards og definerte tre nivåer av standardisering:

  • Standard: 80% + av nettsteder bruker samme tilnærming
  • Konvensjon: 50–79% av nettsteder bruker samme tilnærming
  • Forvirring: 49% eller færre nettsteder bruker en tilnærming

Mens jeg opprinnelig hadde mye frustrasjon med de like SaaS-merkene; jo lenger jeg så på begrunnelsen for å følge designstandarder og beste praksis, jo mer forsto jeg fordelen med konsistens. Noen av fordelene som følger med følgende designnettstandarder inkluderer:

  • En følelse av sikkerhet og tillit når du ser vanlige designelementer
  • Å vite nøyaktig hvor du skal gå når du trenger noe (dvs. hjem via. Logo-klikk)
  • Ingen usikkerhet rundt nye ikoner, knapper og designelementer
  • Ingen viktige elementer (dvs. få en demo) savnet

Alle disse tingene kan gjøre brukeropplevelsen jevnere og mer intuitiv.

Men det er mange ting på SaaS-plassen som ser ut til å være kopiert uten noen god grunn.

Så for å forstå SaaS Web Design Standards tok vi de 100 beste nettstedene fra SaaS1000.com i januar 2019, for å lage et datasett som viste oss hva ting hadde blitt standarder, hva som var konvensjonelle og hva som var en myntflip. Her er en nærmere titt på beste praksis for SaaS-design som skjer i 2019:

Merkelogoer er alltid på venstre side

Plasseringen av logoen øverst til venstre på et nettsted er en vanlig beste praksis for design. Det er en tilnærming som de fleste designere utnytter innsiden av SaaS og utenfor SaaS. Det er et logisk valg som erkjenner at folk flest i Nord-Amerika ser på et nettsted fra venstre til høyre.

Men noen ganger (i vår forskning; en gang) bestemmer en designer å plassere logoen et annet sted. Mens vi ikke så noen nettsteder plassere logoen deres til høyre; vi fant DataDog som plasserte logoen sin rett på midten av siden deres:

I en logistikundersøkelse fant folk på Venngage at 35% av folk foretrakk tekstdominerende og horisontale stillogoer for teknologiselskaper.

De fleste SaaS-nettsteder er mobile responsive

Vi lever i en mobil verden.

Responsive nettsteder er en flott måte å sikre at du ikke leverer ødelagte opplevelser for folk på skrivebordet eller besøker på mobilen.

I 2018 ble 52,2% av all verdens trafikk på nett generert gjennom mobiltelefoner. Det er derfor det er så flott å se at de fleste SaaS-selskaper investerer i et responsivt design i stedet for bare å bygge for desktop.

Video finner du på litt under 55% av nettstedene

Enten det var en demo eller en casestudie i form av video på hjemmesiden for disse nettstedene, mer enn halvparten av disse nettstedene tok tilnærmingen. Flertallet av SaaS-selskaper utnytter video, men ikke med en betydelig margin for å gjøre det ansett som en god praksis.

De arve kostnadsforventningene som følger med produksjonen av en video av høy kvalitet, kan fremdeles holde merkevarene tilbake fra denne investeringen. Illustrerte produktforklarere økte i popularitet for noen år siden og ble en populær tjeneste kjøpt gjennom nettsteder som Fiverr og Upwork. I dag er etterspørselen etter denne typen videoer fortsatt ganske høy (mer enn 14 800 søk etter forklarervideoer per måned), men bare litt over halvparten av SaaS-selskaper bruker dem.

Det er alltid primær oppfordring til handling over folden

Det er en klar beste praksis i SaaS-samfunnet at din oppfordring til handling som driver folk til å gjøre noe, må være over folden. Mer enn 90% av alle nettsteder som ble inkludert i denne SaaS Design-forskningen hadde en knapp eller en oppfordring til handling over folden.

Plasseringen av oppfordringen til handling varierer

På alle disse nettstedene var det veldig liten konsistens der oppfordringen til handling ble plassert. Noen av dem ble plassert helt til venstre på websiden, noen var døddøde i midten og andre var langt borte til høyre. Den beste praksis når det gjelder plassering av CTA ser ut til å være en komplett myntflipp blant SaaS-selskaper.

Hvilke farger bruker SaaS-selskaper for knapper?

Når vi analyserte de forskjellige oppfordringene til handlinger, var det en tydelig trend mot grønne og oransje knapper.

Gratis demo er det mest populære oppfordringen til handling

Nettstedene vi har gjennomgått som har en oppfordring til handling, har vanligvis en klar ting som de vil at folk skal gjøre. Flertallet av dem bruker handlingsorientert språk (%%) og presser besøkende til å gjøre noe som skyver dem videre i trakten. Noen varianter inkluderer:

  • Planlegg en demonstrasjon
  • Be om en demonstrasjon
  • Få en gratis demonstrasjon
  • Få X gratis
  • Kom i gang
  • Prøv X

De vanligste ordene + setningene i oppfordringen til handlinger hadde en tendens til å være: Gratis, Demo, Komme i gang, Prøv X og Be om ... Noen av disse ordene dukket opp sammen (dvs. gratis demo eller prøv X gratis), men bruker en kombinasjon av disse ordene har en tendens til å dukke opp mest i SaaS primære CTAer.

Å bruke en lys bakgrunn er beste praksis

Det er ikke vanlig å se et nettsted som har svart bakgrunn i SaaS:

De fleste nettstedene (92% av dem) brukte hvite eller lyse farger som den viktigste bakgrunnen for nettstedene.

Bruk av virkelige mennesker brukes bare av 56% av SaaS

Plasseringen av virkelige mennesker på hjemmesiden var mer enn halvparten. Sammenlignet med illustrasjonene, ble plasseringen av virkelige mennesker på hjemmesiden vanligvis IKKE funnet i hoveddelen av nettstedet. Noen ganger dukket de opp rett over brettet som på bildet over, men de fleste ganger var det lenger nede på siden i form av en attest, case study eller referanse til en funksjon.

Det var også flott å se ganske mye mangfold i bildevalget. Det eneste som manglet var å se et lignende nivå av mangfoldighet på disse “teamet” -sidene våre, men det er et tema for en annen gang.

Tilpassede illustrasjoner er veldig vanlige (70%)

Fremveksten av tilpassede illustrasjoner har feid SaaS-samfunnet med storm. Det er noe som de siste tre årene har dukket opp på side etter side etter side. Vår profesjonelle mening er at dette er en trend, men det er bare noen få prosentpoeng fra å bli en god praksis.

Her er et øyeblikksbilde av noen av nettstedene og deres illustrasjoner:

Dette er en interessant trend.

Hva tenker du: Er det denne tilnærmingen til designoppstart som skiller seg ut, eller resulterer det i at de blandes sammen? Gjør det noe? Avgir det en følelse av tillit?

Halvparten av SaaS-merkevarene bruker et Live Chat-verktøy

Økningen av live chat og samtalemarkedsføring har vært en fascinerende trend. Ettersom denne ideen om å omfavne sanntidssamtaler med potensielle kunder (eller bruke boter) fortsetter å fange trekkraft, blir den tydelig populær blant B2B SaaS-selskaper.

Forskningen vår fant at nesten 50% av SaaS-nettsteder har en chatboks i hjørnet som er klar til å bli forlovet med. På de fleste av disse nettstedene var tjenestene som ble brukt Intercom eller Drift.

Så skal du følge standardene?

Det kommer an på.

Å eksperimentere med design er en fin måte å avdekke noe før resten av bransjen. Når det er sagt, er risikoen for designeksperimentering at brukere kan finne hele opplevelsen ødelagt og dårlig skapt. På baksiden, gjør alt etter standardene som allerede brukes på SaaS nettsteder rundt om i verden, som du kanskje veldig enkelt kan blande inn.

Her er en liste over ting du kan gjøre hvis du vil ha et nettsted som ikke er som alle andre:

  • Ikke bruk flat illustrasjon som en abstrakt representasjon av merkevaren din
  • Ikke bruk mørk oransje eller gule knapper på hjemmesiden din
  • Ikke legg inn ditt verdiforslag på nettstedet
  • Plasser logoen i midten eller til høyre
  • Bruk en mørk bakgrunn på nettstedet ditt

Oppfyller nettstedet ditt for tiden disse standardene?

Overrasket noe her?

Opprinnelig utgitt som SaaS Web Design Best Practices: Foundation Labs

Denne historien er publisert i The Startup, Middels største entreprenørskapspublikasjon fulgt av +430.678 personer.

Abonner for å motta topphistoriene våre her.