Placement of anchor link buttons in a page with a lot of scrollable content

by drabsv   Last Updated January 09, 2018 21:16 PM

I am building a profile page ( containing a lot of of information, visually organized in horizontal sections. For the sake of easier navigation, I have put anchor link buttons in the top part of the page:

enter image description here

The problem with this approach is the white space on the right of the buttons. It does not look aesthetically well.

For that reason I'm considering other approaches, but none satisfies me so far:

a) putting the very top introductory information on place of the blank space:

enter image description here

I do not like this approach, because the links section looks like a vertical tabs section, displaying information on the right, which is misleading.

b) displaying content in tabs, instead of having it all on the page, with those anchor link buttons

Tabs do not be display the whole information at once, making scanning and skimming difficult. Scanning and skimming are important when it comes to profile pages and especially when you have an advanced user who is comparing data between two or more profiles.

c) placing the anchor links section in the middle, instead of left:

enter image description here

Still a lot of blank space remains on both sides of the buttons section.

d) placing the anchor link buttons horizontally:

enter image description here

Horizontal layout of the buttons would be harder to skim than the vertical one.

e) placing the buttons on the left and outside the main page body:

enter image description here

initially I thought that the this approach would solve my problem, but it has to shortcomings: a) the batters must have really short text inside all that take up too much margin space and b) this would be somewhat hard to implement on mobile devices. One could argue here, that I could have small buttons on the left, web text displaying on hover, just as this has been implemented in a lot of websites. I am selling this approach, because it does not give you the button text immediately and the for a first-time user, it would be confusing this way.

f) displaying all sections in accordion:

enter image description here

This is a somewhat better approach than tabs (b) one, in terms of the fact that you will see what you have just clicked, instead of having to move your gaze and mouse back to a fixed placement of the tab buttons.

Of all the possibilities outlined here, I would accept this one as a compromise, but I want to make sure that I have not missed a better solution.

What would you suggest?

Related Questions

split screen layout pros and cons

Updated March 28, 2015 06:05 AM

Main navbar and sub-navbar

Updated January 24, 2018 00:16 AM

Layouting personal developer home page

Updated March 28, 2016 08:06 AM

Best practice for collapsible submenus?

Updated June 24, 2016 08:06 AM

Are there guidelines on physics of scroll up bars?

Updated February 16, 2017 14:16 PM