Improving UX/UI for search?

[SenorGeese]

I LOVE the idea of what muffon is doing. A complete music listening experience on desktop. Although I feel some important UX/UI features are missing to really completely replace using YT, YTM, Spofity, Deezer and any other music client.

If I want to start using muffon to replace YTM and Spotify. I need to start building my collections of music. Since there isn't third party service logins (Spotify, Deezer, Youtube) to automatically gather my music. I have to search for all my music. Currently, I think muffon has a pretty mediocre searching experience.

Here are the problems I think exist with the current Search UX/UI.

1. Screen focus/screen estate

I believe the search menu is unnecessarily small and feels like a sub menu instead of a focused feature.

Solutions:

1. Remove the vertical space/padding

Example:

2. Move the Search bar, Search by, and Source to the side/sidebar.

Example:

A single solution or a mix of any of the solutions are improvements overall.

2. Persistent Search by filter

I have to change the drop down menu for Search by filter every time I search for a new song which is unnecessary and tedious.

Solutions:

1. Have a setting in Settings to have a prioritized Search by filter.

Example:

2. Automatically remember your last selection.

No example: This is just new code somewhere.

3. Source Search

I believe the search by source is much more important than the UI/UX it's given.

Solutions:

1. Tic Box

I'd like a tic box system so you'd be able to search one or multiple sources at the same time with one query.
Example:

You can see in this example. I'd have Spotify and Yandex Music selected as my sources to search through.

2. Put the icon in it's own box or print out it's name alongside the search and Search by filter.

Exactly like the Artists drop down menu. Just for the sources. A drop down menu with their names and icons.

Conclusion

Thanks for reading and getting to the bottom. I hope my photoshopped images are easy to understand. If you have more questions. Feel free to ask. I honestly would love to see muffon get better and better. It's already so beautiful and cool.

If these features in some form got added. I think it would upgrade and increase the UX for users and make muffon much better. Thank you.

[SenorGeese]

Oops. I forgot this.

4. Add to saved songs via hamburger menu.

Currently you can't add to saved songs list with the hamburger menu, and this makes adding songs to your saved songs list a lot slower.

Solution:

Add the "Add to saved songs" option under "Add to queue" option. This would make adding songs to your song list much much faster.

[SenorGeese]

Thank you! I hope to get to a capable enough level of coding to eventually make my own contributions or forks!

[staniel359]

@SenorGeese Thank you very much for your complex feedback. I really appreciate people's suggestions.
And thanks for nicely designing your issue, it's much easier to read.

---

Before going through your points:

Since there isn't third party service logins (Spotify, Deezer, Youtube) to automatically gather my music. I have to search for all my music.

I have to tell you that these services' integrations are planned.

---

And now to the primary question.

You know, I'm not really a UI/UX designer myself, so I try to make things as I would like them to be and as it would be comfortable for me to use them.
Sometimes even I don't know what would be better for me. And finding the solution that's suitable for everyone is quite a tough task itself.
So the current UI/UX is, of course, changeable.

I understand most of your points, so let me address them:

1. Screen focus/screen estate

I have the idea of getting rid of this small search dialog window and replace it with the dark transparent background with search interface in it and no borders.
What do you think?

2. Persistent Search by filter

Sure, I can add that.
Was thinking about this, but thought it wouldn't be necessary.

3. Source Search

3.1. But what if you select all of the sources? How and where will the results possibly fit?
3.2. Sorry, I don't seem to understand this one. Could you explain it?

4. Add to saved songs via hamburger menu

The point was: the track (the audio) can be saved only after you've played it and ensured that's the correct audio you want to add.
Do you think it's logical this way or does it need some enhancement?

[SenorGeese]

How are you doing the separation bar in the github markdown?

@staniel359 No problem. I enjoy creating it and it also assists in communicating ideas.

That's great to hear the integrations are planned. Hopefully the RE to get account data doesn't prove to be too difficult or fought back by the service.
I understand the pain of making good UI/UX, it's part of the fun though. I'm really glad to hear you're open to changing the UI/UX.

1. Screen focus/screen estate

I have the idea of getting rid of this small search dialog window and replace it with the dark transparent background with search interface in it and no borders.

I don't think I quite understand what you mean, do you mean a separate window with a transparent background?

Since muffon seems to take form of an internet browser. Maybe incorporating the address bar in the main application would be of interest?

This leaves a lot of space for metadata or album art for specific/popular song, or a second list for your second source or a secondary Search by filter?

This leaves a lot of space for metadata or album art for specific/popular song

