10 kostenlose CSS- und JavaScript-Onboarding-Benutzeroberflächen

Das Ziel des Onboardings ist es, neue Benutzer mit einer Oberfläche vertraut zu machen. Dies gibt es in vielen verschiedenen Stilen, und es gibt keinen richtigen Weg, dies zu tun. Wenn Sie sich jedoch mit dem Onboarding von Websites und Apps befassen, können Sie Ideen für Ihre eigene Arbeit sammeln.

Und mit diesen kostenlosen CSS- und JavaScript-Onboarding-UIs haben Sie viele Ideen, die sowohl Inspiration als auch Code-Snippets bieten, um Ihnen den Einstieg zu erleichtern.

1. Karussellrutschen

Das Onboarding mit rotierendem Karussell ist auf Mobilgeräten, bei denen der Bildschirmplatz begrenzt ist, sehr beliebt. Aber dieser Effekt kann genauso gut auf Websites funktionieren, auf denen Sie Informationen schnell vermitteln müssen.

Schauen Sie sich diese von Nick Wanninger erstellte Karussell-Folien-Demo an, um zu sehen, was ich meine.

Es ist ein völlig kostenloses Onboarding-Beispiel, das mit Flickity und einigem einfachen CSS-Code erstellt wurde. Dies funktioniert sowohl für Mobilgeräte als auch für Desktops und ist daher eine ausgezeichnete Wahl, wenn Sie eine reaktionsschnelle Lösung benötigen.

2. Tägliche Benutzeroberfläche reagieren

Als einfaches Übungsdesign hat Jack Oliver diesen React Daily UI-Stift von Grund auf neu erstellt. Und es ist eine der elegantesten Onboarding-Erfahrungen, die ich je gesehen habe.

Die Benutzeroberfläche verfügt über Dummy-Text, da sie nicht für den praktischen Gebrauch in der realen Welt gedacht ist, aber sie ist sehr sauber und sollte genug Platz lassen, um so ziemlich alles auf der Seite unterzubringen.

Eine Sache, die zu beachten ist, ist, dass ich dies auf dem Handy nicht mit Swipes zum Laufen bringen konnte, und es scheint im Moment nur Taps zu erkennen. Aber für eine Nur-Klick-Lösung ist es wirklich nett.

3. Onboarding-Bildschirme

Dieser Stift verfügt nicht nur über eine unglaubliche Benutzeroberfläche für das Onboarding, sondern auch über benutzerdefinierte Animationen.

Entwickler Jeff Ham kennt sich mit Schnittstellen aus und hat diesen makellosen Onboarding-Bildschirm erstellt. Es stützt sich auf JavaScript, um die Animationen für den „nächsten Bildschirm“ und die Umschaltereignisse für Benutzerklicks/-tipps zu erstellen.

Eine nette Ergänzung zu dieser Benutzeroberfläche ist die blaue Weiter-Schaltfläche unten. Auf diese Weise kann der Benutzer Bildschirm für Bildschirm mit einem großen CTA in freier Sicht vorrücken. Ich würde wetten, dass dies die Gesamtzahl der Personen erhöhen würde, die konvertieren, und die Qualität der Erfahrung insgesamt verbessert.

4. Verpflegung

Dieses Boardal-Snippet ist ziemlich einzigartig, da man es nicht oft sieht.

Es verwendet ein modales Fenster mit Onboarding-Inhalten, um Benutzern zu helfen, schneller durch die Website zu kommen. Es ist ein benutzerdefiniertes Design, das ausschließlich zu Testzwecken erstellt wurde, und es ist eine der coolsten Möglichkeiten, den Onboarding-Prozess zu verbessern.

Beachten Sie, dass dies am besten auf einem Desktop funktioniert, da es auf dem modalen Effekt beruht (nicht ideal für kleinere Bildschirme).

Wenn Ihnen also das Design gefällt und Sie eine einfache Möglichkeit suchen, das Onboarding für Ihre Website zu verbessern, dann geben Sie Boardal eine Chance.

5. Führung

In der Regel wird das Onboarding als schrittweiser Prozess betrachtet, bei dem dem Benutzer neue Seiten und Funktionen vorgestellt werden. Aber Führungen finde ich persönlich viel sinnvoller.

Wenn Sie einen einfachen Ausschnitt für den Einstieg wünschen, ist diese geführte Tour perfekt. Es setzt auf Bootstrap-Komponenten und verwendet kleine Tooltips mit „Weiter“-Buttons, um die Tour voranzutreiben.

