Entwerfen einer Web-App-Homepage Beispiele, Tipps und Themen

Das Internet ist völlig überfüllt mit Apps, die Ihnen helfen, sich mit einem sozialen Netzwerk zu verbinden, Einkaufslisten zu erstellen, große Projekte zu verwalten, zu entscheiden, wer Tee machen wird, und alle anderen verrückten Aufgaben, die Sie sich vorstellen können.

Wie können Sie die Besucher davon überzeugen, dass Ihre App die sprichwörtliche Nadel unter dem Heu ist? Heute schauen wir uns einige echte Beispiele an, um herauszufinden, welche Strategien zu ahmen und welche zu vermeiden sind.

Die Homepage Ihrer App ist äußerst wichtig

Sie haben viel Zeit, Geld und Mühe aufgewendet, um eine Webanwendung zu erstellen. Es ist ein erstklassiges Unterfangen, bei dem Sie sicher wie ein Lauffeuer ankommen werden. Es gibt nur einen Haken, man muss die Leute davon überzeugen, es auszuprobieren.

Egal wie gut Ihre Web-App ist, Sie müssen immer noch solide Verkaufstaktiken haben, die die Benutzer letztendlich davon überzeugen, auf "Anmelden" zu klicken. Taste. Selbst wenn der Dienst völlig kostenlos ist und viele Funktionen bietet, müssen Sie wirklich daran arbeiten, diese Konvertierungen zu gewinnen.

Gehen Sie niemals davon aus, dass ein Benutzer, der auf Ihrer Homepage gelandet ist, wirklich an Ihrem Angebot interessiert ist und daher nur einen kleinen Anstoß braucht, um weiterzugehen. Die Chancen stehen gut, sie folgten einer Verbindung mit nur einer vagen Vorstellung davon, wo sie enden würden und sich in einem heiklen Stadium befinden, in dem sie wahrscheinlich innerhalb von Sekunden auf eine andere Website ziehen, wenn Sie sie nicht reinziehen.

Die Startseite Ihrer Web-App ist eines Ihrer wertvollsten Marketing-Tools. Widerstehen Sie dem Drang, etwas schnell zusammenzubasteln, und bemühen Sie sich stattdessen, sich zu bemühen. Sehen wir uns einige Beispiele an, um herauszufinden, was wir lernen können.

Tipp: Halten Sie das Design einfach und die Botschaft stark

Unser erstes Beispiel stammt von einem neuen Dienst namens Kroud. Schauen wir uns den Teil der Site über der Falte an.

Es gibt eine Menge, die ich an dieser Seite mag. Erstens ist es sehr einfach und fokussiert. Es überwältigt Sie nicht mit leeren Behauptungen darüber, wie der Service Ihr Leben verändern wird, und es schlägt auch nicht um den heißen Brei herum, was der Standort ist. Es gibt nichts Schlimmeres als eine Seite, die sich nicht gut definiert. Wenn ich in fünf Sekunden nicht erkennen kann, was Ihre App macht, mache ich weiter.

Kroud hat die Aufgabe, einen komplexen Dienst in einer klaren Botschaft zu verknüpfen, die auch als Handlungsaufforderung dient: Erstellen Sie in Sekundenschnelle eine interaktive FAQ-Seite. Diese Zeile ist eines der ersten Dinge, die ich sehe, wenn ich die Seite lade, und sie zeigt sofort genau, was die Site macht.

Der große Knopf

Eine weitere Sache, die wir von Kroud lernen können, ist, dass große, fette Anmeldungsschaltflächen eine gute Sache sind! Hier ist der Kroud-Button in seiner tatsächlichen Größe.

Diese Schaltfläche ist riesig und sehr klar, was passiert, wenn Sie sie drücken: "Starten Sie eine Kroud" mit der sekundären Meldung "Es ist kostenlos!". Beachten Sie, wie diese Schaltfläche Ihre Aufmerksamkeit nicht nur mit der Größe, sondern auch mit der Farbe auf sich zieht. Es ist so viel heller als die anderen Inhalte, dass Ihre Augen sofort darauf hingezogen werden.

Tipp: Screenshots sind ein Muss!

Die Startseite Ihrer Web-App hat zwei Hauptziele: Sie möchten die Leute über Ihr Produkt aufklären und sie davon überzeugen, es auszuprobieren. Dies sind die gleichen Ziele, die Sie in fast jedem Unternehmen der Welt in Marketing und Werbung sehen.

Stellen Sie sich eine Zeitschriftenanzeige oder eine Website für eine neue Corvette vor. Wie denkst du würde diese Seite aussehen? Es gibt eine Million mögliche Designs, aber eines würde wahrscheinlich konstant bleiben: Sie würden das Auto sehen. Korvetten haben ein gutes Vermächtnis, und sie wissen, dass der beste Weg, um ihre neueste Leistung zu zeigen, ist, ein Foto davon in all seiner Pracht zu zeigen. Wer könnte davon überzeugt werden, einen Sportwagen zu kaufen, ohne ihn überhaupt zu sehen? Dies wäre umso mehr der Fall, wenn der Sportwagen keine Corvette wäre, sondern etwas, von dem noch niemand gehört hatte.