Like Spotify, with the song list on the right and the Top result on the left.

2. Persistent Search by filter

Yay! Thank you!

3. Source Search

3.1

But what if you select all of the sources? How and where will the results possibly fit?

A really long list.

The user just wouldn't select all the sources if they don't need them? This tic box options just gives the user more control and makes finding music easier. If they want the previous system, just tic one box/source.

Personally I'd mostly just use Youtube and Spotify, and I don't think 2 sources would cause much bloat. If it does, you could always just limit the max of searched sources.

3.2

Sorry. I meant giving the Sources filter it's own box. It would make selecting and changing sources more important, faster, and I feel it's more uniform with the Search by filter (Artists, Tracks).

Example:

4. Add to saved songs via hamburger menu

Do you think it's logical this way or does it need some enhancement?

It does sound logical. I agree, but I do think it needs some enhancement.

For example if I'm looking for "Fear of Falling Asleep (Henry Green Remix)".

In Youtube Music:

You can see the cover art is mostly white with the black rectangle inside. It's Artist is TENDER. With it's somewhat specific Song name "Fear of Falling Asleep (Henry Green Remix)", and the Song length is 4:04.

If I search for "fear of falling asleep" in muffon:

This is with a different source "Spotify", that could cause inaccuracy. I can see the exact same name "Fear of Falling Asleep (Henry Green Remix)", The exact/similar cover art, "TENDER" as one of the Artists, and Song length is 4:04. I can reasonably guarantee this is the correct song.

Although logically the only way to be sure it's the correct song is to listen to it fully. I don't think the 0.1-1% chance that it's the incorrect song is enough reason to not have the "Add to saved songs" option/feature.

Since playback takes a few seconds to load and you'd no longer have to constantly leave and re-open the Search UI/dialog box. This would save time when saving your favorited songs, and saving time and reducing buffering is very important when designing UI/UX.

Conclusion

Thank you for responding, your consideration, and your time. If you have any questions, feel free to ask. Thinking about the psychological aspect of UI/UX and designing a better UI is fun. I hope my comment is understandable. Thanks.

[staniel359]

@SenorGeese

How are you doing the separation bar in the github markdown?

It's ---.
Discovered it accidentally :)

1. Screen focus/screen estate

do you mean a separate window with a transparent background?

I thought about this one. (Click "Show" button there).
Just plain transparent dark background with search content on it.

Since muffon seems to take form of an internet browser. Maybe incorporating the address bar in the main application would be of interest?

Good idea. Perhaps that's better than my variant above.
I think I can change the existing search UI to this one.
This will add the room for 3.2 proposal and also for this one:

Like Spotify, with the song list on the right and the Top result on the left.

And I can also add an All filter (along with Artists, Tracks, etc.).
So all categories could be displayed in one results section.

3. Source Search

3.1

Maybe that's a good idea, but I personally can't imagine myself selecting multiple sources at once instead of just switching between them.
Could you explain me the advantage of your approach?

3.2

Got it. Mentioned above.

4. Add to saved songs via hamburger menu

I've got your point.
But the problem is sometimes the track has only a 30-second preview instead of full audio.
Yes, the duration of your track (04:04) is correct, but the retrieved audio is just a fragment.

---

Thank you for responding, your consideration, and your time. If you have any questions, feel free to ask. Thinking about the psychological aspect of UI/UX and designing a better UI is fun. I hope my comment is understandable. Thanks.

You're welcome.
And thank you for your suggestions.

[SenorGeese]

@staniel359
Thanks, that separation bar will come in handy.

---

1. Screen focus/screen estate & 3.2

Good idea. Perhaps that's better than my variant above.
I think I can change the existing search UI to this one.
This will add the room for 3.2 proposal and also for this one:

That's great that you like the idea! It provides much more space compared to the current window/dialog box system.

3. Source Search

3.1

Maybe that's a good idea, but I personally can't imagine myself selecting multiple sources at once instead of just switching between them.
Could you explain me the advantage of your approach?

The advantage this features brings is very noticeable in my setup. It saves time, more convenience , and reduce tedious-ness.

I currently use 2 music services (3 if you consider YouTube and YouTube Music separate). I use YouTube Music and Spotify.

• Spotify for the better UI, client, audio quality, and cover art.
• YouTube/YouTube Music for the HUGE library for niche music and remixes.

For example "Citrus Love" is a song I want to listen to on muffon

