CUNY Academic Commons

Just adding a few notes here from our Friday team meeting, though I'm sure Sara will have her own to incorporate into the next round of mockups.

We agreed that the card approach is generally looking great. We just need to determine what information to show right away on the directory, both in the individual cards and in the filter bar.

We're going to do away with the timestamp line, as we're sorting by recency by default anyway.

We could show campus and purpose instead, though in the subcommittee meeting we talked through how especially for Groups and Sites, it can be hard to link one to just one campus. People are associated with many campuses, so are department or broader sites, etc.

We may want the whole card to link in to the result, but the card could also have internal links, like to the campus or purpose filtered results that match. We might also explore an OER badge like on the Openlab, but that may depend on how much OER data we're collecting and how prominent it's worth being.

We need to determine how consistent to display the card info across different directories, especially when the directories are geared toward different types of pages/spaces.

We also discussed keeping a submit button in the filter bar for performance reasons. Without it, we have to load the full directory data dynamically to be ready to display it as the filters change, rather than upon load only when hitting Submit. We may be able to account for this a little, but it would need testing.

We may also need to determine how to show public and private filters for groups and sites, since the setting options for those are slightly different.

Here are the latest designs: https://www.figma.com/proto/FKqQL0DlAC4iOT9tDjvCC2/CUNY-Design---Spring-2022?page-id=1362%3A2296&node-id=1363%3A7068&viewport=241%2C48%2C0.5&scaling=min-zoom

Up Next: Courses Page

Here are the latest designs for the directory pages:

Figma Designs: https://www.figma.com/proto/FKqQL0DlAC4iOT9tDjvCC2/CUNY-Design---Spring-2022?page-id=1452%3A7472&node-id=1452%3A7486&viewport=241%2C48%2C0.5&scaling=min-zoom
Figma File: https://www.figma.com/file/FKqQL0DlAC4iOT9tDjvCC2/CUNY-Design---Spring-2022?node-id=1463%3A4078

Courses Category Icons: https://drive.google.com/drive/folders/10HO5AEY_-HkelwRl--g3kaBJHjlbrQX5?usp=sharing

Thank You Boone!

1. I'm good with us consolidating greys!
2. yes
3. Poppins is the font. Apologies for the proxima nova!
4. I'm good with moving the search icon to the right
5. I'll be taking a closer look here shortly
6. Correct. I was thinking for small interface-thigs we would have a small more rounded button separate from the content "hero" type button.
7. I've done some research here and I think the whole card being clickable with a hover while having a separate in-the-card clickable item is doable here. check out this documentation: https://inclusive-components.design/cards/ example: https://heydon.github.io/Inclusive-Components/cards-pseudo-content-author-link/ - what do you think?
8. I'll send that over to you shortly as well

What I owe you:
1. Searchbar change
2. Directory filters design
3. Mobile layout

Thank you Sara! Thanks especially for the clickable-card article - it is a very interesting and cogent read on accessibility concerns for cards. I was able to do an initial implementation using the technique described there, which I'll hone more as I move on to other directories. https://github.com/cuny-academic-commons/cac/commit/ad1839597403bf9447b83008e54b1153f5463326

I'll be ready for another round of implementation (and probably questions!) once you've provided me with those additional comps.

Boone, here are the directory filter states: https://www.figma.com/proto/FKqQL0DlAC4iOT9tDjvCC2/CUNY-Design---Spring-2022?page-id=1452%3A7472&node-id=1601%3A3929&viewport=241%2C48%2C0.1&scaling=min-zoom

More to come!

Thanks, Sara! This looks good at a glance, and I'll dig in more deeply in the upcoming days. In the meantime, one question: When the filter is closed and items are selected, (a) an item that's too long will be truncated with ellipses, and (b) more than one item will be indicated by showing the first one and then "+1", "+2", etc. What do we do when you have more than one item and it's too much to show? I assume that we'll need to truncate an additional few characters to allow, so that it says "Alumn… +1"?

For what it's worth, nearly all entries in all of the dropdowns are going to require truncation. 'Role' is unusual because it has short entries like 'Faculty' and 'Staff', but things like 'Campus' are full of much longer entries. I don't think this is necessarily a bad thing - after all, we don't currently give any indication of what's checked for a given filter when that filter is closed. So these new designs give us more information from before. But I do want to point out, in case it will bother anyone, that the limited horizontal space will mean that we are almost always truncating when the filter is closed.

Here is a sample mobile comp: https://www.figma.com/proto/FKqQL0DlAC4iOT9tDjvCC2/CUNY-Design---Spring-2022?page-id=1452%3A7472&node-id=1630%3A3758&viewport=241%2C48%2C0.5&scaling=min-zoom

