5 Schritte zur Planung einer erfolgreichen Website

Die Uhr zeigt 1:30 Uhr und Sie möchten nur ins Bett gehen. Du bist von zu Hause aus arbeiten Sie sitzen an Ihrem Computer, zeichnen Formen, bearbeiten Filter und experimentieren mit Typografie, aber das Design passt einfach nicht zusammen. Sie verschieben eine Box nach rechts. Du bewegst es zurück. Sie haben eine Karriere in der Erstellung schöner und benutzerfreundlicher Websites aufgebaut. Warum ist das Design immer ein Kampf?

Es ist ein Problem, auf das die meisten, wenn nicht alle von uns in ihrer Karriere schon oft gestoßen sind. Wir nennen es kreativen Block. Und darin liegt das Problem. Weil es nicht um Kreativität geht, Websites zu erstellen, die für Benutzer einfach zu verwenden sind - Websites, die Menschen zur Konvertierung ermutigen. Es geht um Planung. Und Forschung. Und den Endbenutzer vor das Design stellen.



Ich war mehrere Jahre lang Webdesigner und Frontend-Entwickler, bevor ich wirklich begann, die Bedeutung von Prozessen zu verstehen. Ich habe Webdesigner beobachtet - ob sie freiberuflich tätig sind, für eine große Agentur arbeiten oder irgendwo dazwischen -, die immer wieder dieselbe allgemeine Abfolge von Ereignissen verfolgen. Sie haben eine Art Kickoff-Meeting und kehren dann zu ihren Computern zurück und arbeiten an den Site-Designs.



Trotz der Popularität dieses Ansatzes funktioniert es nie wirklich. Selbst wenn Sie es schaffen, etwas visuell überzeugendes zu erstellen, gibt es eine 100-prozentige Garantie dafür, dass Sie keine Gelegenheit haben, sich mit Benutzern zu verbinden und diese zu konvertieren. Durch die Implementierung realer Prozesse, anhand derer Sie Entscheidungen treffen können, während Sie an einer Website arbeiten, können Sie überlegene Produkte erstellen, die Benutzererfahrung verbessern und die Conversions steigern. Wenn Sie das nächste Mal Ihren Kopf gegen die Wand schlagen, um ein wunderschönes Webdesign aus Ihrem kreativen Genie herauszuholen, befolgen Sie die fünf hier beschriebenen entscheidenden Schritte.

01. Sitemap und Benutzerfluss

Steve Jobs berühmte Meinung zur Definition von Design



Steve Jobs berühmte Meinung zur Definition von Design

Sie haben Ihr Kickoff-Meeting gehabt. Sie haben Branchenrecherchen durchgeführt, eine Konkurrenzanalyse durchgeführt und Benutzerpersönlichkeiten entwickelt. Sie sind bereit, loszulegen, aber es gibt zwei wichtige Fragen, die Sie Ihren Kunden immer zuerst stellen sollten.

Bitten Sie sie zunächst, ihre wichtigsten drei bis drei Prioritäten für die Website zu ermitteln. Dies gibt Ihnen ein gutes Bild davon, was für sie wichtig ist. Es erfordert, dass sie anfangen, in Prioritäten zu denken, was hilft, sich zu entwickeln und den Fokus zu behalten. Es öffnet auch die Tür für Diskussionen darüber, was diese Prioritäten bedeuten und ob es sinnvoll ist, sie anzupassen.

Das zweite, was Sie fragen sollten, ist Folgendes: Wie sieht eine erfolgreiche Website für Sie aus? Diese Frage ist enorm wichtig, wenn Sie mit der Planung des Benutzerflusses und der Conversion-Ziele beginnen. Sobald Sie diese Informationen haben, können Sie mit der Erstellung eines Plans für die Website beginnen: der Sitemap.



Ein Plan für die Website