• its a smaller known artist that probably won't be on Spotify.
  • I'd like to add the Spotify version because it has higher quality audio, cover art, and perhaps faster playback speed. - I go to muffon to search it and add it to my "Saved songs" list.
  • I go under "Spotify" source and it's not there, but I search for a minute to make sure I didn't miss the song, trying other searches like adding the artist name or a longer more accurate name.
  • It's not on Spotify
• Switch the source to "Youtube" and then you find it with or without "a minute to make sure I didn't miss the song, trying other searches like adding the artist name or a longer more accurate name."
• If I wanted to use other sources, I'd repeat the same minute long searches with optional different search queries.

If this tic box addition was made. I could just always only need one search. Turns 2+ searches into only needing 1 search.

3.2

Yay!

4. Add to saved songs via hamburger menu

But the problem is sometimes the track has only a 30-second preview instead of full audio.
Yes, the duration of your track (04:04) is correct, but the retrieved audio is just a fragment.

I don't quite understand this? Is there demo audio, and adding this save feature would save that demo audio instead of the actual song?

Could you explain this more?

[staniel359]

@SenorGeese

3.1

Thanks for the explanation.

You know, I'm open to new features, but I don't want to overcomplicate the interface.

I thought about your suggestion and maybe it does make sense in some cases.
But I don't know if it's in high priority right now.
And I need to think about how to implement it better visually.
So maybe later.
But I'll keep it in mind.

4.

I don't quite understand this? Is there demo audio, and adding this save feature would save that demo audio instead of the actual song?

When you play the track from Deezer of Spotify, sometimes, maybe it's location restrictions, the song has only demo audio.
And if I add the "Save" option to tracks' lists, you can accidentally save the demo instead of full song without knowing it.

[SenorGeese]

@staniel359

3.1

Thank you for considering it and understanding the idea and it's value. I understand it's slightly complicated but at least it's considered. Thanks.

4.

When you play the track from Deezer of Spotify, sometimes, maybe it's location restrictions, the song has only demo audio.
And if I add the "Save" option to tracks' lists, you can accidentally save the demo instead of full song without knowing it.

Aren't the demos ~30 seconds long? Couldn't you mistake the demo audio for the actual audio even if you listen to it for a bit?

I'd say it's still a good idea. It makes adding music to your saved songs much faster with ~99% accuracy (at least for me, not sure if the problem is of higher quantity in other sources or countries).

If you add the broken song. At least it's in your library for when you notice it's broken, you can just re-search it up, instead of forgetting about it, or not even having it in your library since adding music is a bit of a slower process right now.

Still think it's too dangerous to implement? Maybe it could be an additional setting that has to be toggled on?

[staniel359]

@SenorGeese

4.

Okay, I got your point. I'll add the option then.

[SenorGeese]

@staniel359

Yay! I'm happy to hear that you liked some of the ideas proposed. Thanks for your time, responses, effort, and for this really cool application.

---

TL:DR

These are labeled to my understanding throughout our conversation. If I get something wrong, let me know and I'll correct it.

"Yes" Features:

2. Persistent Search by filter

A setting that allows the users to choose the default Search by filter when searching for a new song.

Example:

4. Add to saved songs via hamburger menu

Adding a "Save to Saved Tracks" option under "Add to queue" in the hamburger menu in the search dialog. Allows quick and easy saving of your music searches.

Context:

1. Screen focus/screen estate

Create new UI for the search feature incorporating the address bar as a search bar.

Example:

This new feature provides the space to that will incorporate the new 3.2 feature.

3.2

Giving Sources selections it's own 'box' for faster, clearer, and cleaner selection.

Example:

"Not bad but not planned" Features:

3.1 Tic Box

A feature designed to reduce amount of searches and increase control of your search.

Example:

Problem:

Could overcomplicate the interface. Could use some redesigning for simplicity and usability.

Quote for self evaluation:

You know, I'm open to new features, but I don't want to overcomplicate the interface.
I thought about your suggestion and maybe it does make sense in some cases.
But I don't know if it's in high priority right now.
And I need to think about how to implement it better visually.
So maybe later.
But I'll keep it in mind.

---

Thank you again for your time, effort, and consideration. If you have any questions or need a tester I wouldn't mind helping. Thank you, and thank you for creating muffon.

[staniel359]

@SenorGeese Thank you very much!

Everything is correct. Thank you for organizing them.
But these features will take some time to be implemented, considering that I have a list of features to add.

[SenorGeese]

@staniel359

No problem figured they'd help, since I can't code yet. I understand development takes time. I'm just excited that they are on the list to be implemented. Thanks. Take care of yourself and have fun.

