Description

• • Current Issues
    • Background color applied on mouse over
    • Better Differentiate Between Installed and Available Extensions
    • Lack of votes for extensions
    • Streamline the Extension Installation Process
      • Ideal Scenario (One-Click Install):
      • Alternative (Improved Multi-Step Process)
    • Provide Progressive Disclosure for Technical Details
    • Enable Cancellation of In-Progress Installations
    • Standardize Iconography with IconTheme
    • Optimize Layout for Efficient Space Utilization and Readability
    • The header containing the search bar has an inefficient layout and dated look.
  • Complete Mockups

Current Issues

Background color applied on mouse over

This background color denotes that there's some sort of interaction anywhere on the extension area, but that's not the case

Proposal: Remove the background color change.

Better Differentiate Between Installed and Available Extensions

Installed and available extensions are shown in the same UI simultaneously, cluttering the UI and potentially causing confusion.

Proposal: Separate into two distinct sections. This helps users quickly understand what's already part of their system and what can be added.

For this reason, the installed extensions should open by default with a primary button showing how to view new extensions to install. This view was under the menu besides the search, but now is promoted to its own button in the UI "Discover New Extensions".

Note that in this view the search bar is simpler, removing the "Indexed", "Compatible Only" and "Supported Only" as they make more sense for installing new extensions.

By activating "Discover New Extensions" the user will be taken to a filtered view of the available extensions (the current default):

Here we have the complete search and a back button to go back to the Installed Extensions page.

Lack of votes for extensions

Currently, we are showing a star rating system, but most extensions don't have votes and the most voted one only have 3 votes.

Proposal: Eliminate the star system altogether

Streamline the Extension Installation Process

Extension installation is broken into multiple steps that are not clearly labeled, leading to potential confusion and a disjointed experience.

Two proposals to improve the situation:

Ideal Scenario (One-Click Install):

If possible, we should aim for a single "Install" action that initiates and completes the process without further intermediate steps.

In this case, the progress bar shows the complete progress of the installation (currently divided into two discrete steps). All dependencies are automatically installed, as required by each extension.

To make each step clearer to the user, above the progress bar, we introduce a title describing the current step (Checking dependencies / Installing).

Alternative (Improved Multi-Step Process)

If multiple steps are unavoidable, let's ensure clear and action-oriented labeling for each step.

• Install → Add to XWiki
  • Here the "Install" label just marks the start of the process, nothing is being installed yet. However, we still need to provide a label that clearly indicates that this is the path to add something to XWiki, instead of an absolutely literal one like "Check Dependencies"
• Continue → Install
  • In this step, the "Install" is indeed the labeled action

The progress bar is still unified for two steps, but should be stopped while waiting for user interaction (the continue button).

Initial State

After clicking "Add to XWiki"

After dependencies have been checked

After clicking "Install"

When the instalation is complete

Provide Progressive Disclosure for Technical Details

Excessive technical details are displayed by default when installing/uninstalling, cluttering the UI and potentially overwhelming non-technical users.

Proposal: Hide detailed technical information by default. The details can be shown when user interaction is needed, like when the uninstallation process warns the user that some pages will be deletes.

Here's a good reading on Progressive Disclosure: https://www.nngroup.com/articles/progressive-disclosure/

Enable Cancellation of In-Progress Installations

Users cannot cancel an installation once it has started. Users should feel in control of the system and be able to undo actions or exit unwanted states.

Proposal: Provide a clearly visible "Cancel" button or option during the installation process. This gives users control and a way to exit an unintended or lengthy operation.

Standardize Iconography with IconTheme

Use of icons outside the established IconTheme, leading to visual inconsistency.

Proposal: Replace custom or non-standard icons with equivalents from the IconTheme, wherever possible.

Optimize Layout for Efficient Space Utilization and Readability

Suboptimal use of layout space causes extension descriptions to break prematurely, especially on smaller viewports.

Proposal:

• Move the install (Add to XWiki) and detail buttons to their own row. 
• Remove the stars rating
• Remove the icons on the extension title, most extensions use the same icon anyway which removes its usefulness

Extension Item:

Extension Details (while installing)

The header containing the search bar has an inefficient layout and dated look.

A new layout was proposed for the supported by feature, and it should be used for this one. However, with the proposal for the new "Installed Extensions" and "Available Extensions" areas, the search bar will have slightly different filters.

Search bar when in "Installed Extensions":

Search bar on "Available Extensions":

Complete Mockups