Feature Wiki

Information about planned and released features

Tabs

Design Revision Part 2

Page Overview

[Hide]

ILIAS 5.0 included a major visual redesign of the platform, see Design Revision. However a number of issues is still open and should be optimized. Especially optimizations of the typography, the icons, missing content styles and optimization for use on small media screens. These things have not been included in 5.0 due to limitations in funding and in time and should be tackled with ILIAS 5.1.

1 Requirements

1.1 Typography

We should evaluate a set of standard screens and optimize fonts, font sizes, line heights and general spacing.

Kunkel, Matthias [mkunkel], May 19, 2015: I suggest to introduce a default line height of 140% for text, see ‘The 100% Easy-2-Read Standard’. This is also necessary as sub- and superscript are available with 5.1. Subscripted and superscripted characters need more space above / below to be presented properly (especially superscript), see following screenshot.

1.2 Icon Set

The SVG icon set of ILIAS 5.0 should be completed and optimized. ILIAS 5.0 has focused on the migration of many icons to SVG as possible. This should be completed and problematic icons should be identified and discussed. The size / dimensions of some icons need to be improved - especially in relation to each other.

Missing Icons

Icons to be improved

1) Preview icon (left mark) of an image isn't very clear. We wish a new version of this icon type.

F.e.

2) Icon of the "Preview" (right mark) isn't "flat" like the other icons. There shozld be a new one. For example the "monitor"-icon in 1) whithout the file icon.

F.e.

The "dummy" icon for a profil without a personal picture is old-fashioned.

=> New personal icon which fits with all other new ILIAS icons.
F.e.

Icons to be resized

  • Tagging : too big compared to other icons
  • Group : too small, persons should have higher bodies
  • Bibliography : too small, not enough height of books
  • Survey : cake's diameter should be bigger

1.3 Design Content Styles

The redesign of ILIAS 5.0 focused on the general system and left out the so-called "content styles". These styles affect the content of learning modules, wikis and other places that make use of the ILIAS page editor. Web and icon designer should make suggestions for these styles.

Kunkel, Matthias [mkunkel], June 01, 2015: Before thinking about how a new default content style should like, we need to know what style classes are needed at least. To collect and discuss future text, block or media styles I have created a new wiki page New Generic Content Style and please all interested community members to add their ideas and comments there.

1.4 UI Components Issues (especially presentation on small media devices)

With ILIAS 5.0 lots of changes have been done in the visualisation of UI components. However some of them need further optimizations like e.g. table filters (usability, responsiveness) and toolbars (responsiveness). Even if a lot of responsiveness comes with the integration of Bootstrap, there is still a huge potential to improve the user experience on small media devices. Typical use cases for these devices should be collected and possible improvements in the user interface and its components should be identified.

1.4.1 Issue 01: Fixed Menu and Anchor Links

