Open GabrielaVives opened 1 year ago
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
Ok, so the titles of each item should look clickable and will lead the user to another website?
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.
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:
New Extension Manager UI-related issue:
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:
The CTA's are the following:
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:
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: