Log-in UI finetuning

[soxofaan]

A couple of remarks/ideas regarding current login UI on https://editor.openeo.cloud/

(FYI: I used Firefox 92 for screenshot)

This "landing view" is a bit confusing: you have buttons at the top and a button at the bottom. The ones at the top look like buttons (and even have a "cursor: pointer" look), but don't really do something, except acting as as tab switchers. The one at the bottom looks less like a button that does something (e.g.less rounded corners than the top ones, doesn't have "cursor: pointer"), and looks less important because it is smaller.

• change the top button to a real tab representation
• make bottom button look more like a real button that triggers an action (e.g. cursor: pointer)
• above OIDC login button: add text to explain that a popup will be opened to set expectations for the user.
• bottom buttons: make bit larger (e.g. same height as text fields of "Internal")
• "No credentials": call it "guest mode"?
• as "Internal" is something we want to avoid being used: make it least favorable option: put it last, grayed out or smaller text ?

[m-mohr]

This "landing view" is a bit confusing: you have buttons at the top and a button at the bottom. The ones at the top look like buttons (and even have a "cursor: pointer" look), but don't really do something, except acting as as tab switchers. The one at the bottom looks less like a button that does something (e.g.less rounded corners than the top ones, doesn't have "cursor: pointer"), and looks less important because it is smaller. [...]

• make bottom button look more like a real button that triggers an action (e.g. cursor: pointer)

The button at the bottom is the default (real) button style of the browsers, but these may differ a lot between vendors. So styling them (e.g. an active style that you need for tabs) is very hard as you may mess up with the default styling. At the same time, you want to give users what they expect. Here's an alternative with the native button look in my environment:

I don't think this makes it better? So keeping it as it is for now until a better solution comes to mind... Also, if I want to get right of the default styling (which I should?), I'd need to do it throughout the whole editor, which will take a bit more effort.

• change the top button to a real tab representation

I've tried that, but it doesn't look good at all. Also, see example above, some providers need multiple rows to show all options, which also is an issue with real tabs.

• above OIDC login button: add text to explain that a popup will be opened to set expectations for the user.
• bottom buttons: make bit larger (e.g. same height as text fields of "Internal")

Both done:

• "No credentials": call it "guest mode"?

Hmm... yeah, that needs a rename, but I'm not sure yet how to call it. I think previously we had "Discovery mode", too.

• as "Internal" is something we want to avoid being used: make it least favorable option: put it last, grayed out or smaller text ?

With regards to openEO Platform, I'd think that we should even remove it from production, see https://github.com/openEOPlatform/architecture-docs/issues/107 For all other back-ends, it's not sure what is the most favorable option (e.g. for GEE it's the most favorable option).

[soxofaan]

maybe switching to vertical tabs addresses a couple of issues raised here rough sketch of how that might look:

(I didn't include icons in this mockup to not loose too much time on it)

[m-mohr]

Thanks for the mock. I'll keep this in the loop for a future iteration although there are likely changes required (e.g. description won' t fit into the tabs as longer descriptions provided by the back-ends would break it...)