UX feedback -- Quad Icons

About This Document

UX evaluated quad icons demonstrated in this recording and created a set of feedback, organized into the following categories:

  1. Development effort
  2. UX team to investigate further
  3. PatternFly issues for the UX team to address (PatternFly design repo)

What’s in scope

Our feedback includes comments on:

  • Tooltips
  • Visual design
  • Populating views with objects when views have different layouts
  • Removing /replacing views
  • Performing a customer survey (about user interaction and usability of the icons, e.g.)


Development effort required

Issue 1: When quad icons appear in dashboard cards, they should not have a blue strip on the top of the card.


Suggestion: Remove blue strip on the top of cards.

UX team to investigate

Issue 2: Unsure of the usefulness and need for quad icons.

Suggestion: UX to conduct user survey.

Issue 3: Quad icons are inconsistent with our visual standards.

UX provide visual spec for development that addresses details such as the following:

  • Use PatternFly colors
  • Update to more modern visuals (no gradients/no drop shadows – flatten, etc)
  • Recommend better object label and checkbox placement
  • Show examples of status change (alert or power state, eg?) in quads that also show red brand icons (like RHEL and OpenShift)

UX to create a visual design story if prioritized.


Issue 4: Tooltips don’t clearly show which content corresponds to which icon quadrant.

Suggestion: UX to investigate if prioritized. Consider:

  • Using PatternFly tooltip.
  • Creating a tooltip for each region in the quad (i.e., user mouses over each of the four regions and see a different tooltip). In 4.6 CloudForms, there is a single tooltip per quad icon, which doesn’t explain what each region means.

CF 4.6 implementation-- a single tooltip presenting the object name
Issue 5: Development proposed removing CloudForms tile view and replacing it with the PatternFly list view.

Suggestion: UX to investigate if prioritized.
Issue 6: Do quad icons consistently place like information in the same quadrants of the quad icon for similar objects? E.G, does power state for every object always appear in the upper right?

UX to investigate if prioritized.

PatternFly issues for the UX team to address

Issue 7: Because the quad view requires much less space to display objects than a list or table view, users see a lot of white space, and may think they’re seeing all data in one page. However, they are not; they need to click paging controls to see the next chunk of data. E.G., In the quad tile view (aka, card view), 20/45 quad icons occupy only half the page, but we still require that the user click to the next page in the paging control to see the remaining data.

UX to create a GH issue in patternfly-design.

1 Like