[Web] Album filtering | Immich | Page 1

floral ore Dec 28, 2024, 2:52 PM

#

Hey guys!
I have been thinking about album filtering a bit. Right now the Top Bar is a bit cluttered, there are many options, 'create album' is just one of them, mixed with view changes, grouping, search etc.

I was thinking of two things:

decluttering the top bar, only leaving 'create album' and 'search album'
putting all options behind a filter button, just like it is on the main search
Adding the ability to filter for.
- Owned
- Shared with me
- Shared with others (select people with whom they are shared)
- all of the above but inverted (e.g. to see albums which are shared with personA, or to see albums NOT shared with personB (yet))

#

This is def. a UX question (how to to it best), so i'm looking for input

#

Current

#

suggested

foggy pollen Dec 28, 2024, 2:53 PM

#

Putting all the filter/sort/layout into a modal seems like a good idea to me

floral ore Dec 28, 2024, 2:53 PM

#

It does add an extra click for the most simple use cases. In my mind that's fine, it might bother others.

#

Also i'm not sure yet how exactly to put it there as in above's suggestion it's kinda tied to the search, while for pure filtering, layouting it might be weird to click sth in the search bar

warped idol Dec 28, 2024, 4:08 PM

#

floral ore suggested

I think the button there implies the settings are specific to searching. I think that’s good for filters but presentation settings shouldn’t go there

floral ore Dec 28, 2024, 4:09 PM

#

Agreed. But splitting it up doesn't make a lot of sense either imo.
What do you think about moving the button out of the search bar?

warped idol Dec 28, 2024, 4:11 PM

#

I think that’d work

#

To the right of the “create album” button

floral ore Dec 28, 2024, 4:12 PM

#

Yep. And then we could have everything in there.
view options + filtering

#

I do wonder though whether the dialog should apply the change directly or only on hitting submit

#

Its kinda nice seeing the change directly

#

But then.. what does the submit button do 😄

warped idol Dec 28, 2024, 4:14 PM

#

It should apply right away, no need for a submit button

#

The instant feedback + fewer clicks is better UX

floral ore Dec 28, 2024, 4:17 PM

#

WIP

#

I hate it though xD

warped idol Dec 28, 2024, 4:19 PM

#

It doesn’t need to be a big modal. Something similar to the one you get when you click on the profile pic would be nicer and more compact

floral ore Dec 28, 2024, 4:20 PM

#

oh that's a very good point. i was kinda stuck on the search one

#

Thx

#

Main thing i'm still worrying about is how i present the filtering by 'shared with' as this is kinda a nested dropdown or sth 😄

warped idol Dec 28, 2024, 4:24 PM

#

Maybe just shared with me / shared with others without the selection? I think it’s simpler that way

floral ore Dec 28, 2024, 4:27 PM

#

Yes of course thats simpler but it doesn't solve the use case :/

#

I kinda want to know which albums i need to still share with X, which are already shared with Y sth like that

warped idol Dec 28, 2024, 4:31 PM

#

Okay, then maybe the “shared with others” mode can have a pencil icon that shows a different modal where you can search for and select users

floral ore Dec 28, 2024, 4:31 PM

#

That's a good idea. That way the advanced use case is hidden

#

and main part is still kept simple

#

Thx!

floral ore Dec 29, 2024, 12:35 AM

#

Slowly progressing 🙂

floral ore Dec 29, 2024, 4:11 PM

#

I realized that there is no good use case for selecting multiple users as it wouldn't be nice to see anyway with which user it's shared, so i can simplify a bit 🙂

floral ore Dec 29, 2024, 6:01 PM

#

@warped idol
What do you think about this?

floral ore Dec 29, 2024, 6:37 PM

#

warped idol Dec 29, 2024, 6:50 PM

#

Nice. What if you got rid of the radio buttons and instead made Shared with have a user next to it, starting with your user and letting you switch it to a different user

floral ore Dec 29, 2024, 7:16 PM

#

warped idol Nice. What if you got rid of the radio buttons and instead made `Shared with` ha...

I was thinking about that, but how would you do the not shared with part then?

#

And the only way to unselect would be then to delete the user selection

warped idol Dec 29, 2024, 7:25 PM

#

Is "not shared with" that important? I feel like it complicates things for something that feels niche. Do you share most/all of your albums with someone and want to make sure they're all shared with that person?

floral ore Dec 29, 2024, 7:30 PM

#

Yeah exactly that's the case

#

I share about 9/10 With my family

#

Id assume that's a regular use case but maybe it's nit.

floral ore Dec 29, 2024, 8:07 PM

#

warped idol Is "not shared with" that important? I feel like it complicates things for somet...

The 'not shared' (without specifying a person) is also very nice to see which albums only YOU have access to. Kinda like which are the private ones.