Der Benutzer kann die Tour jederzeit schließen, wenn er genervt oder nicht mehr interessiert ist. Dies macht es zu einer optionalen Tour, sodass sich weniger Menschen über den Vorgang ärgern werden.

Insgesamt ist dies meine bevorzugte Onboarding-Methode, obwohl die Einrichtung etwas mehr Aufwand erfordert. Aber diese Demo gibt Ihnen zumindest eine Vorlage, mit der Sie beginnen können.

6. Materialtour

Eine alternative Tourmethode ist die automatisch fortschreitende Tour, die bestimmte Merkmale hervorhebt.

Das beste Beispiel, das ich gefunden habe, ist dieser Stift von Gregor Adams. Es basiert auf den Materialrichtlinien und verwendet hervorgehobene Kreise, um Teile der Seite hervorzuheben. Diese Technik ist perfekt, wenn Sie sehr komplexe Schnittstellen mit vielen Funktionen haben.

Indem Sie die gesamte Seite abdunkeln, lenken Sie den Fokus jeweils auf einen Bereich. Dadurch wird die Aufmerksamkeit des Benutzers sofort erregt, was Sie für ein gutes Onboarding tun müssen.

Ich weiß, dass dies nicht auf allen Websites gut passt, aber wenn Ihnen die Benutzeroberfläche gefällt, empfehle ich dringend, es auszuprobieren.

7. Android-App-Onboarding

Mobile Apps benötigen den Onboarding-Prozess in der Regel mehr als Websites. Es ist üblich, dass Designer mobiler UIs Funktionen in den kleineren Bildschirm packen, was Benutzer ohne geführte Einführung überfordern kann.

Dieser Onboarding-Leitfaden von Mat Swainson ist ein kleines, aber eloquentes Beispiel dafür, was für Smartphone-Apps getan werden kann.

Es basiert auf einem Android-Modell, aber es ist sicherlich nicht der einzige Stil, den Sie verwenden können. Mir gefällt, wie es natives Wischen unterstützt, was sogar in mobilen Webbrowsern funktioniert.

Außerdem ist die kleine Fortschrittsanzeige oben eine nette Geste. Auf jeden Fall eine einfache Onboarding-Seite, aber es lohnt sich, sie zu speichern, wenn Sie nach Inspiration suchen.

8. Ionic-Einführung

Es gibt eine Menge, was Sie mit Ionic machen können, und dieser Stift ist ein großartiges Beispiel.

Entwickler Clifford Fajardo hat ein Ionic-Intro an Bord erstellt, das ausschließlich auf dem JavaScript-Framework läuft. Es unterstützt alle mobilen Interaktionen wie Tippen, Wischen und sogar Optionen für Doppeltippen, wenn Sie diese Funktion wünschen.

Ionic wird hauptsächlich für die mobile Entwicklung verwendet und funktioniert auch sehr gut für mobile Websites. Ich kann nicht sagen, dass dieser Onboarding-Bildschirm zu jeder Website passt, aber es ist eine solide Wahl, wenn mehr als 50 % Ihres Publikums von Mobilgeräten kommen.

9. Vertikale Form

Mit einer leichten Jelly-UI-Animation und einem wirklich einfachen Design ist diese vertikale Form ein einzigartiger Leckerbissen.

Es nutzt die CSS-Flex-Eigenschaften zusammen mit einigen benutzerdefinierten JavaScript- und CSS-Animationen in vollem Umfang. Zugegeben, ich finde den Inhalt etwas dünn, daher bietet er nicht viel an detailliertem Onboarding.

Sie können diese Schnittstelle jedoch ohne großen Aufwand wirklich zu Ihrer eigenen machen, sodass der Fantasie viel überlassen bleibt.

10. Tooltip der geführten Tour

Hier ist ein weiteres Beispiel für eine geführte Tour, aber dieses verwendet eine vollständige Tooltip-Box, die auf der Seite fixiert ist.

Wenn Sie sich das Snippet ansehen, werden Sie feststellen, dass es nicht in eine bestimmte Schnittstelle integriert ist. Vielmehr ist es nur ein schwebender Tooltip mit Ratschlägen und Fortschrittsschritten für den Benutzer.

Wenn Sie diese Benutzeroberfläche mit einem festen Tooltip-Positionierungsskript kombinieren, können Sie dieses Ding einfach auf Ihrer Benutzeroberfläche verschieben, wobei Tooltips auf alle Ihre Hauptfunktionen zeigen. Diese Vorlage erfordert einige echte Anpassungen, damit sie funktioniert, aber für eine einfache Benutzeroberfläche ist sie schön.