In the latest in a series looking at website design patterns, Chris Bank of UXPin looks at slideouts, sidebars and drawers.
Once someone starts using your website or web application, they need to know where to go and how to get there at any point. If they can't navigate through your your application easily, you'll quickly lose them. Thus, designing effective navigation in your web application is crucial.
In this series for Creative Bloq, Chris Bank of UXPin, the UX design app, discusses the importance of navigation design patterns and details examples from some of the hottest websites and web apps today.
The user needs a way to navigate between different sections of the app without being distracted in each individual section.
The solution
Spotify's search box slides out on the left when needed
A secondary section of the application – such as navigation, chat, settings, user profiles, etc. – is tucked away in a collapsible panel hidden under the main section when it is not needed. When accessed, it usually either moves the main section aside or slides over it.
Since the slideout is in a separate layer from the main content in the application, there's a lot of flexibility in terms of how content can be laid out inside the drawer – icons, text, and even simple controls are viable options to provide quick access to important actions here.
There's a wealth of info in Medium's side bar
Often times, the drawer can be hidden under a "hamburger menu" or a simple arrow that indicates there's more content there.
It's an easy way to hide all the less important things in a "side drawer" so that you only have to focus on how to distill the most important information in each view.
The New York Times sidebar acts like a contents page
Examples can be found everywhere. Asana, Spotify (search box), and Facebook (chat boxes).
Some more specific examples include Houzz, which has a sub-navigation drawer that disappears as you scroll down and reappears back at the top; and the New York Times, which hides a side drawer that appears on the left when the user clicks the 'sections' button at the top left side of the page.
As you scroll down in Pinterest, an up-arrow button appears for easy navigation back to the top, and in its 'How It Works' page.
