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
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.
- 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.