Die User-Experience (UX), spielt eine zentrale Rolle bei der Entwicklung von Websites. Die Umsetzung von UX-Design trägt dazu bei, dass deine Website benutzerfreundlich, zugänglich und ansprechend ist.
In diesem Beitrag werden wir uns mit der Verbindung von Website-Entwicklung und UX-Design beschäftigen, um großartige Benutzererfahrungen zu schaffen. Die Entwicklung auf Basis von UX-Design ist ein wichtiger Schritt bei der Gestaltung deiner Website.
Page Builder und Themes sind ein wesentlicher Bestandteil von WordPress. Sie dienen dir als Vorlagen für das Layout und das Design deiner Website. Die Entwicklung von zusätzlichen Templates ermöglicht es, das Design flexibel anzupassen und die Funktionalität der Website zu erweitern. Dies erleichtert auch die Verwaltung von Inhalten jeder Art für Redakteure.
Du kommst gerade ins Schleudern bei den ganzen Bezeichnungen? Dazu folgend eine kurze Übersicht, denn die nachfolgenden Begriffe werden gerne vermischt. Dabei ist es eigentlich ganz einfach! Ein Theme kann vorab schon auf eine Branche wie Hotels, Immobilien oder Fitness-Studios ausgelegt sein. In einem Branchen-Theme befinden sich bereits vordefinierte Bereiche, die den Inhalt der Seite steuern. Logo und Farben, Texte und Bilder kannst du beliebig an die eigenen Bedürfnisse anpassen.
Das kann im ersten Step eine gute und schnelle Lösung sein, allerdings schleppt man auch die vordefinierten Bereiche mit, egal ob man sie nutzt oder nicht. Wer einen größeren Blog oder eine umfangreiche Unternehmens-Website plant, sollte eher nicht auf die Art von Fertiglösung setzen. Gravierende Änderungen sind schwierig und der Entwickler muss sich in eine fremde Code-Struktur einarbeiten. Der Kunde, falls du als Freiberufler oder Agentur arbeiten möchtest, versteht dann nicht, warum man nicht “schnell”, die neuen Wünsche umsetzen kann.
Wenn du aber ein Theme findest, das genau deinen Layout-Vorstellungen entspricht, kann das anfangs auch eine gute Alternative sein. Hier bietet sich an, die Bewertungen gründlich zu lesen und wann das Theme zuletzt ein update erfahren hat. Da sich das Internet, die Technik und mobile Ansprüche rasend schnell weiter entwickeln, sollte man hier auf Anbieter setzen, die auch einen Premium Support anbieten oder zumindest eine gute Dokumentation bereit stellen.
Allerdings gibt es auch eine ganze Reihe von schnellen und sehr sauber gearbeiteten Themes, die nicht von vornherein auf ein Thema spezialisiert sind. Oft bieten diese Themes vorgefertigte Vorlagen, die man importieren kann oder man baut sich sein Theme selbst zurecht. Themes, die ich auf vielen Projekten einsetze, sind Blocksy und Astra. Beide Themes lassen viel Spielraum, sind schnell und bieten dir zusätzlich Themenvorlagen an, wenn du möchtest. Damit lassen sich durchaus auch größere Projekte umsetzen.
Ein WordPress-Theme ist ein Grundgerüst, das dir ermöglicht, über den Customizer das gesamte Design und die Funktionalität deines Layouts zu steuern. Das Theme definiert das allgemeine Erscheinungsbild für den Headerbereich, die Navigation, den Footer, Farben und Fonts und die Ausgabe der Designelemente im Frontend deiner Website. Ein WordPress-Theme ist für die gesamte Website zuständig und wirkt sich auf alle Seiten aus, wobei bestimmte Bereiche unterschiedlich gestaltet werden können.
In einigen Bereichen möchtest du vielleicht eine Seitenleiste (Sidebar) verwenden oder Blogartikel sollen eine andere Anordnung besitzen als Standard-Pages. Für Einsteiger sind Themes sinnvoll, da vieles vorkonfiguriert ist, was sich relativ weit an die eigenen Vorstellungen anpassen lässt.
Ein Template ist eine einzelne Datei innerhalb eines WordPress-Themes, welches das Layout einer bestimmten Seite oder einer bestimmten Region der Website definiert. Um eigene Templates zu nutzen, sollte immer ein Child-Theme vorab erstellt werden. Das bedeutet, alle Änderungen nimmst du nur im Child-Theme vor, während das Haupt-Theme unangetastet und updatefähig bleibt.
Ein Theme kann beliebig viele Templates enthalten, die für verschiedene Seiten und Regionen verwendet werden können. Deine Blog-Beiträge können sich zum Beispiel unterscheiden von den Archivseiten oder der Suchausgabe. Allerdings ist das schon ein Bereich für fortgeschrittene WordPress Anwender und es macht Sinn sich für die Template Entwicklung eine Staging-Installation (Testumgebung) aufzubauen.
Page Builder oder Visual Builder sind meistens ein Plugin (also kein Theme). Ein Page Builder hat aber im Normalfall ein Grundtheme dabei, in welchem man sämtliche Entwicklungen vornehmen kann. Page Builder sind wesentlich flexibler als ein einzelnes Theme, erfordern aber auch eine gewisse Einarbeitungszeit.
Ausgereifte Page Builder oder Visual Builder zeigen dir deine Änderungen direkt im Vorschaumodus an und ermöglichen dir Bereiche der Seiten mit Drag & Drop Elementen zu gestalten. Dir steht meistens eine Vielzahl von Elementen zur Verfügung, die in bestimmten Regionen flexibel platziert werden können. Zu solchen Elementen oder Blöcken gehören Galerien, einzelne Design-Sets, Formulare und vieles mehr.
In Page Buildern kannst du ebenso eigene Templates erstellen und ordnest diese Templates bestimmten Seiten zu. Page Builder und Visual Builder bieten dir bei der Erstellung von Templates maximale Flexibilität. Jeder Kundenwunsch kann in Kürze umgesetzt werden, da ein neues Template im Hintergrund entwickelt werden kann, und nach Abnahme auf die jeweiligen Unterseiten gelegt wird. Und schon sieht ein ganzer Bereich einer Website ganz anders aus, ohne das du in einem Theme Änderungen vornehmen musstest, sondern eben nur in einzelnen Templates. Läuft etwas doch nicht so konform, schaltest du einfach das alte Template zurück und behebst eventuelle Darstellungsfehler. Hast du aber in einem Theme gravierende Änderungen vorgenommen, ist der Schritt zurück nicht mehr ganz so einfach.
Mein Favorit unter den Visual Buildern ist ganz klar Breakdance, wenn auch mit steiler Lernkurve verbunden. Breakdance benötigt nicht mal ein Theme! Man kann, muss aber nicht! Zu Breakdance folgen noch ausführliche Tutorials.
Der Begriff User Experience (UX) steht für die Interaktion mit einer Website oder einer speziellen Anwendung auf der Website. Dies kann die Interaktion mit einem Produkt sein, einer Suchfunktion oder der Umgang mit Formularen und jeder anderen Anwendung, die den Besucher schnell ans Ziel führen soll und vor allem auch Spaß macht. Einen Blog oder eine Lernplattform, ein Shopsystem oder eine Landingpage ohne durchdachtes UX-Design wird der Besucher schnell wieder verlassen.
Da die Entwicklung auf UX-Basis von Grund auf mit einbezogen wird, lassen sich im späteren Verlauf aufschlussreiche Tests durchführen. Man nennt es A/B-Testing. Dies können zum Beispiel 2 völlig unterschiedlich gestaltete Landingpages sein, die über Google mit gleicher Aussteuerung beworben werden. Die Menge der Besucher sowie deren Interaktion (Kauf oder Lead) lassen schnell erkennen, welches Design höhere Erfolge bringt.
UX-Design im Bereich der Website-Entwicklung bezieht sich auf die Gestaltung und Optimierung der Benutzererfahrung auf einer Website. Es umfasst verschiedene Aspekte wie die Benutzerfreundlichkeit, Zugänglichkeit, Informationsarchitektur und Interaktionsdesign. UX-Design ist wichtig, um den Besuchern deiner Website ein positives und intuitives Nutzererlebnis zu bieten.
Dies führt zu einer höheren Aufenthaltsdauer und eine lange Aufenthaltsdauer verbessert deine Ranking-Position bei Suchmaschinen.
Gleich von Anfang an die Grundsätze von UX-Design einzubeziehen, bietet mehrere Vorteile. Durch die Entwicklung einer benutzerfreundlichen Website können Zeit und Ressourcen gleich bei der Entwicklung gespart werden. Ein gut gestaltetes Grundgerüst, mit Fokus auf UX-Design, ermöglicht es deinen Besuchern, auf der Website intuitiv zu navigieren und effizient Informationen zu finden.
Rein theoretisch könnte jeder Seite, innerhalb der Website, ein eigenes Template mit bestimmten Inhaltscontainern zugewiesen werden. Diese sogenannten Inhaltscontainer können in Verbindung mit einem Visual Bilder, dynamisch, bereits vorhandene Inhalte abrufen. Das bedeutet, dass ein Bereich zum Beispiel zeitgesteuert erscheinen kann, oder nur wenn Kategorie A oder B als Wert gesetzt ist. Wobei Kategorie A/B natürlich auch ein Custom-Field sein kann, was ganz individuelle Abfragen ermöglicht. So eine Abfrage könnte zum Beispiel lauten, dass in der Seitenleiste automatisch nur Themen erscheinen die zum eigentlichen Artikel passen.
Falls du jetzt glaubst, dass ist ja nur was für große Websites.. Irrtum! Ich habe unter meinen Favoriten einige kleine Reise- und Rezepteblogs, die so cool gemacht sind, dass man immer wieder gerne zurück kehrt oder eben auch den Newsletter abonniert oder ein Kochbuch kauft.
Natürlich kannst du auch spezialisierte Agenturen beauftragen, wenn genug Etat vorhanden ist. Aber eigentlich kann jeder Einsteiger schon auf UX-Design achten. Es erfordert lediglich logisches Denken. Stimmen meine Abläufe, finden sich Besucher auf meinem Blog zurecht und biete ich wertvolle Inhalte und möglichst unterstützende Bilder an. Damit bist du schon ganz weit vorn. Und bleibe vor allem kritikfähig. Ja, es ist blöd, wenn man unendlich Zeit in eine tolle Anwendung gesteckt hat, die nur außer dir niemand versteht. Nehme jede Kritik als Anlass, an Verbesserungen zu arbeiten, denn nichts anderes ist UX-Design!
Hier kommt übrigens auch der Nachteil von gekauften Fertig-Themes ins Spiel. Man hat wenig Einfluss auf das Design und muss mit der sauberen oder eben nicht sauberen Programmierung eines fremden Entwicklers leben.
Bei der Entwicklung mit UX-Design gibt es einige bewährte Praktiken zu beachten. Dazu gehören die Berücksichtigung deiner Zielgruppe und deren Bedürfnisse, eine klare und intuitive Navigation, die Gewährleistung von Barrierefreiheit, eine ansprechende visuelle Gestaltung und die Optimierung der Ladezeiten und natürlich spannende Inhalte.
Auch sollten deine Google Fonts, also die gewünschten Schrifttypen, vom eigenen Server ausgeliefert werden, damit die IP nicht bei jedem Seitenaufruf an Google übertragen wird. Natürlich kannst du auch eigens gekaufte Fonts selbst hosten. Ebenso sollten Bilder vorab komprimiert werden und die Darstellung von Videos durchdacht sein. Wähle einen leistungsstarkern Hoster, damit deine Inhalte schnell ausgeliefert werden, nichts ist schlimmer als eine Website die sich nur langsam aufbaut.
Bitte während der Entwicklung immer mal wieder Freunde und Bekannte deinen Blog zu testen, damit siehst du am besten wo die Tücken liegen. Du selbst kennst deine Website und den Aufbau deiner Funktionen in- und auswendig. Du wirst überrascht sein, wie irritiert sich neue User eventuell auf deiner Website bewegen und für dich ganz logische Dinge gar nicht erst finden oder mit einigen Funktionen nicht zurechtkommen. Deinen UX-Design-Test hast du bestanden, wenn sich auch unerfahrene User sofort zurechtfinden. Denn der nächste Blog ist immer nur einen Klick entfernt!
