Global Administration UI Revamp

Last modified by Adina Milica on 2024/05/28 09:51

 XWiki
 Design
 Idea
 
 

Forum discussion: https://forum.xwiki.org/t/global-administration-ui-revamp/13986?u=amilica

Description

  

Conclusions of the forum discussion


Mockups

The homepage of GA

  • main content will be by default news for admins
  • title: XWiki Admin News (not product News)
  • the main content will be editable to let admins put anything they find important there (shortcuts, macros, reminders)

no info box, just what's new

Choosing a sub-section

  • main content changes only when the user chooses a subsection
  • every sub-section's title is written bigger and in bold before the actual content
  • there is a link to the documentation of that specific sub-section
  • the side-menu can be collapsed
  • the side menu is shorter in width enabling the main content to take more space
  • the side menu's look is slightly changed (bold text, before a section is expanded it doesn't have a border)

ga2.png

Collapsing the side-menu

  • this lets the main content be as big as it needs to be

ga3.png

Final conclusions

  • we’ll only have one menu, the side bar menu
  • in the menu, clicking on a section (not a sub-section) 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 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.

  • 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)
  • Sub-proposal #1 - input field style and placeholder text style will be discussed separately
  • Sub-proposal #2 - “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

An alternative idea to the editable main area was having an info box with useful links. I've abandoned it from the final conclusions as I think the editable area is much more valuable.

The rest of the content on this page is for context, but doesn't present details essential for the final implementation.


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

Note: Updated with points 6 & 7.

  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
  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 there’s no way to come back to the initial view once you start clicking on some subsection

Goals

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

Note: Updated from last discussion with point 9.

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

#9 the left menu takes a lot of horizontal space, leaving little to the main admin content

How users search a page without using a search bar

When not relying on the search bar, users try to reach their desired result by the easiest, usually most efficient, way possible.

This is relevant to the way users may navigate the Global Admin UI initial page and then sub-pages.

The easiest search pattern is generally:

  1. just scanning the page -> pretty much identifying main elements (the ones that stand out most) - not their details
  2. exploring elements that don't involve too much commitment (they don't open in another page), but may reveal a sub-page to the desired result or even the desired result. This elements could be a menu, a table of contents, etc., generally navigation components
  3. if previous step is successful (aka the user finds something that seems the closest to the desired result), the users commits to clicking on a link and repeats steps 1-3. If previos step is not successful, the user continues to the next steps:
  4. the user abandons the navigation components and returns to analyzing main elements in the main content
  5. they commit to choosing the one that seems to be the closest to the desired result.

This pattern proves that it's very important how we name main elements because they determine how quickly the user commits to  a section/sub-section. The description is not as helpful because it is not as visually important so it gets lost between steps 1-3.

Navigations / table of Contents & their issues

A illustration of the decision tree with all the design considerations

Non-final versions (first round)

Based on feedback, new iteratons have been done. You can see them in this section.

Common things


  • there is a side navigation and it is consistent with the page navigation we have everywhere in XWiki
  • search bar is prettier & looks more like the search bar from navigation (we should improve that too, slightly)

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.

Disclaimer: I still have to update the descriptions for some of the categories.

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

New versions (second round)

Common things


  • there is a tooltip in the right side for quick links (forum, documentation, FAQ)
  • anything collapsable is auto-closing when clicking another collapsable

Version 5 - side sub-sections


#Pros:

  • The side navigation is smaller ocupying only 1/4 - 1/5 of the main content, thus leaving more room for the actual content.
  • The side navigation only contains the sections, without duplicating the sub sections in the right.
  • The active section is signaled by bold underline. It's subtle enough that it doesn't distract, but different enough to understand that it's the active one.
  • Before extending any item on the default section, there will be an info box appearing in the right. This introduces the user in the whole UI and provides useful links that he may need. While experienced admins may know about the forum, new people may be happy to learn there is a community to ask for help.

#Cons:

  • Less room for main content than in the case of horizontal menus.

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

1707469229131-883.png

Extending a sub-section.

1707480793204-329.png

Version 6 - visual revamp


#Pros

  • The side navigation is smaller ocupying only 1/4 of the main content, thus leaving more room for the actual content.
  • The side navigation works the same as the current one keeping the familiarity and the ability of looking into a section without comitting to the choice.
  • On any section page there is a button to go back to the main view.
  • Hovering on a section or a subsection will extend a description of it.

#Cons

  • Less room for main content than in the case of horizontal menus.
  • More duplicate content.

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


Most of the pros and cons from versions 6 + the following one:

#Pros: The display of sections on 2 columns enables the user to see the sections more easily

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


#Pros

  • Because of the horizontal menu, we have a lot of horizontal space available for every subsection.
  • We reuse a UI idea that we already have in XS, tabs.
  • The main content doesn't duplicate the navigation, using it efficiently.
  • Sub-sections are collapsable and auto-closing when opening another sub-section.
  • The search bar is in the right side, reducing the use of vertical space.
  • Before extending any item on the default section, there will be an info box appearing in the right. This introduces the user in the whole UI and provides useful links that he may need. While experienced admins may know about the forum, new people may be happy to learn there is a community to ask for help.

#Cons

  • The UI deoesn't have a familiar structure, may cause initial confusion, but I do believe any user can adapt to it pretty quickly.
  • Horizontal menus are harder to scan.

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


#Pros:

  • Because of the horizontal menu, we have a lot of horizontal space available for every subsection.
  • The main content doesn't duplicate the navigation, using it efficiently.
  • Sub-sections are collapsable and auto-closing when opening another sub-section.
  • The user can hover on the menus and get a quick glimpse into every section without comitting to any of them.
  • The user can hover on sub sections presented in the menus to learn what they contain.
  • The search bar is in the right side, reducing the use of vertical space.
  • Before extending any item on the default section, there will be an info box appearing in the right. This introduces the user in the whole UI and provides useful links that he may need. While experienced admins may know about the forum, new people may be happy to learn there is a community to ask for help.

#Cons:

  • The UI deoesn't have a familiar structure, may cause initial confusion, but I do believe any user can adapt to it pretty quickly.
  • Horizontal menus are harder to scan.

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


 

Get Connected