Wireframes sind schematische Entwürfe, die die Grundstruktur einer Webseite darstellen. Sie enthalten keine Designelemente oder Texte, sondern zeigen, wo welche Inhalte und Funktionen platziert werden. Das hilft im Entstehungsprozess einer neuen Webseite, den grundsätzlichen Aufbau für alle Beteiligten verständlich zu machen.
Tipp: Hilfreiche Tools zur Erstellung von Wireframes sind Figma und Adobe XD.
Prototypen sind interaktive Modelle einer Webseite oder App, die eine Vorschau auf die Nutzererfahrung bieten. Sie können einfache klickbare Wireframes oder hochdetaillierte Mockups sein.
Neben den bereits genannten Tools Figma und Adobe XD eignet sich Sketch besonders gut, um Mobile-, Web- und UI-Designs einfach und unkompliziert zu visualisieren. Die Marvel App ermöglicht es dir, Designs und Prototypen mit Audio- und Video-Feedback sowie Bildschirmaufzeichnungen für alle Projektbeteiligten zugänglich zu machen.
Zu Beginn des Webseiten Projektes sollte feststehen, welche Zielgruppen im Detail angesprochen werden – als Basis hilft eine Zielgruppenanalyse. Dies lässt sich auf konkrete Charaktere herunterbrechen – die Personas. Texter und Webdesigner haben somit klare Adressaten vor Augen, für die sie Content erstellen und visuell ansprechend aufbereiten.
Wichtig: Häufig hat der Webseitenbetreiber bestimmte Vorstellungen, wie seine Webseite aussehen soll und welche Textinhalte relevant sind. Das deckt sich nicht immer mit dem, was tatsächlich für seine Endkunden ansprechend und interessant ist. Dann gilt es frühestmöglich abzustimmen, inwiefern der Webseiten-Inhaber seine Vorgaben zurückschrauben kann, damit Texter und Webdesigner sich ganz auf die Optimierung für Endkunden konzentrieren können.
Zur finalen Abstimmung der zielgruppenorientierten Designumsetzung werden 2 Optionen miteinander verglichen – daher A/B Test. Wie erfolgreich die Benutzerführung funktioniert, wird anhand der höheren Conversion Rate gemessen. Dort, wo Besucher abspringen oder nicht interagieren, wie vorgesehen, wird nachjustiert.
Usability-Testing funktioniert am besten mithilfe der eigenen Zielgruppe, also den realen Kunden.
Zur kontinuierlichen Verbesserung des Webdesigns ist das Prüfen des Nutzerverhaltens unerlässlich: Analysiere daher regelmäßig, wieviel Zeit – Dwell Time – Nutzer auf der Seite verbringen und an welchen Stellen sie verweilen. Noch wichtiger ist das Nachvollziehen, an welchen Punkten die Webseiten-Besucher abspringen. Das kann verschiedene Gründe haben, technische Fehler oder zu komplizierte Prozesse können auf diese Weise gut lokalisiert werden.
Tipp: Das Heatmap-Tool hotjar erfasst Bewegungen und Interaktionen der Besucher. Webseiten-Inhaber können so gezielt prüfen, ob User wunschgemäß agieren und wo mögliche Schwachstellen bei der Anwendung vorliegen.
die Argumentationsstruktur beginnt bei der höchsten Relevanz
und mithilfe von Farben, Designelementen und Bildern den Blick leiten
Sympathisch gestaltete Ansprechpartnerbereiche oder Buttons mit interessanten Botschaften regen den Nutzer zur Kontaktaufnahme an – sofern das gewünscht ist.
Schnelle Ladezeiten, gut lesbare Inhalte und abgespecktes Design zeichnen die verbesserte Anwendbarkeit für Smartphone-Nutzer aus.