The bootstrap way of implementing a fixed menu makes the target of anchor links (#...) dissappear behind the fixed menu. This is currently "fixed" with a very ugly workaround that tries to fix the positioning after waiting for half a second. We need a better solution for this.

// Services/Javascript/js/Basic.js
 
// fixing anchor links presentation, unfortunately there
// is no event after browsers have scrolled to an anchor hash
// and at least firefox seems to do this multiple times when rendering a page
$(window).bind("load", function() {
	window.setTimeout(function() {
		il.UICore.scrollToHash();
	}, 500);
});

Status: no change for 5.1, workaround is still in use

1.4.2 Issue 02: Keep Drop-Downs in Viewport / Overlay handling

Standard bootstrap drop downs do not stay in viewport. The current solution (il.Util.fixPosition) should be checked and improved. The function originally comes from the ILIAS Overlay component (Services/UICOmponent/Overlay) which should be completely replaced by a bootstrap implementation.

Status: Issue has been rated as top-issue, see » results of ranking. Issue is already fixed for some components with 5.2, see DR 5.1 - Issue 02: Keep Drop-Downs in Viewport / Overlay handling

1.4.3 Issue 03: Scrollable Drop Downs over Scrollable Background

Screen with scrollable content
Scrollable drop down on top

If the user is on a screen that needs scrolling to see the whole content and opens a drop down (here in the main menu) that is also scrollable. Some smartphones show an erratic behaviour (e.g. Android). Sometimes the (invisible) background is scrolled instead of the menu on top.

Status: Issue has been rated as top-issue, see » results of ranking. Might still be fixed in 5.1 beta phase, see DR 5.1 - Issue 03: Scrollable Drop Downs over Scrollable Background

1.4.4 Issue 04: Responsive Table Filters

Table filter in user administration

Table filters in ILIAS 5.0 do not use a responsive presentation. The design may be revised completely, too.

Status: No fix for 5.1, see also Responsive Table Filters

1.4.5 Issue 05: Better presentation of responsive toolbars

The presentation of toolbars and its UI compoments does not work very well if bootstrap switches to the small media screen presentation.

Status: Issue has been rated as top-issue, see » results of ranking. Fixed for 5.1 by introducing responsive toolbars, see DR 5.1 - Issue 05: Better presentation of responsive toolbars

1.4.6 Issue 06: Date/Time input fields on small media devices

Date/time input fields do not work well on smartphones and touch based devices.

Erkens, Jochen [j.erkens] 2015-06-08: HTML5 added several new input types including date, time and datetime. Currently this is no supportet by all browsers. But it might be an aditional and "easy to implement" solution for mobile devices (android, ios).

Status: Issue has been rated as top-issue, see » results of ranking. Revision is already contracted and issue will be fixed for 5.2, see DR 5.1 - Issue 06: Date/Time input fields on Small media Devices

1.4.7 Issue 07: File Input on smartphones and tablets

The presentation of file inputs is not tackled by the standard bootstrap implementation. This leads to issues where file input fields needs lots of horizontal space (e.g. mc question editing or toolbars). Styling, responsiveness and general functionality on smartphones and tables should be improved, see also JL comment on UI: Form.

Fabian Kruse, 03.06.2015: This needs also to be addressed for desktop users. I really like the examples from JL's comment. Looks like a great way to improve this!

An illustration of a confusing upload dialogue from SCORM Presentation mode.

Status: Issue has been rated as top-issue, see » results of ranking. Probably no change for 5.1, see DR 5.1 - Issue 07: File Input on smartphones and tablets

1.4.8 Issue 08: Presentation of Tree Explorer on small media devices

There are several places where ILIAS presents a hierachical tree structure in an explorer UI component. E.g. repository tree, learning module chapters/pages. Currently these explorer UI elements are just hidden on small media devices. It would be desirable to have a working presentation on these devices, too (e.g. OffCanvas implementation).

Amstutz, Timon [amstutz]: For a possible pattern solving this problem look at: DR 5.1: Issue 08: Presentation of Tree Explorer on small media devices

Status: Not changed for 5.1

1.4.9 Issue 09: Calendar views on small media devices

The weekly and monthly views do not work very well on smartphones. Also the old YUI implementations for appointments presented in overlays should be replaced.

Status: Not changed for 5.1

1.4.10 Issue 10: Print CSS

The print view presentation of the wiki (and other pages in ILIAS) is currently not satisfying, see Mantis 15657. We need to think about a general concept for a print.css.

Status: Not changed for 5.1

1.4.11 Issue 11: Rating of an object

ILIAS show the information how many ratings there are. So the overlays "Not Rated Yet" or "One rating" are not necessary.

When a user wants to  use the rating, then the first click should already open the rating-overlay. With this new user-interaction, rating is easier to use on Mobile Phones.

Status: Not changed for 5.1

1.4.12 Issue 12: File preview on Mobile Devices

The preview on Mobile phones should be improved, see pic.

Status: Not changed for 5.1

1.4.13 Issue 13: Tags and Notes on Mobile Devices

Set tags does not really work on Mobile Devices, see pic
Write notes does not work, too.

Status: Issue fixed for 5.1 due to DR 5.1 - Issue 02: Keep Drop-Downs in Viewport / Overlay handling

1.4.14 Issue 14: Download a file, Start a test, Start a survey, ...

Oftentimes used scenarios: "Using ILIAS on Mobile Devices" would be:
a) Goto the course, open a file
b) Write a posting in a forum
c) Start and fill out a test
d) Start and fill out a survey
e) Join a session
f) Finish a test

For all these activities, starting and using the suitable tool should be as easy and usable as possible. Actually, in the following casese, users must click the "Nav-bar header" before they can click the "Download Link", before they can write a posting, ...
a) When users open the info tab, the Download-link should be visible. It is not obvious why the user click first the "nav-bar header" before they can click the download link (see pic below)
b) Dito. When users are in a forum, they should see immediately the "Add new thread"-Button (no picture below)
c) Dito (see pic)
d) Dito (see pic)
e) dito (see pic)
f) Dito (see pic)