Dies funktioniert als Metapher für die Startseite Ihrer Web-App. Web-Apps sind ein Dutzend, und niemand hat jemals von Ihnen gehört. Wenn Sie sich nicht für Ihre schlechten Designfähigkeiten schämen, möchten die Leute genau wissen, wie der Service aussehen wird, bevor sie sich die Zeit nehmen, sich anzumelden.

Die Leute von Freckle wissen das gut und beschließen, ihre Seite mit einer Reihe von fünf Screenshots zu belegen.

Auch wenn große Teile davon abgedeckt sind, vermittelt Ihnen das Gesamtbild wirklich einen anständigen Einblick in den Service.

Funktionen als Screenshots

Der aktuelle Trend beim Design der Web-App-Homepage besteht darin, die Funktionen auf Ihrer Homepage mit kleinen Symbolen zu präsentieren. Dies ist eine großartige Idee, die den ästhetischen Wert der Seite wirklich erhöht und dazu beiträgt, große Kopienblöcke aufzubrechen. Hier ist ein Beispiel von Ballpark Invoicing.

Obwohl Symbole besser sind als Text, sollten Sie wirklich über ein solides Interface verfügen, aber ich denke, Screenshots können ein viel stärkeres visuelles Element sein. Screenshots kommunizieren direkt Ihren Dienst, während generische Symbole lediglich eine abstrakte Darstellung dessen darstellen, was Benutzer erwarten können. Finden Sie heraus, wie Freckle ihre Funktionen bespricht.

Sehen Sie, wie das Messaging hier durch ein Bild verstärkt wird, wie genau dies in der App aussehen wird. Dies ist ein Trend, den ich in letzter Zeit immer mehr sehe, und ich denke, es ist ein guter Trend, der die Vorstellungen der vorherigen Generation von Web-Apps wirklich verbessert.

Als weiteres Beispiel zeigt TodayPulse drei Hauptmerkmale in einem horizontalen Streifen von Screenshots:

Peeve: Keine Screenshots

Sie denken vielleicht, dass Screenshots ziemlich einfach sind und dass niemand diese Erinnerung benötigt, aber die Wahrheit ist, dass es unzählige Web-App-Startseiten gibt, die nicht den geringsten Hinweis darauf geben, wie die App tatsächlich aussieht.

Auch wenn diese Seiten, wie Wordfaire unten, ziemlich attraktiv sind, sind die Chancen, dass ich es versuche, viel geringer, weil ich keine Vorschau sehen kann.

Das alte Sprichwort - ein Bild sagt mehr als tausend Worte? erweist sich in dieser Arena wirklich als wahr.Es gibt einfach keine Möglichkeit, die sieben Textabschnitte auf der Wordfaire-Homepage zu lesen. Ich würde mindestens fünf von ihnen gegen einen Screenshot tauschen, ohne einen zweiten Gedanken zu haben.

Tipp: Lassen Sie die Benutzer an einem Live-Beispiel spielen

Das Konzept? Versuchen Sie, bevor Sie kaufen? ist seit Anbeginn des Verkäufers vorhanden. Es ist ein einfaches Konzept, das so lange bestehen bleibt, wie es Produkte gibt. Verpflichtungen scheißen, vor allem wenn Unsicherheit besteht. Wenn ein Benutzer Ihre Web-App zuerst testen darf, wird die Unsicherheit beseitigt.

Es ist äußerst wichtig zu wissen, dass Sie versuchen, bevor Sie kaufen? gilt sogar für kostenlose Dienste! Dies scheint verwirrend zu sein, aber es ist wirklich ziemlich einfach. Sogar ein kostenloser Service frisst meine Zeit auf, eine Ressource, die ich sehr wertvoll finde und nicht für irgendetwas handelt. Die Anmeldung für einen kostenlosen Webservice ist immer noch eine Verpflichtung. Eine, die ich nicht machen möchte, wenn ich nicht wirklich überzeugt bin, dass mir das Produkt gefallen wird.

Das Konzept ist einfach: Erstellen Sie eine Methode, mit der Benutzer Ihre App reifen lassen können, ohne ein einziges bisschen Information eingeben zu müssen. Wir sehen das unten in Aktion für Pen.io. Dies ist eine weitere Seite ohne Screenshots, die jedoch durch Hinzufügen eines Links zu einem Beispiel etwas verbessert wird, damit Sie sehen können, was Sie vom Dienst erhalten.

Es ist großartig, dass Pen.io dies beinhaltet, aber die Ausführung ist in Kroud stärker, wo der Link zur examp-Seite durch eine Vorschau verstärkt wird.

Peeve: Lange Touren