[staniel359]

@SenorGeese Thanks, you too!

[SenorGeese]

I noticed the changes for these features in muffon 1.6.0 release. Including all the "Yes" feature from my previous comment.

Thank you so much staniel359!

[staniel359]

@SenorGeese You're welcome!
And thank you too for your suggestions.

And I've been thinking about multiple sources search.
Actually this feature is already present on album/track pages. You can click Search in sources and this will search in almost all of the sources at once.
So I don't know if I should duplicate the existing logic.
What do you think?

[SenorGeese]

If you'd like I can try to provide some more suggestions (in new Issues). They just aren't as major as I perceived this Issues issues.

❤️ Thanks you so much @staniel359 for creating this app and taking my input into consideration and finding it useful.

Multiple Source Search (MSS?)

Awesome. I didn't know this Search in sources feature was here. It's quick and pretty. I actually used it shortly after you telling me about it.
I'm totally in favor of reusing logic, it allows for easy manageable, refactorable, faster, and less space consuming code.

Uh oh

I'm in America. YT is Youtube. YTM is Youtube Music. MSS is Multiple Source Search.

I wrote another 1000 characters, to explain why I thought MSS would be useful. Then I realized that you can't even save YT or YTM results. So If you searched for a song to save it to your muffon library, it quite literally would be pointless to search using YT and YTM as sources, therefore making Spotify the next best option for finding for your song. If the whole point I thought of this feature is because I wanted to search through YTM and Spotify simultaneously. Then searching through Spotify is the only option that makes sense.

Conclusion

So I guess this feature isn't going to be of use to me until we can save YT and YTM results.

[SenorGeese]

What are your thoughts on saving results from Youtube or Youtube Music querys? Have you tried it before?

[staniel359]

@SenorGeese Right now videos can be added to boomarks and favorites.
If you mean adding videos to library, then I can consider adding this option.
And after adding this one, you're suggesting adding MSS, right?

[SenorGeese]

@SenorGeese Right now videos can be added to boomarks and favorites. If you mean adding videos to library, then I can consider adding this option. And after adding this one, you're suggesting adding MSS, right?

@staniel359 Thank for responding and working on muffon 🗡️

Videos added to Bookmarks and Favorites

Right now videos can be added to boomarks and favorites.

This must be an account needed feature I assume, as I at least, cannot find a way to add Youtube videos to a Favorites or a Bookmark library. Here are a couple images to understand what I'm looking at.

Saving Youtube Videos

If you mean adding videos to library, then I can consider adding this option.

I don't prefer saving videos to the audio library, I just currently don't have a way to save videos.

I don't have any problem with adding videos to my "Saved Tracks". I think I'd rather have them separated in a different database/library. Converting or finding their 'audio-only' version, or creating a sort of "Background play" for the videos so you don't need play video but only it's audio track, then adding that to the "Saved Tracks" is also an option.

MMS

And after adding this one, you're suggesting adding MSS, right?

Sure. Of course, the more features and functionality is always welcome.

Single size UI

But, currently I'm finding the restrictive size of certain UI to be more unenjoyable compared to lacking MMS.

Examples:

I cannot view all source options even when I have enough space.

This behavior also happens with the "Scope" filter.

Similar behavior with the "Search" results

Thank you

I did not expect to write this much...

I hope you find this valuable and I thank you for considering my opinions and recommendations for your project!

[staniel359]

@SenorGeese

This must be an account needed feature I assume, as I at least, cannot find a way to add Youtube videos to a Favorites or a Bookmark library.

Yes, login is required.

I don't have any problem with adding videos to my "Saved Tracks". I think I'd rather have them separated in a different database/library. Converting or finding their 'audio-only' version, or creating a sort of "Background play" for the videos so you don't need play video but only it's audio track, then adding that to the "Saved Tracks" is also an option.

Interesting idea, I need to think about this one.
I'll tell you when I come up with something.

But, currently I'm finding the restrictive size of certain UI to be more unenjoyable compared to lacking MMS.

This was made intentionally to not overload the space visually and to keep the lists focused.
I'm pretty sure most of the sites are sticking to the same logic.

[SenorGeese]

Yes, login is required.

I'll make an account if I really need the saving feature. Thanks.

Interesting idea, I need to think about this one.
I'll tell you when I come up with something.

Glad you like the idea. Excited to hear what you come up with.

This was made intentionally to not overload the space visually and to keep the lists focused.
I'm pretty sure most of the sites are sticking to the same logic.

