Show Advanced KnowledgeHide Advanced Knowledge

ILIAS Redesign 2009

1 Description

At a local ILIAS-user-meeting (ILIAS Baden-Württemberg/ILIASuisse) the first proposals of an ILIAS-redesign have been shown by Barbara Sauermost (PH Zürich).
Several proposals have been rejected by the audiance because of reasonable arguments like missed space for long titles/descriptions or usability causes.
Here the first proposals:

Redesign Volume 2

After the last ILIAS-user-meeting in Konstanz it was decided, that Barbara works further on variante_2

Changes made according to the input at the meeting resulted in this:
Variante_2_neu
Which was not yet satisfying.

Another try was based on an old idea, that all is in registers:
Variante_7
Variante_7_a
Which works not bad.

To keep the header clearly apart from the rest seems best for the eyes:
Variante_6
Variante_5

So, now we really would like to get your feedback, feel free to write what crosses your mind.

Redesign Volume 3 and Redesign Volume 4 with explanations from the Designer you'll find below in "discussion".
Newest Version: Variante_8

2 Status

• Scheduled for Release: Release 4.1 or 4.2
• Funding: Funded by PH Zürich
• Development: Feature is to be developed by PH Zürich & LEIFOS

3 Additional Information

• If you want to know more about this feature, its implementation or funding, please contact: Barbara Sauermost / barbara.sauermost[at]phzh.ch

4 Discussion

Jour Fixe, 10 August 2009:

We highly appreciate the new screens. In the JF we all voted #6 as our favorite! Additonal feedback:

• We suggest not to add decorative elements at the right side like in #7 because this space will be needed in the future for help buttons.
• The little space between the new tree explorer icon an the tab in #6 is better then no space in #5.
• The ILIAS logo should be placed with a little margin to the top.
• The font weight should not change in the main menu to distinguish between the active and other menu items (as realised in #5). Otherwise the text will move when clicking from one menu item to another.
• We suggest to add "rounded corners" to the background.
• We want to keep the object icon for the title / description and indent both textes.

iLUB. We also discussed the screen revision. We agree witz JF that #6 is a really great design. Additional to the comments of JF, we have some additional feedback:

• Simplify the logout: Instead of "Angemeldet als Barbara Sauermost >> abmelden" - make one Link: "Barbara Sauermost abmelden"

• We think we should align the following object to one left (optical) axis: ILIAS-Logo, "Persönlicher Schreibtisch", breadcrumb, title, content-frame, "Link zu dieser Seite..".
• Please also align the the following object to one right axis: "Barbara Sauermost abmelden", the search-field and the right content-frame

• Add some little space between the tabs "Inhalt", "Eigenschafte" and "Rechte" (similar to screen 2_neu).

• Make rounded tabs (a little bit).

• Rounded corners: Not important for us, maybe its just a hype? And: If you open the tree navigation - then this looks strange.

• Implement an overall concept "Where I am"! with dark blue text (like Magazin). All the following text-elements should be dark blue: "Magazin", "Ausbildung" (second element in breadcrumb), "Inhalt" and "zeigen". Persönlicher Schreibtisch, Suche, Mail (in Breadcrumb) and the subnavigation (ordnen, verwalten) should be lightblue.

• ! No underline in the submenu ("zeigen"), the underline is reserved for links. Just make it dark blue.

W. Randelshofer, HSLU, 2009-08-13.

We very much appreciate the design draft. We have the following suggestion:

• Move the "Contents changed" notice into a separate column. Use a quickly recognizable visual cue, for example a spark symbol, instead of a textual notice. Rationale: The purpose of the "Contents changed" notice is to let users quickly identify which items have changed or are new. Representing this notice as text, along with all other notices that are presented for an object, defeats the purpose of this function.

Since this function is modeled after the BSCW event notification service, we would welcome to use a similar visual cue like in BSCW.

The screenshot on the following page, shows a BSCW folder featuring a separate column labeled "Events" for event notifications:
http://public.bscw.de/bscw_help-4.4/english/sec-01040100.html

The spark symbol is depicted on the following page, as "Create Event":
http://public.bscw.de/bscw_help-4.4/english/sec-03040200.html

PHTG

We could live with both number 6 and 2, whereas here we have a slightly preference for 2.
What we miss (compared to the Konstanz proposes): the above named "rounder corners" for tabs.
What we suggest (also above named): some space between above border and ILIAS logo.

Our overall impression to the new designs we already told you in Konstanz: clear structure, nice design, less "techy" - we love it.

Redesign Volume 3

Thanks to all of you for your valuable feedback!
I think a lot of it is clearly necessary and I just changed it.
Seven points I would like to discuss.

Rounded corners to the background
I strongly advise against this suggestion. Normally this is used if the width of the website is fix and there is a nice background or the background is needed to fill the space on a bigger monitor. In our case we don’t have a background, so therefore it looks like a mistake, it is also irritating to the eye because a entire unnecessary information is given to it.

ILIAS Logo - Little margin to the top
I made it, but I don’t agree. The problem of ILIAS is, that there is too much information, which the eye has to take in. Therefore I would calm the design when ever it is possible. To take the logo up to the border calms the design.
Variante_6_e (as it was)
Variante_6_e_4 (new)

Icons
As mentioned at the ILIAS meeting in Konstanz, Icons will follow as soon as the design is chosen.

Align objects to the left (optical) axis:
ILIAS-Logo, "Persönlicher Schreibtisch", breadcrumb, title, content-frame, "Link zu dieser Seite..".
I tried that out, please let me know which you prefer.
Variante_6_e_2
Variante_6_e_3

Add some little space between the tabs "Inhalt", "Eigenschaften" and "Rechte".
Well, I also tried that out. Please let me know which one you prefer.
Variante_6_e_4
Variante_6_e_1

Rounded corners to the taps
Do you really think that’s better?
Variante_6_e (as it was)
Variante_6_e_4 (new)
or Variante_6_e_2 (new)

“Contents changed” marked with a star instead of text
The suggestion of Werner is much appreciated here in Zürich.
We also think it necessary. But of course it is not our decision, so what do you think?


The new links are:
Variante_6_e_1 Taps with gaps, content not aligned to the left
Variante_6_e_3 Taps without gaps, content not aligned to the left
Variante_6_e_2 Taps without gaps, content aligned to the left
Variante_6_e_4 Taps with gaps, content aligned to the left

The old was:
Variante_6_e Logo without margin to the top

Comments of iLUB - University of Bern

• ILIAS Logo - Little margin to the top: We think a little margin is better: 6_e_4
• Align objects to the left (optical) axis: Align to the left (6_e_2) is better, but the tabs should not be aligned to the left
• Add some little space between: We do not see a difference!?
• Rounded corners: Both are OK

• The best solution: http://www.phzh.ch/design/ILIAS/variante_6_e_4.html - but the tabs should not be aligned to the left

[HL] I asked the usability-team - what they mean to Werners suggestion: "Move the "Contents changed" notice into a separate column. Use a quickly recognizable visual cue, for example a spark symbol, instead of a textual notice. Rationale: The purpose of the "Contents changed" notice is to let users quickly identify which items have changed or are new.".

They (me also) think, that icons could help to identify quickly which items have changed.

But: If we implement this sun-icon (sun is not self-explanatory), maybe other institutions suggest other icons to implement. And then, maybe in some years, ILIAS looks like BSCW with tons of icons.

First: We do need an icon-concept / icon-guideline: When do we replace text with icons? Where we will implement icons? Do we really want to add "new" icons in categories, in courses, in tools? If yes, do we implement Mouse-over? We also must think about the self-explanation for all icons (e.g. sun=new or changed content?).

Pascal, 7th September '09

I see that a sun-icon does not represent the "content changed" at a first glance, but this is an overall problem of icons. Look at a mac or windows machine. There are several icons, there meanings you simple have to learn. I think this is also true for the "content changed" icon, whatever it looks like.
I think Icons have to be used economically, but here it is a good choice to use one. If you don't understand the icon you don't really loos functionality, this is a big difference to not recognize e.g. a safe-icon.

Jour Fixe, 07 SEP '09:

• We prefer the ILIAS icon like it is placed in version 6. Otherwise it looks a little bit like an error. And the logo character gets lost without a full surronding.
• We prefer tabs with rounded corners and margin because they are more tab-like. First tab should have indent (e.g. 6_e_1)
• We prefer a clear distinction between tab content (all inside tab!) and background (area with title and breadcrumbs). Background should be lightly grey, tab content white.
• The green cross for adding items should remain. It is maybe the most important function on a page and should be recognized immediatelly (remember the usability report).

Would it be possible to present a revised GUI incl. icons for the Budapest development conference?

Pascal, 7th September '09
Yes, we will present a version including icons at the Dev. Conf. in Budapest.

Redesign Volume 4

Variante_8

To unite the two opinions that the „Neues Objekt hinzufügen“ should stand out and also shouldn’t have the green cross I marked it yellow – that way it stands out, is correct in the way it functions and makes a fresh spot to the design.
We also changed the position of the „Neues Objekt hinzufügen“ for the reason that it doesn’t jump when we navigate in ILIAS. „Calender“, „News“ etc. is placed level with the box „Categories“ to calm the design and at the same time avoid ugly gaps. Logically to this, if there is an entry text it will take the whole width of the box.
The side lines of the „Categories“ box disappeared, since they are only confusing as long as we choose white as background for the big box and the inside boxes.
The same trick I made with the „Calender“ box.

Looking foreward to your feedback!

PHTG
Looks very nice, balanced, calm and friendly to use. Barbara - thanks a lot for your efforts to make ILIAS more user friendly.

Martin, 12th November '09
Variante_8 is a realy clean design. I think it is a good design for institutions which prefer a very serios design. But I also like the actual ILIAS 4.0-design which is a bit more a Web 2.0 design. For me the the actual ILIAS 4.0-design is a little more modern and more trendy than Variante_8.

5 Follow-up

ILIAS_LM 07 May 2010
Two institutions (PH Zürich and PHTG) are already using the new CSS. Until the CSS Revision isn't funded and implemented this issue is on hold.