Overview

The Notification Drawer is a content delivery system to expose time-based information such as events, tasks, and alerts. It is a self contained system that is viewable without having to navigate to another area of the application. Upon login it offers initial notifications for what has changed in the form of dismissible Toast Notifications and a permanent interactive icon in the header bar. It is hidden or revealed at the user’s request.

The goal of this design is to address the concerns related to notification drawer and how it should be collapsed in a responsive state for both the vertical and horizontal navigation.

Icon: Displays visual differentiator when new or unread notifications are present. Clicking on the icon will slide out a drawer and dismiss the toast notification. Clicking on the icon again will close the drawer.

Drawer Title: Title of Drawer.

Accordion: Only one notification tab may be opened at a given time -maximizing drawer space. Italicized text will indicate number of new events. Clicking on the title will expand accordion.

The icon of Notification is exposed on the navigation bar (not in the navigation menu like before). Because we use full/empty state to show if there are new events, the icon should be visible at all times so the user will know if there’re new events at a glance. An empty icon is used to show the state of No New Notifications.

When User clicking on the Notification Icon , the notification drawer will be open and the bell change to be full and blue (#0088ce).

The notification drawer will take over the whole screen width. That is because the mobile screen is much smaller than the PC’s and there’re plenty of actions to make in this page.

When there are no new notifications, all the labels are default to be collapsed.

Only one Label may be opened at a time. The other two Labels will stuck in the top/bottom of the screen (if user open Label 2, Label 1 will stuck at the top and the Label 3 will stuck in the bottom)

User can scroll up and down within a Label to view more events. It will load 10 events at a time by default.

When scrolling to the bottom of the list, user can pull up to load more events.

Notification Drawer With New Notifications

When there are new notifications, the icon will change to be full.

When User clicking on the Notification Icon, the bell change to be blue (#0088ce).

The Mark All Read button will stuck in the bottom within the label.

After clicking on Mark All Read, all the new/unread notifications within this label will change to be read and the Mark All Read button will be hidden. Also, the text under the Label name will show “0 New Events”.

We used to have a unified expanded icon in the PC’s version. But it may be too complicated on mobile. So all the info will be shown and user don’t need to expand a event anymore.

In some cases, for complicated using scenario, the quick filter can not meet the user’s need. Especially for those products that have large amount of criteria and multi select options. Developers of the products can only meet the needs by adding on more functions. We could design a new filter pattern to meet the requirement.

Overview

Advanced filter is suitable for users who want to:

Quickly filter the data from a large amount of criteria

Fast searching for data from a long list of value

Combine multiple filter criteria into a single filter

Save the custom filters that can be recalled and reapplied at another time

Here are some product examples:

1. Errata Tool

User : Developers / QE

Job:Working and cooperating on a certain type of advisory until the rpm package delivered to the customer.

Pain point:

The user needs to filter and watch a certain advisory. When finish part of the work of an advisory, the user needs to deliver it to another department for review. During the review process, the user will work on other advisories. After review, the user will spend some time to configure the filter again to search the advisory to continue the work.

Since the configure field is too much, the user would like to have a function to save the custom filters that can be recalled and reapplied at another time. Currently, the user can only favorite the advisory page in browser.

2. Forman

User : Administrator

Job:Managing Linux systems.

Pain point:

The user needs to filter and watch a certain Linux system. The user takes time to filter out the data from the multi categories. The common search field can not meet the needs well. The user needs a more accurate and visualized filter. Currently, the user can type in a rule to search.

3.Tendrl

User : Administrator

Job:Unify the portal of ceph and gluster storage systems.

Pain point: The user needs to filter and watch a certain storage system and filter out the data from a multiple filter criteria. Currently the filer can only filter from the single filter criteria.

4.Beaker

User : Developer

Job:Renting hardware.

Pain point:

The user needs to rent a certain hardware. When filtering the hardware, the user needs to read through a long list of values and also fill in several criteria. The user would like to quickly get the correct value from the long list and to simplify the filter interaction.

Design

Advanced filter is based on the current quick filter pattern and provides a filter solution that contains a group of dropdown menu and a custom selector.

The dropdown menu group includes single selector, single selector with search and multi selector.

The custom selector contains a button to create custom filter and also a dropdown menu for saved custom filter. It is used for users to define their own filters and save them that can be recalled and reapplied at another time.

Users could choose to implement either of the functions based on their own requirement.

Single dropdown selector

The quick searching filter remains the same as the current filter pattern.

Attribute Selector (optional): Contains a list of the possible attributes by which to filter.

Single dropdown selector: Use when there are less than 8 possible values. The filter is activated when the user click the dropdown.

Single dropdown selector with search

Single dropdown selector with search: Use when there are more than 8 possible values.

Multi dropdown selector

Multi dropdown selector: Use when there are multiple filter criteria to search in a single filter. Click the checkbox to check or uncheck the filter. Clicking the “X” of active filters could also remove the multi filters.

Custom selector

The custom selector contains a “create a filter” button and a “My filter” dropdown selector. When users haven’t save any filter before. The “My filter” button will not show unless users save one.

Change the name: Use when saving the custom filter. Click the field to change the name and click “Save” button to save the filter. After clicking the “Save” button the filter is activated.

Cancel: Use when canceling the custom filter.

Apply the custom filter: Use when applying the custom filter but not saving it.

My filter: Use when reapplying the saved custom filter.

Delete button: Use to delete the saved custom filter. When hovering one of the filter, the delete button will show.

Description

In the previous discussion about the quickly filtering for dataset, we researched the quick filter using scenario and the products (oVirt / CloudForms / RH Customer Portal / Errata Tool / Openshift), Finding out that we could improve the current filter pattern to meet the requirement.

The quick filter is suitable for commonly used situation. It is based on the current Patternfly filter pattern but adding on a group of toggle button. We also changed some of the design details of the current filter pattern.

Overview

Quick filter is a component that enables a user to quickly apply stackable filters to a table or page full of objects.It should be fast, simple and obvious.

Quick filter is displayed as a component of the Data Toolbar with a quick searching function and a toggle button group. The toggle button group is used to filter the important certain value.

Product example:

Design

Quick searching Filter

The quick searching filter remains the same as the current filter pattern.

Attribute Selector (optional): Contains a list of the possible attributes by which to filter.

Filter Query Field: Use when there are more than 15 possible values. The user’s filter query is entered here. The filter is activated when the user presses the “enter” key and all objects that do not have a match to this value are hidden.

Filter Query Dropdown (optional): Use the filter query dropdown when there are less than 15 possible values to allow the user to select from a known and fixed value list (e.g a list of statuses). The filter is activated when the user selects a value. Objects that do not have this value are hidden.

Active filters Bar

For the active filters bar, we changed some of the design. We move the “Clear All” button to the far left. Compare with placing the button to the far right,

it is a better way to avoid the “Clear All” button from getting out of the user’s focus when the active filters list becomes very long.

Also, the “Clear All” button will show only When there are more than one filter activated. If there is only one filter that is activated, the “Clear All” button is hidden.

Active Filter: Quick Filters are labeled with the attribute and value used to create them. Clicking the “X” in the box will remove the filter. New filters appear to the right of existing filters and are highlighted briefly upon appearance. If no active filters exist, the active filters bar is hidden.

Clear All Filters: Clicking this action removes all currently active filters.

Toggle button group

The toggle button group is a new adding on. Button groups is a commonly used and obvious way to display a filter.

Toggle Button Group: It can quickly filtering the most commonly activated or the most important certain criteria. The toggle button group filter is preloaded. It is not like quick searching filter, which is activated after user clicking the enter key. The number of the toggle button group is better less than four.

In designing enterprise applications, we very often encounter situations where the user needs to edit existing information. In many cases this editing is done in the context of a form where users can make and commit changes. You may sometime need to apply role-based access to enable editing for authorized users, only. How should you accomplish this using components available through PatternFly? This post identifies some common use cases for form based editing and potential design approaches.

Common Patterns

There are at least three approaches to editing that are commonly found. Each of these has advantages and disadvantages so the right approach may be dependent on context. Understanding the tradeoffs involved will lead to better decisions about editor design. To illustrate these approaches, I will use a simple use case that’s easy to understand. Let’s consider that an application has a database of users and I, as an administrator, want to edit the credentials of a selected user. What are some potential approaches that can be taken?

First, let’s suppose our high-level view of users is presented in a list view that looks something like this:

If I want to edit the details of one or more of these users. How should I proceed?

Pattern A – Drill Down to Edit Details

A simple approach is to open each user record in a separate editable form. The editable form can be contained in a modal dialog or as a full-page drill down. The user makes the required edit and clicks Save to commit them back to the user database. Watch the video to see this interaction.

Advantages

This approach is clear and straight forward. Users are clearly presented with editable information, can make their changes, and can click Save when done. If using a modal approach, users are focused on the task at hand and cannot navigate away without saving or cancelling changes. Role-based access control is easily accomplished by preventing unauthorized users from clicking Edit.

Disadvantages

The drill-down approach requires an extra navigation step to edit the details of an object. It also does not allow these details to be exposed to some users in a read-only mode. This may be a problem if there are details that should be viewable to all but cannot be represented on the parent view.

Pattern B – Toggle Between View and Edit Modes

One way to allow read-only access for some users and full editing privileges to others is to support drill-down to details and then require an additional step to enable editing.

In the example, the Edit button placed in the header of the page gives the user the option to turn the page into an editable form. Access can be denied to some users by disabling or hiding the edit control. After the user has made their edits, they can commit their changes by clicking Save or click Cancel to discard changes and return to the read-only mode.

Advantages

This approach allows the same page to be used for viewing as well as editing details. Access to edit mode can be controlled via the Edit button.

Disadvantages

Switching between read-only and edit modes will require a page refresh. Depending on the content on a page, it may be necessary for layout to change significantly when switching between modes. This has the potential to disorient users as elements change position.

Pattern C – In-Line Edit on a Form

Like in Approach B, the details are presented in a read-only page view. When users want to edit a specific element, they can put that element directly into an editable mode, make their changes, and save them. They can make multiple edits on the same page in this way.

Advantages

This approach does not require a page refresh and only one element is made editable at a time. This works well when only a few elements are likely to be edited at a given time. If validation needs to be performed in the back-end, inline editing will provide more immediate feedback since each change is submitted separately.

Disadvantages

This method will become tedious if many items will be edited on the page due to the additional clicks required and the potential turn around time after each change is submitted. Making this behavior clearly visible can also be challenging. A small icon or other signifier can be added adjacent to editable fields, however this may add clutter to the form.

Conclusions

While there is not a one size fits all approach to editing data on forms, there are some high-level guidelines that we can apply in most cases:

In most cases drill down from some content view (Card, List or Table view) into a separate edit page should be your default approach. This may be accomplished using either a standard modal dialog or on an edit page with appropriate submit buttons.

Toggling between view and edit modes on the same form is useful when you want to show the details to all users, but only some can edit.

In-line editing is a very efficient approach when users are likely to edit only a single parameter at a time.

What’s your take on this? I welcome other approaches that I have not covered here and you can expect to see these guidelines on the PatternFly site in the near future.

The Red Hat UXD team is excited to announce the first ever PatternFly Conference on June 8 from 12 – 6PM at the Red Hat Annex in Raleigh.

The PatternFly Conference is a half day community conference dedicated to sharing ideas, techniques, and tools to power great user experience through front-end design and development. To register, submit a talk, or learn more visit: http://www.patternfly.org/conference/2017/

Story Background

We currently do not provide any guidance on how to enter numeric data on forms. There is a Bootstrap Touchspin component in Widgets library for numeric data entry but no guidance on how this should be used.

Invite participants to input the four test forms naturally without telling them too much test detail (To reduce the influence of user operation behavior). Observe the operation of the user behavior and make the records.

Testing Analysis

The participants include 16 male and 14 female.

66.7% (20) participants use “Tab” button to switch the form field. 33.3% participants use cursor to select the field they need to input. There are 8 participants use mouse and 2 participants user touchpad to control the cursor.

Most participants like use the “Tab” button to switch the form field. They like input the information without too much interrupted.

2.Observe the operation how the users use the BootStrap Touchspin.

Testing Analysis

96.7% participants enter text directly in the field of Working Years. Just 1 participant use the control buttons on the right.

86.7% participants enter text directly in the field of Working Years.

Most participants like to enter text in BootStrap Touchspin directly .

4 participants said they didn’t see the control buttons of BootStrap Touchspin (stacked) on the right.

Section 2 – Questions to users

After user finished all the forms, asked user the question “What is your preferred control for entering numeric data? Please sorting for them ”

Both test1 (BootStrap Touchspin (stacked) ) and Test4 (selection) get 37.5% votes. Users have a lot of user experience about this two patterns.

During the test1, 2 users try to enter the number not belong to integers like 3.7 \ 1.5… The BootStrap Touchspin (stacked) adjust the number to integer directly. It takes some confuse to user.

Some user said they don’t like the drop down selection when the options is too long especially appears ScrollBar in the selection box.

Both BootStrap Touchspin (stacked) and drop down selection are good choices to design form data entering. They are very familiar with users and don’t take many problems to them. If data greater than ten, we would better choose BootStrap Touchspin (stacked). If less, both patterns are make sense. Drop down selection is more efficient and less mistakes.

When will they use the control buttons?

The majority of users said they rarely used control button of BootStrap Touchspin (stacked).

There is a very interesting thing from participants. If the number is certain，such as my years old / my pets number, they would like entering the number directly. If the number is not certain，like he is shopping on website but he is not sure how many potatoes he would buy, he would like the control button to control the number.

In this test, Bootstrap Slider is the least popular. 19 participants don’t like this interaction.

Reasons:

The users can not control it well;

Some users don’t know how to use it;

After the selection, the slider do not show the number clearly;

Some user like use keyboard think it is very hard to control it with keyboard.

Compare BootStrap Touchspin (stacked) and BootStrap Touchspin, Which one is your preferred control.

66.7% (20) participants choose BootStrap Touchspin (stacked).

Reasons:

More than 5 participants said they like to use “tab” button to the input box and enter number directly; BootStrap Touchspin (stacked) just need one step, BootStrap Touchspin needs two steps.

4 users thought BootStrap Touchspin can not input the number directly, just use “+” and “-” button to control the button, so they didn’t like it.

Many users with the use ability “tab” to switch field don’t know tab two times can go to the input box. When they filed use “tab” to input box, then they user cursor to reselect the box. This experience make them not feels very well.

4.They are familiar with this component.

It is very tired to hover the mouse from left to right. BootStrap Touchspin (stacked) is easier to control number.

33.3% (10) participants choose BootStrap Touchspin.

Reasons:

They thought it is very hard to click the number control button of BootStrap Touchspin (stacked) because the control buttons are small. That takes them a lot of misclick problems.

Test B. Button within form

2.Two participants have the confusion the button is used to copy all the information or just the link. Example 2 is much more clear to him.

23.3% (7) participants like example 1.

Reasons:

Text field and the button are seen as separate elements. The copy button is more clear to him with the clicking motivation.

2. The button in example 2 not look like a separate function button. Similar with a drop down button.

Guidance

The Bootstrap touchspin with stacked buttons seems like the preferred method for entering numeric data on a form, primarily because it is easier to tab into the field using the keyboard, which is the preferred data entry method. However the standard Bootstrap Touchspin might be better for situations where target size is a concern, like mobile.

Using a drop-down seems like a good approach when there are a small number of options.

Using narrower field widths for numeric data entry is preferred.

Looks like participants preferred to have buttons within forms directly associated with the input field (no gutter).

When adding new features to PatternFly patterns and widgets healthy debate sometimes arises among the PatternFly team about the best way to design the features. Other times, the team might be in agreement about the best design approach but still wants external validation before the design gets implemented. When either of these situations arises, we try to make decisions based on data provided by users through empirical testing. Recently, questions arose around three issues: (1) the best way to communicate pagination behaviors for table, list, and card views, (2) the best way to visualize links in aggregate status cards, and (3) the best way to provide syntax hints for form fields. To answer these questions the team conducted some “cafeteria tests” with users. Cafeteria tests are short usability tests conducted in a high traffic area (like a cafeteria) that typically focus on a single question or a small number of questions and can be completed in a few minutes. Participants can be recruited beforehand or just grabbed on the spot when they wander by the testing location. The rest of this blog describes the three studies we conducted and the findings and recommendations for each.

Study 1 – Pagination Behavior

The goal of this study was to gauge participants’ understanding and usage of the pagination controls in PatternFly table, list, and card views. The controls include a column selector for selecting all items currently visible, a Select All button for selecting all items (including those not currently visible on the page), previous and next buttons, and a drop down for selecting the numbers of items to view per page.

Participants were shown a table view and asked the following questions:

How would you select the items on the current page?

How would you select all of the items in the table.

If a single item in the table were selected, what would you expect to see when you clicked to the next page – would the current selection persist?

Results showed that the meaning of the Column Selector control is unclear. Some participants thought it selected all items on the current page; others thought it selected all items in the table; and some (about 1 in 3) either didn’t notice the Column Selector or didn’t realize it was a control. (Interestingly, about 1/4 of participants also noted that they never noticed the Select All control in the upper right corner of the table.) When asked about selection persistence, there was no consensus among participants. About 2/3 correctly believed that selections persist when moving among pages, while the rest thought they would not.

Based on these findings we made the following recommendations:

Add flyover help text to the Column Selector explaining its function.

Change the appearance of the “Selected: x of y” when paging to help users understand selection persistence.

Study 2 – Visualizing Links on Aggregate Status Cards

The goal of this study was to understand users’ preferences for the way links are visualized in PatternFly aggregate status cards. Three options were considered:

Text change on hover – By default, link text text is black and icon color is determined by status (green, yellow, or red). On mouse over, text changes to blue and underlined.

All change on hover – By default, link text text is black and icon color is determined by status (green, yellow, or red). On mouse over, text and icon change to blue and text is underlined.

Static

Text Change on Hover

All Change on Hover

Participants were shown three identical web pages that included aggregate status cards. The only difference among the pages was how the links on the cards were visualized. Participants were not told what the difference was. Participants were allowed to view each page for about a minute and were told they could move the mouse around the page but not click, because none of the links were active. After viewing all three pages participants were asked if they noticed any differences among the pages. Then the different link visualization conditions were pointed out and participants were asked which they preferred and why.

Results showed that participants had difficulty identifying the subtle differences among the pages. Only three of 16 participants were able to identify the differences among the three pages without being shown. In addition, 12 of 16 participants did not notice a difference between the “All change” and “Text change” conditions until it was pointed out. Regarding preference, slightly more than half of the users preferred the “All change” condition and about 3/4 preferred either the “All change” or “Text change” conditions. The three users who stated a preference for the “Static” condition all said it was the most obvious.

Based on these findings we recommended that the “All change” condition be implemented. That is, by default text should be black and icons colored according to the status they’re indicating. On mouse over, icons and text should change to blue, provided the icon is clickable.

Study 3 – Syntax Hints

The goal of this study was to validate a proposed design for the way syntax hints are displayed in PatternFly form fields. The proposed design is to display hints in a gray, italicized font inside the form field itself. The hints disappear when the user begins to type in the field. We wanted to know if users are OK with this method of displaying hints and whether them disappearing would impact performance. Participants were given a card with various pieces of information (credit card number, date, IP address, etc.) and asked to input the information into a website form using the formats shown by the syntax hints.

Results showed that users had little difficulty correctly entering the information from the cards into the form fields, with one exception. No users input the Outgoing Mail Server correctly. They all neglected to include the “smtp.” before the server name. Whether this is because they did not notice it before the syntax hint disappeared or is an artifact of the test, in that users did not understand mail server formatting and didn’t think the “smtp.” to be necessary, is not clear. Despite having little trouble using the form with the syntax hints displayed in the form fields, user comments indicated that displaying hints in this manner is not universally preferred. Half of the participants commented (unprompted) that they want hints to be visible at all times and suggested moving hints outside the fields.

Based on these findings we recommended that PatternFly continue exploring options for the syntax hints design pattern.

The Red Hat UXD team would like to introduce the PatternFly Angular 2 and PatternFly React repos! Big thanks to Dana Gutride and Patrick Riley for kicking off the effort by creating the repos and introducing a list of initial issues. At this point, these issues are a list of questions regarding repo setup. We would like to invite you to take a look at the current issues, comment and/or add any additional issues that should be addressed.

PatternFly repo teams have been organized as way to help coordinate the community efforts surrounding each repo to ensure contributions are meeting PatternFly design and development standards. The repo team roles and associated member are as follows:

Angular 2

Maintainers (JS Dev): Dana Gutride and Dan Labrecque

CSS Experts: Adam Jolicoeur and Andres Galante

Interaction Designers: Adam Jolicoeur and SJ Cox

UXD Strategist: Cat Robson

React

Maintainer (JS Dev): Patrick Riley

CSS Expert: Jenn Giardino

Interaction Designers: Jenn Giardino and Matthew Stevens

UXD Strategist: Mary Clarke

We are excited to enable Angular 2 and React development for PatternFly and look forward to building out these repos with you.

We’d like to take a chance to update the community on our Patternfly web components work. Progress continues on our web component prototype and you can now install an early alpha of our Alert, Tabs, Tooltip, and Utilization Bar Chart components with the npm module. We also have a new showcase site which provides documentation for getting started, component usage, and some demo applications for Angular1, Angular2, and React.

Framework Integrations

We’ve also started framework integration projects for Angular1, Angular2, and React. These modules can be consumed in cases where a framework integration helps in consuming the web component in a particular framework.

Angular 1 & Angular2 Integrations

One area framework integrations can help is in cases where you want to expose two way binding or custom events to a framework. In Angular1, we can “shim” this behavior. You can see an example of this here with our pf-tabs component shim.

Since Angular2 supports custom events by default, you’ll be able to consume web component custom events out of the box with Angular2. It is also generally discouraged to use two-way bindings in Angular2 (notes here). One place you will still find shims helpful though is when you are adding typings (for better Typescript support), or when you’d like to communicate to a component that content has changed. See our Tooltip component shim here for Angular2.

React Integrations

With React, the general pattern of “data in via attributes and properties, data out via events” applies very closely to our philosophy with web components and web component shims (so it’s a natural fit). There is a great post on these patterns here by Rob Dodson which explains this in more detail. Typically with React, our framework component shim is primarily responsible for three things:

Defining a Class Component which internally renders our web component

Mapping attributes and setting any type restrictions (prop types) which would be helpful to a React developer

Handling nested DOM updates (where you are updating a binding inside the web component and triggering React’s componentDidUpdate method). In these cases we let the React shim notify the web component that its content has changed.

Hopefully this clarifies some things about our framework integrations. I look for more framework integrations to make it in as our community grows!

Upcoming Plans

We have some ongoing work which should make its way into our patternfly-webcomponents project soon.

Adding v1 support for our custom elements. The web component polyfill was recently upgraded from the v0 specification to the v1 specification. This will change a few things like using “constructors” in our classes instead of the “createdCallback”, but should be a pretty minor upgrade for us. #28

New web component developments are underway for our Dropdown, Accordion, and Popover components. These will expose similar APIs to Bootstrap’s so they’ll fit right into your existing Bootstrap application. #24, #25, #26

New test pages. We’ll soon be incorporating test pages into our PR/development process with Travis so that you can review these at your leisure when reviewing a PR or you’d like to dive further into a web component example. #27

Getting involved

If you want to gain some experience working with Web Components, then check out our web component project on github, join our conversation on slack#webcomponents channel. If you are eligible, we’d love to have you participate through our GSoC proposal.

We’d love your feedback on our progress so far and certainly appreciate any early alpha adopters. Please feel free to leave comments and questions in the Patternfly mailing list. We are always happy to hear how things are going on your end!

Andres Galante was invited by CSS Tricks to write a blog post about the complexities of designing and developing for touch screens. As a result of this feature, we saw a spike in traffic to our site with 842 sessions on that day. This is our second best day to date.

We obtained a new personal best for traffic to the site this month with 12,320 sessions to patternfly.org. This is a 8.4% increase compared to our previous best of 11,362 sessions back in November 2016.