Status: Has been fixed for 5.1 as part of DR 5.1 - Issue 05: Better presentation of responsive toolbars. Additional information about issue here: DR 5.1 : Issue 14 - Download a file, Start a test, Start a survey

1.4.15 Issue 15: Presentation problems when running test

Status: Will be fixed for 5.1 during beta, see DR 5.1: Issue 15: Presentation problems when running test

1.4.16 Issue 16: Deleting submitted file in test not possible on mobile devices

Status: Will be fixed for 5.1 during beta, see DR 5.1: Issue 16 - Deleting submitted file in test not possible on mobile devices

1.4.17 Issue 17: Presentation of member in gallery

Status: Will probably be fixed for 5.1 during beta.

  

1.4.18 Bug 01: Alignment Issues

Some of the following issues are considered as bugs and should be reported into Mantis.

Click on the "Preview" Icon and the button "action" on the right side is shifted.

=> Action-menus should have the same position.

Mantis #16040
Status: Not fixed yet

Action-menu of an "item group" is a little bit shifted to the other action-menu. I understand, that we'd like to make a difference between "action menü item group" and "action menu other items", but this little displacement looks wired.

=> For a better differentiation we need an other icon. F.e.

Mantis #16041
Status: Not fixed yet

1.4.19 Issue 18: Streamlining menu styles in similar menues

In ILIAS object you see the menu item like this one above (Portfolio).
On personal desktop you see an other solution of option/choice.

=> If possible they have to look the same.

On personal desktop, there are two different size of activated options.

1) big icons in "my bookmarks".
2) small icons in "acitve users".

=> These Icons should have the same size.

Status: Fixed for 5.1

1.4.20 Issue 19: Icon representing a feature should be clickable

If you go with your mouse on the notification symbol, your cursor change into a "hand" symbol like it would be a link. But you can't click here anything.

=> Cursor should be a hand, but then you should activate the notification by clicking on the icon. OR cursor should be a normal arrow. 

Status: Not changed for 5.1

1.4.21 Bug 02: Important actions should have emphasised button style (green)

"Start test" button isn't green. But "Start survey" is a green button.

=> "Start test" button should be green.

Mantis #16042
Status: Has been fixed for 5.1.0 beta1

1.4.22 Issue 20: Streamlining Save actions

Proposal: Sometimes you have to click on a save button in ILIAS, sometimes things are saved automatically. To know better, if I have to save something, we could make the "Save" button in forms "green".

Status: Not changed yet

1.4.23 Bug 03: PDF Preview Background

In file preview pdfs are longer than the background-frame.

=> PDF should be smaller or background-frame should be longer (best solution would be: size of background-frame depend on size of pdf-preview-file.)

Mantis 0016043

Status: Not changed yet

1.4.24 Issue 21: Table width vs window width

Several tables (f.e. filter, permissions, some tables in test) goes over the end of a browser window, if this isn't wide enough.

=> Table width should depend on browser window width.

Status: Not changed yet

1.4.25 Issue 22: Missing icons for PD sub menues

F.e. calendar (and other menus you can open by "personal desktop" menu) hasn't any icon. Only "Mail" has one. Why?

Also the left menu to open the repository-tree appears in "Mail" but not in "calendar".

=> Same solution for this menus. Either "no icon - no tree-navi" or "no icon - with tree-navi" or "with icon - with tree-navi" or "with icon - without tree-navi".

Status: Not changed yet

1.4.26 Bug 04: Missing Column Titles

1) Each column should have a title (screenshot is from a test "matching question").

2) Each line in table should have the same thickness.

Mantis #16044
Status: Has been fixed for 5.1.0 beta1

1.4.27 Issue 23: Streamlining action menu design

Different action menu design behaviour in survey and in test.

1) Survey: You can't click anymore on a survey question to edit it, you have to open a new "Action menu".

2) Test: You haven't any "Action menu", you only can click on the question to edit it.

=> Because the usability design in 4.3 was in survey the same as in test, we suggest the same action-menu solution for survey and for test: Even in test you have "Edit, Delete Question, Move Question" to have a action menu with several options like the implementation for surveys.

Status: Not changed yet

