djangoproject.com

djangoproject.com copied to clipboard

This is more of a usability request than an issue. I'd love to see a back to top button - particularly on the documentation where some of the pages are really long. I have always imagined this to be next to the version selector, but there may be a better place.

Congrats on the redesign :)

Hi,

Do you have some resources on how to implement this kind of functionality correctly (I'm assuming there are accessibility gotchas at play here).

A quick mockup would be useful as well.

Thanks!

Maybe <a href="#top">Back to top</a> would work since the top banner has id=top?

This would be my suggestion in terms of where it should go - having it here rather than in the footer would mean it could be used half way down a long page... rather than just from the bottom of the page.

In terms of usability, we can either have a straight jump to the top or we can make it scroll with JS - I can look into the benefits of each before we make a decision.

I'd also like to explore the possibility of having a direct link back to the documentation homepage on the internal documentation pages. I know that the main reason I want to go back to the top of the page is to find the main page again - do we have analytics we can look at to see how common this pattern is?

The mock looks okay to me. We do not have any analytics for the site.

Regarding the link to the documentation homepage, can we simply use the main navigation menu item.

Currently, it links directly to docs.djangoproject.com, regardless of which version/language you're viewing but we might be able to fix that.

Either way, I think opening a separate issue for that would be good (so we could work on the two independently).

Thanks!

I couldn't find any definitive studies re: scrolling vs jumping to the top of the page, so I asked a question on UX Stack Exchange: http://ux.stackexchange.com/questions/77320/animated-scroll-vs-jump-for-a-back-to-top-button

Opinion is mixed - what are your thoughts? My feeling is that generally a fast, smooth scroll is fine as it helps show the user what is going on. On the other hand, some of the pages are really long, so I'm worried that this could be frustrating to wait for the animation - I don't want it to get in the way.

@nlhkabu, I would say: try to implement the back-to-top link without animation. Test it on several pages (especially long ones) and see how things go. Then, try to add some unobtrusive JavaScript to do some smooth animation and see how things get improved. After all, we are talking about documentation, so animations are not required that much. Also, I would like to highlight that some of us (myself included) read documentation on mobile devices, so, back-to-top links are very appreciated. And people with screen readers and eye-tracking technologies would do the same. :)

And about accessibility issues, just ensure that (1) you add an alternative text to the back-to-top icon, and (2) sufficient space exist between the icon and the rest of the page. But your mockup seems good on this one. :+1: So, only be careful about the first point.

Oh, and if you need any help on this issue (for instance, on testing), feel free to ask.

@patjouk have issued a pull request: #693.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stalebot, please don't close.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stalebot, please don't close.

Closing as completed with PR #1370