CUNY Academic Commons

Thanks so much for these Sara, they are a great starting point. I am looking forward to when you start tackling the settings screens/flows, which seem to me like the most in need of design improvement for Groups.

I'm adding some watchers here, and following up on the Tuesday call, we'll use this ticket for ongoing discussion leading up to the meeting next Friday to map out the release further with the full team. We'll look for Boone and Ray's thoughts when they have them on technical blockers and feasibility so that we aren't locking on to designs or features that will be difficult for them to implement.

It will also be great now and in the team meeting to hear about any other pain points or wish list items when it comes to Groups.

Hi Sara - Thanks for your work on this. I don't see any technical blockers in what you've posted so far. A couple of notes regarding usability:

- You've removed the mechanism in header for seeing/updating group email status ("Your email status is:"). This is probably a good improvement - it's clutter that's usually not needed - but then we should be sure to have an obvious place where this setting lives.
- To me it seems like a lot of space to have the cover image on every group page. For practical workspaces, this means a good deal of scrolling to see content after every click.
- On the Library page, the list of folders can cascade to a 2nd line. How do we work this when the folders live in the secondary nav?
- Library: Are we keeping "Show Details"?
- Forum: Do we need 'this forum has x topics...' etc notice? Or "Voices" column? These don't seem useful to me.
- Forum: In contrast, losing the name of the last poster on a thread seems like a usability hit to me.
- Individual forum threads:
- Where will Edit links go? Maybe near 'Posted by' section?
- It would be nice to see a mockup that contains a thread with more discussion, so that we understand how replies are differentiated from the original post. Specifically, the mockup shows the user avatar alongside a title, but replies don't have titles and so would need a different treatment.
- We currently support one level of nested replies. Are we keeping this, and if so, what does it look like?

- You've removed the mechanism in header for seeing/updating group email status ("Your email status is:"). This is probably a good improvement - it's clutter that's usually not needed - but then we should be sure to have an obvious place where this setting lives.

Similar to the "Your email status" block, the "Email the Group" email address was requested by some power users to live in the header, so we will need to resurface this somewhere as well. See #9010 (and also previous discussion in #4331) where we last talked about this behavior.

- Individual forum threads:
- Where will Edit links go? Maybe near 'Posted by' section?

Worth mentioning that group admins and mods will see the following links: Edit | Trash | Spam | Unapprove.

If this is the first post of a topic, group admins and mods will also see the following links: Merge (or Split if not the first post) | Close | Sticky

All group members will see: Edit (if the user is the author of the post) | Reply | Quote

So that can be a lot of links. Perhaps we can move all admin-related links to a three-dots menu. Or perhaps we can check out how more popular forum software (such as vBulletin, XenForo, Discourse to name a few) handles these types of interfaces.

- We currently support one level of nested replies. Are we keeping this, and if so, what does it look like?

According to bbPress, our nesting replies level is set to two levels deep on production. If we do not support nested replies in the new layout, we will also have to remove the user setting from the "Account Settings > Forums" page.

Some other thoughts:

Individual forum threads:

I noticed there is a "Drop your file" attachments box for forums in the mockup. The plugin we use for forum attachments (GD bbPress Attachments) does not offer this functionality out-of-the-box so we would need to build this out. I would add this functionality as an enhancement if we cannot get this done in time for the next major release.

Forum:

Would like to see a mockup for the "Add New Item" form as well. This would be similar to the reply form in https://redmine.gc.cuny.edu/attachments/27339 , but with two additional fields: One to denote if the new topic is sticky or not. And the second for the "Post to multiple groups" checkbox fields.

These look great, Sara!

One thing I noticed: for each forum thread it lists "started by, voices, posts, last post" but we have removed who last responded to the thread. Do we want to retain the info about who last responded in the thread? If this was a class or very active group, it might be helpful to see who made the last update. What do others think?

can we discuss at today's meeting?

Hello! Thanks for everyone for your feedback and discussion today!

If you would like to view what I showed in today's meetings here is a figma presentation link:

https://www.figma.com/proto/XtBvj6Z9N5sLn9eHco4ArO/CUNY-Design---Spring-2024?page-id=4328%3A49468&type=design&node-id=4328-49469&viewport=408%2C431%2C0.06&t=icaR5mhJel2QRtT6-1&scaling=min-zoom&mode=design

Some Notes:

• the header image shrinks when not on the activity page. There was discussion about what it would look like if there was no header for current groups or if we default assign a placeholder
• Forum page: I removed the top forum data line to clean things up. There was discussion about whether or not the number of voices is helpful. Although I included the avatar of the last person posted, I am going to comp it with their name as well
• I need to revert back the drag and drop file field to a simple select file button
• Create a new Topic used to link to a field that popped up under the forum. I put it on it's own page
• Library: We can put the second menu with the tags into a filter drop down. We did not discuss if "details" are needed
• Email Settings and Forum Display settings are now combined under "Settings"

• It would be great if we could combine "External Blogs" under the details tab to reduce the number of secondary menu items
• Selecting a commons art banner for the cover image - we need to look into if that functionality can be ported over from CV
• Managing Members: "Kick and Ban" could be rephrased to "Remove and block"
• Forum: the user forum settings will not live here but in a top-level settings tab along with your personal email settings

Please add your comments and anything that I have missed as I will be working on revising the screens based on everyone's feedback

Thanks, Sara.

the header image shrinks when not on the activity page. There was discussion about what it would look like if there was no header for current groups or if we default assign a placeholder

As you noted, this means that we will need to make clear in the Upload interface that the admin should take caution when selecting an image. It should meet certain size requirements, and it should be the kind of image that can be "auto cropped". This was likely going to be the case anyway for mobile devices, where the image will likely be taller than the standard desktop layout. Your updated comps suggest that the image will be shorter in some cases, making the point more important still.

There was discussion about whether or not the number of voices is helpful.

I didn't hear any support for keeping this column. I'd recommend we remove it.

Something that I forgot to bring up during the team meeting is the placement of the "Email the group" block. On production, this currently resides in the group header when a group member is logged in. See GIF below:

In the new design, this information is not available in the header and isn't on the group forum page so we will need to resurface this info somewhere. See #9010 (and #4331) for some previous discussion about this block. Originally, this info was placed in the Add New Topic section, but some power users wanted it in the header for greater visibility. Here's what it used to look like: https://redmine.gc.cuny.edu/attachments/6636 . Sara, could use your feedback on where to better place this info.

Thanks for these follow up notes, Sara. Here are a few more I wanted to add:

- I think we decided it would be best to not assign a placeholder header automatically to existing groups. Don't want to overreach or surprise anyone with that. The hope would be that the feature will get picked up manually as we promote it, and also as new groups use headers with greater frequency, since they'll be prompted when creating the group after we launch.

- The above point reminds me that we'll need to tweak the Group creation flow, at least for adding a header image as well as the profile/inset image. We might already want to look at updating the creation flow for design consistency, as Laurie points out in #19724.

- I don't mind having the Show Details option in the Group Library and can see its utility. For anyone who hasn't used it recently, toggling it on will show you anything in the Description field for an uploaded Library item, as well as the forum thread it was uploaded to if that applies.

- I also think the Voices column can go away, and I agree that nobody noted benefits of it during the meeting.

Ray, I can't seem to replicate where you might find the "email the group" function that you have posted above. Is there a setting that needs to be checked to surface this?

I've got a first pass at the groups redesign on cdev. Boone / Jeremy - Work is being done in the feature/19592-groups-redesign branch.

I would refrain from posting any bug reports as I am aware of many things that still need to be completed :) The Activity page is closest to completion and the main "Forum" index page is about done, except for the layout of the "Post by Email", "Post New Topic", and "Download CSV" buttons. The forum topic page and most of the admin "Manage" pages still need an overhaul.

Some dev notes:
- For testing cover images, I've defaulted each group to use one of the CV Editor's cover images. Once our custom cover image selector is ready, I'll remove the randomized default cover image. I still need to make the cover image larger when on the group homepage
- The "Events" page defaults to the upcoming view in the mockups, so some work needed to be done to the BP Event Organiser plugin to make this happen: https://github.com/cuny-academic-commons/bp-event-organiser/commit/a664d0de1d17682d4bb71a0c3136237946a772ab
- For the "Members" page, would it make sense to use the same card layout as the Members Directory page and Commons Profile "Friends" page? I've currently implemented this idea on cdev, but I can do another pass at matching the mockup later on.
- For the group social media icons, are we only sticking with the following sites: Twitter, Facebook, LinkedIn, Academica and Instagram?

More to come. Boone, you can start work on the "Library" page overhaul. Let me know if you need any help on implementation.

Thanks for your feedback, Sara. I'm well aware of all the issues you mentioned :) I will make sure to get to these items once I've worked on a few other things.

