Global Navigation in Mobile Apps?

[neruthes]

Previously we introduced a design at DimensionDev/Maskbook_MobilePWA-Meta#1 and now it looks increasingly obsolete. We need a new way to allow the following operations:

• Switch accounts within Facebook/Twitter.
• Switch SNS.
• Enter Dashboard.
• Exit Dashboard.

[neruthes]

At the current stage, I am personally in favor of adding a global hamburger menu bar on the top of everything.

Design

Any in-site navigation will not affect the visibility of the global hamburger menu bar.

The hamburger menu button will open a drawer on the left, containing the list of possible navigation destinations:

• Dashboard
• Facebook (Persona 1)
• Twitter (Persona 1)
• Facebook (Persona 2)
• Twitter (Persona 2)
• Facebook (Persona 3)
• Twitter (Persona 3)
• ...

Each tab is an isolation environment, containing its own storage (e.g. cookies, session storage, local storage).

The isolation environment may have 2 known states:

• Dummy: Created by Persona-Profile pairing operation; will be recycled automatically after successfully connecting the Profile to the Persona.
• Concrete: Maintained by a connected Profile on a Persona.

The login session of a tab may be terminated by the server. Maskbook will ask the user to login again if Maskbook detects an logout in the tab. Maskbook will require the user to login to the specific account. After a seccessful login, Maskbook will check the current username. If the current username does not match the previously specified username on the corresponding Profile of the tab, Maskbook will ask the user whether to update the Persona to adopt the current username or to relogin with the correct account.

Extra Benefits

• Better entry for creating Personas and connecting Profiles.

Drawbacks

• A 50-pixel rectangle will be occupied by this component. The usable display area will be reduced.

[Tedko]

Good example -> Friendly +