Tour-Seiten sind eine der wichtigsten Komponenten für Websites, die für Apps und / oder Services werben. Auf der Tour-Seite treffen interessierte Benutzer häufig die feste Entscheidung, sich anzumelden, oder wechseln zu etwas anderem.
Es ist unnötig zu erwähnen, dass es als Designer sehr viel Druck gibt, dies richtig zu machen! Fürchten Sie sich nicht, viele talentierte Designer sind Ihnen schon vorausgegangen und wir können viel lernen, wenn Sie ihre Beispiele betrachten. Wir werden in Tour-Seiten von Giganten wie Mozilla, 37Signals und Mint.com eintauchen und sehen, mit welchen gängigen Tricks sie alle Conversions erzielen.
Es ist schwerer als es aussieht
Sie haben es geschafft, Sie haben den immer schwer fassbaren Klick der Startseite aus dem Benutzer gerissen. Sie interessieren sich für Ihre Website und möchten mehr darüber erfahren. Sie denken, Sie sind im klaren Bereich, aber eine neue Herausforderung erwartet Sie. Sie haben jetzt eine Chance, sie davon zu überzeugen, dass Sie die Versprechen der Homepage einlösen können, dass Ihre App das tut, was Sie gesagt haben, und mehr auf eine Weise, die besser ist als das, was alle anderen tun.
Sie entwerfen eine Tour-Seite. Es ist eine täuschend einfache Aufgabe. Sie tun gut daran, nicht halbherzig durchzugehen, sondern einige Zeit damit zu verbringen, die beste Seite für Sie zu gestalten. Hier werden sich potenzielle Benutzer wirklich mit Urteilen über Ihren Service befassen, und Sie möchten nicht den ersten Eindruck vermuten. Schauen wir uns einige Live-Beispiele von Designern an, die vor Ihnen gegangen sind, um zu sehen, was wir lernen können.
Mint.com
Mint ist einer meiner Lieblingsdienste im Web. Es ist nicht nur immens hilfreich, um jeden Cent, den Sie ausgeben, zu verfolgen, sondern ist auch aus Designperspektive äußerst attraktiv. Da ihre Designer so talentiert sind, dachte ich, sie könnten uns wahrscheinlich ein oder zwei Dinge über das heutige Thema vermitteln. Hier ist ein kleiner Ausschnitt der Tour-Seite:
Inhaltsorganisation
Das erste, was mir auf dieser Seite auffällt, ist das Tonne des Inhalts. Sie möchten Ihre Besucher nicht mit Informationen überladen, wenn Sie einen recht direkten Service haben, aber etwas Finanzielles wie Mint wirft eine Menge roter Fahnen bei Personen auf, die zu Recht vorsichtig sind, einer Website den Zugriff auf ihr Bankkonto zu gewähren. Vor diesem Hintergrund ist Mint in Bezug auf jeden Aspekt des Services sehr transparent, bevor Sie sich anmelden.
Dies ist ein wichtiges Konzept. Wenn es für Ihren Dienst Gründe gibt, aus denen Besucher eine Pause machen können, wenn Sie über die Anmeldung nachdenken, ist die Tour-Seite Ihre Chance, diese Probleme ausführlich zu behandeln, indem Sie offen, ehrlich und beruhigend mit Ihrem Produkt umgehen.
Eine weitere großartige Sache, die Mint richtig macht, ist die Organisation des Inhalts in kleine, leicht verdauliche und ordentlich organisierte Brocken. Anstatt alles auf eine kilometerlange Seite zu werfen, wurde eine Art AJAX-Inhaltsumschalter implementiert, der die rechte Spalte aktualisiert, wenn Sie ein Thema auswählen.
Starke Inhaltsdarstellung
Eine weitere Sache, die Mint wirklich nagelt, ist die Darstellung ihres Inhalts. Beachten Sie dies, weil viele Leute es falsch verstehen: Kurze, einfache und unkomplizierte Überschriften, gepaart mit ansprechenden, ansprechenden Screenshots und kurzen, beschreibenden Begleittext. So sieht das in der Praxis aus:
Beachten Sie die Kopie hier, sie ist kurz und auf den Punkt, während Sie Ihnen sagen, was Sie wissen müssen. Schauen Sie sich auch an, wie sich der Screenshot auf den wichtigen Teil konzentriert. Dieser Lupen-Trick ist im Webdesign momentan sehr verbreitet.
Mint hat noch einen weiteren Trick im Ärmel. Wenn die Screenshots nicht ausreichen, werfen sie zusätzliche visuelle Hinweise. In der Abbildung unten wird die Überschrift eines Budgets durch die sofortige Anzeige eines Sparschweins mit Gürtel um die Budgets verstärkt:
Der Screenshot hätte dies selbst tun können, aber die Grafiken sind ein wenig vage und wurden daher nicht sofort gelesen, das Schwein mag kitschig und vorhersehbar sein, aber es hilft, dieses Design an die Stelle zu bringen, wo es sein muss.
Basislager
Lassen Sie uns Mint hinter uns und schauen Sie sich eine andere gut gestaltete Tour-Seite an. Die Leute von 37signals sind bekannt für ihr einfaches und sauberes Design, das genau das bietet, was Sie brauchen, und nicht mehr. Hier ist eine Ansicht der Tourenseite für ihre Basecamp-App.
Anders, aber gleich
Beachten Sie zwei wichtige Aspekte dieser Seite im Hinblick auf das vorige Beispiel. Erstens unterscheidet sich der Designstil sehr von Mint. Die Seiten sind jedoch unglaublich ähnlich. Beachten Sie die kurzen Inhaltsbereiche, die links von einem Inhaltswechsler organisiert werden, Screenshots, starke Schlagzeilen und zusätzliche visuelle Hinweise, um die Screenshots zu unterstützen. Selbst der hin- und hergehende Layoutstil ist fast genau das, was wir auf Mint gesehen haben.
Dies ist eine sehr wichtige Sache, die Sie als Designer lernen sollten: Designmuster existieren unabhängig vom Designstil. Mint hat einen sehr glänzenden, vollendeten Look mit viel Glanz und Reflexion, während Basecamp in seiner Google-ähnlichen Einfachheit sehr flach ist. Dies ist jedoch nur der Bonbonüberzug, unter diesem kritischen Rahmen eines starken Layouts, das die Aufnahme der Inhalte erleichtert.
Tiefer Graben
Wenn Sie die Übersicht über die Basecamp-Funktionen geprüft haben, haben Sie die Möglichkeit, sie in Aktion zu sehen, indem Sie auf die kleinen Videolinks klicken, die sich auf der gesamten Seite befinden. Ich bin ein Fan von guten Produktvideos, und ich denke, dass diese wirklich dazu beitragen, Ihre Inhalte kurz und auf den Punkt zu halten, während sie gleichzeitig den tiefen Eindruck vermitteln, den manche Besucher benötigen.
Denken Sie daran, dass Basecamp stolz darauf ist, wie einfach und einfach sein Funktionsumfang ist. Wenn Basecamp für Produktdemonstrationsvideos nicht zu einfach ist, ist dies auch auf Ihrer Website nicht der Fall. Video-Screencasting-Apps sind sehr erschwinglich und einfach zu verwenden. Daher ist es nicht schwer, professionelle Videotouren zusammenzustellen.
Mozilla überarbeitet die Tour-Seite
Das grundlegende Format, das wir auf den letzten beiden Tourenseiten gesehen haben, ist ein ziemlich übliches Format.Sie können fast identische Taktiken auf Dutzenden von Web-App-Sites sehen. Schauen Sie sich die Tour-Seiten für Checkout App und Campaign Monitor an und Sie werden feststellen, dass derselbe links ausgerichtete Content Switcher zusammen mit kurzen Funktionslisten, Screenshots und Symbolen verwendet wird.
Es gibt einen Grund, warum dieses Format so weit verbreitet ist: es funktioniert. Jede dieser Seiten ist in der Lage, ihre eigene einzigartige Identität zu bewahren und gleichzeitig bewährte Techniken mit ihren Brüdern zu teilen. Dies bedeutet jedoch nicht notwendigerweise, dass die Regeln der Tour-Seite in Stein gemeißelt sind oder dass wir für alle Standorte die bestmögliche Lösung gefunden haben.
Ein Beispiel für ein Unternehmen, das sich oft dafür entscheidet, über den Tellerrand zu schauen, ist Mozilla. Ihr talentiertes Designteam entschied sich dafür, das übliche Tour-Seitenformat aufzugeben und ihren eigenen Weg zu beschreiten. Das Ergebnis ist eine lustige, interaktive und unglaublich einfache Übersicht des Browsers:
Hier sehen wir einen Screenshot des Browsers mit einer Reihe von Markierungen. Die Anweisungen sind einfach und können in einer Sekunde gelesen werden: • Bewegen Sie die unten stehenden Markierungen, um Informationen zur Funktion anzuzeigen. Wenn Sie diesen Ratschlag befolgen, können Sie die wichtigsten Funktionen genauer betrachten.
Ich finde es toll, wie direkt diese Methode ist. Sie erklärt die Funktionen der App nicht durch abstrakte generische Symbole und aufgeblähte Absätze, sondern durch einen einfachen Screenshot, der alles aufzeigt, was Sie wissen müssen.
Ein organisiertes Durcheinander
Diese Methode zum Markieren eines Screenshots sorgt für ein recht organisches Design. Anstelle eines vorhersagbaren und logischen Flusses sind die Marker überall verstreut. Es gibt jedoch einen sehr subtilen Designtrick, der Ihnen hilft, Ordnung im Chaos zu sehen. Können Sie das sehen?
Dieser kleine gepunktete Pfad ist einer dieser winzigen Designelemente, die wirklich eine Seite zusammenführen können. Ohne es gibt es ein Durcheinander von Links, und es gibt einen klaren Fortschritt, der folgen wird. Zugegeben, Sie müssen dem nicht perfekt folgen, und ich würde wetten, dass nur wenige Benutzer dies tun. Die bloße Anwesenheit verleiht der Seite jedoch einen leichten, aber wichtigen Bedienungsschub, der eine gewisse Ordnung erzeugt.
Zeige den Prozess
Unser letzter Tour-Designtrick, den Sie kennen sollten, stammt von Big Cartel. Hier ist eine kurze Ansicht ihrer Tour-Seite:
Oben auf dieser Seite gibt es etwas sehr einfaches, aber unglaublich effektives Verfahren, das aus drei Schritten besteht. Manchmal muss eine Tourenseite mehr sein als eine einfache Darstellung von Funktionen. Wenn Sie beispielsweise behaupten, dass Ihr Service etwas Kompliziertes vereinfacht, z. B. die Einrichtung eines Online-Shops, ist es wichtig, dass Sie veranschaulichen, wie dies irgendwie funktioniert.
Drei ist eine magische Zahl. Wenn möglich, versuchen Sie, Prozesse in drei einfache und einfache Schritte zu unterteilen, die jeder verstehen kann. Hier geht es darum, den Benutzer dazu zu bringen, sich gestärkt zu fühlen, er muss sich das ansehen und sagen: "Ich kann das!", Besonders wenn er sich anderswo umgesehen hat und nur entmutigende komplizierte Lösungen gefunden hat.
Fazit
Die Beispiele oben haben jeweils ihre eigenen einzigartigen Lektionen, die wir uns beibringen sollen. Zusammen zeichnen sie ein Bild einiger üblicher Tour-Seiten-Designpraktiken, die Sie in Ihre anstehenden Projekte implementieren können.
Denken Sie daran, dass Sie während Ihres Abenteuerseiten-Abenteuers die bemerkenswerte Freiheit haben, zu experimentieren, um herauszufinden, was am besten funktioniert. Versuchen Sie, ein paar verschiedene Designs zu entwickeln und dann A / B-Tests durchzuführen, um zu sehen, auf welche Benutzer am besten eingegangen wird.
Wenn Sie kürzlich eine Tour-Seite erstellt haben, hinterlassen Sie einen Kommentar mit einem Link. Welche Techniken haben Sie eingesetzt, um den Erfolg sicherzustellen? Haben Sie etwas gelernt, indem Sie mit verschiedenen Layouts und Designs experimentiert haben?