Neuerungen in WoltLab Suite 5.5: Überarbeitung des Benutzermenüs und mobilen Seitenkopfes

Alvaro Reyes on Unsplash

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.

Überarbeitung des Benutzermenüs

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:

  1. Schwierige Bedienung auf Touchscreens, etwa bei sehr großen Tablets oder im seit Jahren stark wachsenden Segment der Notebooks mit Touchscreens. Dies schließt auch „Convertibles“ (Notebooks, die auch als Touch-Tablet verwendet werden können) mit ein.
  2. Lückenhafte Umsetzung der Barrierefreiheit mit Folgen für die ordnungsgemäße Bedienung durch die Tastatur sowie andere Hilfsmittel.
  3. Inkonsistentes Erscheinungsbild, bei dem funktionell identische Komponenten unterschiedlich positioniert waren.
  4. Die Farbgestaltung basierte auf mehreren verwandten Elementen, wodurch es teilweise zu Darstellungsproblemen kam.

Neues Kontrollzentrum

Kontrollzentrum (Unschärfe nur zur Illustration)


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.

Verbesserte Bedienung von Benachrichtigungen, Konversationen und mehr

Benachrichtigungen (Unschärfe nur zur Illustration)


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.

Anpassbarkeit und Barrierefreiheit

Farbgestaltung im Stil-Editor


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.

Verbesserter Seitenkopf auf Smartphones und Tablets

Seitenkopf (Smartphone, Unschärfe nur zur Illustration)


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.

Hauptmenü mit aufklappbaren Unterpunkten

Hauptmenü (Smartphone)


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.

Grundlegend überarbeitetes Benutzermenü

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.


Benachrichtigungen (Smartphone)


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.

Kommentare 19

  • @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.

    • 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.

  • 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.

    Gefällt mir 2
  • 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

    • Das neue mobile Menü gefällt mir leider auch nicht wirklich. Die zwei Icons + das Avatar rechts sind mir zu monströs, nehmen ungewohnt viel Platz weg und ziehen die Aufmerksamkeit auf sich.
    • Das neue Hauptmenü mit den Untermenüpunkten gefällt mir, jedoch finde ich nach Links gibt es noch zu wenig Padding (1. Ebene).
    • Die Aufteilung des neuen Benutzermenüs gefällt mir, jedoch scheinen die Icons viel zu groß (vergleiche Facebook mobil, ca. 20px).


    Grüße

    Danke 4
    • This

    • 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

    • 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.

  • Da dürften sehr viele Stile dabei kaputtgehen. :/

    Gefällt mir 1
    • 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.

    • Nexus von CLS-Design klappt leider auch nicht.

    • 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.

      Danke 1
    • 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.

    • 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.

      Gefällt mir 6 Danke 1
  • Gefällt mir leider überhaupt nicht, ich hoffe das ganze lässt sich per Template-Änderung in seine jetzige Form wieder herstellen.

    Gefällt mir 5
    • Das ist leider etwas komplizierter.

    • Das habe ich befürchtet. :(

    • 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...

    • 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.