Einige Web-Apps nehmen an einem zehnminütigen Ausflug teil, in dem der Service detailliert beschrieben wird. Versteht mich nicht falsch, Informationen sind gut und wenn ich für eine Dienstleistung bezahle, will ich es. Aber sollte eine? Produkttour? wirklich so arbeitsintensiv sein?

Wenn ich auf einen Link mit der Aufschrift "Tour nehmen" klicke, möchte ich die App wirklich sehen. Ein Live-Beispiel, wie wir es gerade beschrieben haben, mit mehr als 2.000 Wörtern, in dem erklärt wird, wie es sein wird, wenn Sie endlich den Punkt erreichen, an dem Sie es tatsächlich ausprobieren dürfen. Einige Sites bauen sogar eine modifizierte? Live-Beispiel, das Sie durch den Prozess führt. Dies ist eine großartige Möglichkeit, Benutzern zu ermöglichen, Ihren Service auszuprobieren, während sie wirklich sicherstellen, dass sie den richtigen Punkt erhalten und sehen, was Sie möchten.

Auch hier ist es nicht unbedingt schlecht, über Ihre Funktionen zu schimpfen, aber denken Sie daran, dass es den Benutzern wichtig ist, einfach zu springen und zu sehen, was sie denken.

Fügen Sie ein Video hinzu

Eine weitere Idee, um Ihre Web-App in Aktion zu präsentieren, ist ein kurzes Video direkt auf der Startseite. Wenn ein Bild mehr als tausend Worte sagt, ist eine Minute mit 15 bis 30 Bildern pro Sekunde unbezahlbar! Ein Video erreicht dasselbe Ziel wie das Beispiel und Screenshots. Es ist nur dynamischer als Screenshots und strukturierter als ein Testfeld in Freiformform.

Die Voliere macht das gut, indem sie einen Zeitraffer ihres Bildeditors darstellt, der eine komplexe Fotomanipulation erzeugt.

Eine meiner aktuellen Lieblingsimplementierungen eines Videos auf einer Web-App-Homepage ist Greplin. Hier erscheint ein Video, wenn Sie die Seite laden. Wenn Sie das Video jedoch nach einigen Sekunden nicht starten, wird es zu einer Diashow mit Screenshots.

Peeve: Cartoons, die niemals die App zeigen

Aus irgendeinem Grund ist es die coolste Sache, jetzt eines dieser Videos als lustigen kleinen Cartoon zusammen zu werfen. Dies ist oft eine großartige Idee, aber das Problem, das ich habe, ist, dass ich nach zwei Minuten langweiliger, kleiner Animation immer noch wenig bis gar keine Ahnung habe, wie die App eigentlich aussieht!

Die beiden Videos von Minus und Summify sind gute Beispiele dafür. Zugegeben, sie kommen irgendwann dazu fast zeigt Ihnen eine illustrierte Version der App, aber nur ganz am Ende und sogar dann, es ist ein kleiner, abstrakter Blick.

Schlussgedanken: Ein Erfolgsrezept

Alle Ratschläge in diesem Artikel beziehen sich auf die beiden Hauptziele Ihrer Web-App-Startseite, die wir bereits besprochen haben: Aufklärung und Verlockung. Entfernen Sie zunächst das gesamte Durcheinander aus Ihrem Entwurf und reduzieren Sie es auf die wichtigsten Elemente, damit sich der Besucher ohne Ablenkungen auf die wichtigen Informationen konzentrieren kann.

Machen Sie in Ihrem Messaging eine mutige Aussage darüber, was die App macht und für wen sie bestimmt ist. Diesen letzten Punkt haben wir heute nicht viel besprochen, aber es gibt ein starkes Argument, dass Sie mehr Conversions gewinnen werden, wenn Sie Ihre Zielgruppe eindeutig identifizieren. Beispiel:? MyCoolWebApp hilft Designern und Entwicklern dabei, Kunden- und Projektinformationen zu organisieren. ist besser als? MyCoolWebApp organisiert Kunden- und Projektinformationen ?. Vergewissern Sie sich auch, dass Sie wichtige Funktionen kennenlernen und warum Besucher die App verwenden sollten.

Sobald Sie Ihre Messaging-Kenntnisse auf den Punkt gebracht haben, können Sie sich darauf konzentrieren, Ihr Produkt Ihrer Zielgruppe zu präsentieren. Drei gute Möglichkeiten, dies zu tun, sind Screenshots (mehrere, wenn Sie schwingen können), Live-Beispielkonten und Videotouren (die Art, auf der das Produkt tatsächlich angezeigt wird). Ihr Ziel ist es, die Unsicherheit um Ihr Produkt zu verringern. Je weniger Ungewissheit es gibt, desto weniger zögern die Benutzer.

Dies setzt natürlich voraus, dass Sie ein Qualitätsprodukt haben. Wenn Ihr Interface lahm ist, dann verstecken Sie es auf jeden Fall vor der Öffentlichkeit und halten Sie sich an langweilige, langwierige Beschreibungen!