Feedback Requested: Table of Contents Navigation Menu on RoadTest Reviews / Project Articles / etc.

Hey everyone,

This thread is duplicated in Feedback Requested: Table of Contents Navigation Menu on RoadTest Reviews / Project Articles / etc. for reach to members, you can comment on either thread and voting in the poll will be reflected in both threads.

I'd like your feedback on the table of contents/navigation menu that we have mainly on RoadTest Reviews, but also on the Project Articles that we have recently introduced for Project14.

From a tablet, laptop or desktop computer, the navigation currently renders like this:

It is automatically generated by using header tags in the content, respecting H2 to higher numbers for sub-sections, headings should always go in the order from H1 to a higher number resulting in smaller headings for sub-sections. H1 is usually preferred for the title of the content and is automatically on the page.

The headings are also highlighted in bold when you scroll down the page, and the navigation persists. Though this can cause a couple of issues, such as the navigation taking up screen real-estate, and it also nudges the content over to the side of the page rather than using the full width.

On a mobile phone or narrow device, however, the navigation looks like this:

On mobile, the navigation should be 'sticky' and remain at the top of the screen, particularly if you scroll 'far' down or up, and it auto switches to which heading section you're in.

What's the Question?

Should we make the desktop experience the same or similar to mobile? Here are the options:

In this poll, I am using the word 'static' to mean that you can scroll down the page, or up the page, and you can scroll away from it. You will no longer see it when you navigate away by browsing the rest of the content on that page.

I am using the term 'floating' to mean that it stays with you, it 'floats' on top of content, or perhaps next to it, and travels with you when you scroll the page, you do not browse away from it.

I thought I would add a 'bottom of the content, static, but a drop-down' because there are sites such as Guru3D where this is exactly what it's like. Nothing overly fancy, and it doesn't detract from reading the content first, which is mostly what you're hear to do when you land on the page. Here's an example: https://www.guru3d.com/review/xfx-radeon-rx-5700-xt-thicc-iii-ultra-review

Though on their site you then have to scroll for the options, but I like how it shows the sub headings:

Let me know by voting and leaving a comment

Top Replies

Parents

Andrew J over 1 year ago

I voted "different opinion". I don't think the issue is with the ToC per se, but a general issue with site layout for different device form factors. I expect there is a fair bit of work that goes in design for, and UAT of, different devices but I don't think it works that well. Here's just a few examples of the site on my iPhone 15 Pro Max (full screen captures, no crop):

{gallery}Example UI problems
This blog in Landscape: Have to scroll to actual get to the article content
This blog in landscape: Scrolled to content, half the page taken up with the left hand column with information that might be useful but better presented at the end, say. I'd subjectively argue that Related content is more useful than Actions, which is more useful than Forum Thread Details, (but which are presented in the opposite order) but none are more useful than the post itself.
This blog in portrait: More article content which is good, but confusing top bar. I actually pressed that + box to open up the site structure only to get the "New Blog" screen. It's a different button on the desktop version of the site - indeed, it's different to this page in landscape - which I didn't initially twig to.
E14 Front Page in portrait: No user content, inappropriate content wrapping, massive banner taking half the screen, content that is useful, but not particularly so, placed ahead of content that would be more useful.
E14 Front page, one full page scroll, in portrait: Still no user content, again content that is useful, but not particularly so, placed ahead of content that would be more useful.
E14 Front page, second full page scroll, in portrait: STILL no user content but the tab headings have appeared. Remember this is the THIRD view of the front page.
E14 Front page, third full page scroll, in portrait: User content now in view but only 4 items because of the size of each entry. Given that the Updated Date isn't actually an Updated Date, it's taking up useful space for no reason; there's no room for an entry synopsis because the title and the post location (of some but not much interest) are so large.
Another randomly selected blog, in portrait: Confusing top site navigation bar, poorly displayed, otherwise all useful content. Note that because the Navigation breadcrumb is so large, the "more" drop down button has disappeared. Actually, reviewing my words before clicking the reply button I see it has changed to just the small down-angle character it's only the word "more" that has disappeared. I leave the comment in because (a) there's room for the word; and (b) the UI changing in this way is confusing.
The same blog, in landscape: Note the New button has changed to something more obvious and the navigation is tidied up. However, the actual post content is below the fold because of the amount of whitespace (actually because of the left hand column which is just poking its head up.)

{gallery}Example UI problems

