List of UI improvements

[TheEvilSkeleton]

This is a meta list to point out flaws and inconsistencies within the app. This will also list some recommendations to conform with the GNOME HIG. When a bulletpoint is checked, then it means that the recommendation got on its way to the codebase.

General

• Fix typos
• As a newcomer, it's quite difficult to understand how to use Tubefeeder. I've been using it for 10 minutes and I still don't know what to do. To address that, I suggest to make a welcome page that explains how to export from NewPipe and import to Tubefeeder and some general knowledge that the user needs to know.

Menu

• Hamburger menu
• "Settings" should be renamed to "Preferences"
• Add triple dots next to "Import"

Settings (Preferences)

• Transient with parent window

• Clickable link

Import window

• Touch friendly
• Transient with parent window

About window

• Properly list translators, designers, coders, etc.
• Transient with parent window

Filters and Subscriptions

• Dialog

[Schmiddiii]

Thanks for that list of UI improvements. I agree with pretty much every point.

As you already started on the about window (I will take a look at it soon), which of these points do you want to work at and which should I work on?

[TheEvilSkeleton]

I know virtually nothing about Rust, so making child windows transient with the parent window would be a good start. Fractal for example does just that: https://gitlab.gnome.org/GNOME/fractal/-/blob/ea937599e366a3dc3dee53e50aa1242e072c101c/src/application.rs#L183. You can use it as a reference.

[axtloss]

I'd also be ready to work on some of these points, is there anything explicit that I can work on?

[TheEvilSkeleton]

Perhaps you could work on the welcome screen that explains what this app is and how to use it? For reference, here's Bottles:

@Schmiddiii agreed on this but I want to make sure we're on the same page and if they like the idea.

[axtloss]

Yeah that should be doable. Although don't expect much in the actual explanation 😅

[TheEvilSkeleton]

That's fine. If you don't know what to say, then type Text and we'll figure out later.

The first slide should just be "Welcome to Tubefeeder". For the next slides, I suggest to explain what Newpipe, LBRY and Peertube are, all separately. Otherwise, we can explain what they are in one slide. Then, we should explain how/where to export Newpipe subscriptions and how to import them in Tubefeeder.

I rushed through the explanation. If I have time later, I'll edit the comment or add a new comment that explains better.

[Schmiddiii]

Thanks @axtloss for also considering helping here. Working on the welcome-screen sounds like a good idea, but a little complex (unless there is a widget for that, that I do not know of). If you think you can manage that, feel free to work on that.

To be honest I thought about the welcome-screen a bit differently, I thought more about AdwStatusPage for empty feeds/watch later/filters/subscriptions explaining some things, but the plan of @TheEvilSkeleton sounds even better.

[axtloss]

What do these extra introduction windows look like on mobile phones? Considering Tubefeeder is made for the pinephone it should still be a high priority to keep this working properly on mobile views

[Schmiddiii]

It is definitly high-priority that they also work on mobile, but as long as you use libadwaitas window and correctly wrap the text, it should also fit.

[TheEvilSkeleton]

@Schmiddiii I suggest to make this a dialog:

What do you think?

[Schmiddiii]

Yes, that could also be nice. Also for filters.

[Schmiddiii]

Just one update on the near future of this issue: I will probably be very busy the next few months and will therefore not be able to work on it. If one of you will want to continue working on it, I will be greatful and will probably be able to provide quick reviews of the code and merge. It not, this is also ok. I will then work on the rest once I have some more time.

[TheEvilSkeleton]

That's fine. I know little about Rust so I'm not really qualify to maintain it anyway. I'm busy right now as well but I plan to contribute to the rest in the future.

[Schmiddiii]

The dialog for filters and subscriptions have been implemented in #113. I'm not sure if we should really work on a welcome-page anymore as the welcome-page provided by GTK is most likely not phone-friendly, and I don't really know how I would make one phone-friendly.

[TheEvilSkeleton]

