Entwerfen einer Web-App-Homepage: Beispiele, Tipps und Tipps
Das Web ist völlig überfüllt mit Apps, mit denen Sie sich mit einem sozialen Netzwerk verbinden, Einkaufslisten erstellen, große Projekte verwalten, entscheiden können, wer Tee macht, und jede andere verrückte Aufgabe, die Sie sich vorstellen können.
Wie können Sie bei all diesem Wettbewerb die Besucher davon überzeugen, dass Ihre App die sprichwörtliche Nadel im Heu ist? Heute werden wir uns einige reale Beispiele ansehen, um zu sehen, ob wir lernen können, welche Strategien nachzuahmen 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 Unternehmen, von dem Sie sicher sind, dass es sich wie ein Lauffeuer durchsetzt. Es gibt nur einen Haken, man muss die Leute überzeugen, es zu versuchen.
Egal wie gut Ihre Web-App ist, Sie müssen immer noch über solide Verkaufstaktiken verfügen, die die Leute letztendlich davon überzeugen, auf die Schaltfläche "Anmelden" zu klicken. Selbst wenn der Service völlig kostenlos ist und eine Menge Funktionen bietet, müssen Sie wirklich arbeiten, um diese Conversions zu gewinnen.
Gehen Sie niemals davon aus, dass ein Benutzer, nur weil er auf Ihrer Homepage gelandet ist, wirklich an dem interessiert ist, was Sie zu bieten haben, und daher nur einen kleinen Schubs benötigt, um weiter zu gehen. Die Chancen stehen gut, dass sie einer Verknüpfung mit nur einer vagen Vorstellung davon gefolgt sind, wo sie landen würden, und sich in einem heiklen Stadium befinden, in dem sie wahrscheinlich innerhalb von Sekunden auf eine andere Site wechseln, wenn Sie sie nicht hineinziehen.
Ihre Web-App-Homepage ist eines Ihrer wertvollsten Marketing-Tools. Widerstehen Sie dem Drang, schnell etwas zusammenzubasteln und stattdessen Ihr Bestes zu geben. Schauen wir uns einige Beispiele an, um zu sehen, 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. Werfen wir einen Blick auf den Teil der Site über der Falte.
Es gibt eine Menge, die ich an dieser Seite mag. Erstens ist es sehr einfach und konzentriert. Es überwältigt Sie nicht mit leeren Behauptungen darüber, wie der Service Ihr Leben verändern wird, und es geht auch nicht um den heißen Brei darüber, was die Site ist. Es gibt nichts Schlimmeres als eine Seite, die sich nicht gut definiert. Wenn ich in fünf Sekunden nicht sagen kann, was Ihre App tut, gehe ich weiter.
Kroud hat es sich zur Aufgabe gemacht, einen komplexen Service in eine klare Botschaft zu verwandeln, die auch als starker Aufruf zum Handeln dient: „Erstellen Sie in Sekunden eine interaktive FAQ-Seite.“ Diese Zeile ist eines der ersten Dinge, die ich sehe, wenn ich die Seite lade, und sie vermittelt sofort genau, was die Site tut.
Der große Knopf
Eine andere Sache, die wir von Kroud lernen können, ist, dass große, fette Anmeldeschaltflächen eine gute Sache sind! Hier ist der Kroud-Button in Originalgröße.
Diese Schaltfläche ist riesig und sehr klar darüber, was passiert, wenn Sie sie drücken: "Starten Sie ein Kroud" mit der sekundären Meldung "Es ist kostenlos!". Beachten Sie, wie diese Schaltfläche Ihre Aufmerksamkeit nicht nur auf die Größe, sondern auch auf die Farbe lenkt. Es ist so viel heller als der andere Inhalt, dass Ihre Augen sofort davon angezogen werden.
Tipp: Screenshots sind ein Muss!
Ihre Web-App-Homepage hat zwei Hauptziele: Menschen über Ihr Produkt aufzuklären und sie davon zu überzeugen, es auszuprobieren. Dies sind die gleichen Ziele, die Sie in Marketing und Werbung von fast jedem Unternehmen auf der Welt sehen.
Stellen Sie sich eine Zeitschriftenanzeige oder eine Website für eine neue Corvette vor. Wie würde diese Seite Ihrer Meinung nach aussehen? Es gibt eine Million mögliche Designs, aber eines würde wahrscheinlich konstant bleiben: Sie würden das Auto sehen. Korvetten haben ein Vermächtnis an gutem Design und sie wissen, dass der beste Weg, ihre neueste Leistung zu zeigen, darin besteht, Ihnen ein Foto davon in seiner ganzen Pracht zu zeigen. Wer könnte überzeugt sein, 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 etwas gehört hätte.
Dies funktioniert als Metapher für Ihre Web-App-Homepage. 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 sehen, wie der Service aussehen wird, bevor sie sich die Zeit nehmen, sich anzumelden.
Die Leute bei Freckle wissen das gut und haben beschlossen, ihre Seite mit einer Reihe von fünf Screenshots zu versehen.
Obwohl große Teile davon abgedeckt sind, gibt Ihnen das Bild als Ganzes einen guten Einblick in das Erscheinungsbild des Dienstes.
Funktionen als Screenshots
Der aktuelle Trend beim Design von Web-App-Homepages besteht darin, die Funktionen auf Ihrer Homepage mit kleinen Symbolen zu versehen. Dies ist eine großartige Idee, die den ästhetischen Wert der Seite wirklich erhöht und dabei hilft, große Kopienblöcke aufzubrechen. Hier ist ein Beispiel von Ballpark Invoicing.
Obwohl Symbole besser sind als Text, denke ich, dass Screenshots ein viel stärkeres visuelles Element sein können, wenn Sie wirklich eine solide Oberfläche haben. Screenshots kommunizieren Ihren Dienst direkt, während generische Symbole lediglich eine abstrakte Darstellung dessen darstellen, was Benutzer erwarten können. Lesen Sie, wie Freckle ihre Funktionen bespricht.
Sehen Sie, wie die Nachrichten hier durch ein Bild verstärkt werden, wie genau dies in der App aussehen wird? Dies ist ein Trend, den ich in letzter Zeit immer häufiger sehe, und ich denke, er ist ein guter Trend, der die Symbolidee der vorherigen Generation von Web-Apps wirklich verbessert.
Als weiteres Beispiel zeigt TodayPulse drei ihrer Hauptmerkmale in einem horizontalen Streifen von Screenshots:
Peeve: Keine Screenshots
Sie mögen denken, dass Screenshots ziemlich einfach sind und dass niemand diese Erinnerung braucht, aber die Wahrheit ist, dass es unzählige Web-App-Homepages gibt, die Ihnen nicht den geringsten Hinweis darauf geben, wie die App tatsächlich aussieht.
Selbst wenn diese Seiten ziemlich attraktiv sind, wie Wordfaire unten, ist die Wahrscheinlichkeit, dass ich es versuche, viel geringer, weil ich keine Vorschau sehen kann.
Das alte Sprichwort „Ein Bild sagt mehr als tausend Worte“ hat sich in dieser Arena wirklich bewahrheitet. Ich kann die sieben Textabschnitte auf der Wordfaire-Homepage auf keinen Fall lesen. Ich würde mindestens fünf davon ohne einen zweiten Gedanken gegen einen Screenshot eintauschen.
Tipp: Lassen Sie Benutzer mit einem Live-Beispiel spielen
Das Konzept „Probieren Sie es aus, bevor Sie kaufen“ existiert seit den Anfängen des Verkäufers. Es ist ein einfaches Konzept, das so lange Bestand hat, wie es Produkte gibt. Verpflichtungen sind schlecht, besonders wenn es um Unsicherheit geht. Indem ein Benutzer zuerst Ihre Web-App testen lässt, wird die Unsicherheit beseitigt.
Es ist äußerst wichtig zu beachten, dass der "Versuch vor dem Kauf" sogar für kostenlose Services gilt! Das scheint verwirrend, aber es ist wirklich ganz einfach. Sogar ein kostenloser Service verschlingt meine Zeit, eine Ressource, die ich sehr wertvoll finde und die ich nicht gegen irgendetwas eintauschen kann. Die Anmeldung für einen kostenlosen Webdienst ist immer noch eine Verpflichtung. eine, die ich nicht machen möchte, es sei denn, ich bin mir wirklich sicher, dass mir das Produkt gefallen wird.
Das Konzept ist einfach: Erstellen Sie eine Möglichkeit, mit der Benutzer die Reifen Ihrer App durchsuchen und treten können, ohne eine einzige Information eingeben zu müssen. Wir sehen dies unten in Aktion für Pen.io. Dies ist eine weitere Seite ohne Screenshots, die jedoch durch die Aufnahme eines Links zu einem Beispiel etwas verbessert wird, damit Sie sehen können, was Sie vom Dienst erhalten.
Auch hier ist es großartig, dass Pen.io dies enthält, aber die Ausführung ist auf Kroud stärker, wo der Link zur Exampeseite durch eine Vorschau verstärkt wird.
Peeve: Lange Touren
Einige Web-Apps nehmen Sie mit auf einen zehnminütigen Ausflug, der ihren Service ausführlich erklärt. Versteh mich nicht falsch, Informationen sind gut und wenn ich für einen Service bezahle, werde ich es wollen. Aber sollte eine „Produkttour“ wirklich so arbeitsintensiv sein?
Wenn ich auf einen Link mit der Aufschrift "Take a Tour" klicke, möchte ich unbedingt die App sehen. Ein Live-Beispiel, wie wir es gerade in mehr als 2.000 Worten besprochen haben und das erklärt, wie es sein wird, wenn Sie endlich den Punkt erreichen, an dem Sie es tatsächlich ausprobieren dürfen. Einige Websites erstellen sogar ein modifiziertes „intelligentes“ Live-Beispiel, das Sie durch den Prozess führt. Dies ist eine großartige Möglichkeit, Benutzern das Ausprobieren Ihres Dienstes zu ermöglichen und gleichzeitig sicherzustellen, dass sie den Punkt verstehen und sehen, was Sie von ihnen erwarten.
Auch hier ist es nicht unbedingt schlecht, über Ihre Funktionen zu schimpfen, aber denken Sie daran, dass es wichtig ist, dass Benutzer einfach hineinspringen und sehen, was sie denken.
Fügen Sie ein Video hinzu
Eine weitere Idee, um Ihre Web-App in Aktion zu zeigen, besteht darin, ein kurzes Video direkt auf der Startseite einzufügen. Wenn ein Bild mehr sagt als tausend Worte, ist eine Minute mit 15 bis 30 Bildern pro Sekunde von unschätzbarem Wert! Ein Video erreicht das gleiche Ziel wie das Beispiel und die Screenshots, nur ist es dynamischer als Screenshots und strukturierter als ein Freiform-Testgelände.
Aviary leistet gute Arbeit, indem es einen Zeitraffer des Bildeditors zeigt, der eine komplexe Fotomanipulation erzeugt.
Eine meiner aktuellen Lieblingsimplementierungen eines Web-App-Homepage-Videos ist Greplin. Hier wird beim Laden der Seite ein Video angezeigt. Wenn Sie das Video jedoch nach einigen Sekunden nicht starten, wird es zu einer Diashow mit Screenshots.
Peeve: Cartoons, die die App nie zeigen
Aus irgendeinem Grund ist es im Moment cool, eines dieser Videos als lustigen kleinen Cartoon zusammenzustellen. 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 tatsächlich ist!
Die beiden folgenden Videos von Minus und Summify sind gute Beispiele dafür. Zugegeben, sie kommen irgendwann dazu, Ihnen fast eine illustrierte Version der App zu zeigen, aber erst ganz am Ende und selbst dann ist es ein kleiner, abstrakter Blick.
Schlussgedanken: Ein Erfolgsrezept
Alle Ratschläge in diesem Artikel zielen auf die beiden Hauptziele Ihrer Web-App-Homepage ab, die wir bereits besprochen haben: Bildung und Verlockung. Entfernen Sie zunächst alle Unordnung aus Ihrem Design und reduzieren Sie sie auf die wichtigsten Elemente, damit sich der Besucher ohne Ablenkung auf die wichtigen Informationen konzentrieren kann.
Geben Sie in Ihren Nachrichten eine kühne Erklärung darüber ab, was die App tut und für wen sie ist. Wir haben diesen letzteren Punkt heute nicht viel diskutiert, aber es gibt ein starkes Argument, das darauf hindeutet, dass Sie mehr Conversions erzielen, wenn Sie Ihre Zielgruppe eindeutig identifizieren. Beispiel: "MyCoolWebApp hilft Designern und Entwicklern, Kunden- und Projektinformationen zu organisieren" ist besser als "MyCoolWebApp organisiert Kunden- und Projektinformationen". Achten Sie auch darauf, auf wichtige Funktionen hinzuweisen und warum Besucher die App verwenden sollten.
Sobald Sie Ihre Nachrichten erhalten haben, ist es Zeit, sich darauf zu konzentrieren, Ihr Produkt Ihrem Publikum zu präsentieren. Drei großartige Möglichkeiten, dies zu tun, sind Screenshots (mehrere, wenn Sie es schwingen können), Live-Beispielkonten und Videotouren (die Art, die das Produkt tatsächlich zeigen). Ihr Ziel ist es, die Unsicherheit in Bezug auf Ihr Produkt zu verringern. Je weniger Unsicherheit besteht, desto weniger Benutzer werden zögern, sich anzumelden.
Dies alles setzt natürlich voraus, dass Sie ein Qualitätsprodukt haben. Wenn Ihre Benutzeroberfläche lahm ist, verstecken Sie sie auf jeden Fall vor der Öffentlichkeit und halten Sie sich stattdessen an langweilige, lange Beschreibungen!
