Forum Moderators: not2easy

Message Too Old, No Replies

Side nav or Bottom nav?

         

NickMNS

2:52 am on Mar 25, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I have page to which I add a lot of content using AJAX. This makes it hard for the user to keep track of their current location and to move back and forth between points of interest on the page. To resolve this I have decided to add additional in-page navigation, eg: move to top, move to bottom, move to section 1, 2, 3... etc...

The question is where to add these navigation elements:
1- On the side, in a fixed position over the content? This is intuitive easy to tapped, looks good but it can be annoying as it will cover prime screen real-estate.
2- Fixed on the bottom? It is out of the way, still easily tapped, looks a bit wonky IMO, but I find it less intuitive, it covers a space that could be used for ads (not the case now, but maybe in the future).

On desktop, the side-nav is better. But I could always do a combination, where it appears as bottom-nav on mobile and side-nav on DT.

What are peoples thoughts?

Right side, left side?

keyplyr

3:01 am on Mar 25, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I do it on the bottom (but don't tell anyone.)

It's also a matter of intuitive site design and topic related page hierarchy.

not2easy

3:39 am on Mar 25, 2018 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



I put 'Top' links at the end of the content and in the footer. The section links I would have at the upper part of the sidebar for desktop and that space shifts to just below main content for mobile. For mobile it would repeat in the footer, below the sidebar content. But it depends on what else there is to consider. There isn't a one size fits all - "this is right for all" kind of solution. I just try to imagine ways a person might be trying to get around and offer nav links where they seem right. Length of the content and images would be my guide for whether the links are at appropriate intervals.

lucy24

4:39 am on Mar 25, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I have “back to top” links in fixed position in the bottom right* corner of almost all pages, as out of the way as possible but still visible to all. I started doing this after personally discovering what a pain it is to return to the top in a tablet. You can tell when people have used it, because then pagename#top shows up in analytics as the referer for the next move.


* Bottom left, if you happen to work in a RTL script. If need be, you could even vary this dynamically in CSS.

keyplyr

4:54 am on Mar 25, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Re: “back to top”

On lengthy pages, I use 3 linked arrow graphics:

Left Arrow points to previous page
Up Arrow points to the top of the present page
Right Arrow points to next page

Shorter pages just use the Left & Right Arrow.

At the very bottom of all pages in the footer is linked text to the Copyright, Privacy Policy and Site Map.

robzilla

9:17 am on Mar 25, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



On mobile, I find it much easier to tap things (single-handedly) at the bottom of the screen, and you don't cover the screen while doing so.

NickMNS

9:40 pm on Mar 25, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I spent much of the day fiddling with the nav-bar in the fixed to the bottom position. It looks good. I have five icons, top, section 1, section 2, section 3 and bottom. I hide the nav-bar normally, then show it whenever there is scroll event. It stays visible for 5 seconds.

The only issue I am concerned with is accidental clicks on ads. If the nav-bar appears above and ad, and then fades, the user could click the ad unintentionally. Should I leave an invisible screen in place to prevent ads from being clicked near the bottom of the screen?