Mit der Vorgängerversion WoltLab Suite 5.4 haben wir uns vor allem auf technische Überarbeitungen konzentriert und damit wichtige Vorarbeit für die WoltLab Suite 5.5 geleistet. Der Fokus in dieser Version liegt auf funktionellen Überarbeitungen der Benutzeroberfläche sowie der Verbesserungen der Benutzung sowie der Barrierefreiheit. Mit diesem Artikel möchten wir einen Vorgeschmack auf die kommende Version WoltLab Suite 5.5 liefern.
Das Benutzermenü hat sich im Aufbau und der Funktionsweise über viele Jahre im Wesentlichen bewährt, allerdings offenbarten sich über die Zeit einige Schwächen, die wir mit der WoltLab Suite 5.5 direkt angehen. Das neu gestaltete und technisch modernisierte Menü zielt darauf ab, vier wesentliche Kernprobleme der vorherigen Umsetzung auszuräumen:
Bei der Neugestaltung wurde besonderen Wert darauf gelegt, mit gezielten Formatierungen eine klare Struktur zu schaffen, um die Inhalte schneller und besser erfassen zu können. Die Menüeinträge für die Einstellungen wurden umgestaltet und verlinken nun jeweils auf den gesamten Abschnitt, die Unterpunkte haben nur noch informativen Charakter. Diese Überarbeitung ermöglicht nun auch in Kombination mit vielen installierten Erweiterungen eine komfortable und übersichtliche Bedienung.
Die Menüpunkte für Benachrichtigungen, Konversationen und die Moderation wurden ebenfalls überarbeitet und verwenden ein einheitliches Darstellungs- und Bedienkonzept. Der Aufbau ist stark an das bisherige Layout angelehnt, um einen sanften Übergang im Vergleich zu den Vorgängerversionen zu ermöglichen. Insbesondere die Icon-Buttons wurden optisch vergrößert und bieten größere Klickbereiche, damit diese auch auf Touch-Bildschirmen komfortabel zu bedienen sind.
Desktop-Benachrichtigungen werden nicht mehr automatisch aktiv, über die eingeblendete Box in den Benachrichtigungen können diese aktiviert oder deaktiviert werden. Die Box wird nur angezeigt, solange noch keine Entscheidung getroffen wurde und verschwindet dann automatisch.
Die Farbgestaltung der Menüs kann direkt über den Stil-Editor angepasst werden, die Farbpalette erlaubt dabei die komfortable Anpassung aller verwendeten Farbwerte und bietet die gewohnte Live-Vorschau des Erscheinungsbildes. Bestehende Stile sind vollständig kompatibel mit diesen Änderungen, je nach Farbgebung kann es sich jedoch anbieten, die neuen Menüs farblich anzugleichen.
Bei der Umsetzung haben wir von Anfang an konsequent darauf geachtet, eine bestmögliche Bedienung per Tastatur sowie über Hilfsmittel (beispielsweise Screen-Reader oder VoiceOver) zu ermöglichen. Dies wird neben dem konsequenten Einsatz von geeigneten ARIA-Attributen auch durch ein aktives Fokus-Management erreicht. Für Entwickler haben wir eine sichere API geschaffen, mit der eigene Inhalte im Menü bereitgestellt werden können und gleichzeitig die Barrierefreiheit gewährleistet bleibt.
Der Seitenkopf wurde umgestaltet und bietet eine deutlich bessere Nutzererfahrung und mehr Funktionen. Das Logo wurde auf die linke Seite verlegt und hat durch angepasste Abstände mehr Platz, so dass auch breite Logos sinnvoll eingearbeitet werden können. Auf der rechten Seite findet sich das Hauptmenü, das Benutzermenü sowie ein Button um direkt auf die Suche zuzugreifen.
Mit der Überarbeitung des Hauptmenüs öffnen sich Menüpunkte direkt innerhalb der Auflistung und bilden somit eine leicht nachvollziehbare Struktur ab, bei der jederzeit der Pfad erkennbar ist. Von diesen Anpassungen profitiert auch die Barrierefreiheit, bei der wir hier deutliche Verbesserungen erreichen konnten. Darüber hinaus erlaubt dies uns, ein einheitliches Bedienkonzept gemeinsam mit der Administrationsoberfläche zu realisieren, um neuen Nutzern den Einstieg zu erleichtern.
Die Benachrichtigungen sind mit Abstand der wichtigste Aspekt des Benutzermenüs und werden zukünftig einen höheren Stellenwert einnehmen. Das Menü mit seinen unzähligen Links weicht einem aufgeräumten Bildschirm mit leicht zugänglichen Tabs zum Aufruf der einzelnen Unterpunkte. Beim erstmaligen Aufruf des Benutzermenüs öffnen sich direkt die Benachrichtigungen und sind somit ohne Zusatzaufwand direkt erreichbar.
Die überarbeiteten Benutzermenüs werden in dieser Ansicht wiederverwendet und integrieren sich direkt in die Ansicht, bei überlangen Inhalten werden diese automatisch scrollbar. An dieser Stelle kommt insbesondere die bessere Optimierung dieser Menüs für die Touch-Bedienung zum Tragen und bietet eine gewohnte Bedienung sowohl auf dem Smartphone als auch am Desktop.
14
19
11
Kommentare 22
Musika
Leider konnte ich die mobile Farbgestaltung über den Stil-Editor nicht finden.
Hat man z.B. eine weiße Hintergrundfarbe für den Header gewählt, bleibt in der mobilen Version auch der Hintergrund der Menüs weiß. Damit bleiben die Menüoptionen "Sandwich", "Anmeldung" und "Suche" weiterhin weiß und sind somit für den Benutzer nicht zu sehen.
Hundiiiiiiiiii
Das mit der Farbgestaltung betrifft nur die Menüs selbst. Mobil bleibt auch leider weiterhin ein Mix aus verschiedenen Bereichen.
Hundiiiiiiiiii
Der Abschnitt zum Kontrollzentrum ist veraltet:
Die gibt es nicht mehr, entsprechend ist auch das Bildschirmfoto vom Kontrollzentrum nicht mehr aktuell 👀
ssv111
@mobiles Design
Wir fragen uns was daran besser sein soll, wenn das Hauptmenü in der mobilen Version nach rechts zwischen die anderen Button zieht?
Das mag ja für jemanden mit zarten Fingern ganz gut gehen, aber ich z.B. habe da etwas dickere Finger. Wenn ich dann ins Hauptmenü will und ständig auf der Suche oder dem Benutzermenü lande, wird Frust aufkommen, nicht nur bei mir. Verstehe auch nicht was daran einfacher sein soll, jetzt ist das eine Menü links und das Benutzermenü rechts, räumlich schön getrennt, für alle wunderbar nutzbar.
Abgesehen vom kompletten überarbeiten des Design.
Wir bitten daher das Menü so zu lassen wie es jetzt ist.
@normales Design
Sehr viele User, unter anderem wir selbst, nutzen sehr intensiv den Button "alles gelesen markieren". Wenn dieser Punkt nun unter einem zusätzlichen Button verschwindet wird es sehr schwer erklärbar, dass das zu einer besseren Funktionalität beitragen soll.
Auch hier also die Bitte es so zu lassen wie es bisher ist.
Mit diesen Änderungen, so si so bleiben, werden auch wir unsere Upgrades auf Eis legen, bis wieder etwas vernünftiges kommt, wäre Schade drum.
Alexander Ebert
Die Buttons im mobilen Menü sind so gestaltet, dass diese einwandfrei bedienbar bleiben auch mit „dickeren Fingern“. Der tatsächliche Klickbereich ist größer als die Icons und orientiert sich stark an den Vorgaben für eine barrierefreie Bedienung an Touch-Displays.
Die neue Version wird demnächst auf woltlab.com im Live-Einsatz sein und ein bequemes Ausprobieren der Neuerungen bieten.
TeRRible__KHONS
Mir geht's wie anderen hier, ich werde erstmal weder mein Abo verlängern noch auf 5.5 upgraden, die Änderungen sind immer so minimal dass es sich nicht wirklich lohnt immer soviel Arbeit reinzustecken, wenn es sich in paar Jahren Mal wieder lohnt wird neu aufgesetzt und importiert, aber diese komplett Umstellungen von Version zu Version mit X Kernänderungen ohne wirkliche Kompatibilität zur verherigen Version nervt schon seit längerem. Sorry ich bin erstmal raus und lasse alles so auf meinem Server laufen wie es derzeit ist, das wird noch paar Jahre so halten 👍
PS. Die Änderungen und angeblichen Verbesserungen Sind so minimal dass meine Community meist nicht Mal was davon bemerkt.
Darkwood.Design
Freut mich sehr, dass das Thema angegangen und das Design schrittweise modernisiert wird. Die Screenshots gefallen mir persönlich auch sehr gut. Einzig beim Punkt Hauptmenü mit aufklappbaren Unterpunkten bin ich gestolpert, da das Design auf den ersten Blick etwas "kaputt" bzw. unfertig und sehr unruhig wirkt. (springende Badges, sehr große weiße Flächen...)
Nachtrag: Ein paar Anregungen: [5.5] Hauptmenü mit aufklappbaren Unterpunkten
Christopher Walz
Grüße
Xopez
This
LoStisWorld
Die Icons kann man ruhig 20px geben, jedoch sollte die Touch Fläche aus UX Gründen eine gewisse min Größe von 44px haben und dann denke ich sind die Icons gut so.
Das Problem sieht man z.b. bei der wsc-connect Plugin, versucht man da das X im Footer zu drücken, schließt man nicht den Banner sonder kommt auf die wsc-connect Seite, was extrem störend ist
Alexander Ebert
Die Klickbereiche wurden auf 40/44px gesetzt, damit diese mit einem Finger gut bedienbar sind, ohne ungewollte Aktionen auszuführen. Die Icons wurden in der Größe angepasst, damit diese im Verhältnis zum Avatar stehen, darüber hinaus implizieren kleine Icons auch ebenso kleine Klickbereiche.
Geronimo
Da dürften sehr viele Stile dabei kaputtgehen.
gn5VmUKCtv6ekrMf
Kannst du ja mal testen für das, was du so nutzt: https://softcreatr.dev/sc-instance-request/?version=master
Beim Installieren von Nero von @cls-design erhalte ich aktuell auf jeden Fall eine Fehlermeldung - und der komplette Userpanel-Bereich ist nicht funktional. Andere Stile habe ich aktuell nicht getestet.
kirmesparkworld.de
Nexus von CLS-Design klappt leider auch nicht.
Geronimo
Hoffentlich gibt es vorab eine Anleitung, was man alles ändern muss, damit das weiterhin klappt, denn sonst muss man richtig viel Zeit für das Update einplanen.
Alexander Ebert
Einige Stile setzen leider aus Bequemlichkeit auf exzessive Änderungen von Templates, obwohl die meisten Änderung mit CSS möglich ist. Im Rahmen der Pflege und Weiterentwicklung der Software müssen wir von Zeit zu Zeit auch Anpassungen der Templates vornehmen, um diese auf den aktuellen Stand zu bringen.
gn5VmUKCtv6ekrMf
Aus Bequemlichkeit auf exzessive Änderungen von Templates? Was ist das bitte für eine Aussage?
Vielleicht will einfach nicht jeder so ein 0815-Gedöns wie auf WoltLab.com haben und identisch aussehen. Ich verstehe jeden, der das Layout komplett umwirft um kreative Designs zu schaffen.
Dass das dann Wartung bedarf, versteht sich von selbst. Die Frage ist immer nur ob die Versionsänderung zum Aufwand und zur gebrochenen Kompatibilität passt.
Mirco83
Gefällt mir leider überhaupt nicht, ich hoffe das ganze lässt sich per Template-Änderung in seine jetzige Form wieder herstellen.
gn5VmUKCtv6ekrMf
Das ist leider etwas komplizierter.
Mirco83
Das habe ich befürchtet.
PoooMukkel
Da bleibt dann nur die Option, auf 5.4 zu bleiben. Das Gezeigte ist für mich zumindest erstmal kein Anreiz, auf die Version 5.5 zu aktualisieren. Die Zeit, die ich für die Anpassung meiner Designs brauche, spare ich mir dann lieber und verbringe sie sinnvoller.
Mal abwarten, was noch so kommt...
Mirco83
Gibt dann wohl nur drei Möglichkeiten, entweder damit leben, Version aussetzen und hoffen das es in der darauffolgenden Version bei genügend Kritik zurück gebaut wird oder halt das jemand das per Plugin umsetzt.