warped idol Dec 29, 2024, 8:15 PM

#

I read up a bit on UX practices for exclusions. Put everything back on the main bar for easy access, but remove the pill with all/owned/shared. Instead have a "Shared with" (naming is hard) dropdown that includes you and all the users you share anything with. They're all selected by default and you can deselect them, with "select all" and "deselect all" buttons for convenience. You can deselect yourself to see all the things shared with you, deselect all + select yourself for only your assets, etc.

#

Basically main idea is the select all / deselect all mechanism where inclusion / exclusion is a matter of whether something is selected

#

Okay so actually the "you" part of it is awkward so maybe that would be handled separately and deselecting all would mean only your assets

#

So basically you still have the pill but with only "owned" and "shared with", where the latter is a dropdown that includes "you" (specifically shared with you) among the options

#

And "owned" is a binary toggle that isn't mutually exclusive with "shared with"

warped idol Dec 29, 2024, 9:17 PM

#

Hmm so this is actually somewhat different in that it's additive vs. subtractive filtering (whether you start selected or unselected). I still think the dropdown approach in general is going to be the best way to do this, but I'm not sure what the best way to convey include vs exclude would be. The design should be simple and seamless and that generally means no exclusion filtering. An "advanced search" doesn't really make sense either since there are only like three filters (name, ownership and sharing) and only the name has high cardinality

#

Last thought of the day: keep everything the same as on main except "shared" is a dropdown (should ideally include the profile pics of the users). The top of the dropdown has an include/exclude toggle to represent what selection will do. You can't include some users and exclude others, but this should cover most use-cases in practice and keep things simple

floral ore Dec 30, 2024, 8:58 PM

#

warped idol Last thought of the day: keep everything the same as on main except "shared" is ...

Sorry i was busy the whole time, thanks for thinking about it further.
Why would i access the albums that i have NOT shared with personX when i click on the 'shared' part though 😦

#

Imo Shared/Notshared is a part of 'owned' albums, as i can only share albums that i own

#

That's also why i wanted to have the separation
All | Owned | Shared with me

#

Because Shared with someone else, is really just a part of the owned ones.

warped idol Dec 30, 2024, 9:01 PM

#

I think of ownership and sharing as separate things. If I'm filtering by something that relates to sharing, I'd gravitate toward the option called Sharing

#

I think it's surprising for that to be tucked under "owned"

floral ore Dec 30, 2024, 9:01 PM

#

Also btw, i was thinking of a separate feature where i can multi select albums to share (or unshare) with users, instead of going 1 by 1. That makes it even more important to have a way to view which albums i have shared, or not shared with a user.

floral ore Dec 30, 2024, 9:02 PM

#

warped idol I think of ownership and sharing as separate things. If I'm filtering by somethi...

It's true, those are separate things. Hmm, i think it really doesn't fit in either 😄

#

There's also a separate sharing page, which i guess only exists because it's possible to share single assets :/

warped idol Dec 30, 2024, 9:36 PM

#

I think this is the kind of thing that's hard to change without any usage data. We don't really know which parts of the horizontal bar are used often and which are not. Exclusion filters are more niche than inclusion filters and feel "power user"-y, so I'm not sure where they should go without affecting UX for normal users or making the UI design less elegant. The suggestion I made is a compromise that treats inclusion as default in a way that's (imo) simple and easy to use even if you're looking for exclusion

#

In general I don't like layout shifts or things that are nested and tucked away behind multiple clicks, and I think UI elements should be designed in a minimal, seamless and flexible way that doesn't emphasize a particular workflow

floral ore Dec 30, 2024, 9:39 PM

#

Yeah you are absolutely right. Usage data would be key here. And exclusion is definitely a niche. It's always hard to do advanced features without hiding them to much.

floral ore Dec 30, 2024, 9:40 PM

#

warped idol Last thought of the day: keep everything the same as on main except "shared" is ...

Can you elaborate a bit on how that would work Ui wise?

warped idol Dec 30, 2024, 9:43 PM

#

So the button would have a downward arrow that signals it's a dropdown. Clicking it would open a dropdown where the top has a clickable INCLUDE button. Toggling it changes the text to EXCLUDE and changes the color. The users are listed below that with their profile icon on the left and their name on the right and a select button to the right. Changes take effect immediately. When there are selections, the sharing button has a more "active" color and shows the number of users you're filtering by

#

Maybe include/exclude isn't the right wording or it can be more verbose like "is shared with / "not shared with" or something, but that's the general idea

floral ore Dec 30, 2024, 9:46 PM

#

Wouldn't the default need to be a selection of all users?

warped idol Dec 30, 2024, 9:48 PM

#

I read on this and apparently users generally expect "all unselected" and "all selected" to be the same

#

The expectation is that if some things are selected, only then are you actually filtering by something