This blog in Landscape: Have to scroll to actual get to the article content

This blog in landscape: Scrolled to content, half the page taken up with the left hand column with information that might be useful but better presented at the end, say. I'd subjectively argue that Related content is more useful than Actions, which is more useful than Forum Thread Details, (but which are presented in the opposite order) but none are more useful than the post itself.

This blog in portrait: More article content which is good, but confusing top bar. I actually pressed that + box to open up the site structure only to get the "New Blog" screen. It's a different button on the desktop version of the site - indeed, it's different to this page in landscape - which I didn't initially twig to.

E14 Front Page in portrait: No user content, inappropriate content wrapping, massive banner taking half the screen, content that is useful, but not particularly so, placed ahead of content that would be more useful.

E14 Front page, one full page scroll, in portrait: Still no user content, again content that is useful, but not particularly so, placed ahead of content that would be more useful.

E14 Front page, second full page scroll, in portrait: STILL no user content but the tab headings have appeared. Remember this is the THIRD view of the front page.

E14 Front page, third full page scroll, in portrait: User content now in view but only 4 items because of the size of each entry. Given that the Updated Date isn't actually an Updated Date, it's taking up useful space for no reason; there's no room for an entry synopsis because the title and the post location (of some but not much interest) are so large.

Another randomly selected blog, in portrait: Confusing top site navigation bar, poorly displayed, otherwise all useful content. Note that because the Navigation breadcrumb is so large, the "more" drop down button has disappeared. Actually, reviewing my words before clicking the reply button I see it has changed to just the small down-angle character it's only the word "more" that has disappeared. I leave the comment in because (a) there's room for the word; and (b) the UI changing in this way is confusing.

The same blog, in landscape: Note the New button has changed to something more obvious and the navigation is tidied up. However, the actual post content is below the fold because of the amount of whitespace (actually because of the left hand column which is just poking its head up.)

I have individual comments against each image to explain it but you have to hover the cursor over the image to view it, and guess what? On a mobile device the text is always visible and takes over pretty much all the image AND depending upon the size of the comment, the image title and possible part of the comment is no longer visible.

You can see that I have to do a full screen scroll 2 times just to see the content tabs for the user generated content (i.e. forum posts, blog posts etc) and 3 times to see actual posted content (i.e. it is effectively the fourth screen page and this is on the largest iPhone model.) It got this bad when you shifted to the large banners at the top of the page.

Note that on my iPad Pro 12.9" screen, it is better. The biggest bugbear there is the "flyout" reminder of an upcoming Webinar that seems to take up the bottom right quarter of the screen (in landscape!) which given the size of the left hand column effectively renders half the blog/forum post content invisible until the flyout is closed. Shouldn't really be that much of an issue, except that it seems to be a nagging reminder in that it appears, is dismissed, appears again when navigating to another page, is dismissed, then re-appears on another page and so on.

On a desktop with plenty of real estate these aren't really problems.

As further useability comments:

I still end up with notification emails that are just garbled nonsense and can't be used. As I've said before, this only happens with Element 14 and only since you moved to the Verint platform. I underline it really to just stress the point that if it is a bug in Microsoft's Exchange Server or Apple's Mail app then it is a very obscure one because whilst I haven't visited every site on the internet, it only happens with E14.
It is also often the case that when an email isn't garbled, the embedded avatar isn't correctly matched to the name. As an example, I might get Shabaz's avatar for user CStanton (CStanton made the change that generated the notification and is correct, it is the embedded avatar that is wrong.) The best I can work out is it happens when it is a notification for a reply to a comment such that the avatar is for the person at the top of the comment thread and the name is for the person creating a reply-type comment.

I suppose in other words what I'm saying is I don't really care that much about ToC because there's a lot of other issues with the UI and usability that require sorting as well and whilst things like inappropriate wrapping, mismatched avatars and (perhaps, although annoying) garbled emails are minor I'd also say the same about the ToC when compared to other things. In particular, I'd like the content that I navigated to a page to see to be immediately available with maximal use of real estate because that is what is of most importance when I click to view it.

In regards to viewing the site on a mobile phone, for me it's unusable because of the layout problems so I typically don't bother except for very occasional one-off lookups or responses when I'm out and about. It is a site consumption device of extreme last resort, and to be fair it is a device of last resort for accessing the internet full stop, so I predominantly use the iPad (in landscape) and a desktop.

Reply