I'm not try to be an annoyance. I'm just curious as UI and UX is interesting. Do you have examples of "the sites with the same logic"?
I would personally call the UI unfocused instead of focused.

[staniel359]

@SenorGeese

Do you have examples of "the sites with the same logic"?

Actually, I don't. The sites that I know all have different search results logic.
I'm sorry, maybe it was just a wishful thinking.
The point is that I didn't want to make the lists too long.

I would personally call the UI unfocused instead of focused.

Any ideas how to improve it?

[SenorGeese]

@staniel359

Actually, I don't. The sites that I know all have different search results logic.
I'm sorry, maybe it was just a wishful thinking.
The point is that I didn't want to make the lists too long.

I get it, I hear you.

Any ideas how to improve it?

Whenever I suggest ideas for other people to work on, I usually always try to keep it simple also to minimize the amount of work needed to be done. This is to prevent major conflicts about the UI and to obviously not ask you to rebuild most of the front end 😅.

After communicating that, I think allowing the lists to be resized and give the borders of the lists a Resize icon to indicate the resizability, is a good improvement. Example below.

This UX is found on Spotify Desktop.
Wide left column for "Home", "Search", and "Your Library".

Arrow pointing to the cursor that now changed to a Resize style cursor to indicate resizability.

Left column now adjusted to my preferred size.

What do you think about doing this? It's not the only option, just #1 on my mind atm.

[staniel359]

@SenorGeese I've noticed that recently.
But trying to fit almost everything on one page - for me it looks overloaded.
I was wondering why didn't they make a separate page for this.

But I get your point.
I think I should add a similar "Enlarge" button to search results section.
I'll post a screenshot later for your approval.

[SenorGeese]

@staniel359

But trying to fit almost everything on one page - for me it looks overloaded.

Even after my adjustment/third screenshot?

But I get your point.
I think I should add a similar "Enlarge" button to search results section.
I'll post a screenshot later for your approval.

Excited to see what you come up with. Thanks for considering my input. I'm going to try to learn Figma or a similar application to better create references and examples⚔️.

[staniel359]

@SenorGeese

Even after my adjustment/third screenshot?

Especially.
Besides, I don't like when the whole screen width is occupied.
Like when someone prefers 4:3 over 21:9 ratio. :)

[SenorGeese]

@staniel359
So you prefer tall over wide?

[staniel359]

@SenorGeese I just don't like extra tall or extra wide. 🙂

[staniel359]

@SenorGeese Hey.

Came up with this one:

Plus option in settings.

[SenorGeese]

@SenorGeese Hey.

Came up with this one:

Plus option in settings.

@staniel359 Sorry to respond late. It's been a long time. After a quick read of the latest messages. I'm happy to see the changes I proposed being actualized. I like what you came up with. Does the resizable window behavior also work for the "Sources" drop down menu?
Does the Headphones or Star icon have anything to do with this Issue or just an unrelated addition you made that appears in the screenshot?

[staniel359]

@SenorGeese

1. Does the resizable window behavior also work for the "Sources" drop down menu?

It's only for the results list.
What to sources/scopes - it would be a really long list.
If set like this by default, I suppose some people may not like it.
Should there be an option for this?

2. Does the Headphones or Star icon have anything to do with this Issue or just an unrelated addition you made that appears in the screenshot?

No, just random icons 🙂 .

[xyloflake]

@SenorGeese all of your proposed ideas are fire! I like them. I wonder if you could help us with muffon-mobile designs.

[SenorGeese]

@staniel359

@SenorGeese

1. Does the resizable window behavior also work for the "Sources" drop down menu?

It's only for the results list. What to sources/scopes - it would be a really long list. If set like this by default, I suppose some people may not like it. Should there be an option for this?

2. Does the Headphones or Star icon have anything to do with this Issue or just an unrelated addition you made that appears in the screenshot?

No, just random icons 🙂 .

Of course I'm biased because I proposed this idea in the first place, but I think there should be an option (in settings) for enabling resizable sources windows. I think it would be awkward to have that option for the search list but not keep the same functionality for the sources list.

💀 lmao okay, were you testing a feature?

either way again sorry for the late reply. I never seem to get notifications from Github.

[staniel359]

@SenorGeese I think I can make them longer for larger screens (responsive).

lmao okay, were you testing a feature

Yeah.

either way again sorry for the late reply. I never seem to get notifications from Github.

No problem.

[SenorGeese]

Awesome. Thank you again for considering my recommendations and thank you for creating muffon.