Global Administration UI Revamp

Development
, ,
#1

Hellooooo everyone!! Glad to talk to you all again! :star_struck:

Today I’m back to discuss, as the title suggest, the revamp of the global administration UI which is one of the first screens a new person will look into when trying out XWiki.

Current version

Look

1707125092748-809.png

Definitions

Before anything else, I used the following terms in what you’ll read next:

  • Section example: Users
  • Subsection example: Users > Rights
  • Feature = each and every thing you can set up in any subsection OR (general meaning) ability to do something in XS

Issues with the current look :thinking:

  1. looks outdated & has old-looking iconography/imagery
  2. the search bar only searches through the side menu words, not through all the functionalities
  3. the naming of the sections/sub-sections is not ideal in some cases
  4. the description of the sections is not comprehensive enough to help discover features
  5. the side menu is a custom UI that I don’t think we have anywhere else in the product

Goals :dart:

As this UI is one of the first screens any new Admin sees in XWiki it’s important that we:

  1. improve feature discoverability and understanding
  2. enhance consistency
  3. improve aesthetics

Needs :memo:

In no order in particular, The Global Admin UI needs to:

#1 have a sidebar that will stay in the same position throughout the experience for easy navigation

#2 have a search bar that searches through all features, not just the one listed as main categories in the side bar (for example, if you search “wiki description” anywhere in the Global Admin UI, you’ll get no result. Ideally, it would open Global Administration:Descriptor)

#3 have the search bar search through many variations of the features (for example, if you search for “wiki description” or “edit wiki description” or “descibe wiki” or “description wiki” they should all point to the same thing, which is Descriptor)

#4 have better, more comprehensive descriptions of the sections

#5 have better naming of the sections, sub sections or even split the sub-sections in more granular ones (in some cases)

#6 have better, more minimalistic, iconography

#7 make seeing all sections faster (in the current version, you have to scroll quite a bit and at the same time keep in mind what you already read), but without overwhelming the user with high level of information in the visible ara of the interface

#8 maybe link to documention in some cases

Naming :mag_right:

It may seem like there is no need to be too specific about the naming, but…

Global Admin is not just small settings (enable, disable, checkboxes, etc.). We have things that involve listing, editing, creation, deletion, form completion combined with simple settings.

That means we need to make sure they are clear from one another, especially because… well, there is a lot of them.

Being clear about them increases the chances of feature discovery and makes it less frustrating for a user that’s searching for something.

Good names make it unnecessary to have descriptions for sections/subsections as everything is clear from the naming. This translates into cleaner design.

Reasons to change names of section/sub-sections :thinking:

To not make this post longer than it is, I’ve decided to keep these reasons on the design wiki, you can read more here.

Note: Renaming things in Global Admin UI may mean to rename things in documentation and that can be in itself a pretty big task.

Full renaming proposal :star2:

The arrow = moving extension rights to extensions

global admin renamings.png

New Layouts :star2:

The common things between all version can be read here. The layouts respect the usual scanning patterns.

All versions

Version 1

Version 1 opens automatically Users (renamed Users & Rights) and sub-sections can be collapsed or extended in the context of the already opened section. It’s similar to the Apple System Settings layout.

#Pros: Searching through different sections will be done purely from the side navigation which limits the scope of the user, making his choices easier. The fact that subsections are collapsable and you don’t need to open another page for each and every one of them is very convenient and makes discovering features faster

#Cons: the right side will always be a bit cluttered, normally, and could lead to slightly overwhelming the user with information. Also, it’s more technically complex.

global admin ss v4.png

Version 2

Version 2 is a bit more classic. The sections get put in boxes. On a row there can a maximum of 2 boxes.

#Pros:

This layout makes the sections easier to follow with less distance between them.

The iconography is minimalist and explains quickly what’s the content of the sections.

There is a comprehensive description to every sections.

I’ve put Extensions on a single row because of their importance in the perception of XWiki as an extensible wiki. Global Admin is a section that is especially designed for admins (obv) so it’s important that they easily discover the value of XWiki when looking through this UI.

#Cons:

Besides the description there is no easy way of looking into the “boxes”. Because users scan, they might not read the description.

Another sub-version of this version would be to have all boxes like the Extensions box - 1 box per row.

1707134779416-989.png

Version 3

Version 3 tries to take out the cons of version 2 (the lack of transparency into the boxes). In doing so it exposes the sub-sections and groups them by iconography. The new boxes can have 2 fixed size (big or medium). Extensions is treated as a normal section not as a special one like in Version 2.

