8

I'm working on a mobile responsive web-app whose users can potentially have one, two, or three workspaces (we call them "zones") depending on their user privileges, i.e. Admins get all three zones whereas regular users get one or two. Not all workspaces have the same priority, and users don't often do a lot of switching between them if they're all available, however they can and there are good uses for it depending on their context.

I'm trying to find an elegant way for users to be able to switch between the zones. Currently, both on desktop and mobile devices we have them tucked behind our hamburger menu in the app's primary navigation which we're looking to turn into a bottom nav (on mobile) where we can highlight the most used areas of the platform. Are there any good design patterns that allow for this type of switching between workspaces?

The only example I've come across is Slack's ability to switch between workspaces from their hamburger menu. I feel like this works for them because their workspaces are mutually exclusive from each other, whereas in our app the zones are inter-related so I don't want to bury zone switching too deeply. Though, as I said before, while the zones are contextually related, a user doesn't often need to do much switching once they're in a particular zone.

Hope that makes sense! Would love to hear your thoughts.

EDIT: Just in an attempt to add more clarity, here is an example of how the zones breakdown:

Zone 1: Central zone Zone 2: Community zone Zone 3: Admin zone

Basic Users have access to: Zone 1 Basic Admins have access to: Zone 1 and 3 Premium Users have access to: Zone 1 and 2 Premium Admins have access to: Zone 1, 2, and 3

Each of these zones have their own unique menus, with between 5 - 10 top level menu items, and no more than 2 levels deep. The challenge is in coming up with a way to elegantly show (and NOT show) to the user what zones they have and to be able to switch between them.

7
  • 1
    Why do the users need to know that they are in different zones? And if it is only a small number of zones is it worth the space that is taken up just to do that one action? If there is a good reason to switch zones based on the context can you consider possibly triggering this for the user automatically and then allow them to go back to where they were?
    – Michael Lai
    Feb 19, 2019 at 22:15
  • Why not mimic the regular account switching mechanics used in many apps, including Google's?
    – Natanael
    Feb 20, 2019 at 14:39
  • @MichaelLai - we cannot automatically decide for the user when they should switch. I have added more details to the original post to clarify this a little more. In essence, each zone has its own unique purpose and menu items. We need to handle them separately.
    – sabziwalla
    Feb 21, 2019 at 14:29
  • @Natanael: This is something we've considered, as mentioned in the original post regarding how Slack allows users to switch workspaces. The problem however is that each zone has its own menu, and they are somewhat related to each other, whereas in Google and Slack, each workspace needs to be treated completely separately. It's more of a mental model thing.
    – sabziwalla
    Feb 21, 2019 at 14:32
  • @sabziwalla then offer different shortcut icons in the launcher? Separate names and color scheme? Having more than one icon is supported by Android
    – Natanael
    Feb 21, 2019 at 14:58

2 Answers 2

1

I would suggest you use tabs if switching is a regular occurrence. The unavailable tabs would be either grayed out or missing (depending on if you wanted the user to be aware that they don't have access to certain "zones.")

enter image description here

3
  • Thanks for this suggestion, however, it's not easily doable for us. We use tabs to navigate the top level menu under each zone, and each zone has their own unique menu. We've tried doing what you suggested, but it led to a clunk two-level tab-system, the 1st level being for the zones, and 2nd level being for the menu. This looked ok on desktop view, but difficult to get right on mobile.
    – sabziwalla
    Feb 21, 2019 at 14:10
  • @sabziwalla which "list" is used more often? Switching between zones or the zone's menu? Also reference the Facebook app in 2008, 2011, and 2012 for execution of double-rowed menus: 9to5mac.com/wp-content/uploads/sites/6/2018/07/…
    – Davbog
    Feb 21, 2019 at 19:20
  • Zone's menu is used more often, for sure. Once in a zone, a user tends to remain there for a while before wanting to switch. Thanks for the reference to FB. Interesting to see their evolution. We could use this as some inspiration. Out of curiosity, does their bottom nav change everytime they switched between the main tabs on the top most bar?
    – sabziwalla
    Feb 22, 2019 at 20:12
1

You can use the navigation which is stuck at the bottom always even when a user scrolls.enter image description here

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.