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.