#Pros: The user can dwelve into a section that he finds relevant and view all sub-sections fast without clicking or commiting to a link. Boxes are quite close to each other so the eye can move easily between them. The iconography helps identify certain types of features.

#Cons: Exposing the subsections clutters a bit the UI, but more than that… it makes comitting to a subsection harder because of the how many possible choices there are.

global admin ss v2.png

Questions :face_with_monocle:

  1. Do you think there are other needs for the Global Admin UI, that I haven’t covered in this proposal? Do you think any of the needs should get eliminated?
  2. What do you think about the renaming part? Are there instances which you don’t agree with?
  3. Which of the versions proposed do you think works the best? Would you change something about it?

Thanks a lot for reading all of this!
I’d really appreciate any opinions on this, it helps a lot! :blush:

2 Likes
Shortcut settings position
#2

Hi, keep in mind that I administer an intranet installed XWiki instance and I have an IT background, hence I’m generically more interested in functionality rather than looks.

Guess what, that’s the side menu that I find the most navigable of the whole wiki: it’s quick / reactive, well organized, sections autoclose, entries are more spaced and readable - of course it’s made up of a few, static entries, that’s clear to me.

So maybe I’m the least one who should comment in a UI thread :joy:

But anyway:

After a quick glance, I think that even 10 rows in the users or groups list will make the collapsible sections under it fall so down in the page that I’ll probably always use the left menu / tree rather than those.

Moreover, if collapsed sections content is loaded at page load it will make the whole page load slower; if instead they’re loaded on section expansion, then it may take the same amount of time to load a section as a whole page change (as it happens right now).

I’d keep the reworked menu on the left side, from this version - and keep the section autoclose feature, if possible.

Without seeing what’s inside a single section (i.e. what will I see if I click “User & rights” in the box?), it’s hard to comment on this.

See above.

I’m sorry, looks like I only found cons in all of them :sweat_smile: but please keep in mind that I run our instance since two years, I do not have much time to spend on it, but when I need to change something in the Admin section, I never look for the section descriptions, but rather prefer to click on several of them to search what I’m looking for. That’s probably why I do not see improvements in versions 2 or 3.

#3

I’ve reread your post.

So, this version basically skips the descriptive home, by directly showing the first section content. It would be more toward how I use the admin section (skipping the section descriptions).
Need to think more about this, but is the most functional of the three.

This keeps the descriptive nature of the home. But it’s content takes up too much vertical space in the page, and grows longer with any subsection it may be added so :-1:

If we keep the descriptive home, then the section on the right shouldn’t be too much longer than the side menu, hence this may be ok.

#4

Hello, instead of clicking on an element, you can quickly navigate via a shortcut if you know the original page name. For instance, CTRL + G and if I want to enable/disable a feature or plugin for the CKEditor toolbar, I’ll type “CKEditor” and select “AdminSection” → I’d have the same window if I were to use click Drawer - XWiki Admin - Editing …

I don’t agree with the UI proposal as it is the admin section - which is accessible to admins. And the proposed UI is more for ordinary users.

#5

Thanks, though what I meant was, e.g., I have to change a setting of the PDF export, maybe I do not recall the exact section it is nested into: I just quickly open a bunch of them directly instead of going to the Admin Home and check each section description.

1 Like
#6

Hi Adina,

Thanks for working on this :slight_smile:

For me this is missing some important points:
6. The left menu part and the right part are duplicates and thus useless. I’m referring to the initial view and if you click on a section in the right part
7. There’s no way to come back to the initial view once you start clicking on some subsection
8. If you click on a section in the right part, you’ll get a new view with subsections but you don’t have the same if you click on a section in the left part.

Basically we should probably replace the initial right view content with something ore useful.

Version 1 is a solution for this.