Eine Sitemap ist die erste Visualisierung des Inhalts, der auf einer Website enthalten sein wird, und wie er organisiert wird. Dies ist der erste Schritt in Richtung eines benutzerorientierten, inhaltsorientierten Produkts. Es gibt zwei Perspektiven zu untersuchen. Schauen Sie sich zunächst die Ziele des Unternehmens an, für das Sie arbeiten. Was versuchen sie zu erreichen? Bestimmen Sie als Nächstes, wonach ihre Kunden suchen. Es ist die Verbindung dieser beiden Perspektiven, die letztendlich zum Erfolg führen wird.

Denken Sie über die Arten von Informationen nach, die vorhanden sein müssen, um sowohl den Zielen des Endbenutzers als auch des Unternehmens gerecht zu werden. Stellen Sie die Benutzerziele an die erste Stelle - es tut nie weh, Unternehmen daran zu erinnern, dass das Beste für ihre Benutzer auch für ihr Unternehmen am besten ist.

Wenn ABC Company beispielsweise eine neue Technologie erfunden hat, ist es sinnvoller, Informationen über das Benutzerproblem, das die Technologie löst, zu priorisieren, als mit der Geschichte und dem Leitbild von ABC Company zu führen. Sie möchten wahrscheinlich auch Kontaktinformationen und ein branchenspezifisches Blog als Ressource für Benutzer bereitstellen. Plötzlich haben Sie die Anfänge einer Sitemap.

Durch Informationen navigieren

Wenn Sie anfangen, Fragen zur allgemeinen Hierarchie von Informationen auf der Website zu beantworten, werden Sie auch vorhersehen, wie Benutzer durch diese Informationen navigieren könnten. Dies ist Ihr Benutzerfluss.

Indem Sie zu Beginn eines Projekts einen theoretischen Benutzerfluss erstellen, können Sie sehen, wie die Informationsabschnitte interagieren, um die ideale Benutzererfahrung zu erzielen. Wer sind deine Benutzer? Ist die Informationshierarchie für verschiedene Anwendungsfälle sinnvoll? Werden Benutzer natürlich in der Lage sein, sich auf der Website zu bewegen, um für sie relevante Inhalte zu finden?

Identifizieren Sie oben auf einer leeren Seite Ihre Benutzerpersönlichkeiten. Überlegen Sie sich unter jedem einzelnen, wie sie sich auf der Website bewegen könnten. Überlegen Sie, wonach sie suchen und wie ein Abschnitt mit Informationen sie durch die Website zum nächsten führen kann.

02. Der Kundenakquise-Trichter

Userflow patterns.com ist eine Sammlung kurzer User-Flow-Videos als Referenz und Inspiration

Userflow patterns.com ist eine Sammlung kurzer User-Flow-Videos als Referenz und Inspiration

Zu diesem Zeitpunkt haben Sie bereits begonnen, über die Reise, die ein Benutzer durch die Website unternehmen wird, zu theoretisieren, und haben wahrscheinlich darüber nachgedacht, wie dies ihn zur Konvertierung führen wird. Dies ist Ihr Kundenakquise-Trichter.

wie man Pin-up-Stil zeichnet

Überlegen Sie anhand des in Schritt 1 erstellten Benutzerflussdiagramms, wie Sie Benutzer möglicherweise durch die Site zu einem Konvertierungspunkt leiten können. Versetzen Sie sich in die Lage des Benutzers, um einen Kundenakquise-Trichter zu erstellen. Verwenden Sie bestimmte Personas anstelle eines breiten Publikums und richten Sie Ihren Trichter auf eine bestimmte Person aus. Was sind ihre Ziele? Wie können Sie ihnen helfen, diese Ziele zu erreichen?

Stellen Sie sich vor, wir erstellen eine Website für ein Schuhgeschäft. Wenn ein Benutzer mit dem Ziel, ein Paar Schuhe zu kaufen, auf unsere Website gelangt, ist es unser Ziel, dies für ihn so einfach wie möglich zu gestalten. Ein Online-Schuhgeschäft sollte die Benutzer schnell und effizient durch den Einkaufsprozess zur Kasse führen.

