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

Question

I am building a profile page (http://giga.brandvertisor.com) 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:

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:

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:

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

d) placing the anchor link buttons horizontally:

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:

Initially I thought that this approach would solve my problem, but it has two 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:

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?

Stefano · Answer

For the desktop viewport, I think you should definitively go with the e) solution: a floating fixed menu is a really common pattern users are used to use. They always know where they are and what other parts there are in the page.
This should even come easy to implement since there is plenty of plugins for floating menus.

For the mobile viewport, the sticky menu is usually replaced by a fixed topbar with an hamburger menu icon, that reveals the in-page navigation menu. You can navigate the different sections of the page using that menu.
Most of the time, however, in-page navigation on mobile devices is not provided, since users will scroll through the content, skimming the titles.

AndroidHustle · Answer

Personally I believe the choice of tab structure is a small part of the problem. Looking at the sections I have a hard time taking in what it's trying to tell me. Is the site trying to sell me something, if so what, advertising space? The sections look very "tool-like", and are not at all self explanatory.

I would instead try with a different design of the layout. Let each of your seven sections instead have dedicated entries, with a Title, Description of the section and eg. Illustration / Infographic. Make it easier to digest and more easy on the eyes.

Lay it out in a grid with a TWO or THREE column grid, shrinking to ONE in mobile. That way you can describe the sections and what information they offer, plus you achieve a better experience for quickly scanning the content for the visitor to quickly find the info/metrics that he or she is most interested in.

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

2 Answers

Add your own answers!

Ask a Question