Global Admin UI
Current version
Look
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
- looks outdated & has old-looking iconography/imagery
- the search bar only searches through the side menu words, not through all the functionalities
- the naming of the sections/sub-sections is not ideal in some cases
- the description of the sections is not comprehensive enough to help discover features
- the side menu is a custom UI that I don't think we have anywhere else in the product
- 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:
- improve feature discoverability and understanding
- enhance consistency
- improve aesthetics
Needs
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:
- just scanning the page -> pretty much identifying main elements (the ones that stand out most) - not their details
- 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
- 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:
- the user abandons the navigation components and returns to analyzing main elements in the main content
- 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.
Naming
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
One section/sub-section may fit into 1 or more reasons:
1. name implies a list of things, but it only contains minimal settings
Example (not the only one): Likes - could imply to someone that they could find a list of all likes in the wiki there, but, in reality it's some minimal settings about the display of the feature. To be changed into Likes feature settings or Likes feature or Likes settings
2. name implies that section/sub-section is the place from which you do the action, not just the settings for the action
Example (not the only one): PDF export - could imply to someone that you can export certain pages from this place, but, in reality, there are only settings regarding exporting PDFs. To be changed into PDF export settings
3. name doesn’t give enough context, it’s too vague
Example (not the only one): Themes - this sub-section clearly is not just about themes or just choosing themes. To be changed into Customize your wiki
4. name introduces a concept a bit foreign to new users
Example(not the only one): Rights - it would help if we added something that makes it clear what this section is about. To be changed into Rights - who can do what
5. name covers only a part of its sub-sections/individual features -> section/sub-section needs to be split into multiple seperate namesbecause it has multiple important settings
Example (not the only one): Panels - this name doesn't cover the side columns and they may be overlooked when the user is scanning the page
Full renaming proposal
The arrow = moving extension rights to extensions
Navigations / table of Contents & their issues
New versions ( first round)
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.
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.
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.
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.
Extending a sub-section.
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
Hovering on a section reveals description
Entering a section reveals the subsections
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
Hovering on a section extends description
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.
Extended sub-section
Sub-version (horizontal tabs with gray background)
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
Hover on a menu section will reveal subsections
Hovering on sub-menu will extend a description about the sub-section
Questions
- 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?
- What do you think about the renaming part? Are there instances which you don't agree with?
- Which of the versions proposed do you think is 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 ^^