Erstellen Sie einen Plan, um Benutzer mit relevanten Inhalten zu beschäftigen, fordern Sie sie auf, mit einem überzeugenden Aufruf zum Handeln zu konvertieren, vereinfachen Sie den Konvertierungsprozess und verfolgen Sie ihn regelmäßig. Erstellen Sie einen Fokus, um den Benutzer anzuleiten. Die Entwicklung des Kundenakquise-Trichters macht eine Website zu einem Geschäftstool und nicht nur zu einem schönen Bild. Design, das keine Ergebnisse erzielt, ist kein gutes Design.

03. Inhaltsentwicklung

Die fünf Phasen der Conversion eines Benutzers

Die fünf Phasen der Conversion eines Benutzers

Der Inhalt ist das Herzstück der Website. So verbinden Sie sich mit Menschen. So verkaufen Sie. Darauf stützen Sie das Design. Das Entwerfen einer Website ohne Inhalt ist wie der Versuch, ein Puzzle ohne Puzzleteile zusammenzustellen. Sie greifen nur nach zufälligen Gegenständen in der Nähe (einer Gabel, einer Glühbirne, vielleicht einer Kaffeetasse) und versuchen, sie zusammenzufügen.

Verstehen Sie, dass das Design dem Kunden Spaß macht. Der Inhalt ist der schwierige Teil. Vor allem deshalb ist es auch die Nummer eins, die ein Projekt aufhalten kann. Dies sind die Gründe, warum eine vollständige Version des Website-Inhalts entwickelt werden sollte, bevor die Entwürfe beginnen.

Wie generieren wir also Inhalte? Der perfekte Einstieg ist ein Blick zurück auf Ihre Sitemap. Hier haben Sie die Arten von Inhalten identifiziert, die Sie Benutzern präsentieren möchten. Verwenden Sie die hier beschriebenen Seiten oder Abschnitte, um ein leeres Kopierdokument zu erstellen. Geben Sie für jeden Abschnitt den Seitentitel, das Ziel des Inhalts, die Keywords, auf die Sie abzielen möchten, Überschriften und die Textkopie an. Geben Sie die Arten von Inhalten an, von denen Sie erwarten, dass sie dort leben, und wie Sie erwarten, dass sie für eine einfache Lesbarkeit und geistige Verdauung aufgeteilt werden.

Beachten Sie, dass die ideale Lesestufe für Website-Inhalte ziemlich niedrig ist. Der Inhalt der Startseite sollte eine Lesestufe der 6. Klasse (ca. 11-12 Jahre) nicht überschreiten, und der Inhalt der Unterseite sollte sich um die 8. Klassenstufe (13-14 Jahre) bewegen. Millionen-Dollar-Wörter verdienen hier keine Punkte, sie verlieren Benutzer. Sie können Ihre Kopie mit der Flesch-Kincaid-Lesbarkeitsformel testen, um sicherzustellen, dass Benutzer sie schnell nachvollziehen können.

Vereinfachen und rationalisieren

Eine weitere großartige Möglichkeit, die Lesbarkeit Ihrer Kopie zu verbessern, sind leicht verdauliche Inhalte. Durch die Verwendung kleinerer Absätze und das Einfügen von Symbolen und Bildern zum Aufteilen Ihrer Inhalte wird Ihre Website unendlich lesbarer. Anstatt große Textmengen zu präsentieren, die eine Aufmerksamkeit erfordern, die Sie wahrscheinlich nicht von Benutzern erhalten, vereinfachen Sie den Inhalt und vereinfachen Sie das Überfliegen.