Versions 2 and 3 are just overhaul of the existing UI and I don’t feel they bring much advantage (there’s only the description but it’s pretty basic and the section titles + the search should already let user find what they need. We could imagine that the description would be displayed when hovering with the mouse over the sections and subsections.

BTW in your version 2 and 3, how do you navigate back to the initial UI since you have created a new “Summary” kind of entry in the left menu?

Some ideas/thoughts:

  • Display the admin news on the main admin UI initial view. Cons: We already have a place to display news and it should be possible for an admin to disable this feature. Maybe we can think of something else useful to display to the admin users? ATM I don’t have maby ideas though :wink:
    • EDIT: Maybe in the future, we could list important security vulnerabilities or information about new versions of XWiki you could upgrade to? ie a kind of admin dashboard to let admin know if there are things they need to fix.
  • The left menu takes a lot of horizontal space, leaving little to the main admin content (with the side panels, in your example of version 1, the Users & Rights part has less than 1/3rd of the screen available to display the options). Could we move the admin menu elsewhere to get more space? The problem is that at some point we said we wanted the panels to be the same in view mode and in edit or admin mode (we used to have different panels in edit mode but with inplace editing we were able to keep them the same). So I don’t have any idea other than having a collapsible menu and a search bar that’s also visible somehow.
  • For version 1, we can decide which item is open by default. It doesn’t have to be the first item. I think either User & Rights or Look & Layout are good candidates.

My preference goes to version 1. I don’t see advantages of versions 2 & 3 as explained above.

Thanks!

1 Like
#7

Hey @amilica, nice work you’ve been doing here, thank you!

I especially agree with a visual overhaul and more powerful search bar. However, I feel this last one would need a lot of development effort.

Sometimes the admin section feels very cramped, because the sidebars remain visible and some pages of the admin section are very space intensive. Stuff like Panels List, Application Panel and Navigation Panel, these pages are very reliant on horizontal space. If we need to keep the sidebars visible, I would revamp these pages specifically also (they are on my personal todo/someday list).

Also, there is an UX precedent for this. When trying to customize the theme, the user is led to a completely different part of the wiki, without sidebars and outside the Admin section.

“Look and Layout” for me is a little bit strange. Maybe “Appearance” would be more generic.
I also find “Rights” an odd choice in current XWiki. In every app and software that I use, this function is always called “Permissions”. But changing this now would open a whole Pandora Box of changes from documentation, to videos to other interface elements and translations :sweat_smile:.

While I agree on principle, it will be very hard to find specific names that encompass all the features that we have on each section. But then again, a powerful Search Box would also help to mitigate this problem.

I would go to version 1, with a few caveats:

On your proposal you put every category and sub category inside the navigation and content areas. As you mentioned on “cons”, it feels very cramped. I would choose only one way of navigating.

  1. Change the current navigation: Keep main categories only on the sidebar. Sub categories would be listed on the content area (to the right). When navigating to one of them, a back arrow would be needed on top of the page to go back to the sub list (MacOS, Windows and Gnome do this way). In this case it would also be important to update the location on the breadcrumb, today it remains fixed in “Global Administration”. In this case we could do without the accordion as every access would be only one level.
  2. Keep the current one: Keep everything on the sidebar, but do a visual revamp. Accessing the Admin page also access the first page that is available. In this case, I would also keep the accordion component. It is a quick way of giving the user a quick glance over the available categories while still maintaining the sub categories easily accessible. With a regular navigation tree, the user will get a lot of manual opening and closing of menus and possibly some scroll issues when the menu is very tall, but the content on the right is very small.

I think this is it for me.
Nice work, and thank you again for working on this.

#8

Note that there’s currently a PR to improve the consistency between this UI and other dropdowns in XWiki. It’s still a custom UI, but from what I could see (details in the PR), we don’t have a good consistency on any dropdown in XWiki anyways, so there’s some generic work to do :slight_smile: .

  1. Personally, I pretty much only use the accordeon, so I don’t mind too much the #6 and #7. They might be useful for new admins, but when I started with them about a year ago, I barely ever read the category description from what I can remember. Most of the description are not in depth enough to be relevant, and the icons in the righthand side are really inconsistent/oldish.
    In my opinion links to documentation would better fit inside the subsection UIs, so I don’t think #8 is a need.
    • I think that on 16.0.0, the Users category is already renamed to Users and rights :slight_smile:
  • In my opinion, the extension rights section fits right in between the two categories. So we could have this subsection appear in the two sections. I don’t think moving it from one section to the other is really an improvement, we have more to lose by adding an inconsistency in the UI between versions.
  • Look & feel is an english noun (look and feel - Wiktionary, the free dictionary). It holds its own meaning beyond juxtaposition of the nouns look and feel. If we want to replace this section name, I’d replace it completely. IMO Presentation or Style are better alternatives than Look and layout.
  • I didn’t review every renaming, but for the ones I know and use the most in the Look and feel section, I think the Lightbox rename is just adding unecessary fluff around the main message. The Panels subsection new name is too long too, it just repeats the content of the description. We might consider removing the description for subsections with new names that became very wordy. The Theme name is way more suited than Customize your wiki (which could fit pretty much any subsection :smiley: ).
  • There’s some colored bubbles on the bottom left of the picture, was there any plans on using them?
  1. I prefer version 2:
  • version 1 adds a lot of repeated info on the main page content, it makes it more difficult to understand what’s in each section. Maybe this could be mitigated by having clearer subsections, with boxes around them…
  • version 3 gives too much details. IMO it could be contained in a dropdown so that it doesn’t flood the user interface with info that will be in most cases irrelevant to the use case.

I don’t like too much replacing the accordion with a tree. In my opinion this UI was special, and for a good reason, it was the single most important piece of UI for admins. The chunky aspect of the accordion gave it focus, meanwhile the tree is just as attention grabbing as the navigation tree, which is a loss IMO. Moreover, the accordion takes advantage of a specific data structure and conveys it to the user: we only have section and subsections. Trees are way more generic. I’d advocate to have a more specific UI so that the new user already knows that they didn’t miss any subsubsection anywhere. My opinion is not objective, it might be interesting to get feedback from people who are not used to this accordion already :slight_smile: For version 2 and 3, it might make sense to explain what the global admininstration is with a short message above the sections, something like:
Welcome to the main administration center! Start browsing through sections to discover how to customize your wiki to your needs.

One last idea, for discovery, we could also add a tour of the admin features.

Thanks for you work on this topic!
Lucas C.

1 Like
#9

Version 1 has no main page content :slight_smile: (you’re directly inside a section). Did you mean version 2?

#10

From what I understand, all the subsection titles are repeated in the new content of the section (default page too). I think this is not necessary. In my opinion subsection content can already be difficult enough to read to not put multiple of them in a single view, and use them as collapsable blocks. I think that if we want to keep collapsable subsections in the section content, the subsections in the tree on the left should be removed to avoid cluttering.
reworkAdminUI

#11

oh indeed, you’re right :slight_smile: I hadn’t noticed. I don’t really understand why the menu is copied, I don’t see the point since there’s a menu on the left already.

So I change my answer: I don’t like 1, 2 or 3 but 1 is the closest if you remove the menu in the main content area.

1 Like
#12

No, no, this is extremely valuable feedback, thanks a lot! I can see why you say it’s the better navigation in terms of experience.

Yep, totally relate to that, lol. It’s one of the search patterns I’ve documented in the proposal and I’m trying to take this into consideration, but still offering something bonus. Thanks again for your opinions, this is really helpful! ^^

Yep, agreed. Thanks again for your opinions, they were all really insightful!

With the proposals I’ve tried to make something that is familiar to the admins experienced with XWiki, but also something for new admins/ new clients that are just discovering XWiki.

What do you think would make it more suitable for all admins? Or do you think there is no need for improvements?

Also, thanks a lot for your input, Nikita! Means a lot!

These are are solid points, thanks a lot, I’ll add them to the proposal right away!

The idea with the description appearing when you hover on a section seems pretty good, I’ll add it in the proposal just to keep it in mind, even if they won’t end up being the version we move forward with.

Yep, User & rights was just an example.

I do agree on the rename of Rights to Permissions, it’s actually a much more self-explanatory name, but I understand what you mean with “opening a Pandora box” with this one :)))

