User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I have a question that I would like your help with. I am creating a responsive website with readable content that has an 'In this page' section and 'Related content' section. Is there a best practice or a pattern to show these two sections in mobile? Thanks in advance for any advice give.
Assuming, that the «in this page» section contains a short description of the content of this actual page (maybe even with anchor links) this section should definitivly be in the beginning of the page. Reason: This gives the user a short introduction and makes it easier to decide for the user if she is on the right page. Having this section at the end would nod provide any benefit since the user already scrolled through the whole content.
Releated content on the other side is something that can be accessed via other means like navigation or overview pages etc. So (again assuming) the related content section is not a navigational element but meant to provide further content that has to do with the actual content the user is already interested in. Related content should therefore be at the end of the content. This way the user has the possibility to access this content without having to go back to navigation.
What you could do (if the «in this page» section is anchor links) is to have a linkt that goes directly to the «related topics» section.
After the main content. Always.
You can't relate things to nothing, things are related to a main object, so the main object should be the first thing your users see. This question is very easy to test: just visit any blog or e-commerce site and you will see that the related content is in the only logical place, which is AFTER the content it refers to.
If you mean only those 2 sections in the sidebar, the answer is the same, but the explanation is different: one of the elements explicitly says "in this page", which means that the content in that section is related to the page the user is reading.
The other section is an extension of the information for people who need or want to know more about the topic and/or related topics, but it is NOT the topic itself, just an addition.
Finally, from a structural point of view, it's usually the stacking order for most pages in desktop, and in your example it certainly is, so you shouldn't do anything special, it will follow the natural stacking order without any problems