floral ore Dec 30, 2024, 9:49 PM

#

Mhmm that makes sense

#

I'll try that then 👌

floral ore Dec 31, 2024, 1:45 PM

#

warped idol So the button would have a downward arrow that signals it's a dropdown. Clicking...

I was thinking of reusing the 'invite to album' control for that, what do you think? it's a 'full screen' modal, but i think it would fit quite well.

#

I could ofc also create a new one, but this one is kinda what we want already, and especially if we want the user portrait as well we will need some space

warped idol Dec 31, 2024, 3:59 PM

#

Ooh, great idea

floral ore Dec 31, 2024, 4:02 PM

#

Will need to see if it's feasible to reuse or if i have to copy but reusing a lot should be feasible and at least to the user it should be really similar 🙂

floral ore Jan 2, 2025, 5:04 PM

#

warped idol So the button would have a downward arrow that signals it's a dropdown. Clicking...

i have a working version again, but there's one weird behavior now :/
'Shared' lists albums that are shared with ME or that i share with others.
So when e.g. filter by exclude and put 'hans' there, who owns it (but is not me), it would show up.. because it's not shared with hans.. but only because it's owned by hans and shared with me 😄

#

The other way around, the same.
Include selected, the own that hans shares with me doesn't show up

floral ore Jan 2, 2025, 5:21 PM

#

And also now that i'm using it, it seems very very complicated with multiple users selected 😦 esspecially the 'excluded' part is really counterintuitive

warped idol Jan 2, 2025, 5:32 PM

#

I think the users would need to be AND’ed rather than OR’d for the multi-select to really work for exclusions

floral ore Jan 2, 2025, 5:32 PM

#

I agree

#

AND for exclude OR for include

warped idol Jan 2, 2025, 5:33 PM

#

Yeah that should work

floral ore Jan 2, 2025, 5:57 PM

#

this is the logic rn

      case AlbumFilter.Shared: {
        if (userSettings.usersFilterMode === AlbumUsersFilterMode.Include && userSettings.usersFilter?.length > 0){
          albums = sharedAlbums.filter(album => album.albumUsers.every(user => userSettings.usersFilter.includes(user.user.id)) || userSettings.usersFilter.includes(album.ownerId));
        }
        else if (userSettings.usersFilterMode === AlbumUsersFilterMode.Exclude && userSettings.usersFilter?.length > 0){
          albums = sharedAlbums.filter(album => !album.albumUsers.some(user => userSettings.usersFilter.includes(user.user.id)) && !userSettings.usersFilter.includes(album.ownerId));
        }
        else{
          albums = sharedAlbums;
        }
        break;
      }

warped idol Jan 2, 2025, 5:58 PM

#

floral ore i have a working version again, but there's one weird behavior now :/ 'Shared' ...

Hmm yeah the directionality gets lost. Maybe separating out “shared with me” / “shared with others” is the way to go after all. Two approaches on my mind:

Split “shared” in the pill into “shared with me” and “shared with others” that both have dropdowns. To make room for that, move the presentation options to the modal in the corner
Include with / by as a toggle in the dropdown

I’m leaning toward (1) for the fewer clicks and being more intuitive at a glance

floral ore Jan 2, 2025, 5:59 PM

#

Why would the 'shared with me' option need a dropdown?

#

When an album is shared with me i can't reshare it anyway

warped idol Jan 2, 2025, 6:01 PM

#

Say you know X person shared something with you and you don’t remember the exact name. Also for design symmetry

#

There’s more than one use-case

floral ore Jan 2, 2025, 6:01 PM

#

Hmm i see.. yeah that makes sense

#

"To make room for that, move the presentation options to the modal in the corner"
Do you mean like that without the all/owned/shared?

warped idol Jan 2, 2025, 6:03 PM

#

Yup

floral ore Jan 2, 2025, 6:03 PM

#

fingers crossed i still have that in a stash 😄

#

Are there any specific resolutions we are optimizing immich web for?

warped idol Jan 2, 2025, 6:04 PM

#

I imagine the view options are changed less often in the day to day, whereas filtering by sharing and ownership comes up more often

#

I don’t think we have any set resolutions

#

But I’d say the bar is that it should look good on a 13” laptop and ok on a mobile browser

floral ore Jan 2, 2025, 6:07 PM

#

warped idol But I’d say the bar is that it should look good on a 13” laptop and ok on a mobi...

that's already not the case 😄

warped idol Jan 2, 2025, 6:07 PM

#

As long as you don’t make it worse it’s fine haha

floral ore Jan 2, 2025, 6:07 PM

#

😄

#

i guess i have to settle with 'Not worse' then, because otherwise i'll never finish this 😄

warped idol Jan 2, 2025, 6:10 PM

#