The dialog for filters and subscriptions have been implemented in #113.

Nice! It looks SO much better

I'm not sure if we should really work on a welcome-page anymore as the welcome-page provided by GTK is most likely not phone-friendly, and I don't really know how I would make one phone-friendly.

Me neither. I thought it was supposed to be a Linux mobile alternative to NewPipe, but to be honest, I still get confused with the UI, and easily get lost. I guess it needs more polishing and UX changes, rather than a welcome-page

[TheEvilSkeleton]

There are typos: it should be YouTube, LBRY and PeerTube

[Schmiddiii]

Me neither. I thought it was supposed to be a Linux mobile alternative to NewPipe, but to be honest, I still get confused with the UI, and easily get lost. I guess it needs more polishing and UX changes, rather than a welcome-page

Tubefeeder was designed to be a replacement for NewPipe, but just for me with minimal features instead of every feature NewPipe supports. I think it is better to think of Tubefeeder as an RSS-feed reader specially designed for videos.

Are there any areas you feel are expecially easy to get lost in which need more changes? As I created the app and used it for a long time, this is hard for me to answer.

[TheEvilSkeleton]

Tubefeeder was designed to be a replacement for NewPipe

Thanks for confirming that

Are there any areas you feel are expecially easy to get lost in which need more changes? As I created the app and used it for a long time, this is hard for me to answer.

For starters, the first-time impression. When you launch the app for the first time, you are thrown in the Feed section, where it doesn't really guide you. There's only a comment that says "Are you subscribed to channels?", but I don't think that's enough.

Instead, I suggest to remove the comment and add a button for subscribing to a channel. Something like this:

That way, the user will know what to do as their first step.

[Schmiddiii]

Should the button actually open up the subscription dialog or just to to the subscription page?

When opening the subscription dialog, the user will probably add the first subscription but will then be confused as the button is not shown anymore.

If going to the subscription page, the user will be confused what to do now.

[TheEvilSkeleton]

I'd go with the dialog. When the user adds a channel, the Feed page should automatically populate. I presume it should be enough to get the user started and explore the rest of the app. They'll also notice that the recently subscribed channel is in the Subscriptions page

[Schmiddiii]

Two things I still don't like about the current UI, but which I don't really know how to solve:

• Depending on if the title has one or two lines, the thumbnail has a different size.
• The Play/Download images shown moving the entire video-item.

[axtloss]

I tried to fix these issues, but the first issue is due to how the images and titles are aligned, it may make more sense to redesign the entries to have a layout similiar to youtube's.
Something like this:

[TheEvilSkeleton]

Yup, this looks so much better. I'd put the Watch Later button under the dropdown button, and change the arrow down icon with view-more

[TheEvilSkeleton]

If titles are too long, we could use Pango.EllipsizeMode to truncate text

[axtloss]

I'd put the Watch Later button under the dropdown button

I'm not sure what you mean, like put the button under the dropdown button or the "Watch Later" function inside the drop-down menu?

[TheEvilSkeleton]

the "Watch Later" function inside the drop-down menu?

That

[Schmiddiii]

Something like this:

Even though this already looks pretty good, I personally prefer a more compact layout like the one used by NewPipe (or currently Tubefeeder). Maybe a setting to switch in between them?

If titles are too long, we could use Pango.EllipsizeMode to truncate text

This is already used in Tubefeeder, but I allow two lines as one line often does not suffice (e.g. for Lets Plays where the title is prefixed by the game, when the game name is long the actual title of the video is cut off).

the "Watch Later" function inside the drop-down menu?

I'm not a fan of that as the watch-later is by far my (and probably of most others) most used action for videos (except playing of course).

[axtloss]

Even though this already looks pretty good, I personally prefer a more compact layout like the one used by NewPipe (or currently Tubefeeder). Maybe a setting to switch in between them?

Yes that would be possible, but the compact view should probably still be redesigned as the issue you described is an issue with how the widget is structured.

[Schmiddiii]