I would appreciate a mockup of the forum search page when you have a chance to get around to it. There are also a bunch of forum screens like "Merge" when you click on the ellipsis menu from the main topic and the "Split" option when you click on the ellipsis menu from a reply that I could use a visual reference for as well.

Before I implement the following, I could use some feedback from the rest of the team about:
- Moving the Leave Group button from the group header. Perhaps we can move this button to the new group "Settings" page.
- Moving the Download CSV button. We can move this button to the "Manage > Forum" tab unless there is a better location for it.

I also have a first pass at the 'Post New Topic' form and single forum topic page working on cdev. I decided to implement the 'Post New Topic' form as a modal dialog instead of an entire new page. I couldn't get the Attachments portion of the 'Post New Topic' form to match the mockup. It's apparently very hard to style the <input type="file"> element. You cannot change the label of the button, nor remove the "No file selected" text. Attempts to do so removes the built-in accessibility that the browser uses. The GD bbPress Attachments plugin also handles parts of the logic here as well with the "Add another file" link.

For the single forum topic page, the ellipsis menu went through many iterations, but I landed on using a technique using the <details> and <summary> elements. There are some accessibility concerns when using a voice reader that I read about later after implementing the ellipsis menu this way, so I might redo the menu with another approach such as this one: https://github.com/scottaohara/aria_disclosure_widget . For the "Reply" and "Quote" links, I also added "Edit" to this list as it is one of the more, common forum action links a member will use.

After working through the 'Post New Topic' form, I want to recommend getting rid of topic tags. If a user tags a topic, there is a link to the tag that takes users out of the group interface. For example, https://commons.gc.cuny.edu/forums/topic-tag/digital-humanities/. It might be useful if when someone clicks on a topic tag, it will filter the topic tag to forum topics from the group only, but that would require some development time.

1. Merging topics. I forgot to style this page. Will do a pass at it. With regards to what merging does, imagine a scenario where there are two separate forum topics posted about the same thing, each with similar replies but the discussion is forked. Merging allows for both topics to be merged into one topic. It's not a scenario that happens often, but should exist as it is useful when needed. Perhaps we can move "Merge" further down the forum actions dropdown menu.
2. When a topic or a reply is spammed, regular users cannot see it. Only group admins or mods can see these posts.
3. Unapprove is similar to a forum post being marked as spam. Functionally, they are the same. We should remove either Spam or Unapprove as this isn't a situation that should occur automatically unless a group admin or mod is using it manually. (Side note: We removed automatic spam checks for forum posts because there were too many false positives. We also removed a link limit that forced forum posts to be marked as unapproved.) I believe regular users cannot see if their forum posts have been approved or marked as spam, but group admins / mods can through the main Forum index page and on the topic page with the special ?view=all URL parameter.
4. "Please complete your group setup by configuring your group settings" is meant for older groups that haven't filled in certain group metadata like Campus. See #11254. I believe this is still needed. The styling here could use your eye, Sara.
5. Spacing issues. For the first screenshot with the forum topic title, please try purging your browser cache as this should already be addressed, but feel free to keep reporting these issues as I'm sure I might have missed a fair bit.
6. Quoting the initial forum post. Thanks for finding this bug. Should be fixed on cdev.

Hi Ray, thanks for going through all of these.

Sara, can you take a look at the red border color solution that Ray is using on the Settings page after that notice banner?

Let us know too what you think of my single forum post ellipsis list and the "Hide/Unhide" terminology.

Ray, I like those messages for leaving a hidden and private group.

No worries about canceling out of writing a forum post, I see now that it's the same in the current forum and not worth changing/adding functionality that's already there. It's odd that there currently isn't a way to "x" out of an attachment if you choose the wrong one when attaching, but probably not a big deal. I see that if you open the file dialog box again and close it without choosing a file, then nothing is added.

It's odd that there currently isn't a way to "x" out of an attachment if you choose the wrong one when attaching, but probably not a big deal.

Ahh, I see what you mean now, Colin. I thought you meant after a user adds an attachment and submits the forum post, the user cannot delete the attachment from the forum post after it is posted, but you meant during the selection of the attachment before submission.

I've added a 'Reset attachments' button to the forum post form. If you add an attachment, and you later want to clear it before submitting the form, you can click on this button to clear all attachments now. This is available for testing on cdev.

Thanks for the screenshots, Sara.

