Extensions Platform UI #118733

New Issue

Harley Acheson · 2024-02-25T23:15:55+01:00

Harley Acheson commented

2024-02-25 23:15:55 +01:00

I find the current state of the Extensions Platform UI to be a little confusing. A search area, followed by two different filter lists, an "arrow" icon bringing up general options and a "gear" icon showing repository options. remote repositories represented by a "lan storage" icon. There are refresh and download icons in multiple places meaning different things.

We can break the options into two rows, operations versus searching/ filtering. Use the "Refresh" icon only for "Check for Updates", "download" for install.

The arrow next to "install" shows a menu with more options:

"Repositories" item to add/remove repos:

I find the current state of the Extensions Platform UI to be a little confusing. A search area, followed by two different filter lists, an "arrow" icon bringing up general options and a "gear" icon showing repository options. remote repositories represented by a "lan storage" icon. There are refresh and download icons in multiple places meaning different things. ![image](/attachments/56541fd1-aab9-4f66-bdd5-47906092fd98) We can break the options into two rows, operations versus searching/ filtering. Use the "Refresh" icon only for "Check for Updates", "download" for install. ![image](/attachments/df3e76e4-3ff0-4f25-9ba7-85515bcf782a) The arrow next to "install" shows a menu with more options: ![image](/attachments/bdeb871f-f59c-4132-abf5-8bbb546a0b39) "Repositories" item to add/remove repos: ![image](/attachments/3cb381d0-1fc5-4df4-abeb-5868e5d8dfc7)

ExtensionsCurrent.gif

66 KiB

image.png

50 KiB

image.png

71 KiB

image.png

45 KiB

👍 8

Harley Acheson added the

Type

Design

label 2024-02-25 23:15:55 +01:00

Harley Acheson added this to the User Interface project 2024-02-25 23:15:57 +01:00

Brecht Van Lommel commented

2024-02-27 14:23:21 +01:00

In my opinion both the existing and this design make important buttons not prominent enough. I would rather have filter options, Check for Updates, Update All and Install from Disk available directly. I don't think we lack space here.

👍 1

Harley Acheson commented

2024-02-27 16:27:08 +01:00

But not sure that this little list needs a search and two different filters. Maybe those filters can be combined.

We could put "Update All" and "Install from Disk" as buttons if they don't share the same icon. Install from disk could just have the file folder we use for other file open.

Hmmm.... "Extensions" above does not look like a menu but just a static label.

But not sure that this little list needs a search and two different filters. Maybe those filters can be combined. We could put "Update All" and "Install from Disk" as buttons if they don't share the same icon. Install from disk could just have the file folder we use for other file open. ![image](/attachments/23d3cb7f-7b0c-4c03-9b2d-e055130c3604) Hmmm.... "Extensions" above does not look like a menu but just a static label.

image.png

32 KiB

❤️ 1

Brecht Van Lommel commented

2024-02-28 12:21:02 +01:00

I think it's better to have two rows and buttons with labels on them, than these small buttons where it's not obvious what they do. I don't really understand why we are trying to make this more compact than it was with add-ons.

Harley Acheson commented

2024-02-28 18:01:38 +01:00

The difficulty here isn't really the amount of space. Current Add-ons can be used with just a small number of labelled buttons. But this Extensions is adding complexity beyond what can be a accomplished with just simple labelled buttons.

Just the actions of installation/refresh goes from having to differentiated between two - "Install" and "Refresh" - to having to do so between four - "check for updates", "Update all", "Install extension", "install legacy addon". Then there is the added complexity of having to maintain the list of repositories.

The difficulty here isn't really the amount of space. Current Add-ons can be used with just a small number of labelled buttons. But this Extensions is adding complexity beyond what can be a accomplished with just simple labelled buttons. Just the actions of installation/refresh goes from having to differentiated between two - "Install" and "Refresh" - to having to do so between four - "check for updates", "Update all", "Install extension", "install legacy addon". Then there is the added complexity of having to maintain the list of repositories.

Brecht Van Lommel commented

2024-02-28 18:20:48 +01:00

