Extension Manager features (title, description, buttons, version, etc) need to be re-organised together, not independently

[GabrielaVives]

Problem

In the Extension Manager there is a growing number of features being added, and more to come. The UX of each feature is treated in independent issues. This issue aims to provide a space for discussions about the UX of these inter-related features.

Related issues:

14021

14098

13402

Related comments: https://github.com/jupyterlab/jupyterlab/pull/14078#issuecomment-1443968782 https://github.com/jupyterlab/jupyterlab/issues/14021#issuecomment-1468232763

An item in the Extension Manger currently has 3 states:

Installed

Installed with an update available

Not installed

The descriptive elements in the Extension Manager are the following:

• Logo
• Title
• Description
• Version
• Memory usage and load time (discussed in #13402)
• Other metadata (discussed in #14098)

The CTA's are the following:

• Install/uninstall
• Enable/Disable
• Update

Proposed Solution

I have started to research how all these elements could fit together inside an element of the extension manager's list. Here is the status of this work:

Here is a prototype illustrating different design options. It is far from being complete, but it can be a good starting point to fuel discussions and iterations. These prototypes group solutions for this issue and https://github.com/jupyterlab/jupyterlab/issues/14098, and can help enhance https://github.com/jupyterlab/jupyterlab/pull/14078.

The explanations by item are below, everything is illustrated in the prototype linked above.

Each design has a large and condensed example. For state 2, there are 3 different options (A, B, C). All these options can be iterated on, as well as mixed together if we find it useful. I have intentionally prototyped the interactions with the info icon on a separate prototype.

The states

To my understanding, there are 2 different states to consider here:

When a user wants to view and manage already installed extensions (state 1) When a user is in a discovery workflow, and extensions are not yet installed (state 2) The design considerations for both states must be consistent, however some pieces of information may appear differently in state 2, as they don't exist in state 1. The title I think the title should not be in blue but in black (dark grey ideally). Blue is used for links and buttons, here it seems like an unnecessary use of color.

The version (see this prototype for illustrations)

Coud we have the version following the extension name? It would make more sense as it adds contextual information to the title To display further information about the version, I tried putting an "info" icon next to the version number. Then, I tried out different interactions:

• Hover or clicking
• Information displayed in the frame or out of the frame
• Another option not investigated yet: have the frame expand, and see additional information below (as in see more/see less)
• I haven't investigated adding an "about" button yet, this could also be an option, and can work with 1, 2 or 3.

Disable and Uninstall buttons

I agree that they are not the main information the user is looking for, there are several options on the prototype to make them obvious without over-crowding the panel.

Update button

As there is not always an update available, I think it is important to have a button with 2 states: an enabled and a disabled state. Instead of having the button disappear when disabled. Putting this button to the bottom left seems like a good option to me, as it is close to the information it relates to: the title and the current version.

Button styling

I haven't investigated other styles than those in the prototype yet

Other Metadata about the extension

I haven't addressed https://github.com/jupyterlab/jupyterlab/issues/13402 yet, but it surely could be information displayed in the same way as the versions. We could investigate whether it would be best to merge all this information into one interaction/one display, or have them in 2 different interactions/displays.

Additional context

Originally discussed in #14021

How can I use a Figma prototype? In case you are not used to viewing Figma wireframes and prototypes, here are a few tips:

• If the prototype has several pages You can navigate using your keyboard arrows, or using clickable elements on the prototype You can jump back to the start of the prototype using the R key
• If you click anywhere, all the interactive elements of the page (hover, clicks, etc) will be highlighted in light blue. This can help you know where to click and what interactions to try out.
• If the page is larger than your screen, you can move around using your mouse or trackpad
• You can resize the page in the Options drop down on the toolbar at the top right of your screen

[krassowski]

One quick comment: the title is also a link leading to extension website which is crucial for users who want to learn more about an extension, report bugs etc.

I think some of us have previously mentioned that it would be nice if we could incorporate more granular links for extensions as these are already in the package metadata and exposed on PyPI. For example PyPI shows this for jupyterlab-lsp:

This is not crucial for this design work but I wanted to mention it for context

[GabrielaVives]

Ok, so the titles of each item should look clickable and will lead the user to another website?

[krassowski]

Ok, so the titles of each item should look clickable and will lead the user to another website?

It could but it does not have to if we will have another button leading to the extension website(s). But historically the tiles were clickable yes.

[andrii-i]

Hi @GabrielaVives! Thanks again for this work. I wanted to surface other Extension Manager UIUX issues and discussions inside them for potential inclusion into reorganization:

• 14018

• 14020

• 14030 (arguably has more to do with how we display errors overall)

• 14204

[andrii-i]

New Extension Manager UI-related issue:

• 14253