Wir haben 100 SaaS-Sites untersucht, um Designtrends und Best Practices aufzudecken.

Was sind die Best Practices für SaaS-Webdesign?

Diese Frage wollte ich beantworten, nachdem ich über eine SaaS-Site, eine SaaS-Site oder eine SaaS-Site gestolpert bin.

Das Verstehen von Best Practices kann für Webdesigner (und SaaS-Gründer) eine großartige Möglichkeit sein, über ihre eigene Markenpräsenz nachzudenken. Diesen Ansatz hat Andy Crestodina vor ein paar Jahren bei der Analyse der Webstandards für die 50 wichtigsten Marketing-Websites gewählt. Es kann Designern, Strategen und Gründern auch dabei helfen, ihre Designinitiativen im Sinne von Wireframes zu planen und festzustellen, welche wichtigen Designelemente auf ihrer Homepage vorhanden sein müssen.

Die Nielsen / Norman Group hat eine der ersten Dokumentationen zu Webdesign-Standards veröffentlicht und drei Standardisierungsebenen definiert:

  • Standard: Über 80% der Websites verwenden denselben Ansatz
  • Konvention: 50–79% der Websites verwenden denselben Ansatz
  • Verwirrung: 49% oder weniger Websites verwenden einen Ansatz

Ursprünglich war ich sehr frustriert über die ähnlichen SaaS-Marken. Je genauer ich mich mit den Gründen für die Einhaltung von Designstandards und Best Practices befasste, desto besser wurde mir der Vorteil der Konsistenz bewusst. Zu den Vorteilen der folgenden Design-Webstandards gehören:

  • Ein Gefühl von Sicherheit und Vertrauen, wenn man gemeinsame Designelemente sieht
  • Wissen, wohin Sie gehen müssen, wenn Sie etwas benötigen (z. B. Startseite über. Logo-Klick)
  • Keine Unsicherheit über neue Icons, Buttons und Designelemente
  • Keine Schlüsselelemente (dh eine Demo erhalten) verfehlt

All diese Dinge können das Benutzererlebnis flüssiger und intuitiver gestalten.

Es gibt jedoch viele Dinge im SaaS-Bereich, die scheinbar ohne triftigen Grund repliziert werden.

Um die SaaS-Webdesign-Standards besser zu verstehen, haben wir im Januar 2019 die Top-100-Websites von SaaS1000.com verwendet, um einen Datensatz zu erstellen, der zeigt, welche Dinge zu Standards geworden sind, welche konventionell sind und was ein Münzwurf ist. Im Folgenden werden die Best Practices für das SaaS-Design aus dem Jahr 2019 näher erläutert:

Markenlogos sind immer auf der linken Seite

Die Platzierung des Logos oben links auf einer Website ist eine gängige bewährte Methode für das Design. Diesen Ansatz nutzen die meisten Designer innerhalb und außerhalb von SaaS. Es ist eine logische Entscheidung, zu erkennen, dass die meisten Menschen in Nordamerika eine Website von links nach rechts anzeigen.

Aber manchmal (in unserer Forschung; einmal) beschließt ein Designer, das Logo woanders zu platzieren. Auf keinen Websites wurde das Logo rechts angezeigt. Wir haben DataDog gefunden, der sein Logo direkt in der Mitte seiner Website platziert hat:

In einer Logo-Studie stellten die Mitarbeiter von Venngage fest, dass 35% der Menschen textdominierte und horizontale Logos für Technologieunternehmen bevorzugten.

Die meisten SaaS-Websites reagieren mobil

Wir leben in einer mobilen Welt.

Responsive Sites sind eine großartige Möglichkeit, um sicherzustellen, dass Sie keine fehlerhaften Benutzererfahrungen für Desktop-Benutzer oder Besuche auf Mobilgeräten liefern.

Im Jahr 2018 wurden 52,2% des weltweiten Online-Verkehrs über Mobiltelefone generiert. Aus diesem Grund ist es so großartig zu sehen, dass die meisten SaaS-Unternehmen in ein responsives Design investieren, anstatt nur für den Desktop zu bauen.

Video kann auf etwas weniger als 55% der Websites gefunden werden

Ob es sich um eine Demo oder eine Fallstudie in Form eines Videos auf der Homepage für diese Sites handelte, mehr als die Hälfte dieser Sites verfolgte den Ansatz. Die Mehrheit der SaaS-Unternehmen nutzt Video, um es als Best Practice zu etablieren.

Die alten Kostenerwartungen, die mit der Produktion eines hochwertigen Videos einhergehen, könnten Marken noch immer von dieser Investition abhalten. Illustrierte Produkterklärer erfreuten sich vor einigen Jahren wachsender Beliebtheit und wurden zu einem beliebten Service, der über Websites wie Fiverr und Upwork gekauft wurde. Die Nachfrage nach solchen Videos ist heute noch recht hoch (mehr als 14.800 Suchanfragen nach Erklärvideos pro Monat), doch nur etwas mehr als die Hälfte der SaaS-Unternehmen nutzt sie.

Es gibt immer einen primären Aufruf zum Handeln über der Klappe

In der SaaS-Community gibt es eine eindeutige Best Practice, dass Ihr Aufruf zum Handeln, der die Menschen dazu bringt, etwas zu tun, über den Tellerrand hinausgehen muss. Über 90% aller Websites, die an dieser SaaS-Design-Untersuchung beteiligt waren, hatten einen Button oder Handlungsaufruf über dem Falz.

Die Platzierung des Aufrufs zum Handeln variiert

