0

I've ran into a UX problem in a site I'm designing. I feel like there's an obvious solution but I'm having trouble finding it.

I have a site that has a global sticky bar. In the middle of the site, I have a tabbed navigation component. There are 3 tabs and the windows of each contains kind of lengthy content.

I feel like my users will want to be able to navigate between these tabs without having to swipe back up the page.

I obviously don't want to double stack horizontal sticky bars. I can't replace or edit the global bar at all.

I'm thinking of a collapse to the side option. Or maybe turn it into a carousel with sticky left/right arrows?

Design proposal

  • It will be easier if you put your sketch as an image to the question rather than as an external link. Also, it would be good to provide some proposals of your solution to help you see some of the issues with your potential solutions :) – Michael Lai Sep 23 '18 at 22:02
0

Most sites have a scroll to top sticky arrow/button on the bottom right, I am wondering if that pattern can be explored with something like this.

The idea is you can provide a button that brings/shows the tabs in the current scroll position and the users are able to switch tabs. That way you are not overly using the real estate for another sticky bar along with the sticky header but also provide an ability for the users to switch tabs within their context. Also this new button would have to show as soon as the users have scrolled past the tabs. Some animation presenting the tabs collapsing into the buttons will be helpful.

It might also make an interesting test if you can do a multi variate test where

  1. The control is no sticky bar for the tabs in which case users scroll back up to switch tabs
  2. The variation A is sticky bar for switching tabs
  3. The variation B is stick button to present ability to switch tabs

The idea is to find out which layout triggers tab switching the most.

0

An interaction I have seen in such a case is that your 2nd nav bar disappears as the user is scrolling down, but re-appears as soon as they start scrolling back up again, no need to scroll all the way up.

Advantages are that you don't lose screen real estate / have two sticky bars on top, and the interaction to bring back the control is really easy to discover (it's natural for the user to scroll back up).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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