Posted by & filed under Communication.


Time specific content (such as events, tasks, alerts) require a delivery system that is actionable, independent, accessible and immediately available that does not expressly interfere with primary content and functionality.




Initial Logged In Screen

An Event/Task Drawer that is accessible via a notification icon in the header nav on the right side. Toast notifications (parameters set by individual applications) also alerts the user to new events. Interaction with the toast notification would launch the drawer. Investigation into an appropriate icon for the header nav would be prudent. Certain applications may have an abundant number of notifications, where as a icon with new event number may be inefficient

Header nav icon and toast notification.

Header nav icon and toast notification.

Expanded Event/Task Tray

Interaction with task/event drawer tabs open up their prospective rows (accordian) with only one tab open at any given time maximizing space for content. The ability for the user to control the amount of content in any tab with a Load More (infinite scroll) pattern reduces the need to define any specific time frame for the tabs content. Other solutions I encountered, gave specific time ranges for the rows displayed (e.g. “last 12 hours”, “last 24 hours”). That said, if a user were to login after that time range they may miss out on pertinent events.

New events should appear bolded where as old event would not be.

Mark All Read functionality is available for use cases in which the events are redundant to the user or easily dismissible.

Through the kebab pattern each row has a slide out action menu to allow for quick/easy individualized actions.

Event/Task Tray Row Interaction and Destination

Clicking on any particular row (2)  will push the drawer our further with the rows content/details overtaking the initial drawer nav.This solution is self contained, saves on space and negates the need to go to a new page or section within the application. A back button in the header area will return the tray to its previous state.

The header also has a title area so the user can correlate this new content area with the row that was clicked on.

The content area would vary upon independent needs of the application.



Event/Task Tray Tab Interaction and Destination

Clicking on any Tab chevron (3) will, again, slide the drawer out with content being replaced with a more detailed list of the events in the initial tray. This is accompanied by an area to house search functionality and an additional row that can house filtering options.

The same kabob row action is available, as well as a back button returning the drawer to it’s previous state.


Screen Shot 2016-03-10 at 9.25.28 AM



  • Slide Out/Content Replace pattern may be used as a tertiary nav solution for Patternfly. Duplicating this type of interaction would show consistancy.
  • Content areas/search/toast notifications would be personalized per it’s use/application.

4 Responses to “An events/task drawer… That’s handy!”

  1. I like this proposal. Agree that the infinite scroll makes better sense than trying to fix a time range. I also think that allowing the drawer to expand to full width is an interesting solution so the user does not need to loose context by navigating off to another page to see details of an event. Just a few questions/considerations:

    – I’m interested in the choice of slide out actions when the user clicks the kabob menu. This is perhaps more mobile friendly, but introduces a new interaction pattern that I’m not aware we are using in other views. This also seems to not work well if there are more than 2-3 choices.
    – Is the full-sized drawer just an extension of the tray, i.e. do the same accordion tabs persist when I expand the tray?
    – For storage, we have the ability to further drill-down to details of a task or an event. This means that each event can have it’s own detail page. Not sure if this is a general case, but wonder how you would handle in this design. Does the task or event detail just replace the list in the expanded tray state?
    – Agree that the notification widget in the header area deserves more consideration. I did have a question about placement. Looks like you’ve positioned this in front of the User menu? For Storage, I played with this a bit and ended up placing it following the User widget so it is the right-most element in the header. My rationale was that it belonged there since the tray slides out from the right edge of the window, but would be interested in your thoughts on that.


  2. Great to see this pattern take shape! A couple little things that came to mind:
    – “Load more” at the bottom of the list – is this instead of or in addition to simply scrolling down and a few more items automatically loading at the bottom?
    – I’ve heard from users that they like having errors/messages open while they troubleshoot what is going on. Could we include a “tear-off” function for seeing the full details *and* the page they’re working on?
    – If you’ve clicked one kebab and have a row’s actions shown, then click another kebab, does the original one close?

    • SJ – Thanks for the feedback! Here are some answers to your questions:
      1) For Load More — Thanks for addressing this, after the first version I had the same question floating around in my head and am thinking having a autoload more upon trying to “push” the scroll further would not only be more convenient but free up the multi button function at the bottom of the tray.
      2) I think the size of that “tear off” would be very large, so they wouldn’t be able to see the content. That said, the tray should stay intact with it’s current state, so you can easily toggle between the content.
      3) Kebab – That function is also changing in version 2 per Matt C’s feedback. It will now be a dropdown upon click to stay consistent with current patterns. Yes – clicking on another kebab would dismiss the previous kebab dropdown.

  3. Hi, great job! I think we should keep consistency on the kebab menu with the rest of our patterns. This new interaction is good for a mobile environment where you need a large click area but to me it doesn’t make sense on a desktop env.


Leave a Reply to Matt Carrano

(will not be published)