The Top Navigation contains a various types of elements. Further, the space is limited and the elements that need to find a place there is growing (see e.g. Background Task Service User Interface).

On small screens several layers can overlap each other.
F.e. menu ("hamburger menu") overlaps Content -> Help overlaps menu and content (online help is only available in German).
Help and Content can't be used beside each other. You have to close help sidebar to click to another content. If you open help again, your last visited entry won't be displayed anymore.

These navigation elements have different tasks and benefits but are content related, f.e.

• tree and search offer only a different kind of view on the content.
• Some are kind of quick navigation (like Main Navigation),
• some are quick navigations in combination with notification alarms (like Top Navigation).
• And some are a way to navigate through a predefined path (like Breadcrumb and Tree).

Desktop and Small Screen View

Our second task is to bring together desktop and small screen view even more closely. That’s because page layout revision has been made with components, which are well-known in mobile and desktop application context.

Expandability and Assignment

The crowded top navigation (especially for small screens) already shows an important issue for the new page layout: It isn’t arbitrary expandable. There is also no guideline, in what case a functionality will get a place in top navigation bar.

Side effects of revision

Breadcrumb is more visible and reflects better its importance.

2.3.1 Meta Bar

Meta bar for branding section and top menu actions. Could be always available or get smaller if user is scrolling.

Branding Section consists of the logo of the application and it's name. Upon click, the user is referred to the starting page. Main Menu elements (like "Personal Desktop" and "Repository") are transferred completely to Main Bar.

Top Menu is placed on the same line as the Branding Section. However it will be purged. A clear concept defines, which items are available in the Top Menu too (see chapter 2.2). Items with push notifications will be unified in a "Notification Center" (see Notification Center). Only items that make use of counters to inform the user about news (notifications) may stay in this notification center element. 

The details of such a Notification Center must be defined separately: Notification Center

"Main bar" and a "slate" give access to all main navigation points, where a user needs to go to get all relevant informations and working possibilities.

2.3.2 Main Bar

The main bar contains various "entries". An "entry" groups the items or widgets in it. We suggest a main bar on bottom of screen that indicates an overlay in full screen size ("drawer" like).

Behaviour

The main bar can be either collapsed or open. In it's collapsed form, the main bar only shows the glyphs of the respective items and it’s labels.

• If opened, it overlaps the main content of ILIAS and shows content of the chosen entry (e.g. accordion for menus or simple functionalities of a specific service). That overlay is called "slate" like in desktop version.
• To close the main bar, you can click on a close icon at the top of the slate or you can click on glyph in main bar again to close the overlay.

Good default, but customizable

As default we would provide as less as possible entries in tab bar because of readability (see Hick's Law). Because institutions have different main focus and different activated functionalities, adaption is needed. Therefore a Customisable Main Menu is introduced:

• Sorting can be adopted as system administrator for own installation.
• Number of entries can be adapted by system administrator.
• Sorting decides if they are visible in small screen view: If there are more than 5 entries, 4 entries will be shown, the other ones will be pushed into a "More" entry.

The details of such a Customisable Main Menu must be defined separately: Customisable Main Menu

What happens with the current "main menu"?

Which elements are placed in which "item group" is determined in a separate discussion line: Default Configuration of Main Bar Items (ILIAS 6)

What happens with "Overview" page on current Personal Desktop is determined in a separate concept: Overview Personal Desktop Revision

2.3.3 Slate

• If opened, it overlaps the main content of ILIAS and shows content of the chosen entry (e.g. accordion for menus or simple functionalities of a specific service). That overlay is called "slate" like in desktop version.
• To close the overlay, you can click on a close icon at the top of the slate or you can click on glyph in main bar again to close the overlay.

Mockup see: Mobile - Slate

2.3.4 Tree

same like Desktop

Note that the tree behaviour will need to be discussed in detail as soon as the PR for the tree is made: Tree for General Layout and Menu Revision

2.3.5 Local Main Bar Entry "Tools"

same like Desktop

Mockup see: Mobile - Tools

2.3.6 Scrolling Behaviour

The meta bar is minimized during scrolling: This means that the breadcrumb is included in the meta bar. The glyphs available are combined in a common menu. In this menu you can see a notification-glyph as soon as a new notification needs the attention of the user.

By clicking on the collective menu, the entire meta bar is displayed in full size again.

The main bar remains. The content slides under the minimized header.

Mockup see: Mobile - Scrolling

2.3.7 Breadcrumb

The breadcrumb has a fixed place in the header area. Only the last node of the breadcrumb is displayed. A glyph indicates that the breadcrumb can be extended. This opens a full-screen overlay in which the last node to the first node (for example, repository) is displayed from top to bottom. The overlay can be closed by clicking on the breadcrumb again in the header (possibly additionally "x"-close-glyph as with other overlays). When clicking on a breadcrumb item the breadcrump is closed and the called content is shown.

Mockup see: Mobile - Breadcrumb

2.3.8 Kiosk and Presentation Mode

same like Desktop

2.3.9 Widescreen and Customization

No Widescreen.
Customization same like Desktop

2.3.10 Plugin-Slot

same like Desktop

The current layout of ILIAS can be structured as follows (see  KS Pipeline Document for a more complete description):

-----------

Header Section

• Branding Section 
• • Logo
  • Main Menu
• Title Section (Name of Application, e.g. ILIAS 5.2 Evaluation)
• Top Navigation (Mail, Search, Help, User Images etc.)

• Breadcrumb
• Content Title Section
  • Icon
  • Title
  • Description
  • Comments, Notes, Tags, …
  • Actions
• Tabs
• Subtabs
• Content
  • Sidebar Left
  • Center Content
  • Sidebar Right