1.4.28 Issue 24: Pagination Component used in Forums

Status: Not changed yet

1.5 Bootstrap Optimization

ILIAS 5.0 integrated the UI framework Bootstrap. With 5.1 we should try to make use of more Bootstrap concepts and to replace ILIAS style concepts by Bootstrap concepts where possible. We should gain feedback about the skin customization in 5.0 from our users and try to make the creation of skins easier.

Killing, Alexander [alex], 11 Sep 2015: Bootstrap 4 Alpha has landed! Sass, Flebox, (r)ems, and lots of other changes. We need a migration roadmap! This will be ILIAS 5.2+ of course. Migration to Bootstrap 4

1.5.1 Pushing the Use of Modals

Several views and screens in ILIAS could be improved in usability and also simplified when they are migrated to modals. Main advantage would be that users do not leave the context where they called the modal but can easily return after they entered or modified the related information. A dedicated wiki pages has been created to discuss this suggestion, to collect use cases and to decide upon it: DR 5.2 - Pushing Modals.

2 Additional Information

2.1 List of scheduled features related to user interface

3 Discussion

Matthias Kunkel, 25 Feb 2015: The Advisory Council of ILIAS open source e-Learning e.V. has decided today to give the annual funding available for ILIAS software development for implementing a second step of the Design Revision.

Alex Killing, 15 Mar 2015: We ask all to collect examples (screenshots are welcome) of problematic cases in ILIAS 5.0 (typography, icons, widgets and so on) here on this page in the discussion area.

JF 16 Mar 2015: We handle this request as a general usability improvment and schedule it for 5.1. We ask everyone to make suggestions for improvements until 12 April 2015. We will assign priorities until 27 April. Matthias will coordinate the developments, especially with the parallel kitchen sink project.

  • Killing, Alexander [alex], 2 June 2015: Personally I would give issues related to accessibility on smart phones the highest priority (if relevant for learners).
  • Starting with general UI elements: Main menu / drop down and the toolbar issues.
  • Continuing with general services (comments/notes/rating).
  • Then adressing object type related issues, starting with Files, Forums, Exercises and then Tests.
I would give optimizations on typography and icons the least priority. Content styles is something that needs a longer discussion imo.

Edit, 12 June 2015, I translated into Matthias scheme:
  • A (6) : 02, 03, 04, 05, 06, 07, 10, 14 (all general toolbar issues)
  • B (6) : 01, 08, 09, 11 (general rating handl. on smartphones), 13
  • C (11) : 12, 15, 16, 17, 18, 19, 21 (for me this translates into: making hor. scrollable on desktop), 23
I would object 20. Too many important buttons. I do not fully understand 22, not even a C to me..

Kunkel, Matthias [mkunkel], June 03, 2015: This is my current list of priorisation. A is highest and C is lowest level of priority. A-rated issues should be implemented for 5.1 in any case, B-rated should tried to be implemented for 5.1 if possible, C-rated are - IMHO - nice-to-have and real improvements but not crucial for ILIAS' responsiveness. Numbers are related to issue numbers above:

  • A (6) : 02, 03, 04, 05, 06, 07
  • B (6) : 01, 09, 13, 14, 15, 16
  • C (11) : 08, 10, 11, 12, 17, 18, 19, 20, 21, 22, 23

Lauener, Hansjörg [lauener], 4. June, 2015. This is our list of priorisation. We took the priorisation of Kunkel, Matthias [mkunkel] and wrote our changes.

  • A (8) : 02, 04, 05, 06, 07, 14, 15, 16
  • B (4) : 01, 03, 13, 23
  • C (11) : 08, 09, 10, 11, 12, 17, 18, 19, 20, 21, 22

  • 03 is not a first priority issue
  • 09: At the moment: Nice to have, a concept is necessary first.
  • 14: It is very important that users get the feeling that ILIAS is optimised for Mobile. When users just get a link to a survey (test, ...), then they should be able to immediately start the survey (test, ...). We suggest: Do not show the "Nav-bar header" when there is only ONE element: Start survey, Downoad document, ...
  • 15: First priority. Surveys and tests are typical Mobile applications, so the UI should be optimized.
  • 16: First priority: Deleting files should be possible with mobile devices, too.
  • 23: Survey got a new user-interaction with v5.0. When implementing new interactions, it is necessary to use this user-interaction in all similar ILIAS-objects. => Second priority