The best would probably be to have the option modal work like an overflow menu. Fit what you (reasonably) can on a display and put the rest in the menu. That’d make it work well on all displays. Not that you have to do this of course

floral ore Jan 2, 2025, 6:48 PM

#

do you think the state of the selectedusers should be shared across the 2 dialogs?

floral ore Jan 2, 2025, 7:15 PM

#

Hmm never mind, it would suck if it's shared^^

floral ore Jan 2, 2025, 9:08 PM

#

Can you think of a use case for 'not shared from' person X ? 😄

warped idol Jan 2, 2025, 9:08 PM

#

Pics from your ex? idk haha

floral ore Jan 2, 2025, 9:10 PM

#

lol 😄

#

floral ore Jan 2, 2025, 9:50 PM

#

wdyt

warped idol Jan 3, 2025, 6:16 PM

#

The toggle isn’t super clear on what it does. I think I’d prefer if it were more like SHARED WITH / NOT SHARED WITH and the one that isn’t selected has lower opacity

#

The contrast with the other option makes it clearer

#

But other than that really nice job!

#

“shared” and then “shared with me” is confusing since the latter seems like it should be part of the former. It’d be clearer as “shared with me” and “shared with others”

floral ore Jan 3, 2025, 8:30 PM

#

warped idol The toggle isn’t super clear on what it does. I think I’d prefer if it were more...

Mhmm yeah I agree. But then I could basically use a group tab control?

floral ore Jan 3, 2025, 8:32 PM

#

warped idol “shared” and then “shared with me” is confusing since the latter seems like it s...

I was thinking of that as well, but in my opinion it's clear enough because it's right next to each other.
Typically you have owned albums that you share and then there are albums that are shared with you. I agree it's not 100 clear but having a shared by me or shared with others is really long and ugly

#

The service we don't name has this solved by not having a shared at all, just a all, owned and shared with me, but I don't really like this.

#

It comes back to the issue that albums that I share are just owned albums that I share and not shared albums xD

warped idol Jan 3, 2025, 8:37 PM

#

Another option would be to have all / owned / shared, where you can toggle shared with me / shared with others through the modal

floral ore Jan 3, 2025, 8:38 PM

#

And per default it would show both like it is now?

warped idol Jan 3, 2025, 8:38 PM

#

Yup

floral ore Jan 3, 2025, 8:39 PM

#

In this case we could even change the text accordingly maybe?

#

Depending on the selection in the modal?

warped idol Jan 3, 2025, 8:39 PM

#

Oh yeah, I like that

floral ore Jan 3, 2025, 8:39 PM

#

Ok ill check it out once I'm back.

floral ore Jan 6, 2025, 10:34 AM

#

warped idol Another option would be to have all / owned / shared, where you can toggle share...

any idea which control i could use for the shared with me / shared with others?

#

Technically what we would want are checkboxes

foggy pollen Jan 6, 2025, 10:37 AM

#

This control on the current page already does that checkbox vibe right? https://bo0.tz/u/nVidnL.png

floral ore Jan 6, 2025, 10:37 AM

#

foggy pollen This control on the current page already does that checkbox vibe right? https://...

not really, it's radiobuttons not checkboxes (only one can be, and one has to be selected)

foggy pollen Jan 6, 2025, 10:38 AM

#

Ahhh my bad, I mixed those up

floral ore Jan 6, 2025, 10:39 AM

#

What mertalev suggested is to leave All | Owned | Shared like it is, but shared has a button that opens a modal.
In this modal the user can choose if he wants to see 'shared with me' 'shared by me' - or both

#

Depending on that selection i'd change the button text dynamically

#

I'm really unsure myself though, so a third opinion is very welcome

foggy pollen Jan 6, 2025, 10:40 AM

#

I think that sounds reasonable

#

But I'm not particularly good at UI :P

floral ore Jan 6, 2025, 10:41 AM

#

I could do another groupcontrol ofc, that just has
All | Shared by me | Shared with me
and only one can be selected

#

But then right below that groupbox, we would have another groupbox with the
Shared with | Not shared with

floral ore Jan 6, 2025, 11:06 AM

#

#

Besides the background beeing the same for the groupbox inactive and the modal.. i'm very sceptical

#

(also the title of the dialog would need to be different ofc)

floral ore Jan 6, 2025, 4:42 PM

#

I really don't like it because it mixed simple filtering 'shared with me / by me' with the user filtering

pulsar laurel Jan 6, 2025, 7:08 PM

#

Can I get back to you about this later in the week?

floral ore Jan 14, 2025, 7:31 AM

#

Hey @pulsar laurel just a reminder, don't feel rushed 🙂

pulsar laurel Jan 14, 2025, 12:13 PM

#

floral ore Hey <@285511635735543828> just a reminder, don't feel rushed 🙂

I talked to a designer and she is cooking up something. 😅

#[Web] Album filtering