Thanks a lot for the ideas, Thiago! IThey are really valuable and definetly worth exploring in the next iterations! :star_struck:

#13

Yep, I agree. It was a mistake ( I forgot to update the tree from the previous iterations, this version was actually the last one designed in my workflow)

Will modify Version 1 in the proposal

1 Like
#14

I missed this bit: agreed, good idea :+1:

#15

Hello everyone again! :blush: I’ve looked into the feedback for the initial versions and worked on 4 more that either add to or polish the previous mockups.

I’d very happy to hear feedback from the people that already got here (@watery , @nikpetrenko , @vmassol , @tkrieck , @CharpentierLucas ), but also from anyone who will join the discussion from now on!

New versions (second round)

Common things :white_check_mark:

  • there is a tooltip in the top-right side for quick links (forum, documentation, FAQ)
  • anything collapsable is auto-closing when clicking another collapsable
  • the versions that have side navigation are close in style to the navigation tree but with small differences to make it stand out still and, also, auto-closing

Version 5 - side sub-sections :star:

  • See detailed pros, cons and full views for this version here.

Right side contains subsections. Left side only contains the sections.

1707469229131-883.png

Extending a sub-section.

1707480793204-329.png

Version 6 - visual revamp :star:

  • See detailed pros, cons and full views for this version here.

Initial view with all the sections each on their row

1707470218101-539.png

Hovering on a section reveals description

1707470504453-636.png

Entering a section reveals the subsections

1707470834143-239.png

Version 7 - visual revamp + initial 2 columns :star:

  • See detailed pros, cons and full views for this version here.

Main view displays the sections on two colums

1707471650371-315.png

Hovering on a section extends description

1707471725338-231.png

Clicking on a section will reveal the page of all subsections looking and working like in the previos version.

