Why do I see python in the second row here, but nothing else?

[smarterclayton]

Very confusing, Needs to be clear that my currently opened drawer has visual dominance over other items in the page. The opacity effect on the other tiles is insufficient to convey that the drawer is dominating them. I would expect the actual background to lose opacity or fade towards the backend.

It took me 5-20 seconds to understand that the other items are disabled tiles, which was way too long and distracted me from my goal of trying to select a target.

[smarterclayton]

Also, visually the drawer has a massive amount of whitespace, and the filter row adds a ton more whitespace, to the point where the tiles have no visual connection to the sub selections in the tile.

This page is distracting and does not readily communicate to me what I need to click on. It really needs to be tightened up - the parent tiles need to clearly own the drawer, and the things in the drawer need to feel like individual clickable items. The icons look lost and uncentered in the drawer, and the text below them looks unbalanced (given the spacing of the icons varies wildly).

For a component that is our first connection to a new user, this needs to be a lot tighter and feel more tactile. Nothing in the drawer feels clickable.

[jorgemoralespou]

@smarterclayton you should search before opening issues ;-)
I think this is a duplicate of #2435

Agree that the service catalog needs some visual improvements.

[spadgett]

@openshift/team-ux-review

[smarterclayton]

I'm going to use this one because I think my picture is better. :)

[smarterclayton]

I think my problem here is that there are only about 400 pixels (20x20 of the chevron) that indicate that the giant white area is tied to PHP. Something like 1% of the screen is telling me what is going on, and that's not enough for such a fundamental action.

[jennyhaines]

@smarterclayton - I see what you're saying, and I'm going to design a high-fidelity solution around these points.

[serenamarie125]

@smarterclayton Totally agree that we need a tighter connection between the selected subcategory and connected content. Also, at some point it seems that unselected subcategories are dimmed out, but they look disabled.

[spadgett]

@jennyhaines @serenamarie125 Are we only looking at solutions that keeps the tiles? Can we consider other designs as well?

I also find the tiles confusing, and the implementation is complicated and error-prone since it can't be achieved with HTML and CSS alone.

[jennyhaines]

@spadgett - For the short term (before this Wednesday), I'll work on the connection between subcategories and their associated content. (And I was told you'd fix the opacity issue with the unselected categories).

I'll take a look at an alternative solution to tiles in a later story.

[jennyhaines]

I think this would work in the short term (to make it into the release by EOD Wednesday) @smarterclayton @spadgett ... The UX group vetted this with me. I plan on looking later into an optimal long term solution that would make it into a future release. What are your thoughts, and would these changes be doable by EOD Wednesday?

[serenamarie125]

@jennyhaines can you possibly enumerate what you've done here ? I'll take a stab:

1. unselected subcategory is full color, but has a different tile background
2. hover state of subcategory has hand cursor, white background, and blue text
3. selected state of subcategory has white background and blue text & rather than showing a caret, visually connects the 2 rectangles
4. decreased the top margin above the filter bar
5. added a horizontal separator below the filter bar

[beanh66]

@serenamarie125 selected state looks like it also has a blue highlight line at the top

[jennyhaines]

@serenamarie125 @beanh66 - Exactly. Thank you for listing those points out. I've just added a bit more detail here:

1. unselected subcategory is still full color, but has a grey tile background (#ededed)
2. hover state of subcategory has hand cursor, white background, and blue text. (no blue top border)
3. selected state of subcategory has white background and blue text & rather than showing a caret, and the selected tile is visually connected to the white results container.
4. the selected state tile also has a 2px blue border along the top to differentiate it more.
5. decreased the top margin above the filter button to 15px
6. added a horizontal separator 15px below the filter bar (1px, #ededed )

Thank you @rhamilto !

[serenamarie125]

FYI @spadgett @jwforres, we are using this issue to tackle the immediate need of fixing the visual connection between subcategory and associated content for 3.7. How will we track revisiting the "subcategories as tiles" ? Do we need a trello card or Issue so this doesn't get lost?

[jwforres]

@serenamarie125 added https://trello.com/c/wxJzUBFV

[spadgett]

#2467 with the style changes for 3.7 has merged, and we have a Trello card to revisit this design going forward.

https://trello.com/c/wxJzUBFV

Closing this issue in favor of the Trello card.