Nachdem Sie mit dem Schreiben fertig sind, gehen Sie jedes einzelne nicht wesentliche Wort oder jede Phrase aus, um eine optimale Klarheit zu erzielen. Nachdem Sie diesen Vorgang abgeschlossen haben, gehen Sie zurück und wiederholen Sie den Vorgang. Sie können weitere entfernen. Der brillante Antoine de Saint Exupery, Autor von The Little Prince (ein Kinderbuch, das jeder lesen sollte), sagte: 'Es scheint, dass Perfektion nicht erreicht wird, wenn nichts mehr hinzuzufügen ist, sondern wenn nichts mehr zu entfernen ist.'

Der letzte und wichtigste Tipp zum Erstellen von Website-Inhalten lautet: Wenn Sie kein Texter sind, mieten Sie einen. Das machen sie jeden Tag. Sie können es besser und schneller als Sie. Sie können Kopien erstellen, die für Suchmaschinen optimiert, ansprechend und grammatikalisch korrekt sind.

04. Wireframes

Eine einfache Vorlage für ein Inhaltsdokument. Es ist eine einfache Möglichkeit, Inhalte basierend auf Ihrer Sitemap zu entwickeln

Eine einfache Vorlage für ein Inhaltsdokument. Es ist eine einfache Möglichkeit, Inhalte basierend auf Ihrer Sitemap zu entwickeln

Nachdem der Inhalt fertiggestellt ist, ist es an der Zeit, über das Layout nachzudenken. Wo die Sitemap ein Plan für die Gesamtarchitektur der Website ist, der den Inhalt informiert; Wireframes repräsentieren die Architektur dieses Inhalts.

Ein Drahtmodell sollte keine Farben, Schriftarten oder Designelemente enthalten. Es ist ein Werkzeug zum Organisieren von Inhalten unter strukturellen Gesichtspunkten, um sicherzustellen, dass sie für den Benutzer sinnvoll dargestellt werden. Bei Wireframes geht es nicht mehr um pixelgenaue Renderings von Seitenlayouts. Es geht darum, den Plan, den Sie bis zu diesem Punkt erstellt haben, genauer zu betrachten. In diesem Schritt lernen Sie, wie Informationen organisiert werden sollten, und festigen die Hierarchie vom visuellen Standpunkt aus.

In welcher Reihenfolge sollen Inhalte präsentiert werden? Wie wird sich die Hierarchie auf Mobilgeräten präsentieren? Desktop? Dazwischen oder darüber hinaus? Responsive Webdesign hat dazu geführt, dass Wireframes zusammen mit jedem anderen Schritt unseres Prozesses weniger konkret und etwas flexibler werden.

Hierarchie erstellen

Wie Sie Ihre Wireframes generieren, liegt ganz bei Ihnen. Es gibt viele großartige Wireframing- und Prototyping-Tools, aber ein einfacher Stift und Papier können genauso gut funktionieren. Das Ziel von Wireframing ist es, anhand der Entscheidungen, die wir in den vorherigen Schritten getroffen haben, eine Reihenfolge für die Präsentation von Inhalten festzulegen.

Wenn Sie sich den Inhalt ansehen, den Sie bereits erstellt haben, sollte dies ein intuitiver Prozess sein. Gibt es eine klare Hierarchie, die Ihrem Inhalt eigen ist? Sehen Sie sich Überschriften, Absätze, Beschriftungen und Seitenleisten an. Bestandsaufnahme, welche Arten von Informationen angezeigt werden sollen und wo der Fokus liegen soll. Fragen Sie: Was ist der Hauptpunkt dieser Informationen?

Es ist einfach, Wireframing zu überspringen. Sie bedeuten dem Kunden oft nicht viel und können als überflüssige Anstrengung erscheinen - insbesondere, nachdem alle anderen Schritte so sorgfältig ausgeführt wurden. Können Sie das Ziel des Drahtgitters nicht erreichen, während Sie die Designelemente erstellen? Kurz gesagt, nein. Wireframes sind die Brücke vom Inhalt zum Design. Sie sind für den Gesamterfolg einer Website genauso wichtig wie jeder andere Schritt im Prozess.

