Roles search page design update

[cutwater]

Currently roles list is displayed as cards. While cards display number of downloads, watches and starts, their design is done in grayscale colors.
Roles list requires refreshment to improve user experience when searching roles.

[chouseknecht]

Here's the first pass at a new design for 'Browse' (role search) page:

[chouseknecht]

@trahman73

First, a huge thank-you for helping us with this project. We appreciate your time and effort! Having a rendering of the things we discussed yesterday, is super helpful.

Now that I can visualize the ideas, I have some thoughts...

As I look at the search result rows, I'm not sure which side to focus on, right or left. As a user, I'm trying to determine which one role, out of the 400 Nginx roles, is the most relevant. To gauge relevance, I want to see the title, author, counts, test results, and last commit date. In the current layout, I have to scan the entire row to see these values. There not in place. Can we bring the values closer together?

Perhaps the following:

• Move the count indicators to the left, under the tag elements
• Move the last commit to the right of the counts, and remove the 'Last Commit' title. Make it flow the same way as the search results on the bottom half of the openshift page

It feels like all the focus is on tags. Can we make them less prominent, so that it's easier to focus on the counts and commit date? Maybe softer colors or grayscale for tags?

We had talked about using tabs on the tools along the right (i.e. Popular Tags, Popular Platforms). There's actually 3 types of 'tags': Tags, OS Platforms, Cloud Platforms. Would it be possible to see a rendering with tabs? Maybe to conserve real estate, the titles should be . 'Tags', 'OS', 'Clouds'

[chouseknecht]

Round 2...

[cutwater]

@trahman73

Thank you for update. It looks really close to what we wanted to achieve. When user looks at roles the most important information (Role name, author and counters) is in one place, that's in my opinion great for navigation.

We have a few more thoughts what we can try:

• On the sidebar I would prefer 3 boxes aligned vertically over tabs. Since we're going to display the most popular tabs (top 10 - 15) only, there is plenty of space to display them at once. Moreover we can display more the one tag in a row, so max. height of a block will be 3-4 rows max.
  As a user I will be able to see available tags and won't have to make an additional mouse click.
• Tags are still the most heavy part of the list item. Maybe it's better to have them color coded, but use low contrast (lightblue background w slightly darker font), how do you think?
• While downloads and stars are displayed as icons with numbers, it's not clear what do numbers in a box mean (downloads). Maybe we can use icon as well?

[trahman73]

Latest based on feedback...

Colors can be modified, but the layout here is closer to what we discussed.

[chouseknecht]

@trahman73 @cutwater

I like it. Nice work!

[cutwater]

@trahman73 @chouseknecht

I like it too. Thank you very much!

[gregdek]

+1. Looking forward to seeing them in production.

[trahman73]

@chouseknecht @cutwater Here are some additional variations as suggested by @jlmitch5 to include tag type icons for accessibility purposes and gray only options.

[cutwater]

TODO:

• Role type indicator
• Travis CI build status indicator
• Clickable tags: When user clicks on a tag on sidebar or role description, it's added to search filters.
• CSS Improvement: Fix mouse pointers and link highlighting.
• (optional): Add fork count along with stars, if it's available in the database.