Here is an overview of the card states based upon Colin's note above. https://www.figma.com/proto/FKqQL0DlAC4iOT9tDjvCC2/CUNY-Design---Spring-2022?page-id=1452%3A7472&node-id=1637%3A4076&viewport=241%2C48%2C0.5&scaling=min-zoom

Looking forward to discussing this in the meeting today.

Thanks for all the recent updates, Sara and team.

I've completed a first pass at implementation on the Members directory, which is ready for testing on cdev: https://commons.gc.cuny.edu/members/ (The other directories are not done, and are probably in fact broken at the moment.)

Sara, could you please have a look? Here are some specific questions and comments I've got after this round of implementation:

1. Some greys will not pass contrast ratios. Particularly the "disabled" filter buttons. https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=CECECE (Submit), https://webaim.org/resources/contrastchecker/?fcolor=cececece&bcolor=f5f5f5 (Reset)
2. For the filter dropdowns, I've put in place a hover effect that adds a darker border
3. Your mockups don't show scrolling for filter dropdowns that have many options, like Campus. But I assume we still need it, so I've left it in place
4. During the homepage redesign, outer padding on mobile was set to 28px. The Figma file for the directories has it at 17px. I've left it at 28px. We should come up with a sitewide setting for this.
5. I've made the entire card a clickable link, with hover effect. It works well. But I need guidance on hover states for the action button ("Add Friend", etc). Should there perhaps be a separation between the two items? Or just a separate hover event for the button? Would that mean that the bottom part of the card would not get a shadow effect on hover?
6. It looks like you've gone with a common height for all cards across directories. This means that some mockups (see Members) have lots of white space above the action buttons, while others do not. A more natural technical approach is to specify the minimum desired space above the button, and to let this dictate the height of each row of cards. I've built it this way and it looks natural to my eye, but I'd like your feedback.
7. In all our discussion about button states, we neglected the most common state of all: the user is not logged in. In that case, I think we should use the "Visit" language, and in the case of Members, we can't say 'Friend'. I've used 'Visit Member' instead. Maybe "Visit Profile" is better?

I'll wait to get your general impressions before moving on to the other directories. Thanks in advance!

Hello @boone - thanks for this first pass! It's looking great!

1. Inactive interface elements are considered "Incidental" and don't need to meet contrast requirements so I think it's okay to leave them with lower ratios (https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast) I found an interesting article on making disabled buttons inclusive https://css-tricks.com/making-disabled-buttons-more-inclusive/

2. Filter Dropdown: I like the hover effect on the filter dropdowns. Bug: the select inputs don't check when you click them directly-just the text. Dropdown text should be grey and black when selected or hovered. All the filter text should be medium weight. I added a hover effect in the figma file for the input. Remove the hover effect on the disabled filter button

3. I added scrollbar styling which I believe should always show so that users know they can scroll.

4. Apologies for the discrepancy on the padding. Maybe we should set it at 20px sitewide?

5. I added two hover options for the bottom of the cards in the figma file.

6. Love it!

7.I like "visit profile" but we can discuss this more as a group - Matt and Colin seem to have a knack for naming :)

8. Order By: should have the same carrot as the filters

Note to everyone - I'm out of the office until next Thursday so I'm going to be missing the meeting next week. Cheers

Also agree on Visit Profile for members, when not logged in. Thanks for all of this, Boone - I can highlight any action items for Sara from today's meeting since she won't be there, otherwise feel free to proceed. We can also walk through anything from the cdev implementation you'd like to go over if necessary during the call.

Sara, thanks for the initial review and for the feedback. I've followed up on all these items. A few comments -

1. Inactive interface elements are considered "Incidental"

Thanks for these links. I'm not 100% convinced that a dynamically disabled element counts as "incidental", but let's go with it for now. The article from CSS-Tricks about the 'disabled' attribute was really interesting - I rewrote our implementation so that we're using 'aria-disabled' instead, so that the disabled buttons can receive keyboard focus.

2. Filter Dropdown: I like the hover effect on the filter dropdowns. Bug: the select inputs don't check when you click them directly-just the text. Dropdown text should be grey and black when selected or hovered. All the filter text should be medium weight. I added a hover effect in the figma file for the input. Remove the hover effect on the disabled filter button
8. Order By: should have the same carrot as the filters

I implemented Select2 for this dropdown so that it was possible to make the styling changes.

3. I added scrollbar styling which I believe should always show so that users know they can scroll.

Browsers have limited and inconsistent support for scrollbar styling. I've added some minimal styling for Webkit browsers to get closer to your design, but in Firefox and on mobile it may continue to use the native browser chrome. I think this is as good as we can get without a very complex JS-based replacement. I've forced the scrollbar to appear at all times.

Boone: the scrollbar styling looks great!