I have now made a PR (#125) that improves the feed list items (only the compact view for now).

[rene-coty]

If I might add other improvements pertaining to the UX 😇️, I would suggest the following:

• Including a "Help" window inside the application, instead of referring to the wiki.
  When I installed Tubefeeder, I didn't undestand why the videos didn't play when clicked. A description in the "Preferences" windows refered to a wiki for that, but without any link to the wiki itself. Including a Help window in the app would prevent this incident (some users that don't understand why it just doesn't work, without any indication might just switch to another app). Besides it would bring a more unified experience.
• Adding descriptions to the buttons in the subscription page
  Hovering the '-' and the '>|' buttons with a mouse (I use the app on a regular computer) doesn't display any description. I could deduct that the '-' button removed a channel, but the other wasn't clear at all.
• Including the logo of each channel in the subscriptions page to make it more elegant
• Adding keyboard shortcuts (Ctrl+Q..), but I acknowledge this would have no utility on a mobile (it's more of a plus for those who want a Youtube player that integrate in the GNOME desktop)

+I also encountered a UI bug
- [ ] The "add subscription" pop up isn't centered sometimes:
I don't exactly know when / how / why this occured, everything was normal at the beginning (I just noticed it after a few minutes of usage)..

[TheEvilSkeleton]

The "add subscription" pop up isn't centered sometimes:

This is tracked in #123

[Schmiddiii]

@rene-coty the improvements you suggest sound good. I have left a few comments for each below. Nevertheless, I probably will not be able to work on these again in the next few months as university started again.

Including a "Help" window inside the application, instead of referring to the wiki.
When I installed Tubefeeder, I didn't undestand why the videos didn't play when clicked. A description in the "Preferences" windows refered to a wiki for that, but without any link to the wiki itself. Including a Help window in the app would prevent this incident (some users that don't understand why it just doesn't work, without any indication might just switch to another app). Besides it would bring a more unified experience.

I agree that this would help very much, but we should also consider adding a popup when Tubefeeder notices that the command cannot be found or the command exited without success, as discussed a little bit in #112. What content should this have?

Adding descriptions to the buttons in the subscription page
Hovering the '-' and the '>|' buttons with a mouse (I use the app on a regular computer) doesn't display any description. > could deduct that the '-' button removed a channel, but the other wasn't clear at all.

That would probably be an easy one. But I think the subscriptions and filter items in general require a rework similar to the feed.

Including the logo of each channel in the subscriptions page to make it more elegant

That would of course be pretty nice, but I think also not that easy. Would first require work on the tubefeeder-extractor.

Adding keyboard shortcuts (Ctrl+Q..), but I acknowledge this would have no utility on a mobile (it's more of a plus for those who want a Youtube player that integrate in the GNOME desktop)

I'm fine with adding keyboard shortcuts, and also think that should not be that hard. Which would you recommend?

[rene-coty]

This is tracked in #123

Sorry, I will cross this out

[rene-coty]

I agree that this would help very much, but we should also consider adding a popup when Tubefeeder notices that the command cannot be found or the command exited without success, as discussed a little bit in #112. What content should this have?

My knowledge is relatively limited (I'm a law student 😅️), but I suppose one could use Adw.Toast with a short message like "Player not found", with "Preferences" as action button, to return to the Preferences window for the user to make the change.
Btw toasts could be used to provide feedback for generic actions when triggered, like "Added to Watch later", "Downloaded", "Copied to clipboard", or "Added to subscriptions" ;)

I'm fine with adding keyboard shortcuts, and also think that should not be that hard. Which would you recommend?

The most intuitive ones would be "Ctrl+Q" to quit, "Ctrl+R" to refresh the feed, "Ctrl+," to open preferences, "Ctrl+?" to open the shortcuts window. But you could also add application-specific shortcuts for the "Feed" / "Watch later" / "Filters" / "Subscriptions" pages, for the "import" function.. feel free to take inspiration from GNOME HIG ;)