I think the legacy add-on stuff can be in an advanced menu. Then you could have a row of buttons like this:

| Check for Updates |  | Update All |  | Install ... |  | ⚙ Repositories |  | ⌄ |

Though it's not clear to me why legacy add-on needs to be a separate operator, if they both install from a file on disk.

And Check for Updates could be automatic when you open these preferences, or share the same location as Update All.

I think the legacy add-on stuff can be in an advanced menu. Then you could have a row of buttons like this: ``` | Check for Updates | | Update All | | Install ... | | ⚙ Repositories | | ⌄ | ``` Though it's not clear to me why legacy add-on needs to be a separate operator, if they both install from a file on disk. And Check for Updates could be automatic when you open these preferences, or share the same location as Update All.

Harley Acheson commented

2024-02-28 23:04:57 +01:00

Yeah, that could work, although I would probably still hide the repository list behind an icon. And expand out the filter...

The little arrow beside "Check for Updates" could be removed after we take this out of experimental since everything else is exposed.

Yeah, that could work, although I would probably still hide the repository list behind an icon. And expand out the filter... ![image](/attachments/b468ea9e-84bd-43b7-955d-6fa018e5d9d1) The little arrow beside "Check for Updates" could be removed after we take this out of experimental since everything else is exposed.

image.png

53 KiB

❤️ 1

Brecht Van Lommel commented

2024-02-29 16:33:50 +01:00

I think the extension types enum should not be expanded, there will be more types and it's not going to fit.

The filtering buttons should be the second row, nearer to the list that it affects, same as it is with the current add-on preferences.

Personally I would add some text to the repositories button rather than only the generic gear, to me it seems important enough.

I think the extension types enum should not be expanded, there will be more types and it's not going to fit. The filtering buttons should be the second row, nearer to the list that it affects, same as it is with the current add-on preferences. Personally I would add some text to the repositories button rather than only the generic gear, to me it seems important enough.

Harley Acheson commented

2024-03-01 23:21:06 +01:00

Could work. Not nearly as pretty as my minimal version. LOL

Could work. Not nearly as pretty as my minimal version. LOL ![image](/attachments/c1cfe041-68ed-4964-91e4-7b03ff8ded9f)

image.png

114 KiB

image.png

22 KiB

👍 1

Brecht Van Lommel commented

2024-03-02 00:13:48 +01:00

Designing with this many iterations back and forth is not very efficient, but anyways I suggest:

Rename Check for Updates to Refresh for brevity.
Align Refresh, Update All, Install.
Don't put the extra operators menu in between them, align it to the end of those 3 buttons.
Make Repositories wider.
Align all the search/filter buttons together, and put search first.
Maybe a horizontal line between the two rows helps, or just more space. I think search and filter belong more closely to the list off add-ons, rather than the row of buttons above.

| Refresh | Update All | Install... | ⌄ |  |    Repositories     ⌄ |

| Search                               | All                   | Y |

Designing with this many iterations back and forth is not very efficient, but anyways I suggest: * Rename Check for Updates to Refresh for brevity. * Align Refresh, Update All, Install. * Don't put the extra operators menu in between them, align it to the end of those 3 buttons. * Make Repositories wider. * Align all the search/filter buttons together, and put search first. * Maybe a horizontal line between the two rows helps, or just more space. I think search and filter belong more closely to the list off add-ons, rather than the row of buttons above. ``` | Refresh | Update All | Install... | ⌄ | | Repositories ⌄ | | Search | All | Y | ```

Harley Acheson commented

2024-03-02 20:11:10 +01:00

Designing with this many iterations back and forth is not very efficient...

Agreed, but not sure of how to do this any better, as you and I seem to be the only ones interested in this.

We are generally iterating from a current design that hides too much (which I dislike) toward showing everything like current Add-ons (which I also dislike), which is probably why this is taking so long. With this many options I'd prefer to prominently show the often-used ones and make lesser-used items secondary.

There also seems to be reluctance on the part of the designers of this to be acceptable of change suggestions.

Rename Check for Updates to Refresh for brevity.

