Oft wird der Aufwand und die Arbeit für die Erstellung einer Webseite unterschätzt. Ein Webauftritt will sorgfältig geplant und durchgeführt werden, damit schlussendlich ein optimales Ergebnis dabei herauskommt. Woran Sie alles denken sollten, wenn Sie Ihr nächstes Webprojekt in Angriff nehmen, erläutere ich Ihnen in diesem Artikel.

Nutzerzentriertes Design

In den letzten Jahren hat sich der Begriff HCD (Human Centered Design – nicht Hockey Club Davos) immer mehr durchgesetzt. Dabei wird die menschliche Perspektive in alle Schritte des Problemlösungsprozesses einbezogen. Das bedeutet, dass der anschliessende Benutzer des Produkts in den Mittelpunkt gerückt wird. Ein Produkt wird nicht nach den Bedürfnissen eines Geschäftsleiters oder Auftraggebers entwickelt, sondern nach denen des Users.

Mit User-Research-Methoden wie Interviews, Fragebogen, Workshops oder Fokusgruppen zusammen mit den Kunden/Benutzern werden Probleme und Bedürfnisse eruiert. Diese Probleme werden analysiert und nach diversen Kriterien eingeteilt. Anschliessend werden Lösungsansätze für die definierten Hauptprobleme gesucht und entwickelt.

Human Centered Design zieht sich durch komplette Projekte durch. Vor allem Usability Tests eignen sich dabei gut. Je früher diese Tests durchgeführt werden, desto besser. Bereits mit skizzierten Prototypen können kleine Usability Tests durchgeführt werden. Üblich sind aber vor allem Tests mit Hi-Fi-Prototypen, die klickbar sind und nach bestandenen Tests 1:1 in die Entwicklung gelangen.

Konzeption

Gerade bei Redesigns von Webseiten wird der Konzeption teilweise zu wenig Beachtung geschenkt. Oft soll eine Webseite erneuert werden, damit sie einfach wieder «modern» aussieht. Doch gilt es auch die Struktur und Inhalte der Webseite zu überdenken. Am besten fängt man komplett bei null an und vergisst die aktuelle Seite.

Gerne zeige ich Ihnen mit folgendem Beispiel, wie Sie ein Konzept erarbeiten können: Nehmen Sie sich einen Stapel Zettel und schreiben Sie alle Dinge auf, die Ihre Kunden auf der Webseite erwarten würden. Versetzen Sie sich dabei in Kundensicht. Was interessiert Sie, wenn Sie Webseiten besuchen? Benutzen Sie ein Kontaktformular oder schreiben Sie vielleicht doch einfach gleich eine E-Mail?

Nachdem Sie damit fertig sind, geht es ans Strukturieren der Inhalte. Gruppieren Sie dazu die Zettel so, wie es für Ihre Kunden logisch sein könnte. Vergessen Sie dabei interne Strukturierungen und Abläufe. Es kommt einzig auf eine, für die Besucher logische Struktur an.

Nun können die einzelnen Gruppen mit treffenden Stichworten benannt werden und schon haben Sie Ihre Sitemap für die neue Webseite.

Im besten Fall lassen Sie diese Methode gleich von Kunden bzw. künftigen Besuchern ausführen. Getrauen Sie sich, bloss zuzuschauen – diese Aussensicht wird dem Aufbau der Webseite guttun.

Falls dies nicht möglich ist, kann auch mit sogenannten Personas gearbeitet werden. Personas repräsentieren die Ziele und Bedürfnisse der Zielgruppe und treten in Form einer imaginären Person auf: Sie haben also einen Namen, verschiedenste Merkmale, die die Zielgruppe ausmachen, und häufig auch ein Bild. So kann man sich unter der Persona einen wirklichen Menschen vorstellen, was die Empathie verstärkt. Auch können anstelle von Bildern, beispielsweise Playmobil-Männchen verwendet werden.

Wenn die Sitemap steht, veranschaulichen wir diese in einem Wireframe (dt. Drahtmodell). Wie der Name schon sagt, ist dieses Wireframe eine abstrakte, drahtige Darstellung der künftigen Webseite. Es geht bloss darum, die Struktur zu visualisieren.

Inhalt

Beinahe das Wichtigste einer Webseite ist deren Inhalt. Interessanter Text, qualitativ hochwertige Bilder und Illustrationen und spannende Videos sind das A und O einer ansprechenden Webseite. Wir empfehlen beim Thema Inhalt das Herbeiziehen von Profis. Texter und Fotografen werden den Unterschied zu Ihren Konkurrenten machen.

Beim umgesetzten Projekt von der Centralhof Herrenmode lagen professionelle Fotos vor. Es gibt der Seite einen persönlichen Touch, da die Fotos mit einem Kunden aufgenommen wurden und viele Stellen von Sursee erkennbar sind.

Aufgrund dieser immensen Wichtigkeit wird oft auch das Content-First-Prinzip angewendet. Das bedeutet, dass nach dem Definieren der Struktur bereits der Inhalt erarbeitet und im Wireframe ergänzt wird. So kann anschliessend der Designer schon mit richtigem Inhalt arbeiten, was am Ende des Projekts zu einem stimmigen Gesamtbild beiträgt.

Das Zusammentragen des Inhalts sollte nicht unterschätzt werden. Dank einer Pimcore-Schulung sind unsere Kunden dazu in der Lage, die Webseite selbst mit Inhalt zu befüllen und spätere Anpassungen selbst auszuführen.

Screendesign

Standardmässig erstellen wir ein Screendesign für die Desktop-Ansicht einer Webseite. Das heisst, wir gestalten jede einzelne Seite und lassen diese vom Kunden abnehmen. So entgehen wir komplizierten Anpassungswünschen in der Entwicklungsphase. Während beispielsweise das Verschieben eines Bildes in der Layoutphase einen Aufwand von gerade mal zwei Minuten in Anspruch nimmt, kann dies während der Entwicklungsphase gut eine Stunde dauern.

Je nachdem, wie wichtig unseren Kunden die Mobile-Optimierung ist, entwerfen wir für jede einzelne Seite noch ein Screendesign in Smartphone-Grösse. Gerade bei Seiten, die oft auf dem Smartphone geöffnet werden, kann dies durchaus Sinn machen. Ansonsten reicht die natürliche, responsive Ansicht. Dort werden alle Elemente auf die Breite des Endgeräts angepasst und untereinander aufgelistet.

Wenn das Screendesign mit einem echten «Webseiten-Gefühl» getestet werden will, erstellen wir daraus einen klickbaren Prototyp.

Entwicklung

Da unsere Seiten allesamt Eigenentwicklungen sind, sind sie bis ins letzte Detail individualisiert. Wie Sie sicher bereits wissen, bauen wir unsere Webseiten mit der digitalen Online-Plattform Pimcore auf. Dieses System vereint ein CMS (Webseiten-Inhaltverwaltungs-System), ein PIM (Produktinformations-Verwaltung), ein DAM (Medien-Verwaltung) und eine eCommerce-Integration (Online-Shop).

Mit Pimcore als Grundlage lassen sich beliebige externe Tools und Applikationen anbinden. So können digitale Prozesse optimiert und vereinfacht werden. Mit Künstlicher Intelligenz (KI) lässt sich das Ganze sogar noch weitertreiben. Während diese Möglichkeiten eher die Experience bei den Mitarbeitern bzw. den Personen, die damit arbeiten, verbessert, sind nachfolgende Optionen für die Besucher der Webseite relevant.

Mit dem Customer Data Management lässt sich das Benutzererlebnis personalisieren. Basierend auf Kundendaten, Nutzerhandlungen (Verhalten auf der Webseite) und Events (beispielsweise Wetter oder Standort) können personalisierte und automatisierte Aktionen im Marketingbereich (beispielsweise Newsletter-Versand) ausgeführt werden. Ebenso kann die Webseite je nach Besucher individualisiert werden. Das bedeutet, dass verschiedene User unterschiedliche Anzeigen der Webseite dargestellt bekommen.

Mit einer Progressive Web App können Sie Ihre Webseite offline zur Verfügung stellen. Das heisst, sie verhält sich wie eine App und lässt sich auch im Google Play Store downloaden. Wir rechnen damit, dass dies künftig auch im App Store von Apple möglich sein wird.

Betreuung

Ist die Webseite erstmal online, ist die Arbeit damit nicht getan. Sie sollte laufend aktualisiert werden, evtl. eine Textanpassung hier oder ein Bild-Update da. Vor allem die News- bzw. Aktuell-Seite sollte, wie der Name schon verrät, aktuell sein. 

Neben den inhaltlichen Anpassungen sollten auch technische Änderungen nicht ausser Acht gelassen werden. Pimcore-Updates liefern mit kleinem Aufwand häufig tolle neue Bearbeitungs-Features. Auch können weitere Toolbox-Bausteine einfach dazu entwickelt und überall auf der Seite eingefügt werden. Der Weiterentwicklung sind somit kaum Grenzen gesetzt – und dies sollten Sie unbedingt nutzen.

Marketing

Ihre Online-Marketing-Massnahmen sollten bereits bei der Konzeption der Webseite geplant werden. Diese werden in der kompletten Entwicklungsphase berücksichtigt. Dank Pimcore lässt sich ein Newsletter direkt in der Instanz der Webseite integrieren, was es erleichtert, beispielsweise News-Artikel von der Webseite auch im Newsletter zu verwenden.

Social Media ist ein sehr komplexes Thema, weshalb dafür bereits ein Blog-Artikel besteht. Falls Sie mit Ihrem Unternehmen auch in den sozialen Medien auftreten wollen, empfehle ich Ihnen wärmstens, den Beitrag zu lesen.

Im Bereich Suchmaschinen-Optimierung helfen wir bei der Bedienung der SEO-Tools, die in Pimcore integriert sind. Auch dazu besteht bereits ein Blog-Artikel. Da tiefere Optimierungen nicht unser Fachgebiet sind, empfehlen wir dafür das Zuziehen eines Profis.

Wollen Sie nach dem Online-Stellen der Seite kontrollieren, wie oft die Seite besucht wird, welche Seite die beliebteste ist, auf welchen Geräten die Seite am häufigsten aufgerufen wird oder wie lange die Besuchsdauer ist? Dann empfehlen wir Ihnen die Verwendung von Analytic-Tools wie Google Analytics oder Matomo. Gerne übernehmen wir für unsere Kunden die Konfiguration mit der Webseite.

Fazit

Wie Sie sehen, steckt viel Arbeit hinter dem Erstellen einer neuen Webseite. Welcher dieser Punkte hat Sie am meisten überrascht? Was ging bei Ihren bisherigen Webprojekten vergessen? Wir freuen uns auf viele Kommentare – und wenn bald ein neues Webprojekt ansteht, helfen wir natürlich gerne, an alles zu denken.