Mit Klick auf den Button erlaubst Du uns, die User Experience auf unserer Webseite zu verbessern und Anzeigen für Dich zu personalisieren.
Du kannst Deine Entscheidung jederzeit ändern.
Du kannst Deine Entscheidung jederzeit ändern.
Planen Unternehmen oder Selbstständige den Relaunch der eigenen Website, so gehen damit nur allzu oft die Wünsche eines großen Knalls, der viele neue BesucherInnen und KundInnen hervorbringt, einher. Ein neues, ästhetisches Design ist dabei mindestens genauso relevant wie klar strukturierte Inhalte, die nicht nur informativ sind, sondern auch zu Interaktionen einladen. Vor einem derartigen Projekt stehen viele EntwicklerInnen und IT-ExpertInnen jedoch immer wieder vor derselben Frage: Welche Tools und Plattformen eignen sich am besten, um die Website neu aufzusetzen? Auch wir haben uns vor dem Relaunch unserer Website diese Frage gestellt und möchten in diesem Artikel die Tools empfehlen, mit denen wir die besten Erfahrungen machen konnten.
“Weiß wie Schnee und rot wie Blut.” Wie so oft beginnt die Geschichte mit der Optik (oder viel mehr mit dem Design) der neuen Website. Farben und Formen müssen neu gedacht, Schriftarten erneuert und Layouts individuell konzipiert werden, um dem hohen Anspruch an ein modernes Erscheinungsbild gerecht werden zu können. Für unsere Zwecke hat sich das web- und cloudbasierte Design-Tool “Figma” als optimale Lösung zum kollaborativen Gestalten herauskristallisiert.
Figma ist sehr übersichtlich und bietet mit verschiedenen, interaktiven Features, zahlreichen Plugins und Templates sowie der konstanten Datensicherung in einer Cloud die Möglichkeit, mehrere DesignerInnen und EntwicklerInnen kreativ und in Echtzeit an einem Projekt arbeiten zu lassen - von Wireframes bis hin zum Prototypen. Die grundlegendsten Funktionen sind ähnlich wie in den bekannten Programmen Sketch und Keynote angeordnet, was unerfahrenen Figma-UserInnen den Einstieg in die Nutzung des Tools enorm erleichtert. Auch Stakeholder oder KundInnen können sich problemlos über jeden Webbrowser in Figma einloggen, um den aktuellen Stand des Designs zu erfassen und Wünsche oder Anforderungen zu diskutieren. Diese können auch ohne Weiteres als Kommentar in das Board eingetragen werden. Der einzige “Nachteil”: Um die automatische Datensicherung in Figma nutzen zu können, muss eine stabile Verbindung zum Internet bestehen. Dennoch kann auch im Offline-Modus gearbeitet werden, wobei die Dateien erst dann gespeichert werden, wenn das Gerät wieder online ist.
Steht das Layout für die neue Website erst einmal fest, kann es in der Entwicklung auch schon einen Schritt weitergehen. Für die Umsetzung des Designs nutzten wir das webbasierte Drag- & Drop-Tool “Webflow”. In diesem können responsive Websites für jedes Gerät (PC, Tablet oder Smartphone) konzipiert und umgesetzt werden. Während für die reine Erstellung bzw. Programmierung ein gewisses Maß an CSS- und HTML-Kenntnissen notwendig ist, können visuelle und interaktive Elemente ganz unkompliziert über die Drag- & Drop-Funktion implementiert werden. In einer Art Baukasten werden dabei allerlei Elemente in Boxen platziert, die in ihrer Summe übereinander gestapelt werden und damit im Endergebnis die gewünschte Website entstehen lassen.
Webflow erinnert mit seiner Benutzeroberfläche stark an Photoshop und ermöglicht das visualisierte Programmieren im Frontend, während im Backend automatisch alle Bauvorgänge in Codes umgewandelt werden. Doch Webflow bietet nicht nur die Option, eine Homepage zu bauen, sondern kann daneben auch als Content Management System (CMS) genutzt werden. Verschiedene Content-Typen können beispielsweise mit Überschriften, Inhalten, Permalinks, Fotos oder Social-Media-Links versehen werden. Auch nach dem (Re-)Launch der Webseite können die Inhalte immer wieder beliebig editiert und angepasst werden.
Auf die Plätze, fertig, User-Tests! Bevor das eigene Website-Baby voller Stolz in die große, weite Welt entlassen wird, sollte zuallererst geprüft werden, ob die UserInnen mindestens genauso überzeugt von Design, Content und Co. sind. Für Usability- und User-Experience-Analysen fiel unsere Wahl deshalb auf das Performance- und Analyse-Tool “Hotjar”. Visuell übersichtlich aufbereitet stellt Hotjar via Click-, Move- und Scrollheatmaps sowie Visitor-Recordings das Verhalten von NutzerInnen auf der eigenen Website dar. So kann beispielsweise in Erfahrung gebracht werden, welche Positionen der Mauszeiger bzw. Cursor beim Surfen einnimmt und welche Elemente dabei möglicherweise übersehen oder besonders stark geklickt werden.
Zusätzlich können mittels visueller Feedbacks oder Surveys auch die Meinungen der UserInnen eingeholt werden, um untersuchen zu können, aus welchem Grund diese sich so verhalten. Das Setup, die Verwaltung der Einstellungen und das finale Tracking sind in Hotjar dabei so kinderleicht zu verstehen, dass sie einen nur sehr geringen Einarbeitungsaufwand erzeugen. Perfekt für alle, die schnell und unkompliziert den eigenen Prototypen testen und aufgrund echter Meinungen von UserInnen optimieren wollen.
Eine Möglichkeit, um ausgewählte UserInnen zu finden, die den Website-Prototypen vor dem Relaunch auf Herz und Nieren prüfen, ist das Tool Maze. Mit der Hilfe eine Filters kann eine geeignete Gruppe von TesterInnen ausfindig gemacht werden (über Maze selbst gebührenfrei, über eine weitere Instanz gebührenpflichtig, in unserem Fall waren es 25 NutzerInnen für 200€), die beispielsweise einer bestimmten Altersgruppe, einem Geschlecht oder einer Sprache angehört. Maze stellt u.a. Daten zur Sitzungsdauer bereit und integriert außerdem führende Design-Plattformen wie Figma, InVision, Adobe XD, Marvel oder Sketch, was den Testing-Prozess enorm beschleunigt.
In unserem Fall half das Tool dabei, das Design der neuen Website vor der Implementierung mit dem Figma-Prototypen zu testen. Mit Maze lassen sich sogenannte "Missions" erstellen, welche den Test-UserInnen gestellt werden können (Bsp.: "Finde unsere Stellenangebote auf der Website."). Maze trackt neben der Zeitkomponente - ähnlich wie Hotjar - auch das Verhalten der NutzerInnen auf der Website, jedoch unter differenzierten Gesichtspunkten. Die Vorteile: Maze funktioniert extrem schnell, ist sehr funktional und super einfach in der Handhabung. Die Nachteile: Da das Tool auf dem US-Markt bereits vollständig etabliert ist und sich aktuell noch in der Expansion in den europäischen Raum befindet, werden den NutzerInnen beim Testing natürlich auch deutschsprachige Texte angezeigt, die für die zumeist verfügbaren, englischsprachigen TesterInnen (die sich über Maze zusätzlich “einkaufen” lassen) nicht vollständig gelesen und bewertet werden können. Daher müssen in einigen Fällen weitere TesterInnen über eine dritte Instanz bezogen werden.
Und wer arbeitet zu welchem Zeitpunkt an welcher Etappe des Relaunches? Die Planung, Steuerung und Kontrolle ist in den meisten Fällen das Herzstück eines solchen Projektes. Mit dem Projektmanagement steht und fällt die Rollenverteilung, die Zuweisung der Aufgaben, die Deadline und damit letztlich auch der Erfolg des Vorhabens. Nicht nur für den Relaunch unserer Young Digitals Webseite, sondern auch für weitere, interne sowie externe Projekte nutzen wir für genau diese Zwecke seit einigen Jahren das Tool “Asana”.
Auf einer sehr benutzerfreundlichen Oberfläche können in individuell angelegten Projekten einzelne Aufgaben an alle Beteiligten verteilt werden, während dazugehörige Unteraufgaben, Meilensteine oder Deadlines beliebig hinzugefügt und damit transparent für alle dargestellt werden können. Unter Berücksichtigung einer agilen Arbeitsweise können die Teammitglieder außerdem Aufgaben kommentieren oder den einzelnen Tickets Anhänge und Abhängigkeiten hinzufügen, die übersichtlich abbilden, welche Aufgaben bereits begonnen wurden oder noch auf die Fertigstellung anderer Schritte warten. Da das Tool natürlich noch viele weitere Möglichkeiten und Features bietet, stehen wir als offizielle Asana-Experten allen Fragenden natürlich gern mit Rat und Tat zur Seite. :-)
Da der Relaunch der eigenen Website mitunter sehr schweißtreibend sein kann und die volle Konzentration aller Teammitglieder erfordert, ist die Nutzung geeigneter Tools für ein solches Projekt umso wichtiger. Auf einem Markt voller vermeintlich hilfreicher Anwendungen ist es allerdings nicht immer einfach, das passende Werkzeug zu identifizieren. Vielleicht können wir mit unseren persönlichen Erfahrungen aber der/dem ein oder anderen DesignerIn bzw. EntwicklerIn weiterhelfen. Und falls zu Figma und Co. noch Fragen offen sind, freuen wir uns natürlich über Kontaktanfragen, um diese zu klären.
