Please can someone name this pattern - where you edit something in a table and, instead of allowing you to edit the content in a modal dialog, you edit it in a docked side 'panel'? As per the screenshot below.
I quite like this and think I prefer it to a modal dialog pattern, as it feels like the user is less removed from the context of the page as the window is to the side, rather than in the centre and covering much of the content.
I would love some opinions on the usability of this pattern.
Apple calls this Slide Over in iOS 9, but I've also seen it called Page Slide.
That second link is from Bill Scott (one of the authors of Designing Web Interfaces), and he gives a bit of a summary of the pros and cons:
Usage
- To reveal additional navigation controls
- In TV or mobile space since controls and/or space is limited
- To expose a configuration panel (similar to the Module Configure Pattern)
- To a lesser extent to reveal help or contextual information (the partial hiding of the related content might make it a poor choice for this)
Challenges
- Discoverability
- Losing context with the rest of the page
- Make the disruption work for you
Recommendations
- Use it sparingly only for major context switches
- Make the animation fast. No reason to wow the user with your ability to scroll
- Make the activation/deactivation dead simple
This is commonly referred to as a Side Panel or a sliding Side Panel. If it blocks the user from interacting with content obscured by an overlay, it is effectively acting as a modal. Side panels do not always behave this way though, and can push content over as well as overlaying it.
This is called the Hamburger button or Hamburger Menu.
I have also heard Navigation Drawer when it comes to android terminology.
Most of the time, the pane is on the left side, but it's the same.
