Mostra conoscenza avanzataNascondi conoscenza avanzata

UI: Header Section

1 ILIAS 4.4

The header section includes these elements:

• Header Icon
• Header Title
• Notification Bar
• Login/Registration
• Main Menu Entries
• Online Help Buttons
• Quick Search

2 ILIAS 5.0

3 Requirements

...

4 Status

• Scheduled for: Not scheduled yet (will be set by Jour Fixe)
• Funding: Required / Partly funded by / Funded by ... (please indicate if you have funding for feature)
• Maintainer: (will be set by Jour Fixe)
• Implementation of the feature is done by (company, developer)
• Contract settled: (fill in "Yes" if a contract is already settled, otherwise "No" )
• Tested by / status: (name, e-mail), (status information set after implementation)

5 Additional Information

Contact the following persons if you want to know more about this feature, its implementation or funding:

• Information about concept: (name, e-mail)
• Information about funding: (name, e-mail)
• Information about implementation: (name, e-mail)

6 Discussion

2014-11-05, ILIAS_LM:
What about Alternative 1, but the (smaller) ILIAS logo in the black(ish) header where now is written «trunk»?
Personally I don't need to see my avatar the whole day, but the less-text-advantage is nice...

HL., 5.11.2014. We suggest a 4th version (Alternative 3), combining the elements of 1-3
- The main navigation is on the left (see Pascals suggestion at Design Revision
- The Logo is in the Top bar
- Text alignement
- Less white space

Alex Killing 7 Nov 2014: About the avatar in the top bar, Matthias and I see the following advantages

• As you mentioned it always needs a fixed size (names may use a lot more horizontal space)
• It gives an incentive to upload a profile picture (ok, maybe not for all users ;-)
• It gives a clear message that a user is logged in
• It helps users that use multiple accounts

I currently think this is the best alternative to represent the feature and the necessary information. If someone wants to have this configurable, additional funding may be needed. I would prefer to first agree on a standard solution.

Pascal, 11.11.14: How about Alternative 4? We don't need any slogan or other text up to the top bar. Moving the Navgiation there would give the content more room. Furthermore this is how many other systems look like (facebook, google, sharepoint...).
Of course the colors should be others than in my mockup (bright font, background of the top bar). It this is no acceptable i would choose Alternative 3.

Matthias Kunkel, 20 Nov 2014: Thanks for all the feedback already given. Finding a good solution for this interface element is very important for the acceptance of the new look of ILIAS. However, several issues have to be taken into consideration to find a sustainable solution:

• The branding bar is important for a lot of ILIAS users. They are adding the logo of their institution or company, often accompanied by a background image. This kind of customization can easily be done with the current design (see Beta1 status).
• The logo used in the branding bar can have different sizes. The current branding bar allows different sizes, no matter if it is a square like the ILIAS logo or a rectangular one. This flexibility would get lost when adding the logo to the top bar, like done in alt. 3 and 4. Such a design works only with a very few logos.
• Showing the ILIAS logo at the right side like in Alt. 2  is  unusual. And I see a conflict with the user image top of the current logo.
• Having the main menu entries and all top bar features in one row is dangerous when you add main menu entries (by using the very popular main menu plugin). The row can quickly be overloaded.
• I do not see a problem in having the main navigation at the right side. At ilias.de we do this for more than a year - and I think it is easy to use. But that's my personal view and I can understand if users expect to have the main menu left-aligned.

My favourites are

1. the current implementation and
2. alternative 1 - as a compromise to have the menu left-justified.

JF 24 Nov 2014: We would like to try out "Alternative 1" and to optimize the location (esp. vertical) of the main menu entries.

7 Implementation

...