With the previous version, WoltLab Suite 5.4, we focused primarily on technical revisions and set the stage for WoltLab Suite 5.5. The focus in this version is on functional revisions of the user interface as well as usability and accessibility improvements. With this article we would like to provide a first glance at the upcoming version WoltLab Suite 5.5.
The user menu has essentially proven itself over many years in terms of structure and functionality, however, some weaknesses became apparent over time, which we are addressing directly with WoltLab Suite 5.5. The redesigned and technically modernized menu aims to eliminate four major core weaknesses of the previous implementation:
For the redesign, the focus was on creating a clear structure with systematic formatting in order to make the content quicker and easier to grasp. The menu items for the settings have been redesigned and now link to the entire section, the sub-items now only have informative character. This revision also allows a comfortable and concise operation in combination with many installed extensions.
The menu items for notifications, conversations and moderation have been revised and use a uniform layout and control concept. The structure is strongly modeled after the previous layout to allow for a smooth transition from earlier versions. Notably, the icon buttons have been visually enlarged and offer larger click areas to make them comfortable to use on touch screens.
Desktop notifications are no longer automatically enabled; they can be enabled or disabled via the box that appears in the notifications. The box is only displayed as long as no decision has been made and then disappears automatically.
The color scheme of the menus can be adjusted directly via the style editor, the color palette thereby allows the comfortable adjustment of all color values used and offers the familiar live preview of the appearance. Existing styles are fully compatible with these changes, but depending on the color scheme, it may be appropriate to color match the new menus.
From the very beginning of the implementation, we have consistently paid attention to enabling the best possible operation via keyboard as well as via assistive devices (for example, screen readers or VoiceOver). In addition to the consistent use of suitable ARIA attributes, this is also achieved through active focus management. For developers, we have created a safe API that can be used to provide their own content in the menu while maintaining accessibility.
The page header has been redesigned to provide a much better user experience and more functionality. The logo has been moved to the left side and has more room due to adjusted spacing, so that even wide logos can be incorporated in a meaningful way. On the right side you can find the main menu, the user menu and a button to access the site search.
With the revision of the main menu, menu items open directly within the listing and thus form an easily comprehensible structure in which the path is recognizable at all times. These adjustments also benefit accessibility, where we were able to achieve significant improvements here. In addition, this allows us to implement a uniform operating concept together with the admin panel to make it easier for new users to get started.
Notifications are by far the most important aspect of the user menu and will be more important in the future. The previous menu with its countless links gives way to a tidy screen with easily accessible tabs for accessing the individual sub-items. When the user menu is accessed for the first time, the notifications open directly and are thus directly accessible without any additional effort.
The revised user menus are reused in this view and integrate directly into the view, with overflowing content automatically becoming scrollable. At this point, the better optimization of these menus for touch operation in particular comes into play, offering familiar operation on both smartphone and desktop.
15
25
7
