3

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.

enter image description here

  • The behaviour is exactly like a modal dialogue, since it needs to be closed to interact with the rest of the app. It's just that it's placed out of the way – but this in my opinion is not part of the definition of a modal dialogue? – Andy Feb 2 '16 at 8:58
  • Yes, true, Andy. It does behave like a modal dialog. Although a modal dialog pops up, whereas this slides in from the side so it has a very different feel to it. What I'm really trying to do is to search for more examples of this pattern to see what other people have done with it. And I'm struggling to find a search term that yields me any results. So I'd like to know if this has an actual name. – Amy Feb 2 '16 at 9:04
  • Sidebar-Editor? – Andy Feb 2 '16 at 9:06
  • I've seen nav bars similar to this called "drawer menu" or "curtain menu" due to transition as them come into view. – Stephen Keable Feb 2 '16 at 12:25
  • 2
    Drawer or modal drawer. – plainclothes Feb 3 '16 at 2:12
3

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
0

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.

0

In 3rd-party Angular libraries these are now commonly called "asides".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.