UX: Improve touch event accuracy

[andrewlow]

To mark a photo as a favorite - you need to click on the heart

Consider the mosaic view:
https://demo.photoprism.org/browse?view=mosaic&order=added&public=true&quality=3

On a mobile device - the size of the tiles is quite small - and hitting the heart (favorite) is very very easy. This is due to the fact that in order to scroll the screen, you have to touch the screen.

There should be accommodations made when displaying to a mobile sized device OR it should be a more specific gesture on a touch screen device to click the heart. I'd even accept making it only a multi-select context menu option - but understand that would be annoying if you just wanted to tag something once.

Anyone using a mobile phone or small format table to view photos (especially in mosaic view) will certainly accidentally favorite photos they did not mean to.

[andrewlow]

Wow.. I searched for similar issues - but clearly not hard enough. This PR seems related #962

[lastzero]

We've already made accommodations and put work into this but can't only focus on touch UX or video transcoding for the next two months - should be good enough for now. Will come back to this once Facial Recognition #22 is implemented.

[lastzero]

Don't even have time to completely test #962 on iOS and Android - you're welcome to help out 👍

[JamesSwift]

As a former web developer, when I use PP on mobile something just feels off about the way actions are triggered. I haven't used the vuetify/vue framework before, but I'm wondering what event the buttons (heart/select/view) are listening on. If they were on click you shouldn't get this behavior as the browser filters out swipe/scroll events. I tried to work it out both via the source code and using the inspector, but the obfuscation of the templating language defeated me. It appears they are listening on touch events for some reason. Perhaps someone with experience with the framework could shed some light?

[lastzero]

It was click but didn't work with iOS. See related issue.

[streiman]

I just want to support the idea, that there should be some fixes to the mobile UI. On my Huawei P20pro it is almost impossible to scroll the pictures. Either I accidently make them a favorite or I open the picture or video. That is eapecially sad because there is no fully featured app.

I understand that there are many other improvements to work on, but many people view their pictures mostly on their phone. I have shown PhotoPrism to different people and most were impressed about the speed ("feels faster then Google Photos when showing pictures") but told me that they think it is not working well on their phone.

I think it would help as a workaround to hide the favorite heart button on mobile devices (at least as an option like "simple interface") and if it is not possible to make "clicking" pictures less sensitive only showing them in full size or playing the video if you longpress or double touch the thumbnail. I don't think that this is a perfect solution, but it would make the mobile view more usable for more people and might to be implemented without too much hazle.

[pseudorandomnumber]

Scrolling would work better if liking, selecting and opening pictures only happens after not registering a scroll event for about 100ms.
I don't understand, why facial recognition is the priority, when the UI is bacically not usable on Touchscreens.

[lastzero]

Dear @pseudorandomnumber: The UI is usable on touch screens, but needs more tweaking to avoid accidental likes on some devices. We've already spent a significant amount of time with that and even bought an iPad for specifically optimizing this - even though our funding goal is not reached by far.

In fact, our first priority is funding which is also why I wasn't able to perform much development last month. The more sponsors there are, the faster you get features and UX improvements. Thank you very much! ❤️

[lastzero]

@streiman I'm using a Huawei P30 and have no major issues. We sadly had to go for a more low level event implementation as otherwise there are issues with newer iOS devices. Before that change, accidental liking wasn't an issue on Android but iOS wasn't properly usable. We do our best to further improve this as soon as possible. You're welcome to help us by testing this pull request: #962

[streiman]

@lastzero I would be more than happy to test it, but I have to confess I don't know how to install this version. I installed pp via docker-compose.

[lastzero]

No worries then, we'll get to it eventually :)

[streiman]

I have to say it works like a charme on iPhone. I am little bit confused that it is so bad on my p20pro but ok on your p30. Do you use Chrome or something else I might try?

[lastzero]

I'm using Chrome on EMUI 11 / Android 10.

[lastzero]

Event handlers now test if the finger was moved while touching, so that actions should not get triggered accidentally anymore. The new event handlers are not yet in place for albums, labels & list views. We can use them there too if the implementation works for you. It's going to be deployed to our demo for testing soon.

[streiman]

Much, much better experience. Thank you! Now it is really nice to scroll down my pictures on my smartphone :-)

[lastzero]

Excellent, thanks for testing! I'm going to refactor albums & labels next.

[lastzero]

Started a new preview build, available for testing on demo.photoprism.app soon:

https://docs.photoprism.app/getting-started/updates/#development-preview