My one nit-picky thing is the font-weight of the filters before they are selected... can they be medium rather than normal?

I believe we can go ahead and implement the styling on the other directory pages.
thanks for all your hard work

Thanks, Sara! I've made the font-weight change, and also made a change so that hovering over a card activates hover states for the card title.

I'll continue on implementation and report back here with questions after the next round of work.

It's dawned on me during implementation that the Sites and Groups directories no longer have 'Create' buttons. This leaves no obvious path to get to the Create flow. Can we think about a way to add something and discuss it during Tuesday's call?

Great catch, Boone. The obvious place to me is a new tab in the "nav" area, i.e. All Groups / My Groups / Featured / Create, but we could try something more prominent too. Maybe right-justified on that same line, so Create is above the Order drop-down?

Sara, very open to your thoughts on this, thanks.

Looks good to me

Thanks, Sara.

I've completed a pass at the Courses directory, which is now ready to test on cdev. A few follow-up notes and questions:

1. The comp has a very specific layout for the Courses directory filters. They break into two lines; the width of the filters in the top row determines the width of both rows; and the Filter button is aligned with the right-hand edge of the rows. This combination is hard to accomplish technically, due to limitations in Flexbox. It's also a little clumsy across different breakpoints, since the row break will happen in different places on different screens. I went with a slightly different implementation, where the 'Reset/Filter' section is not right-aligned, but is set off from the preceding filter. I think it works pretty well at different screen widths, but I'd like Sara's feedback on it.

2. We don't currently support a 'Purpose' filter on the Courses directory. This is for technical reasons: Purpose data is specific to a Site or a Group, and is not stored with the parent Course object. This makes it difficult to perform a filter based on Purpose information. It might be possible to add in the future if the team thinks it's important to have a Purpose filter, but for the time being, I've left it out.

@boone ... I went to take a look here and the course directory filters seem broken https://capture.dropbox.com/TKT9uzxVtlX0VGkb

Thanks, Sara. This is happening because of global stylesheet changes made as part of #15629. I've put some specific overrides in place that ought to fix the immediate issues. I'll follow up in that other ticket with a few more details.

Boone, I fixed an issue where the new card design conflicted with the existing homepage layout - https://github.com/cuny-academic-commons/cac/commit/d1241c880f2f39b883fafa39661d6d3f10db1f0e. The issue is with the introduction of the 'item-card-top-content' DIV. To address this, I opted to add the 'item-card-top-content' <div> for directory pages only. The alternative was to add a parent selector to the existing .item-card-top-content CSS selector: https://github.com/cuny-academic-commons/cac/blob/d1241c880f2f39b883fafa39661d6d3f10db1f0e/wp-content/themes/bp-nelo/assets/css/shared.css#L1051. If you feel the CSS method would be a better fix, feel free to do that.

As I was browsing the new directory layouts, one thing occurred to me and that is we should only show the "Featured X" block if we are on the first page of paginated results. If we are on any other page, the "Featured X" block should not be rendered.

Thanks for catching this, Ray!

Responding to Sara's comments from https://redmine.gc.cuny.edu/issues/15629#note-14:

- Strange hover state on the tabs once something is selected with a big black block below the tab.

I'm not sure how this is supposed to work. So I opted to remove the border hover state when the menu is open. Another option is to add a black border around the button and the dropdown options, but this felt really weird when I tested it - too abrupt for a hover state. https://github.com/cuny-academic-commons/cac/commit/5422706c783a3e752e1582a2e69b8633a5d31ccb

Also hover state on the radio on the inside once the radio button is selected but no hover state when not selected: https://share.getcloudapp.com/JruOZ2gr

I made some changes to the global checkbox styling so that we have a similar box-shadow effect regardless of the checked state. Let me know if you think this is OK. https://github.com/cuny-academic-commons/cac/commit/2fe5452914f2c3d699484847aac001201bf8ac50

- the cards now don't have "visit site/group/profile" bold and underlined

This should now be fixed. See https://github.com/cuny-academic-commons/cac/commit/21e3847a06ef4dc805f727220653b7dbbf11e09c

Responding to these points:

- Can't get any of the filter bar to work on the Sites directory. Ordering, OER tag, keyword, filter drop-downs, it seems they all leave you with the same 1,563 sites appearing at the bottom of the first page in the same order.

This was a bug, fixed in https://github.com/cuny-academic-commons/cac/commit/07e2002bbe7bdb8eda88a77920187dd724ae5b09

- If I page over at the bottom to the 2nd page, shouldn't the featured bar at the top go away for 2nd page and subsequent pages on every directory?

We'd discussed this once or twice, but I never knew if there was a final decision. I've now implemented it. https://github.com/cuny-academic-commons/cac/commit/c90b64b59e3aeac6ce6f4e52a59267aeb1ed35a0

