Posted by & filed under Announcements.

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:

The Red Hat UXD Team

Posted by & filed under Forms.

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.

There are four ways I founded to entering numeric data.

  1. Bootstrap Touchspin (stacked):   Data Input + Number Control
  2. Bootstrap Touchspin:  Data Input + Number Control
  3. Bootstrap Slider:  Number Control
  4. Selection: Number Control

(ps: The experience of input box entering data is included to A & B )

In this issue, I decided to do a small usability testing about

What is your preferred control for entering numeric data?


How did I test ?

Test A. Numeric Data Entry

Test link:

Testing environment:Web

This test tested 30 participants from 5 departments of Red Hat.


Section 1- Observe the operation of users

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

  1. The participants include 16 male and 14 female.
  2. 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

  1. 96.7% participants enter text directly in the field of Working Years. Just 1 participant use the control buttons on the right.
  2. 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

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

  1. Both test1 (BootStrap Touchspin (stacked) ) and Test4 (selection) get 37.5% votes. Users have a lot of user experience about this two patterns.
  2. 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.
  3. 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.

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


  1. The users can not control it well;
  2. Some users don’t know how to use it;
  3. After the selection, the slider do not show the number clearly;
  4. Some user like use keyboard think it is very hard to control it with keyboard.


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

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



  1. 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.
  2. 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.
  3. 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.

  1. It is very tired to hover the mouse from left to right.  BootStrap Touchspin (stacked) is easier to control number.
  2.   33.3% (10) participants choose BootStrap Touchspin.


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


  1. Compare the two pages, Which one is your prefer?

Wide one

Narrow one


94.7% (29) participants like the narrow one, even hope it can be more narrow. The input information is short, the wide one is too wide to them.

1 participant think the wide one looks more balance in the page.


Test B. Button within form

Test link:


  1. 73.3% (22) participants like example 2.


1.They looks example 2 is comfortable in visual ;

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.

  1. 23.3% (7) participants like example 1.


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



  1. 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.
  2. Using a drop-down seems like a good approach when there are a small number of options.
  3. Using narrower field widths for numeric data entry is preferred.
  4. Looks like participants preferred to have buttons within forms directly associated with the input field (no gutter).


More detail test information please check

Posted by & filed under UX Research.

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:

  1. Static – Link text is always blue and underlined; nothing changes on mouse over.
  2. 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.
  3. 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.

Posted by & filed under Announcements, PatternFly.

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.

The Red Hat UXD team

Posted by & filed under Announcements, PatternFly, Web Components.

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:

  1. Defining a Class Component which internally renders our web component

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

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

You can see this in action with our pf-tooltip jsfiddle.

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!

Posted by & filed under Monthly Report.



PatternFly Core Repo

  • Members (Forks): 167 (3.7% increase from January: 161)
  • Stars: 558 (3.3% increase from January: 540)
  • Total Pull Requests: 16 (5.9% decrease from January: 17)
  • Merged/Closed Requests: 16 (14.3% increase from January: 14)
  • Submitters: 12 (20.0% increase from January: 10)

PatternFly Angular Repo

  • Members (Forks): 65 (6.6% increase from January: 61)
  • Stars: 79 (2.6% increase from January: 77)
  • Total Pull Requests: 12 (7.7% decrease from January: 13)
  • Merged/Closed Requests: 12 (7.7% decrease from January: 13)
  • Submitters: 9 (80.0% increase from January: 5)

PatternFly Design Repo

  • Members (Forks): 43 (22.9% increase from January: 35)
  • Stars: 20 (81.8% increase from January: 11)
  • Total Pull Requests: 23 (62.3% decrease from January: 61)
  • Merged/Closed Requests: 19 (68.3% decrease from January: 60)
  • Submitters: 12 (7.7% decrease from January: 13)


  • Total Sessions: 11,277 (11.5% increase from January: 10,115)
  • New Visitor Sessions: 4,858 (15.7% increase from January: 4,200)

PatternFly Blog

  • Total Blogs: 2 (0% increase from January: 2)
  • Total Sessions: 1,043 (11.0% increase from January: 939)

