Global Administration UI Revamp

[amilica]

I’m back on this, sorry for the big delay.
There is a lot to read so if you are not tagged in these following lines, you can skip to the end where I’ve made the conclusions (TLDR).

What useful info to have on the GA home?

@vmassol

Still wondering if we could display something more interesting in the GA home page than documentation links. Admin-only news might be more interesting, idk (this would be what can be seen at https://www.xwiki.org/xwiki/bin/view/Blog/What’s%20New%20for%20XWiki%3A%20Admin%20User ).

• At least that will let admins know about new releases (of XWiki and extensions). My only hesitation is that this info is already available in the what’s new feature (but not just admin news there, even if currently most news are admin news).

It is a good idea even though the info would be, at the moment, duplicated. For me GA is a much more visible place than the the What’s new section and, so, it makes sense to have some news in GA too.

Another idea would be to let this area of the page be editable and the admin can configure with any macros or quick info he wants to remember.

For example, if he has Admin Tools Pro or Analytics Pro, maybe he wants to see a combo of some macros from these Pro Apps. He can even create a mini admin dashboard on the homepage of the GA with the things he searches most for.

This idea is probably more complicated to implement, I imagine, and may not be that worth it.

Thus I think it’s a good idea to either stick with the info box or with the What’s new section.

Links to documentation

@vmassol

I’d point to the Administration Guide instead of general documentation.

good call

Separate sub-proposal no.1

@vmassol

I think we need to discuss more globally your idea of putting question mark icons after the title (and doc link to the right of level 2 headings) since this is not something we’re doing elsewhere AFAIK and if we want to go in this direction, we need to generalize it (for example, in user profiles view just to name one other place).

I will keep this part of the proposal as a separate small proposal. I think we can work on the main improvements without this part and then come back on them.

Behaviour of clicking on section (not sub-section)

@vmassol

If I understand correctly, when clicking a section (like “Users & Rights”), the “Welcome to Global Administration” box will appear or remain, right? And users need to click a subsection to see the content change.

We can go on 2 routes here:

1. yes, clicking a section will open the Welcome to GA box, clicking a subsection reveals content
2. no, clicking a section doesn’t do anything (other than expanding subsections in the menu), only clicking a subsection changes the main content

I would go more on the second version because I think it might become annoying to see Welcome to GA (or whatever we choose to show on default) every time you’re navigating towards something.

Collapse menu button style

@CharpentierLucas

For the style used for the expand/collapse button. IMO we should use standard button styles, i.e. rounded corners and default colors. Nothing prevents us from putting the text into the button itself, to get a final style similar to the page create button:

If I understand correctly, you’re reffering to the button that expands/collapses the side menu, right?

I’m okay with having the circle icon button have the same style with the buttons you’ve showed, but…

I think, visually, it’s much better to have the label of the button outside of the button. This is because:

• as a circle, it stands out in comparison to the other shapes in the UI
• as a circle, it doesn’t occupy as much space in the whole UI, making it more feel more light
• as a circle icon button, it will feel familiar to people that used to “single chevrons mean expanding/collapsing, NOT go back or forward”

Tooltip accessibility

@CharpentierLucas

his is a detail that might come only for implementation but I figured it’s still important to mentation. This activation could be on focus or when pressing enter (“clicking” the button with the keyboard).

Great idea, thanks a lot!

UX of menu

@MichaelHamann

New users I watched were using the icons in the main part of the screen, not the menu on the left. Maybe removing the entries in the main part helps to put focus on the navigation, but I’m not sure.

I agree that, at the moment, new users probably use the main content navigation as it is more obvious visually (bigger, more coloured).

In its absence, users will adapt (they always do), especially because the white space lets the eye focus on one thing at a time.

@MichaelHamann

Maybe this kind of UI pattern is not obvious/well known enough?

This UI pattern is similar to a lot of System Settings menu UI or File Explorer / Finder, I doubt it is not understood by users.

UX of collapse menu

@MichaelHamann

In that same direction, I’m wondering if that “Collapse menu” link is discoverable enough and if users will easily find how to expand the menu again.

Regarding discoverability: if we make it more coloured or generally more perceivable (by size, shape), it will take focus from main content and make the UI feel more cluttered.

You can see a few lines up how the collapse menu button looks if it’s rectangular (in reply to Lucas). Personally, I think the round one works better for the arguments I listed.

Regarding knowing how to expand again: if they collapsed the menu, they will instinctually check the same place for expanding it.

If you think it would help, we can make the expand icon of the button not a chevron, but a menu icon. The collapse icon would still be a chevron. This is not a common UI pattern and could cause confusion for users used to having an opposite-direction chevron for expanding.

Vertical space on mobile

@MichaelHamann

Also, this link seems to take quite some vertical space also for the main content. How would this collapse menu button work on mobile?

Our biggest problem on mobile is that the menu takes the whole vertical space available.

I’d actually propose to have the menu collapsed by default on mobile as it makes getting to the actual content a pain. (this would probably be the easiest way to save vertical space on mobile, though not the ideal solution which is much more work)

@MichaelHamann

The white space left of the “info box” and the white space inside the info box looks quite strange. How would this white space change depending on the screen size?

While it is slightly strange, it lets the UI breathe, letting each component be easily perceived.

On a tablet, the space between the side menu and the box would just become smaller.

On a phone, the box would occupy the whole screen and after it, there would come the menu.

Sub-proposal no. 2

@MichaelHamann

For example, you suggest removing a shadow from the search bar. In my opinion, we should keep this consistent with all other inputs in XWiki - we could change them, but then we need to change all of them. Same for the placeholder.

Agreed. My proposal ideally would affect all inputs and placeholders. Will make smaller separate one.

Sub-proposal no. 3

@MichaelHamann

This is not true. Extensions can add their own subsections. We need a proposal how the documentation link should be provided.

Ah, yea, I missed this issue. I will add it as a sub-proposal.

Conclusions / final proposals (TLDR)

• we’ll only have one menu, the side bar menu

• in the menu, clicking on a section (not a sub-section) does the following:

  1. either opens the homepage of the GA
  2. either does nothing (waiting for the user to click a sub-section and display the main content)

• the sidebar menu will be collapsable

  • the collapse/expand button will either be
    1. a chevron in a square (light gray colored) or
    2. a normal button similar to the Create page button

• the default main area when visiting the GA will be:

  1. a new textarea xpropriety to the XWiki.XWikiPreferences xclass in which by default we have what’s new articles, but can be populated with any macro the admin wants
     • when showing articles, the tile of the section to XWiki Admin News
  2. an info box with all the useful links or

• if we go with option 1 (the info box), the link to the documentation will be the one to the Administration Guide, not the general documentation

• on the mobile version, the menu should be by default collapsed when selecting a sub-section (as right now it occupies A LOT of vertical space)

• input field style and placeholder text style will be discussed separately

• “See documentation” on the same line with the title of the subsection will be discussed separately (as it also concerns other parts of the UI)

  • the link to the documentation is not that simple to extract so we need to make a proposal for the technical implementation

• the tooltip with the question mark besides Glabal Administration must be discussed separately (as it also concerns other parts of the UI)

  • for the tooltip to be accessible, activation could be made:
  1. on focus or
  2. when pressing enter

Thanks a lot for reading this! WDYT?