Shouldn't they also go away when using one of the ordering drop-downs, like with the rest of the filter bar options? I don't think they do now.

This seems incorrect to me. Sorting is a different kind of operation from filtering. But if there's general agreement, we can remove it in this case as well.

- Are the featured bar item tiles a little taller than the tiles for the regular items? Is this intentional if so?

The height of any row, including Featured, is determined by the tallest item in that row. Featured items may tend to have longer descriptions.

- See attached video for strange performance on Group directory action link at bottom of tiles. Joining in a featured group takes you to the group page saying you've joined. Joining in a regular group tile changes the status (this seems like the planned/expected behavior) but then at the top seems to mess up the formatting for the My Groups tab.

I've implemented AJAX for the Featured buttons and also fixed the way that the 'My Groups' item is incremented after clicking 'Join'. https://github.com/cuny-academic-commons/cac/commit/2fb00dda9de3abe3b55ca1cc9515d531d8128cc6

- When you go to My Sites, should it say Follow underneath each tile? They're already your sites, after all. Maybe it just says Visit?

Pinging Ray on this. Technically, Following a site is a different relationship from something being "your" site - the 'My Sites' tab is populated with sites on which you have a role. Seems like there are legitimate reasons for following one's own site, so I'd leave it, but other opinions are welcome.

- Scott reports he was paging down on My Groups. On page three, the card size got wonky. See attached screenshot.

I made a modification that should enforce equal column width. https://github.com/cuny-academic-commons/cac/commit/abba1bbfca0370c69792304d23720e8b79cf1dcf

- In Courses, see screenshot for filter bar, confirming this is the right layout. Something seemed off about the filter button lower on a second line in the middle, but I may be misremembering.

See https://redmine.gc.cuny.edu/issues/15261#note-25. This is likely the best we can do because of the requirement that the filters cascade across multiple lines in different way depending on window width.

Pinging Ray on this. Technically, Following a site is a different relationship from something being "your" site - the 'My Sites' tab is populated with sites on which you have a role. Seems like there are legitimate reasons for following one's own site, so I'd leave it, but other opinions are welcome.

Boone is correct. Following a site is different than having a role on a site. You can view the activity for followed sites under your profile's "Activity > Followed Sites" page and also on the "My Commons" page.

I still think that using one of the ordering functions in the top-right corner should remove the Featured sections

I've made the change in https://github.com/cuny-academic-commons/cac/commit/b915d91cae2dd6e84d2a70057b4e437afd53989e

In the Group Directory, if you're a member, shouldn't the Member text at the bottom of the card take you to the Group? It looks to be hyperlinked right now, but a click doesn't do anything.

There was a bug in the legacy JS which I've fixed in https://github.com/cuny-academic-commons/cac/commit/918506fc3069b9f866d762fc82e88640d53f403b

- Shouldn't the title be People Directory instead of "CUNY Academic Commons Directory" as we have it now?

I built it to the spec. https://www.figma.com/proto/FKqQL0DlAC4iOT9tDjvCC2/CUNY-Design---Spring-2022?scaling=min-zoom&page-id=1452%3A7472&node-id=1452%3A7486

- Try searching Baruch and BMCC for Campus and smith for Keyword. The results are strange (see attached).

I assume by "strange" you mean the entries that have many first names? If so, these are some old junk entries on cdev, from 2010. I've deleted these specific ones, though you may come across others. You can safely ignore them.

- Shouldn't the "action item" bars at the bottom of each card be in bold text?

It is supposed to be, and in fact it is in most places. I noticed that on the Members directory there was an issue that resulted in inconsistent markup, making the styling different. This has been fixed in https://github.com/cuny-academic-commons/cac/commit/ee7ad3eea080482780ecf6df3415ec84e2eae361. If you still see issues elsewhere, please provide details (URLs, screenshots, specific descriptions of the text in question)

- There's a full line between Newest and Registered in the Order By dropdown, but that's one phrase/function. See attached.

I've made an adjustment in https://github.com/cuny-academic-commons/cac/commit/e0ceb8094d600a4b19874144066a3d79047149d3

Thanks, Boone. I'll confirm in the dev call today, but I think we may have missed the member page title copy edit, and People Directory is better and more consistent than CUNY Academic Commons Directory.

Everything else looks good, thanks for the quick changes.

We agreed during the dev call that Member Directory makes the most sense as that title. Can we make that change? "People" doesn't read as nice alongside "Directory" but works as the top-level nav item. Sorry we missed this copy before.

Other than that, I think we're ready to close this up, and the release in general. I'm not awaiting any additional testing feedback or changes in other tickets. I am mostly going to move on to PR/social and other items to get us ready for the proposed May 25 or 26 release date next week.