I don't think that "Refresh" here properly tells the story that this will use an internet connection and check for the newest version of each item. Could be read more like a "reload", "redraw", etc. Without any text it at least makes it more likely the user will look at a "Check for Updates" tooltip.

I'll probably next post both a capture of it looking as you suggest above, and also another streamlined version (if I have any success with that).

> Designing with this many iterations back and forth is not very efficient... Agreed, but not sure of how to do this any better, as you and I seem to be the only ones interested in this. We are generally iterating from a current design that hides too much (which I dislike) toward showing everything like current Add-ons (which I also dislike), which is probably why this is taking so long. With this many options I'd prefer to prominently show the often-used ones and make lesser-used items secondary. There also seems to be reluctance on the part of the designers of this to be acceptable of change suggestions. > Rename Check for Updates to Refresh for brevity. I don't _think_ that "Refresh" here properly tells the story that this will use an internet connection and check for the newest version of each item. Could be read more like a "reload", "redraw", etc. Without any text it at least makes it more likely the user will look at a "Check for Updates" tooltip. I'll probably next post both a capture of it looking as you suggest above, and also another streamlined version (if I have any success with that).

Harley Acheson commented

2024-03-02 21:39:55 +01:00

Another minimal version. This seems to cover everything, showcases the most important parts (check for updates, update, load), de-emphasizes the repo list since used less often. There are no dropdowns side-by-side to cause "mouse toward" issues.

And your version with two rows:

The above does have the "mouse towards" issue between the filter icon and the filter list.

I would still wager that mine would win a rap battle or poetry slam. snap, snap, so will update the first comment with it.

Another minimal version. This seems to cover everything, showcases the most important parts (check for updates, update, load), de-emphasizes the repo list since used less often. There are no dropdowns side-by-side to cause "mouse toward" issues. ![image](/attachments/b2ec6083-1835-431e-887e-94c30201addc) And your version with two rows: ![image](/attachments/79a2358c-96eb-42e9-90cc-79b502268a71) The above does have the "mouse towards" issue between the filter icon and the filter list. I would still wager that mine would win a rap battle or poetry slam. *snap*, *snap*, so will update the first comment with it.

image.png

46 KiB

image.png

46 KiB

Brecht Van Lommel commented

2024-03-04 11:09:10 +01:00

I think we really need the bigger buttons. Also based on the feedback in the devtalk topic, where people continue to be confused.

Small buttons like these with just icons are difficult to identify the purpose and easy to miss. For a user interface that is permanently visible, they can be an acceptable trade-off because saving space is important, and users hopefully will use them frequently.

But for a user interface like this that only temporarily appears, we should absolutely prioritize easy of use. People have more important things to learn and remember than the subtle differences between these icons.

The repositories popup can also have bigger buttons with text for refresh and update all, instead of the small buttons, for the same reason.

@ideasman42 @dfelinto, can we make installing legacy and the new add-ons a single operator? This is causing confusion too. Add-on authors need to be aware of the difference, but I don't think we should be confusing users with this.

I think we really need the bigger buttons. Also based on the feedback in the devtalk topic, where people continue to be confused. Small buttons like these with just icons are difficult to identify the purpose and easy to miss. For a user interface that is permanently visible, they can be an acceptable trade-off because saving space is important, and users hopefully will use them frequently. But for a user interface like this that only temporarily appears, we should absolutely prioritize easy of use. People have more important things to learn and remember than the subtle differences between these icons. The repositories popup can also have bigger buttons with text for refresh and update all, instead of the small buttons, for the same reason. @ideasman42 @dfelinto, can we make installing legacy and the new add-ons a single operator? This is causing confusion too. Add-on authors need to be aware of the difference, but I don't think we should be confusing users with this.

👍 1

Julian Eisel commented

2024-03-04 12:53:29 +01:00

The compact version, although more "sexy", compromises too much on usability too me. Important actions are hidden between vague icons. The icon-only buttons look more like choices (radio or enum buttons) rather than operations. I don't think we have such a UI to expose actions elsewhere, but it does misleadingly look like the display mode selection in the file browser:

So I agree fully with Brecht that we should use label buttons.

On the used icons/labels:

Check for Updates: I think the term "refresh" is too vague and using it in the button isn't clear. I would probably expect it updates the add-ons, not just check for updates. Personally I often look for this update button in other applications, and I scan the UI for "Check for Updates". The refresh icon seems fair enough, although it only works because "refreshing" is a vague enough concept.
Install: The folder icon is an odd choice to me. It doesn't at all represent the action of "installing" in my mind. I would just stick to the "import" icon.
Update All: Using the import (or install) icon for updating seems misleading too, these are simply different actions. The current UI also highlights that we're using the same icon for two different actions, which is a design smell:

I don't think we need an icon for this.

The repositories popup can also have bigger buttons with text for refresh and update all, instead of the small buttons, for the same reason.

+1, also proposed that here: #118876 (comment)

The compact version, although more "sexy", compromises too much on usability too me. Important actions are hidden between vague icons. The icon-only buttons look more like choices (radio or enum buttons) rather than operations. I don't think we have such a UI to expose actions elsewhere, but it does misleadingly look like the display mode selection in the file browser: ![Screenshot from 2024-03-04 12-31-56.png](/attachments/52e30636-40bc-47ab-8a84-82d73a644d42) So I agree fully with Brecht that we should use label buttons. On the used icons/labels: - _Check for Updates_: I think the term "refresh" is too vague and using it in the button isn't clear. I would probably expect it updates the add-ons, not just check for updates. Personally I often look for this update button in other applications, and I scan the UI for "Check for Updates". The refresh icon seems fair enough, although it only works because "refreshing" is a vague enough concept. - _Install_: The folder icon is an odd choice to me. It doesn't at all represent the action of "installing" in my mind. I would just stick to the "import" icon. - _Update All_: Using the import (or install) icon for updating seems misleading too, these are simply different actions. The current UI also highlights that we're using the same icon for two different actions, which is a design smell: ![Screenshot from 2024-03-04 12-48-14.png](/attachments/17f93ea2-1ca3-4c10-a682-b9832e9bc7f4) I don't think we need an icon for this. > The repositories popup can also have bigger buttons with text for refresh and update all, instead of the small buttons, for the same reason. +1, also proposed that here: https://projects.blender.org/blender/blender/pulls/118876#issuecomment-1138093

Screenshot from 2024-03-04 12-31-56.png

7.5 KiB

Screenshot from 2024-03-04 12-48-14.png

32 KiB

👍 1

Harley Acheson commented

2024-03-04 20:11:37 +01:00

@JulianEisel

I updated the first comment with fresh captures. A big +1 for not using the download icon for "Update" as that does remove confusion.

A minor thing is that the "Install" item on the menu is called "Install from Disk" while having a download icon. Just removing the "from Disk" text might be enough to make that feel better though.

I do have (just locally) a version of the "url" icon without the mouse pointer.

For the Repositories popover I'd consider just removing those two buttons. Then it is used only to add/remove/change them and there isn't confusion on why the same operations seem to be in two places. Can't think of much utility in having per-repo updating.

@JulianEisel I updated the first comment with fresh captures. A big +1 for not using the download icon for "Update" as that does remove confusion. A minor thing is that the "Install" item on the menu is called "Install from Disk" while having a download icon. Just removing the "from Disk" text might be enough to make that feel better though. I do have (just locally) a version of the "url" icon without the mouse pointer. For the Repositories popover I'd consider just removing those two buttons. Then it is used only to add/remove/change them and there isn't confusion on why the same operations seem to be in two places. Can't think of much utility in having per-repo updating.

👍 1

Brecht Van Lommel commented

2024-03-05 18:49:06 +01:00

Thanks for the updates, this is looking good now in my opinion.

If we can unify the install operators, then the whole ⌄ menu only has a purpose for development utilities. So then it could be hidden if developer extras is disabled (also not sure why it has a separate checkbox).

Thanks for the updates, this is looking good now in my opinion. If we can unify the install operators, then the whole ⌄ menu only has a purpose for development utilities. So then it could be hidden if developer extras is disabled (also not sure why it has a separate checkbox).

Harley Acheson commented

2024-03-05 19:34:38 +01:00

