cluster health: position of the emoticon

[tiborsimko]

A cosmetic UI issue.

(1) In the page footer, on any page, we have menu emoticons shown on the left of text:

In the cluster health page title, we have the emoticon shown on the right of text:

It would be nice to harmonise this and e.g. always shown emoticon on the left of the text.

(2) If we choose to use emoticons, we could invent one for "Your workflows" that currently does not have any:

Ditto for the personal pages such as:

Alternatively to adding new emoticons, we can actually drop the one from the Cluster Health page title, to have title without emoticons everywhere. (And keep emoticons only in the page footer.)

(3) Note also the US English capitalisation of titles "Cluster Health" and "Privacy Notice" vs British English capitalisation of titles "Your workflows", "Your profile", "Your quota", etc. Since we usually use BrE over AmE, let's harmonise titles to only use capital letter for the first word of a page title. (I.e. change the current text to have "Cluster health", "Privacy notice", etc.)

[giuseppe-steduto]

I like the idea of adding emoticons to the titles.

I tried to find a few possibly suitable emoticons in the React Semantic UI package, from which the other icons are taken, both for design consistency and to not add more dependencies. For the personal page we could use, respectively, the key, gitlab and circle notch icons. The result would be similar to this:

Finding an emoticon for "Your workflows" title in the Semantic UI icon catalog was a bit harder. One idea could be to use the list one, referring to the fact that this section is a list of the dispatched workflows: A more "creative" approach could be to use the fork icon, but upside down, recalling the idea of two parallel workflow steps that are spawned from the parent step:

[tiborsimko]

@giuseppe-steduto If we go the emoticon way, can you please look through all the other exposed web pages such as https://reana.cern.ch/launch and find suitable leading emojis for them?

[giuseppe-steduto]

Launch on REANA

For this I think the rocket icon is the right choice, since it's also consistent with the one on the "Launch" button

Cern Privacy Notice

For this one, IMO we could either choose secret user,

the book one, giving its look a more formal/legal appearance,

but maybe the best choice is using the privacy icon (which is an alias for the key icon), as it's also the one used in the privacy policy link in the footer

Also, in general, I don't think we should add emoticons/icons to the titles that are smaller than H2 (like the "how is your data used" one)

Welcome to REANA

This is the title that the users get on the home page, when they haven't started any workflows yet. I didn't find very suitable emoticons for this in the Semantic UI catalog, but maybe one amongst group, check, or a generic one like star or gem will do:

Alternative - use Unicode emojis

We could also not rely on the Semantic UI Icon component, but rather use the unicode emojis directly as text 🔑📊🧑‍💻. The results would be similar to these: It may look nice, but maybe it's a bit too humorous or inconsistent with the rest of the design. We can discuss.

[tiborsimko]

Personally I prefer a very sober professional zen-like style, so either no emoticons, or the B/W ones.

BTW another area where we might want to change the emoticon-title vs title-emoticon order is in the contextual hamburger menus:

(Although some may also consider it a good thing that titles have emoticons in front, while hamburger menu have icons in back, to better differentiate the two. :thinking:)

[mdonadoni]

I personally (weakly) prefer not having emoticons anywhere, thus dropping the one in the "Cluster health" page.

However, if we decide to add icons everywhere, I would then avoid color emojis and I would suggest:

• tachometer alternate or pie chart for "Your quota"

  

• I like the fork icon for "Your workflows", but an alternative could be flask

  

• star is the one I like the most for "Welcome to REANA" among the ones proposed

• Regarding "Privacy notice", I would avoid book (already used for docs) and key (already used for the REANA token). Other than secret user, we could also use shield or lock

  

[audrium]

I'm also slightly in favor of uncluttered UI without emoticons anywhere. I personally like how clean it is now and think that emoticons would bring too much distraction (especially colored ones) to the UI.