Actions
Forum Thread Details
  • Replies 31 replies
  • Subscribers 502 subscribers
  • Views 3396 views
  • Users 0 members are here
Related

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

cstanton

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:

image

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:

imageimage

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 

image

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

image

Let me know by voting and leaving a comment

  • I like the current navigation on both desktop and mobile.

  • No opinion one way or the other. But perhaps the geometry could change.

    image

    vs

    image 

  • Leave like is on PC screen. No TOC on mobile (even no sticky if possible) - where the widget  takes a decent chunk of prime readable text area.

    I don't know how many have a mobile phone with a screen shown in the original post here. Mine (Modern, Recent, Decent Samsung) has about half what's shown in that image)

    Also unsure what the mobile TOC tries to achieve. It's showing where you are.

  • I voted to remove the navigation but (based on the Thermoflagger RoadTest) which looks like this on my screen:

    image

    Half the screen is wasted with static or semi-static content.

    I'd lose the right hand panel first but I'm very unconvinced by the TOC.

    I prefer simple web pages, so I'd rather do without the TOC.

    MK

  • My cell phone has the fixed position (top of screen) pull-down for TOC, with no side panels, which I really like.  In actual usage, I never use the TOC.  I prefer to just scroll through the text from top to bottom.

  • I voted for "Remove the navigation, tell us why below".

    A table of contents serves a purpose in a book with hundreds of pages. Particularly in a technical textbook that may not be read in a linear manner. For a blog that can be scrolled in a couple of seconds, and is generally a sequential narrative, there is little point. I've never used the functionality for real, though I've just played with it as part of reporting the highlighting problem.

    It's also a worry that this has started with Roadtests, is now migrating to 'Projects', and may end up being applied to all blogging.

  • Hi Christopher,

    From my perspective, I have these comments for now, but will think further. (EDIT: I voted 'remove navigation' because that's the better option than the current state).

    1. It's not good to have an automatic ToC starting from Heading 2, because that's not normal for those who will copy-paste from Word documents, and it doesn't sound intuitive anyway, to write articles starting with H2, and trip up everyone who writes their first blog and then wonders why none of their headings are present in the contents. The title is normally a "Title" style, and sections all start at Heading 1. I think even if it means that the title appears in the ToC, so be it, rather than start from H2.

    2. When resizing the browser width, other 'tutorial' style web pages such as the AWS site firmly fix the ToC pane to the left edge, allowing the user to benefit from seeing the content with a reasonable width. Is that possible with Verint? Personally, I'd like to be able to minimize that pane, i.e. click it out of the way. Better still would be if it was already minimized and would remember the setting. Not everyone writes long content either.

    3. Those types of websites also use smaller text for a ToC with less margin space in its pane, and please could the text in the main body of the page be increased in size slightly (some users resort to writing their content in a larger font simply to get around this). I know we discussed this in the past, I think it's getting close to a great compromise, but a tweak to be ever-so-slightly larger would be great.

    4. Any left side pane ToC (if it is deemed necessary) should remain "floating on top" as the main content is scrolled, because otherwise, it's a further waste of space, since the user cannot see the ToC once they scroll down a bit. If it doesn't remain there then there's zero need for the left pane, it may as well be at the top of the content in some format.

    5. On the mobile view, currently the ToC bar slices through the content too much with the mobile horizontal. In vertical mobile orientation, the slicing is less, but still not nice. Could the element14 logo become part of the ToC bar to push it to the top? The "Manage article" icon is super-annoying in general too, and should be got rid of or placed within some other list of items on the page. That icon is hardly used (like 0.001%), and yet it's got that prominent position there (and there seems to be some annoying gesture bug that accidentally makes that Manage article menu appear when the user is just trying to swipe through content, if the user accidentally slightly swipes a bit to the right when swiping through a code widget box in content, really irritating : ). Getting rid of that Manage article icon from its current position would also allow the ToC bar to be right at the top. Other than that, personally I like the mobile view when the mobile is vertical, except that the ToC bar again disappears when it should remain at the top, or have some sort of tapping way to bring it up at the top. Sometimes, reading site content with mobile in vertical orientation feels a better experience than desktop today because you're able to rapidly finger-swipe, which gets around needing the ToC as much for navigation on there. plus the text size is great on mobile (at least the same size as desktop, and far closer to the user). (Also on the plus side, the better mobile experience shows how good things are, because mobile view used to be awful in the early days before the current site! Now it's pretty much a pleasure to scroll through content on the site on the mobile bar a few small points here and there).

    image

    image

  • in reply to shabaz

    Example where it can be minimized, or width adjusted. If it can remember the minimization, that would be awesome. But key for that style is that the pane is hard-fixed to the left of the browser window, whereas the Verint one is floating : (

    image

  • Honestly, when I check element14 using the phone, its mostly just on the splash page, and maybe check on something new. At most, I might leave a comment. The phone screen is too small to do much else IMHO.  

  • in reply to Jan Cumps

    I was thinking why I didn't miss ToC on mobile view. I think it's simply because it's so easy to quickly scroll and get a good view of everything. Even super-lengthy or badly organized content can be quickly checked out on mobile.