Updated the captures only to show the "Check for Updates" button a bit wider because it would have overflowed with French and Spanish.

Julian Eisel commented

2024-03-07 15:04:50 +01:00

What was the issue with the filter popup button not showing the downwards triangle? I think that should really be addressed as this looks quite like a new kind of button to me, rather than a popup button.

Besides that, looking good!

What was the issue with the filter popup button not showing the downwards triangle? I think that should really be addressed as this looks quite like a new kind of button to me, rather than a popup button. Besides that, looking good!

Harley Acheson commented

2024-03-07 18:52:12 +01:00

@JulianEisel - What was the issue with the filter popup button not showing the downwards triangle? I think that should really be addressed as this looks quite like a new kind of button to me, rather than a popup button.

It is a hacky thing...

The little arrow on the right is only shown for UI_BTYPE_POPOVER if there is room - defined as the width being greater than the height (in ui_draw_but). But why is the one here and in Outliner different?

uiItemPopoverPanel_ptr calls ui_item_menu with "force_menu" set to true.

Inside there we have a test for layout->root->type == UI_LAYOUT_HEADER marked with an "/* Ugly! */" comment. for "force_menu" in a header this increases a pad_factor.icon_only from "0" to "0.6" which make the button wide enough for the dropdown arrow. This is around line 2997 in interface_layout.cc

Unfortunately our layout root type is UI_LAYOUT_PANEL here.

I'm not sure why we have a "force_menu", nor why we are forcing this button size change for header only. Without knowing this it is not clear that we want to allow this in UI_LAYOUT_PANEL as well. Or do this for header OR if force_menu. Or perhaps for header Or (panel and force_menu) would be the narrowest change.

> @JulianEisel - What was the issue with the filter popup button not showing the downwards triangle? I think that should really be addressed as this looks quite like a new kind of button to me, rather than a popup button. It is a hacky thing... The little arrow on the right is only shown for UI_BTYPE_POPOVER if there is room - defined as the width being greater than the height (in ui_draw_but). But why is the one here and in Outliner different? `uiItemPopoverPanel_ptr` calls `ui_item_menu` with "force_menu" set to true. Inside there we have a test for `layout->root->type == UI_LAYOUT_HEADER` marked with an "/* Ugly! */" comment. for "force_menu" in a header this increases a `pad_factor.icon_only` from "0" to "0.6" which make the button wide enough for the dropdown arrow. This is around line 2997 in interface_layout.cc Unfortunately our layout root type is UI_LAYOUT_PANEL here. I'm not sure why we have a "force_menu", nor why we are forcing this button size change for header only. Without knowing this it is not clear that we want to allow this in UI_LAYOUT_PANEL as well. Or do this for header OR if force_menu. Or perhaps for header Or (panel and force_menu) would be the narrowest change.

Brecht Van Lommel commented

2024-03-07 20:25:54 +01:00

I think that check is probably overly conservative. I would just change it so popovers with an icon are wider regardless of the layout type, do a quick check to see if anything obviously breaks and then make the change.

Harley Acheson commented

2024-03-07 21:19:53 +01:00

@brecht - that check is probably overly conservative

Yes, you are right. It looks like this "force_menu" is for this purpose, but I think the least conservative we can go here is this: https://projects.blender.org/blender/blender/pulls/119181/files

> @brecht - that check is probably overly conservative Yes, you are right. It looks like this "force_menu" is for this purpose, but I think the least conservative we can go here is this: https://projects.blender.org/blender/blender/pulls/119181/files

Harley Acheson commented

2024-03-07 21:56:12 +01:00

A PR that adds an "internet" icon, like our current "url" without the mouse cursor.

#119186

A PR that adds an "internet" icon, like our current "url" without the mouse cursor. https://projects.blender.org/blender/blender/pulls/119186

Harley Acheson referenced this issue from blender/blender-addons-contrib

2024-03-28 18:03:45 +01:00

UI: Changes to Extensions UI #27

Harley Acheson referenced this issue from blender/blender-addons-contrib

2024-03-28 18:05:20 +01:00

UI: Changes to Extensions UI #27

Dalai Felinto commented