Hellooooo everyone!! Glad to talk to you all again!
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
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
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
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
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
The arrow = moving extension rights to extensions
New Layouts
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.
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.
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.
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 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!