Version 8 - horizontal tabs :star:

  • See detailed pros, cons and full views for this version here.

The navigation is horizontal and subsections ocupy all of the main content.

1707472004263-328.png

Extended sub-section

1707474418189-520.png

Sub-version (horizontal tabs with gray background)

1707475452208-962.png

Version 9 - a lot of hovering :star:

  • See detailed pros, cons and full views for this version here.

Mimimized sub-sections view

1707469134942-772.png

Hover on a menu section will reveal subsections

1707467867443-219.png

Hovering on sub-menu will extend a description about the sub-section

1707467975562-763.png

Conclusion

These are all the versions that I’ve worked on so far. You can see the updated proposal here.

Let me know what you think about all of these and which version is the closest to what you’d like to see.

Thanks a lot for reading everything, I know it’s quite a lot! :sweat_smile:

#16

Thanks @amilica !

Personally I still prefer option 1 (without the extra menu in the content area). Option 1 is to directly navigate to a subsection and display its content, ie no special home page for the Admin UI.

My problem with the new proposals are:

  • Most of them duplicate what’s already in the left menu
  • The horizontal tabs layout doesn’t scale

Thanks!

#17

Thanks for the work on this!

Just to add on Vincent’s remark, a way to provide scaling for the horizontal layout could be to use stacked tabs, like Keycloak used to do:
image

Now, I’m pretty mixed on the idea, but it might be interesting to discuss it.

#18

I like the best version 6, except for a nitpick :slight_smile:
Version 5 is good too. I don’t think version 7 is better than version 6.

The info panel for the admin landing page looks neat!

+1 I doubt we can make it as nice to use as a vertical section picker when there’s a lot of sections.

My nitpick for versions 6 and 7: showing description on hover will make half the page content move every time you hover a new item. This can make it annoying to reach some descriptions. Here is a worst case scenario:
I want to see the description for the Extension section. My mouse was in the top right corner (accessed administration menu from the drawer). I go towards the ‘Extension’ block. I hover over the corner of the Appearance block. This one displays its huge description, and now the place where I wanted to click the Extension block is just the description. I reassess my action and start moving towards the new position of the Extension block. As soon as I reach the bottom of the expanded Extension block, this one collapses back to what it used to be. All the sections under it go back up, and now I have my mouse on the Content block, displaying its description and shifting all items under to a new position. But more importantly, the Extension block got above my mouse position… So I reassess my action again and move up. I exit the Content block and all of the content under it moves back up. I finally reach the Extension block and I can see the description.

Not only did the user need to reassess twice its movement, the layout of the page also moved 4 times around for this simple use case. Moreover, even users that expect this would need to perform unintuitive actions to quickly get access to the info they want:

  • Go through this whole thing quickly. Needs precision and a lot of getting used to.
  • Don’t hover the Appearance section and access the Extension block from the side or bottom. This makes a pretty complex mouse path for almost no benefits.

I think we should avoid such use case.

Some alternatives would be:

  • Add some delay on the hover - but it can be unintuitive and the right amount of delay would be difficult to find. Too much and no one figures out that there’s a description toggled by hover. Too few and we get back to the use case above.
  • Add an ‘info’ button on the right of every section panel to expand them. I don’t really see a drawback to this, except that it can create a bit of friction… in any case less than what’s described above.

Thanks!
Lucas

#19

I like version 8 very much. Because of it’s horizontal space for the entries. This is the first version where I think, that it’s worth all that much work in revamping.

I would like to see how a search will present it’s result in this version.

What is important for me that I can link (e.g. by query) to each opened sub-section. I find this important for guiding other admins and for internal documentation.

Simpel

1 Like
#20

Hello! To come back on this:

I disagree a bit with this, if we are referring to scaling in the sense of responsivity.
Even if we are referring to the idea that we might add other sections in the future or the space gets smaller because of different widths on side panels, we can still apply the following 2 ideas to keep the horizontal layout (which I believe would the ideal one).

Responsive layout

Current mobile version

This is how the mobile version of the current version looks:

global admin UI mobile initial

Main issue is that it’s hard to see all the main sections. You have to scroll quite a lot to see everything.

Alternative mobile versions

What the horizontal layout enables us to do is something along the following layouts:

  1. Something along the lines of what @pjeanjean suggested (wrapping the sections)
    global admin UI mobile 1

  2. Having an arrow that on tap (on mobile) shifts the list to the right and shows the next items

global admin UI mobile 2

Version 5 is the polished version 1. I’m curious: why do you prefer version 1 over version 5?

This is a quick comparison between the two:
v1 vs v5