Website Plugin UI

Hi @laurent,
I've updated the post to include version 2. It displays plugins according to the category selection on the sidebar. And search box is now pinned to the header. What do you think of this version?

Hello PackElend,

This merged PR adds an optional categories field in plugins' manifest field, allowing devs to add multiple categories.

Personally, I think we can explain what are plugins in 1-2 sentences like how it's done on the Firefox add-ons page and then we can display searching and filtering options.

I think we are letting the plugin developers decide the categories themselves, so we don't need to label it ourselves. Joplin team will label the recommended plugins if I am not wrong.

that can be become messy as you can use different words for the same meaning

The categories themselves are preset, only the choice is left to the developer, there were quite a few discussions to make sure there wasn't anything that could be too ambigious. I guess maintainers with access to the plugin repo could submit a change if there is any abuse but it might be best to play it by ear rather than be too restrictive from the outset.

Categories

Category Description
appearance dealing with appearance of some element/s of the app. For example line numbers, layout, etc.
developer tools built for the developers.
editor enhancing note editor.
files dealing with files. For example import, export, backup, etc.
integrations integrating third party services or apps.
personal knowledge management managing and organizing notes.
productivity making Joplin more productive to use.
search enhancing search inside the app.
tags dealing with note tags.
themes changing theme of the app.
viewer enhancing the rendering of a note.
const allPossibleCategories = ['appearance', 'developer tools', 'productivity', 'themes', 'integrations', 'viewer', 'search', 'tags', 'editor', 'files', 'personal knowledge management'];
1 Like

Thanks for the update. As a general rule I prefer not to be the only one reviewing projects, so please avoid @-mentioning me or anybody in particular, and instead simply ask the community to give their feedback

1 Like

I really like version 1. It's very clear and provide good discoverability for users coming on the page for the first time. There's room to breath. It focuses on what's important to new users: discovering the top rated plugins, those that are the most useful and the most likely to be useful for those new users.

In version 2, the carousel would make sense if its content were pictures, but in this case, I don't think there will be any. Also, the side bar on the left takes a lot of space, provide little value for new users, and won't be easy to transpose for the mobile version of the website.

In my day job working in games, I specialize in UX and onboarding new users, so don't hesitate to ask me directly if you need guidance on those topics! :slight_smile:

3 Likes

11 posts were merged into an existing topic: What shall be shown in Website Plugin

Do you mean something looks like this?


I can merge them in the top bar. If this is good with the majority, I can change it right away.

1 Like

type any may reduce the text field or put in the header (only Extend Your Joplin) as it occupies 30 %

I think its better to have one text field since type to trigger might be confusing for new visitors.

You mean like the one I mentioned above? Remove the one in the hero section and put the search field in the top bar? This sounds good to me.

I like this but be prepared that even the text may have to disappear.
Maybe some community member has a good idea of how the top shall look like to include anything

@narF anything to add based on your experience?

1 Like

Hi guys,
I've built a demo with Astro and deployed it on my personal Github repo.
https://retr0ve.github.io/website-plugin/
This demo is not completed yet, many features such as search and the detail page are not finished.
Please feel free to make suggestions on UI, especially on how the banner should look like. Thank you!

3 Likes

So does it look on my mobile

Just two comments.

The search field isn't obvious. Maybe a magnifying glass or simply the text "Search" could help? This would make it look similar to the note search field that's already used in Joplin.

There's almost no indication on mouse hover over categories in the left sidebar. I think the text colour changes very slightly, but it's basically unnoticeable. How about making the hover effect more obvious? Especially since hovering over other elements, e.g. plugins is very clear with background colour changes, etc.

1 Like

I haven't done anything to make it adapt to mobile screens. This demo is only tested on desktop now and there are still many bugs.

If we agree to this basic layout then I'll start writing code in the main repo and creating PRs. And I'll ensure this I'll take the small screens into account. :grinning:

1 Like

Thanks for your advice! These suggestions are really practical. I'll implement them soon.

I'm currently only on mobile :grin:

I capture a few full-sized screenshots for you. :grinning: Even if after I optimized for mobile devices, the layout will look a bit different than the desktop version. I think we should take the desktop layout as a starting point since currently mobile Joplin don't have a plugin system now.

Screenshots



1 Like

But you can use the mobile to scan the available plug-ins

Yeah, I agree. That's why I said I'll make it adapted to smaller screens, I'm just suggesting that maybe we should use the desktop version as the starting point?