On the https://gif.com.ai/ splash page there is a site divider on the left half of the page that when scrolled abruptly disappears and reveals a full-page navigation. To me and others this feels clunky and it is surprising that the page all of a sudden goes full width and reveals everything. Is there any way to address this UI feature and ease the user into the experience better? Perhaps changing the opacity gradually on scroll or shifting the screen slowly to the left to reveal the 100% width view. Or a combination of ideas. Any examples of and related links would be very helpful.
2 Answers
My recommendation here is to have that left side as an overlay part over the layout and not as 2 tables. This will allow you to slide it to the left and animate it without adapting the whole layout again. You can add a smooth animation too after doing this. I hope this helps :)
-
Having the panel slide to the left when the user scrolls down is a great option - it avoids a harsh "jump cut". Apr 7, 2021 at 20:02
I opted to make the navigation more attune to the menu icons at the top of the page. The user can't scroll down now and they must click a button to scroll. This is better because they have one area at the top of the screen to pay attention to. Before I think part of the issue was the user had to exchange attention between the buttons at the top of the screen and scrolling the page which rigidly and abruptly shifted the screen and made the buttons disappear.