Footer + Scroller functionally with mouse scrolling
Footer + Scroller functionally is a bit awkward for desktop users (but good on mobile). More of a user experience question, working with the Scroller + Footer.
When visiting the site, the user can use the mouse scroll to look through the Scroller photos.
They can do up/down scrolling when the mouse hovers over the header or footer. The footer can be accessed easily with the keyboard (up/down/space/etc keys), but for someone browsing the site with a mouse, and looking at it for the first time, they might miss that the footer exists
Sometimes when they mouse wheel scroll through the Scroller, they might accidentally hover over the header, and move the webpage down. Now half the footer is showing, so they try to mouse scroll back up, but instead that just scrolls the photos in the other direction!
They have to go through extra step/clicks/movements to try and scroll the page back up. It is useful that the "return to top" arrow appears when the page is scrolled down; is there an option for an arrow to "go to footer"?
https://imgur.com/a/lvYJ5
When visiting the site, the user can use the mouse scroll to look through the Scroller photos.
They can do up/down scrolling when the mouse hovers over the header or footer. The footer can be accessed easily with the keyboard (up/down/space/etc keys), but for someone browsing the site with a mouse, and looking at it for the first time, they might miss that the footer exists
Sometimes when they mouse wheel scroll through the Scroller, they might accidentally hover over the header, and move the webpage down. Now half the footer is showing, so they try to mouse scroll back up, but instead that just scrolls the photos in the other direction!
They have to go through extra step/clicks/movements to try and scroll the page back up. It is useful that the "return to top" arrow appears when the page is scrolled down; is there an option for an arrow to "go to footer"?
https://imgur.com/a/lvYJ5
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
You have touched on very interesting topic, that I am thinking long about, and still didn't find best solution.
Once we released PhotoProof, we didn't have mouse scroll on scroller. However then one of our clients said that for photography guys mouse scrolling through photos on something like scroller is very interesting. So I have added it.
However this created this accessibility issue that you have mentioned, where reaching footer is getting difficult. When scroller was alone on page it was fine, but now, when you can use it as part of content with shortcodes, we are thinking about option to choose if scroller should use mouse scroll event.
"go to footer" is interesting option, but it is also half of solution, like adding mouse scroll support was in the first place.
Ideally I would like to have both: scrolling of scroller and scrolling of page, but I don't know how to tackle this so it would be least problematic for users.
I loved how google solved it for their maps on touch devices. When you found map on page while scrolling page with finger you got stuck in map, even when you didn't want to. So they decided that you have to use 2 fingers for moving map, so 1 finger wasn't blocking scrolling of page.
But how to translate this to our issue?
I will search for similar issues in few minutes.
With kind regards.
I have few propositions and I wonder what do you think about them. They can all be implemented together:
1. Add option for creator(you) to decide if scroll event should be used on particular scroller.
2. Make scroller use mouse scroll events only if it is full screen scroller.
3. Show button when scrolling on scroller "Click here to scroll page below".
4. Don't use scroll events if part of scroller is scrolled away. I mean situation that you described before: When I say "Don't use scroll events" I mean that mouse scroll will return to default page scrolling behavior.
Your opinion is important as a user of this tool:-)
With kind regards.
1. Scroller will be scrolled with mouse wheel only when it is fully visible in browser window.
2. When scrolling down with mouse wheel it will show button for 2-3 seconds that user can click to scroll below scroller.
I am very interested in your opinion once it is released:-)
With kind regards.
I'll have to test it out when it is released =D
I am trying with the Photoproof demos, when I turn off the Footer on the full screen scroller, I am expecting the scroller to move with the mouse wheel, but it does not!
Is there a different way I should be trying this
Thanks
Indeed, thanks for reporting this. I have tested this on my local installation and it worked well and still is when footer is disabled. I will debug what could be the reason in this case.
With kind regards.
Basically I didn't cover situation when scroller is exactly at top of site, but solution is very easy:
File photoproof\js\script.js line ~4086 change
if( (el_t + el_h <= w_h + w_t) && el_t > w_t ){to
if( (el_t + el_h <= w_h + w_t) && el_t >= w_t ){1 character :-)
Thanks for this!
With kind regards.
Thank you