Responsive progressive disclosure for content website page (Long-form layout)

by Daniel Vianna   Last Updated January 31, 2018 22:16 PM

I'm currently designing my own portfolio using the long-form layout (similar to Simon Pan). I am adding a disclosure widget to ease the pain of scrolling too much, so the user can go specifically to a particular section. I created two versions for the mobile/tablet which the widget is located at the bottom and one for desktop which the widget is located on the right side. I would like to know if this is the best location to place the widget for the desktop version or if everything should be placed at the bottom?

I also haven't seen this pattern being used often for long-form layout. Apple used this in their approach with the Mac Pro micro-site but I don't know how successful this was - I know there were some complaints more related to the way they have done it (hacking the scrolling of the browser). Another solution that I've seen also used by apple is a "read more" button that pulls an overlay, but I'm not sure if this approach is also good for my case or whether I can apply to all sections that I have considering that the amount of content on my sections is not consistent.

Note: this is a prototype in Webflow and the final version will be more refined and coded from scratch Note: the mobile/tablet version is not ready yet so please check the screenshot

desktop version

enter image description here

Related Questions

The value of "Show less"

Updated August 19, 2015 19:07 PM