3

I am creating the responsive version of a website and I ran into some issue. The website has 3 main categories (say, Cat 1, Cat 2, and Cat 3).

First I thought of putting the 3 categories on the page for easy access and so that the users would know that these are the main categories without the need to click into anything:

enter image description here

However, when people scroll down the page, they won't be able to have access to the 3 categories unless they scroll back up. So I decided to put them in the hamburger menu too:

enter image description here

Both have their purpose, but I'm wondering if this is good practice or if there's redundancy?

Should I just keep the 3 main categories in the hamburger menu?

2
  • You say "redundancy" like it's a bad thing! Dec 5, 2016 at 16:21
  • 1
    Unnecessary redundancy is, in fact, a bad thing. (Every extra piece of information on the screen is an additional bit of cognitive load for the user.) Dec 5, 2016 at 17:53

4 Answers 4

1

Don't repeat the categories in 2 different places. You have to select one of them. You could test which is better for your users, but if you are sure that is very important to have the categories always visible for your users, then the best component is fixed tabs (because users will see always the categories without necessity to find out where they are).

1

What you have are tabs. You might consider adding them to a bottom bar if the user will be using them constantly.

It is strange that the top bar is not containing those tabs. This results in the tabs being scrolled, as if they were part of the specific page content, while the top bar remains. In this situation you have the problem you are facing. As you have it now I would say the content is not redundant because it is not actually seen twice when toggling on/off the sidebar. Only in the case of scrollTop = 0.

Check how Google material apps work. In some of them, they have a top bar which includes the hamburger menu and a search icon. When the user scrolls down, the whole top bar hides. When the user scrolls up (a little) the top bar is shown. When you click the hamburger icon you won't see a search action as it is in the same view (just toggle the sidebar to see it). But in your case those function are not seen when toggling the sidebar.

I would suggest:

  • Sticking those tabs to the top bar or a bottom bar
  • Hide the top bar if necessary when the user scrolls
  • If the sidebar has a section for categories because there are more than those 3, only then include those 3 (it might be strange to see cat 4, cat 5, but not the other ones).
  • If the sidebar doesn't have that section and it is fixed (viewed) when the sidebar is closed then don't repeat them in the sidebar
0

The answer to "should I include this redundant thing, just in case?" is always "no", unless there is a clearly defined reason why both are necessary (in which case they're probably not really redundant).

Every element you put on screen increases the user's cognitive load. Redundant navigation means the user may not immediately recognize that it is, in fact, redundant -- if you were to include both the hamburger and the navbar, the user would have to examine both of them in order to determine that they are in fact the same thing.

So that's the easy part done. The harder question is, given that you have to make a choice about how to display the navigation, which is the best choice?

In all cases, you should devote screen real estate to whatever is expected to be most useful to your users at any given time. The times at which the user is most likely to need access to navigation are

  • when they first arrive at the site, and don't yet know what content is available
  • when they have finished reading a page of content, and are ready to find something else to read.

The time at which the user is least likely to need navigation is

  • when they are in the middle of the page, halfway through reading a piece of content.

Therefore: place navigation at the top of the page, because that's where users expect to see it, and that's where they are when they first arrive at the site.

You can also place navigation at the end of the page, because that's where they are when they finish reading a page of content -- but this is often unnecessary because users are accustomed to scrolling back to page top to find the navigation, because that's where it always is; and because all major mobile browsers support single-tap scroll to the top of the page (because that's where the navigation always is). Footer navigation is generally best for links to related-to-this-page links (which wouldn't fit well in the main navigation) or for boilerplate or incidental items such as credits, legalese, site maps, etc (which ditto.)

In your particular case, you only have three navigation categories, which can be listed at the top of the page (which has the visibility advantage over tucking them away inside a menu.) The only other elements inside the hamburger are your "login" and "register" links (which are also redundant with each other: you only need one of them, which leads to a combined login / create account page.) This, too, could easily be represented inline at the top of the page, rather than tucked into a menu.

Therefore: use a top-of-page navbar with a "log in" link above it. Don't use the hamburger at all, as it serves no real purpose (floating it is counterproductive, as described above; static at top of page is just redundant.) Bring it back only if you add more content categories such that inline navigation would no longer fit comfortably (and use it instead of, not in addition to, inline navigation.) Don't make anything floating or sticky; trust that the user knows how to find the top of the screen if and when they need it.

TL;DR:

In general, which is more important? Your content, or your navigation?

If it's the content, then the screen real estate should prioritize the content. Don't clutter the viewport with sticky navbars or fixed tabs, especially on mobile devices where screen real estate is so limited, because all that accomplishes is getting in the way of what the user is trying to do.

If it's the navigation, write better content. :)

-1

If these 3 categories are important then you can keep it floating in the bottom with significant icons or simple text. So whenever user scrolls down these categories ll always be visible to user. And it is easier for user to touch/select categories using thumb which is good ux for mobile.

3
  • Also it fills up valuable, limited screen real estate... which is not good ux for mobile. Dec 5, 2016 at 17:53
  • @DanielBeck can you suggest good alternative solution for this?? But what I think is user does not need to go into hamburger every time. He can easily tap any category any time. Dec 5, 2016 at 17:56
  • I'm unconvinced that users who are scrolled halfway down a page, presumably reading the site content, are suddenly going to be in such urgent need to jump to a different section of the site that there isn't time to scroll up to the nav bar. Dec 5, 2016 at 18:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.