Jour Fixe, June 08, 2015: We ask everyone interest to give feedback until 13 June. Please use the format used by Matthias and Hansjörg. After that Matthias will provide an overall aggregated prioritization.

Erkens, Jochen [j.erkens] 2015-06-08: I 'm a littlke bit confused by the numbering. I have used the automatic generated numbers (1.4.x) now. Maybe we should remove the manual added numbers from headlines?

UPDATE: 2015-06-15:

  • A: 01,03,07,15,16
  • B: 02,05,06,10,11,14,18,21,22
  • C: 04,08,09,12,13,17,19,20,23

Kunkel, Matthias [mkunkel], June 08, 2015: Jochen, please use the issue numbers, not the numbering of the list (which is changed automatically when moving one list item). This is why I have added "Issue 01" to the headline.

Kiegel, Colin [kiegel] June 08: My order would be

  • A+: 03, 05
  • A-: 02, 06, 14, 15, 16
  • B+: 04, 07, 10, 11, 13, 17
  • B-: 09, 12, 19, 21
  • C+: 08, 18, 23
  • C-: 01, 20, 21

Kunkel, Matthias [mkunkel], June 08, 2015: Thanks, Colin, for your ranking. But please explain the meaning of your extended scale. What does A+ mean compared to A- ? I defined A as "issues (that) should be implemented for 5.1 in any case". Does A+ mean we cannot release 5.1 without having implemented this? It's not clear to me why you have introduced another scale. It makes it much more difficult for me to aggregate the given votes. And you assigned issue 21 twice instead of 22.

Kunkel, Matthias [mkunkel], June 14, 2015 : This is the result of the ranking of the 23 issues mentioned above. A-level issues were rated with 9, B-level with 4 and C-level with 1 point.

Issue

Title

Average

2

Keep Drop-Downs in Viewport / Overlay handling

8,0

3

Scrollable Drop Downs over Scrollable Background

8,0

5

Better presentation of responsive toolbars

8,0

6

Date/Time input fields on small media devices

8,0

7

File Input on smartphones and tablets

8,0

14

Download a file, Start a test, Start a survey, ...

7,0

4

Responsive Table Filters

6,4

15

Presentation problems when running test

6,4

16

Deleting submitted file in test not possible on mobile devices

6,4

1

Fixed Menu and Anchor Links

4,4

10

Print CSS

3,8

13

Tags and Notes on Mobile Devices

3,4

9

Calendar views on small media devices

2,8

11

Rating of an object

2,8

21

Table width vs window width

2,2

23

Streamlining action menu design

2,2

22

Missing icons for PD sub menues

2,0

8

Presentation of Tree Explorer on small media devices

1,6

12

File preview on Mobile Devices

1,6

17

Presentation of member in gallery

1,6

18

Streamlining menu styles in similar menues

1,6

19

Icon representing a feature should be clickable

1,6

20

Streamlining Save actions

0,8

Amstutz, Timon [amstutz], June 17, 2015: Since this page is increasingly getting packed with information we decided to factor out each issue into an own feature request. We will do that in the next days. In order to not lose track of the individual request we put them into a DC containg the number, title, FW-Entry, person currently working on the issue (responsible), it's priority and the current working status to keep you updated on the progress of this project.

JourFixe, ILIAS [jourfixe], July 06, 2015: The following issues have been top rated and should be commissioned now. For some of them, the Kitchen Sink group has made suggestions for implementation:

JourFixe, ILIAS [jourfixe], July 20, 2015: Today, we have discussed and decided upon the three postponed issues from last JF:

Kunkel, Matthias [mkunkel], August 28, 2015: Not all issues listed above can be fixed / solved for 5.1. Some have to be postponed to 5.2. Therefore, I rename this page from ‘Design Revision 5.1’ to ‘Design Revision Part 2’ and added status information for all issues / bugs. And all improvements that could not be done for 5.1 are now scheduled for 5.2.

4 Implementation

Jansen, Michael [mjansen] Fixed Issue 18: Streamlining menu styles in similar menues (different sized icons)

Jansen, Michael [mjansen] Fixed 1.4.26 Bug 04: Missing Column Titles

Jansen, Michael [mjansen] Fixed Bug 02: Important actions should have emphasised button style (green)

Last edited: 19. Apr 2023, 12:27, Kunkel, Matthias [mkunkel]