Beta 5.1 - Slider Mobile UX: dragging

Misho · October 12, 2021, 7:05pm

Hi!

You went to great depths with the slider. I love it! This is probably the best one out there. We all know sliders can be bad, but they can also be invaluable if used carefully, especially on mobile devices.

Despite reading the Docs, I have not been able to locate the settings that would solve the problems I am experiencing. Please excuse me if I missed something.

If the slider is set to be dragged, the user needs to drag it over 50% of the slide’s width (or viewport width), and that is too much. We should be able to fine-tune the point at which the slide should be dragged before jumping to the next. Actually, this is best controlled by how fast the user swipes, which leads us to the second point.
Users prefer to navigate the UI with the least amount of effort, which means they will swipe faster with shorter strokes rather than slower with longer strokes. Users should be able to “push” the slides with short and fast movements, causing them to switch. A very fast swipe may even cause more than one slide to switch.

Currently, if scroll is set to snapping, a short and rapid swipe will still not change the slide. It stubbornly returns back, until a long swipe is made. which is quite frustrating for the user.

A great example of well thought out mobile slider UX is AirBnb.

That’s all for now. I will try to test it out as much as I can.

spedney · October 12, 2021, 7:52pm

I’ve also just been experiencing the same issues and agree totally.
I also agree that this is really really good! There are so many things we can do with this. Thank you Alexander!

alexander · October 12, 2021, 9:12pm

Thanks Misho! Great points here. We can revisit some of those touch interactions and get that dialed in.

urchindesign · October 13, 2021, 9:14am

To add to this I am also finding the dragging gets “stuck” fairly often. i.e. once you click to start dragging I can’t seem to release the slide.

Not sure if this is because I am converting a new site from using slick and the slick files are still enqueued. (Just to confirm I have removed slick and the problem is still there.)

Misho · October 13, 2021, 9:20am

@alexander, that’s great!

In my opinion, the best slider UX is a hybrid of free and snappable slides. This gives an “organic” feel, similar to the picker wheel used in quiz games.

If the user drags the slider very slowly, it won’t snap, but rather will move freely. When the user drags it a little faster, it snaps into place. When the user moves it forcefully, it skips slides and snaps further away.

alexander · October 13, 2021, 7:56pm

Thanks for the extra context! We’re also considering adding scroll event logic so it responds to horizontal trackpads as well.

alexander · October 18, 2021, 10:08pm

Got some adjustments in here. If the slider has dragging enabled, it will also detect horizontal scrolling which is helpful for trackpads. I also made a few adjustments to the detection timing. Let me know how it feels after the release candidate.

Misho · October 19, 2021, 10:48am

Hi @alexander!

I can test in more detail later. Right now, after updating to Beta 2, nothing has changed?

I have tested mobile sliding and the slide still slides back in place no matter the force used. I have set both the click and drag to be active.

alexander · October 20, 2021, 10:08pm

Thanks! You’re right, I think there’s still something going on with mobile. It’s still snapping back the current slide quite a bit. Looking into that. Won’t be in RC2, but still on my list before wrapping up the release.

alexander · October 20, 2021, 10:26pm

RC2 is published, but tomorrow I’m going to audit all the mobile interaction stuff. It’s still not dialed in just yet. The trackpad scrolling on desktop is also a bit overly sensitive.

Misho · October 22, 2021, 8:47am

@alexander, that’s great!

It would be fantastic if snapping could support inertia. The key is to get a single slide switchin while doing it naturally on mobile. Generally, people apply about the same amount of “force” when they expect to move the slider to the next position.

Right now, this natural movement causes the slide to return to its original position. A micro frustration is created because the user will most likely try again before realizing that he needs to drag the slides across the screen.

In case this cannot be done at this time, the minimum should be that we can have Scrolling option responsive. Then we can set snapping to be free on mobile devices while leaving snapping on desktop.

urchindesign · October 22, 2021, 2:41pm

I’m also struggling with this. Sat with a client earlier today and unless you drag more than half way the slide sandals back to the current slide.

On a phone with a wider slide it is quite difficult to drag completely so the client kept having the side snap back to the current slide.

Agree 100% with the above.

Another issue I found, which is slightly off topic, but the bullets under a stacked slider don’t seem to respond to taking on iPhones. On my Now it works perfectly but in my clients iPhone we kept having to click multiple times to get the slide to switch to the next slide.

alexander · October 22, 2021, 8:54pm

Thanks for the extra feedback here. I ended up going with something that weights the drag interaction. Unless you’re barely dragging, or slow your drag all the way down it will advance a single slide in the direction you were moving. We’re almost there - there’s still a bunch of quirks in mobile Safari we’re looking into. Working much better in Chrome at the moment.

I’m going to push out what we have as RC3 before the weekend but there’s still some more we want to resolve before the official release.

@urchindesign, regarding the bullets, they’re just buttons so they will be harder to interact with on mobile in with the default settings. You may just want to make the font size bigger on mobile, or hide them on mobile.

urchindesign · October 22, 2021, 8:57pm

Thanks. We actually did make them bigger. Didn’t really help. I think of the fresh is sorted out will help though

Misho · October 23, 2021, 9:53am

@alexander, RC3 makes the mobile UX much better!

One question: I have noticed that the movement on the mobile is not very graceful, and assumed it can be adjusted in the Transition settings under the Options section.

However, those transitions do not appear to affect the slider?

alexander · October 25, 2021, 8:18pm

Hi @Misho,

Thanks! I’ve made a few more improvements today for the release, and worked out some issues with mobile Safari as well.

The controls in the transition control are used when the slider advances from anything outside of marquee mode or drag/scroll interactions (navigation, pagination, interval autoplay).

The touch interactions actually use a little physics system that draws you over to the next slide. The harder you flick, the more momentum gets applied. Then it starts gravitating toward the next slide. The issue with previous versions is that if you didn’t flick hard enough, it would snap back to the current slide. So I added something that ignores the current slide (or page of slides) if you flick just enough. That way it always gravitates away from the current slide. Unfortunately there isn’t any way to control the timing or easing of that movement.