The New Topic modal should now be constrained when the width is greater than 1650px. The group metadata notice has also been styled as well, however the icons are using the ones available with WordPress. If you want, you can provide me with the icons from the comp and I'll switch them out. Both items are available for testing on cdev.

I'll start work on the Merge forum screen and will see how difficult it will be to add in the search bar. This might be something that needs to be punted to a minor release.

Thanks for taking another look, Sara.

There should be some space between the forum and the search bar/new topic button

Done.

Can the attachments on posts utilize the new library icons and be left aligned (not indented)?

I've done an initial pass at this on cdev. About image forum attachments, the forum attachments plugin uses a thumbnail of the attachment, which is better than an icon. However, the plugin lists image forum attachments separately from document attachments. Can you do some testing on cdev to see what you think of the current behavior and how you would like this portion to be formatted (if at all)?

The outline around the text field should be lighter - #8B8B8B

On the registration page, the border color for the form input fields use #222 and that is currently set as the default form border color across the site. The border color does differ and use a lighter gray on the "Account Settings > Edit Profile" page and on the Group Library and directory pages. Are we sure we want to use gray here as well? If so, should we make the registration form border color gray as well to be consistent?

When updating a group page if you don't have a required field, can we change the error to the new red error box below the field instead of a tool tip?

I've added the red border color, but I think the field validation tooltip should be kept as it is good for accessibility. The validation tooltip, by default, is styled by the browser and not by us and is only shown when you attempt to submit the form with an empty required field. If we want to do more advanced styling here, this will require some custom javascript.

I went to look at mobile, and it seems to need a lot of formatting. When it's ready to be tested, let me know, and I can start a whole new thread specifically for mobile.

That would be great. I've only done a few minimal passes at mobile so far and would appreciate any additional eyes on this.

Here are a couple of bugs we went over during the Friday meeting. I've also added specific items to the modal #19733 and group creation #19724 tickets.

- There is a bug on the manage members page where an admin sees multiple "Demote to Member" options in the ellipsis drop-down.
- On the admin manage events screen, the copy iCal link is not working.

- There is a bug on the manage members page where an admin sees multiple "Demote to Member" options in the ellipsis drop-down.

Fixed in https://github.com/cuny-academic-commons/cac/commit/4912528fe77ced2b7816220f130f07e136553164

- On the admin manage events screen, the copy iCal link is not working.

Fixed in https://github.com/cuny-academic-commons/cac/commit/987fc812dd34a8fc767a6b4d78e44b89663e9b2a

Both should be available for testing on cdev.

Seems ok to me to hide "last posted by" on the main forum page on mobile. You'll see that easily enough if you click into an individual forum topic, right?

Some updates:

• Topic search bar on the group topic's Merge, Move and Split admin pages is now implemented. Boone and Jeremy, I'm using the WP REST API's Search Results endpoint to do this. I added a new 'forum' parameter to listen to the Search Results endpoint and the search bar is using the Select2 JS library to ping the endpoint and display the forum topic search results.

• Cover image proportions should be better now. I've also implemented the larger cover image on the group homepage, but this might confuse group admins when they see a thinner cover image on secondary group pages or even in the group header of the "Manage > Cover Image" screen.

• Hidden group forum replies now use a notice instead of a background color.

• On the forum index page at < 360px width, the Last Post date is now aligned on the left instead of on the right and the Last Post author is no longer displayed.

• The "Join Group" button is reinstated for public groups in the group header. I previously removed this by accident when I moved the "Leave Group" button to the group's "Settings" page.

I haven't implemented Sara's group header mobile view yet. I also noticed a "Go to Page" input box on the forum index mockup. I think we'll need to bump that to a minor release as there's a bit more thought that needs to take place in terms of accessibility.

On the dev chat yesterday, we talked about the group header on mobile. I've implemented some of the changes on cdev, including moving the group short link into a social icon link.

Let me know if I've missed anything or if anything needs to be tweaked.

Hi Ray, thanks for these changes. They look great to me. I like the link icon for the shortlink in the social/email icon area so much that I wonder whether it might be nice on desktop as well as mobile, to clean up the desktop header where the link takes up a fair amount of space.

I'll defer to Sara on that and any other feedback. I think the left-alignment of the profile/avatar image and the other text looks good, too.

In today's dev call, we talked a bit about the group header and the group shortlink. Based on the call, I've removed the longer group shortlink from the group header in favor of the new shortlink icon.

Boone, I've also merged the feature/19592-groups-redesign branch into the mainline 2.4.x branch.