Community Meeting

  • Total Participants: 58 (114.8% increase from January: 27)


  • Mailing List Subscribers: 155 (6.9% increase from January: 145)
  • Twitter: 455 (2.0% increase from January: 446)
  • Facebook: 68 (9.7% increase from January: 62)
  • Google+: 54 (5.9% increase from January: 51)
  • IRC (#patternfly on freenode): 35 (2.8% decrease from January: 36)
  • Slack: 120 (11.1% increase from January: 108)

Posted by & filed under Monthly Report.



PatternFly Core Repo

  • Members (Forks): 161 (2.6% increase from December: 157)
  • Stars: 540 (3.6% increase from December: 520)
  • Total Pull Requests: 17 (240.0% increase from December: 5)
  • Merged/Closed Requests: 14 (180.0% increase from December: 5)
  • Submitters: 10 (400.0% increase from December: 2)

PatternFly Angular Repo

  • Members (Forks): 61 (5.2% increase from December: 58)
  • Stars: 77 (8.5% increase from December: 71)
  • Total Pull Requests: 13 (51.9% decrease from December: 27)
  • Merged/Closed Requests: 13 (51.9% decrease from December: 27)
  • Submitters: 5 (16.7% decrease from December: 6)

PatternFly Design Repo

  • Members (Forks): 35 (16.7% increase from December: 30)
  • Stars: 11 (10.0% increase from December: 10)
  • Total Pull Requests: 61 (205.0% increase from December: 20)
  • Merged/Closed Requests: 60 (233.3% increase from December: 18)
  • Submitters: 13 (18.18% increase from December: 11)


  • Total Sessions: 10,115 (1.4% decrease from December: 10,259)
  • New Visitor Sessions: 4,200 (16.2% decrease from December: 5,010)

PatternFly Blog

  • Total Blogs: 2 (33.3% decrease from December: 3)
  • Total Sessions: 939 (2.5% increase from December: 916)

Community Meeting

  • Total Participants: 27 (3.6% decrease from December: 28)


  • Mailing List Subscribers: 145 (2.1% increase from December: 142)
  • Twitter: 446 (9.3% increase from December: 408)
  • Facebook: 62 (1.6% increase from December: 61)
  • Google+: 51 (0% increase from December: 51)
  • IRC (#patternfly on freenode): 36 (5.3% decrease from December: 38)
  • Slack: 108 (10.2% increase from December: 98)

Posted by & filed under Monthly Report.



PatternFly Core Repo

  • Members (Forks): 157 (4.0% increase from November: 151)
  • Stars: 520 (2.4% increase from November: 508)
  • Total Pull Requests: 5 (62.0.0% decrease from November: 13)
  • Merged/Closed Requests: 5 (62.0% decrease from November: 13)
  • Submitters: 2 (60.0% decrease from November: 5)

PatternFly Angular Repo

  • Members (Forks): 58 (3.6% increase from November: 56)
  • Stars: 71 (2.9% increase from November: 69)
  • Total Pull Requests: 27 (145.5% increase from November: 11)
  • Merged/Closed Requests: 27 (145.5% increase from November: 11)
  • Submitters: 6 (25.0% decrease from November: 8)

PatternFly Design Repo

  • Members (Forks): 30 (50.0% increase from November: 20)
  • Stars: 10 (25.0% increase from November: 8)
  • Total Pull Requests: 20 (50.0% decrease from November: 40)
  • Merged/Closed Requests: 18 (40.0% decrease from November: 30)
  • Submitters: 11 (10.0% increase from November: 10)


  • Total Sessions: 10,259 (3.03% decrease from November: 10,580)
  • New Visitor Sessions: 5,010 (20.7% increase from November: 4,151)

PatternFly Blog

  • Total Blogs: 3 (200.0% increase from November: 1)
  • Total Sessions: 916 (17.1% increase from November: 782)

Community Meeting

  • Total Participants: 28 (0% increase from November: 28)


  • Mailing List Subscribers: 142 (1.4% increase from November: 140)
  • Twitter: 408 (8.2% increase from November: 377)
  • Facebook: 61 (10.91% increase from November: 55)
  • Google+: 51 (8.5% increase from November: 47)
  • IRC (#patternfly on freenode): 38 (7.3% decrease from November: 41)
  • Slack: 98 (30.7% increase from November: 75)

Posted by & filed under Announcements, PatternFly.

In the PatternFly Roadmap we outlined our future plans for PatternFly and laid out the goals for the PatternFly 4 release:

  • Providing initial support for Angular 2 application development
  • Updating the libraries on which Angular-Patternfly is built
  • Making the dependence on jQuery optional when consuming Angular-PatternFly

Today, we are excited to announce our first PatternFly 4 alpha release, PatternFly 4.0.0-alpha.2  (we had to skip 4.0.0-alpha.1 due to some known issues).  This blog provides some highlights of the release, please check the release notes for PatternFly and Angular-PatternFly for further details.

The PatternFly 4 changes are centered around the javascript implementations of our patterns.  The patterns and their CSS implementations have not changed since PatternFly 3. There are no API changes to PatternFly Core, however you will want to refer to the migration guides for PatternFly and Angular PatternFly for details on migrating your applications to PatternFly 4.


Directive to component migration

The primary driver for the PatternFly 4 release is to enable Angular 2 development through the re-factor of our Angular 1.x directives into Angular 1.5+ components.  These components can be used in a “downgraded” Angular 2 application.  All directives have been converted to components, except the pfRemainingCharsCount, pfFocused, pfValidation, and pfFixedAccordion directives.  We have provided a Angular 2 quickstart that can be used as a starting point for your own PatternFly Angular 2 applications.

Optional jQuery

With PatternFly 4, we’ve refactored our Angular modules to enable development of Angular-PatternFly applications without bringing in the jQuery dependency.  To take advantage of this, include the patternfly-settings.js file from the PatternFly dependency, rather than patternfly.js.  More details can be found in the associated Github Pull Request.

Table View Component

New common component work has landed in PatternFly 4 with the introduction of the Angular-PatternFly Table View component.  The table view component leverages the angular-datables port of the library we are using in PatternFly 4.  It brings the highly requested table view pattern implementation to Angular.  Check out the Angular-PatternFly docs for more details on using the table view in your Angular applications.

PatternFly Core

jQuery component split

We’ve refactored the monolithic patternfly.js file into a number of separate source files with this PatternFly 4 release.  The goal was to better enable developers to locate functionality and contribute to PatternFly.  The individual files are still packaged into a single file at build time, mimicking the PatternFly 3 distribution, as such there is no migration step required in this regard for your applications.

Ruby now optional for building PatternFly

Ruby is no longer required to build and contribute to the PatternFly project.  Ruby was required due to our use of jekyll to provide code samples that are used in both the development of PatternFly components, as well as live examples on the site.  Having to install ruby and the associated gems however presented a source of frustration and an impediment to contribution from our javascript developer community.

To overcome this hurdle, we’ve implemented a javascript tool to render our jekyll test pages using the liquid-node library.  The full jekyll build is however still available for those who have ruby installed.  See the README for instructions on toggling the javascript/ruby build for PatternFly.


The migration steps associated with the above changes are being tracked in PatternFly migration guide and Angular-PatternFly migration guide wiki pages. These migration guides are works in progress, please suggest any additions as you migrate your own applications.

Next Steps

We will follow up with additional PatternFly 4 alpha releases as we solidify our API and component changes.  Once we are API stable and feature complete we will have a Beta release, followed by a final 4.0.0 release.  We will  continue with PatternFly 3 releases until PatternFly 4.0.0 is ready.  After the 4.0.0 release, we do not plan to have anymore PatternFly 3 releases.

PatternFly 5

PatternFly 5 development has continued concurrent to the Patternfly 4 effort.  We are planning a 5.0.0-alpha.1 release in the coming weeks.  Stay tuned for blogs and announcements detailing what we’ve been up to with PatternFly 5.