Flarum 2.0: Extension Manager UI/UX for Discovery and Installation

Darkle

Hello everyone,

In this design proposal, we're spotlighting an upcoming addition to the Extension Manager slated for Flarum 2.0. As previously discussed in the Staff Diary 2.0, the Extension Manager will include an extension listing UI, enabling users to discover and install extensions directly from the admin dashboard. Sounds thrilling, right?
I've been working on this for a while, and now that the proposal is in a more advanced stage, it's time to share our progress and hear your thoughts and suggestions.

Here's a comprehensive breakdown:

1. Top bar:

(A) Use of tabs:

Initially, I opted for tabs, but I'm now reconsidering due to scalability concerns and the future possibility of adding more filter/categories like "Themes"... This could potentially overwhelm the tab system.

(B) Use of dropdown:

This simpler alternative seems more resilient and adaptable for future expansions.

2. Extension listing cards:

(A) Badge-based approach:

This design keeps it clean while still providing necessary information via tooltips, as seen with the "Compatible" badge. Other badges might include "Premium", "Flarum Foundation (Team)", and "Third-party or Developer name".

3. Filter button

Initially overlooked, upon further review, we'll need to assess Flarum current capabilities with dropdown stacking before finalizing.

4. Pagination and limits

To avoid taking up too much screen space, I'm considering a default of 2 rows for desktop listing (either 1-6 or 1-8 extensions). This might seem limited, but the browsing experience could be improved by allowing users to adjust the number of extensions listed per page via a dropdown.

5. Additional changes/considerations:

(A) Fixed "Extensions" tab:

With a potential indicator for (pending) updates.

(B) Relocating less frequent features:

Options and Queue could be moved to the extension page (not the fixed one), akin to the GDPR extension approach, to avoid clutter.

A notion that might have crossed some minds involves making extension cards interactive, revealing a modal with the README and more intricate details upon clicking. While intriguing, this concept exceeds our current scope due to its complexity and debatable necessity at this moment.

Your feedback is invaluable as we continue to refine this feature. Looking forward to your opinions and suggestions!

SychO

Darkle This looks great 🤩 ! my only comment would be regarding the options, I feel like they are too hidden now, would it work to have them as a tab instead among the top tabs? 🤔

tolgaaaltas

Great concept. My choice of top bar is would be tabs because it's easier to explore comparing to dropdown. A/B test results shows me users less interact dropdown menus comparing to tabs. As a long term Flarum user, it's not important for me which one will be used but first time users can easily interact with tabs.

Why all the filters made with dropdown? Is there any specific reason for that? If I understand correctly Type filter includes Language, Extensions and Themes (possibly in the future). Why they didn't made with checkbox? Users can make specific choices for theirselves with checkboxes. Users can't filter and see popular themes and extensions without languages using dropdown filter.

I think Install and Updates section would be card based like extensions. There's lots of white space in the current design. If you don't like card based design there, maybe you could consider combining these fields with tabs.

If users rarely interact with Options and Queue, you can consider it being included in the pop-up window by placing a settings icon to the right of the Discover area.

Darkle

Based on your feedback, I've decided to keep the top tabs focused exclusively on categories, with 'Discover' as the primary tab to showcase all categories.

You might have noticed the version filter's gone. After some reflection, I'm questioning its utility, especially since the Extension Manager is for a live instance. It seems less useful to display incompatible extensions unless for exploration purposes... 🤔

Delving into cards details.

Premium extension example:

tolgaaaltas I think Install and Updates section would be card based like extensions. There's lots of white space in the current design. If you don't like card based design there, maybe you could consider combining these fields with tabs.

I'm glad you brought this up. I hadn't touched on this because I was exploring different layouts. The feedback on the empty space was a crucial point, prompting me to try both a table layout and a more streamlined card design to better manage multiple updates.

It's still a work in progress, the screenshot includes a view/status for when there are no updates, aiming to avoid any sense of emptiness.

I really appreciate your comments, they're incredibly helpful in refining our approach!

BTW sorry about the blurry images in the OP, it turns out that when exporting I didn't include the increment correctly. 😬

fakruzaruret

Perfect idea. Congrats!!!

ernestdefoe

Loving this. Can’t wait for v2 and all the extensions I will need to be updated for v2 as it seems like this is gonna be huge.