Auf all diesen Websites gab es nur eine sehr geringe Übereinstimmung, wo der Aufruf zum Handeln lautete. Einige von ihnen befanden sich ganz links auf der Webseite, einige befanden sich in der Mitte und andere ganz rechts. Die beste Vorgehensweise bei der Platzierung des CTA scheint ein kompletter Münzwurf unter SaaS-Unternehmen zu sein.

Welche Farben verwenden SaaS-Unternehmen für Schaltflächen?

Bei der Analyse der verschiedenen Handlungsaufforderungen war ein klarer Trend zu grünen und orangefarbenen Tasten zu erkennen.

Kostenlose Demo ist der beliebteste Aufruf zum Handeln

Die Websites, die wir überprüft haben und die einen Aufruf zum Handeln enthalten, haben in der Regel eine eindeutige Aufforderung an die Nutzer. Die Mehrheit von ihnen verwendet eine handlungsorientierte Sprache (%%) und drängt den Besucher dazu, etwas zu tun, das ihn weiter in den Trichter treibt. Einige Variationen umfassen:

  • Planen Sie eine Demo
  • Eine Demo anfordern
  • Holen Sie sich eine kostenlose Demo
  • Holen Sie sich X kostenlos
  • Loslegen
  • Versuchen Sie es mit X

Die gebräuchlichsten Wörter und Ausdrücke im Aufruf zu Aktionen waren: Kostenlos, Demo, Get, Started, Try X und Request ... Einige dieser Wörter tauchten zusammen auf (z. B. Kostenlose Demo oder Try X For Free), verwendeten jedoch eine Kombination Von diesen Wörtern treten die meisten in primären SaaS-CTAs auf.

Die Verwendung eines hellen Hintergrunds ist eine bewährte Methode

Es ist nicht üblich, eine Site mit schwarzem Hintergrund in SaaS anzuzeigen:

Die meisten Websites (92% von ihnen) verwendeten Weiß oder helle Farben als primären Hintergrund für ihre Websites.

Die Verwendung von realen Personen wird nur von 56% von SaaS verwendet

Die Platzierung von realen Personen auf der Homepage betrug mehr als die Hälfte. Im Vergleich zu den Abbildungen wurde die Platzierung von realen Personen auf der Homepage in der Regel NICHT im Hauptbereich der Website gefunden. Manchmal erschienen sie direkt über der Falte wie das obige Bild, aber meistens war es weiter unten auf der Seite in Form eines Testimonials, einer Fallstudie oder eines Verweises auf ein Feature.

Es war auch toll, einiges an Vielfalt in der Bildauswahl zu sehen. Das Einzige, was fehlte, war, dass auf diesen "Unser Team" -Seiten ein ähnliches Maß an Vielfalt zu sehen war, aber das ist ein Thema für ein anderes Mal.

Kundenspezifische Illustrationen sind sehr verbreitet (70%)

Der Aufstieg kundenspezifischer Illustrationen hat die SaaS-Community im Sturm erobert. Es ist etwas, das in den letzten 3 Jahren vor Ort nach Ort nach Ort aufgetaucht ist. Nach unserer beruflichen Einschätzung handelt es sich hierbei um einen Trend, der jedoch nur um wenige Prozentpunkte von der Best Practice abweicht.

Hier ist eine Momentaufnahme einiger Websites und ihrer Illustrationen:

Dies ist ein interessanter Trend.

Was denken Sie: Hilft diese Herangehensweise beim Design dabei, Startups hervorzuheben, oder führt sie dazu, dass sie sich integrieren? Ist das wichtig? Gibt es ein Gefühl des Vertrauens ab?

Die Hälfte der SaaS-Marken verwendet ein Live-Chat-Tool

Der Aufstieg des Live-Chats und des Konversationsmarketings war ein faszinierender Trend. Da diese Idee, Gespräche in Echtzeit mit potenziellen Kunden (oder mithilfe von Bots) zu führen, weiterhin Anklang findet, wird sie bei B2B-SaaS-Unternehmen eindeutig immer beliebter.

Unsere Untersuchung ergab, dass fast 50% der SaaS-Websites eine Chat-Box in der Ecke haben, mit der Sie sich beschäftigen können. Auf den meisten dieser Websites wurden Intercom- oder Drift-Dienste verwendet.

Sollten Sie sich also an die Standards halten?

Es hängt davon ab, ob.

Das Experimentieren mit Design ist eine großartige Möglichkeit, etwas vor dem Rest der Branche zu entdecken. Das Risiko von Designexperimenten besteht jedoch darin, dass Benutzer das gesamte Erlebnis als kaputt und schlecht gestaltet empfinden. Wenn Sie alles tun, um die Standards zu erfüllen, die bereits auf SaaS-Websites auf der ganzen Welt verwendet werden, können Sie dies sehr einfach tun.

Im Folgenden finden Sie eine Liste der Aktionen, die Sie ausführen können, wenn Sie eine Site möchten, die nicht wie alle anderen ist:

  • Verwenden Sie keine flache Illustration als abstrakte Darstellung Ihrer Marke
  • Verwenden Sie keine dunkelorangen oder gelben Schaltflächen auf Ihrer Homepage
  • Richten Sie Ihr Wertversprechen nicht auf der Website aus
  • Platzieren Sie Ihr Logo in der Mitte oder rechts
  • Verwenden Sie einen dunklen Hintergrund für Ihre Site

Entspricht Ihre Site derzeit diesen Standards?

Hat Sie hier etwas überrascht?

Ursprünglich veröffentlicht als SaaS Web Design Best Practices: Foundation Labs

Diese Geschichte wurde in The Startup veröffentlicht, der größten Veröffentlichung zu Unternehmertum von Medium, gefolgt von 430.678 Personen.

Abonnieren Sie hier unsere Top Stories.