a blog on prototyping by pidoco°

Recently, we spoke about mobile navigation patterns and their impact on creating valuable content on limited screen space without losing important options. This time, we take a closer look at the sidebar.

The sidebar is best used to offer a secondary view that contains additional options like user settings, a list or a contact form etc., but it doesn’t make you leave the current screen. It’s a collapsible panel, often with the same height as the screen, that only slides in with a tap on an icon, usually a gear wheel or persona icon.

And here’s how it goes …

 

1. The project setup

To visualize our navigation pattern, we go back to our previously created project called “Watch it!“. You might remember: This mobile app contains a navigation bar with an overflow menu. Today, we’ll add a sidebar to it which can be accessed via the persona icon in the top right corner. The sidebar grants access to the user profile and various profile settings and options.

Recap: In our mobile app, we have already created one start page with one layer that contains an overview on the available movie genres. Also we built a navigation bar on another layer which contains a hamburger menu on the left and the overflow menu acts as a collapsible quick-access menu to the available movie genres.

 

2. The Sidebar

For the second part of our “Watch it!” project, we need in total: 1 page for the sidebar itself and one page for each entry within the sidebar.

2.1 Creating the sidebar

Let’s create the actual sidebar which will list all available options connected with the user profile of this app (changing password or language settings or getting in touch with the support etc.). To do so, we add a new page (here called: “1-Sidebar”) and immediately add the content. Here: I used a grey rectangle as background and added text stencils.

 

2.2 Setting up the sidebar content

As our sidebar will only give an overview of the available options, we create a new page for each entry of the sidebar. (In my project I built a total of 8 pages.) Now let’s fill the page with content. Here I  added some text elements, text input fields and a button on the “Password” page.

To save time, just create one page first, then duplicate it and then alter the content on the remaining 7 pages.

 

3. Adding interactions

Let’s go on with the interactions. We’ll have to take three steps now because 1) the sidebar is supposed to be slideable, 2) the sub-entries listed in the sidebar should be clickable, 3) the sub-level pages of the sidebar have to be slideable to re-access the sidebar panel again.

3.1 Making the sidebar slideable

To leave the sidebar and get back to the start page of the “Watch it!” app, the sidebar is supposed to disappear with a swipe gesture. So we select the grey rectangle (as it spans the entire page), open the interaction dialog and add the action when the user “swipes”, set the direction to right and use the reaction “show page”. We refine the interaction selecting the option “Instant link” and setting the animation to “slide in from left”.

 

3.2 Making the sidebar list entries clickable

Having already created the 8 pages that represent the content of each entry of the sidebar panel, we continue with creating interactive links. To do so, we open that page (Here: 1 – Sidebar) and click on the respective text, open the context menu and select the respective page from the dropdown menu next to “Target”. Here: I linked the entry “Change password” with the page called “Password”.

Repeat that step for the entries of sidebar.

 

3.3 Making the sidebar sub-content slideable

Finally, we want to add more interactions to the pages that display the sidebar content. To leave the sub-level view and go back to the sidebar panel, we want to use a swipe gesture. So we open one of the previously created sidebar pages.

Let’s start with the first one: I opened the page called “Password” and added two action areas for that parts of the screen that are empty. (Hint: They might even overlay other elements like the headline.) Again we need the interaction pairing: When the user “clicks/taps” then “show page”,  select the previous sidebar page, set the options to “Instant link” and the animation to “Slide in from left”.

To save time again, just copy and paste the action areas to the remaining 7 pages and adjust the linked pages.

 

4. Connecting the sidebar with the navigation bar

4.1 Extending the navigation bar

Now we open the layer that contains our navigation bar and add a persona icon to the navigation bar. To do so, we use the quick-search option atop of the stencil palette and drag the respective icon to its position.

 

4.2. Connecting the navigation bar and the sidebar

All that’s left is connecting the sidebar with the profile icon in the navigation bar. To do so, we select the persona icon on the right and add the interaction pairing when the user “clicks/taps” then “show page” , select the one that contains the sidebar and use the animation “slide in from right”.

 

5. Simulation

Voilà! To test your sidebar, take your mobile device, open the Pidoco app (available via Google Play or the App Store) and start the simulation of your project by selecting it from the project list.

 

That’s it! You just finished your mobile app that includes a sidebar

Do you need help? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!