05. Design

Designs müssen optimiert werden, um Inhalte geräteübergreifend so klar wie möglich anzuzeigen

Designs müssen optimiert werden, um Inhalte geräteübergreifend so klar wie möglich anzuzeigen

Nun zum lustigen Teil. Der Teil, für den Sie gearbeitet haben und auf den Ihr Kunde gewartet hat. Und du bist bereit. Sie treten mit einem Angriffsplan in die Entwurfsphase ein, der auf fundierten Entscheidungen und nicht nur auf ästhetischen Vorlieben basiert. Sie wissen, wo Elemente platziert werden müssen, um eine maximale Wirkung zu erzielen. Sie sind jetzt bereit, eine Konvertierungsmaschine zu entwerfen!

Aber wie gestalten Sie das Responsive Web? Jeder Designer hat einen anderen Workflow, und Sie müssen herausfinden, was zu Ihnen passt. Dennoch gibt es einige Methoden und Werkzeuge, die effektiv und einfach in allen Bereichen anzuwenden sind.

Reaktionsschnelle Methoden

Wenn Ihre Website auf Mobilgeräten funktioniert, sollten Sie Mobile-First entwerfen. Dies bedeutet einfach, mit einem mobilen Layout zu beginnen und von dort aus zu bauen. Dies ist weitaus einfacher, als zu versuchen, Elemente auf einen Bildschirm zu stapeln, der nur einen Bruchteil der Größe des Bildschirms entspricht, für den sie entwickelt wurden.

Sie sollten auch eine Musterbibliothek verwenden. Dies ist eine Sammlung von Entwurfsmustern, die in Ihrer Benutzeroberfläche enthalten sind. Sie können zwischen Ihrer Bibliothek und Ihren Designs hin und her wechseln. Wenn Sie Ihrem Design ein neues Element hinzufügen, fügen Sie es Ihrer Musterbibliothek hinzu und umgekehrt. Bei diesem Ansatz ist eine Schaltfläche unabhängig von Variablen eine Schaltfläche. sowohl im Code als auch in der Art, wie es aussieht.

Dadurch wird eine Detailgenauigkeit hergestellt, die einen bemerkenswerten Unterschied zur wahrgenommenen Professionalität des Unternehmens ausmacht. Konsistenz schafft Vertrauen und verbessert die Benutzerfreundlichkeit. Es gibt auch einen Effizienzvorteil, da wir Elemente einfach anpassen und Stile aktualisieren können.

Aktionsplan

Die Musterbibliothek von MailChimp kann online unter ux.mailchimp.com/patterns angezeigt werden

beste Kamera für Aufnahmen bei schlechten Lichtverhältnissen
Die Musterbibliothek von MailChimp kann online unter ux.mailchimp.com/patterns angezeigt werden

Wenn Sie dieser Anleitung folgen, gelangen Sie Schritt für Schritt mit einem vollständigen Aktionsplan. Jeder Schritt wird durch die vorhergehenden Schritte informiert. Der gesamte Prozess konzentriert sich darauf, die nützlichsten und relevantesten Inhalte bestmöglich bereitzustellen.

Möglicherweise müssen Sie Teile Ihres Plans während des Prozesses oder nach dem Start der Site erneut aufrufen. Dwight D Eisenhower sagte: 'Bei der Vorbereitung auf den Kampf habe ich immer festgestellt, dass Pläne nutzlos sind, aber Planung ist unverzichtbar.' Genau dieses Gefühl fasst die Bedeutung des Prozesses zusammen - Sie planen ein erfolgreiches Ergebnis. Sie raten nicht. Sie haben eine Grundlage geschaffen, auf der Sie eine funktionierende Website erstellen können.

Dieser Artikel wurde ursprünglich in veröffentlicht Netzmagazin Ausgabe 286. Kaufen Sie es hier.

Zum Thema passende Artikel: