Project

General

Profile

Actions

Feature #19592

open

Groups Page Re-Design

Added by Sara Cannon 3 months ago. Updated 1 day ago.

Status:
New
Priority name:
Normal
Assignee:
Category name:
Groups (misc)
Target version:
Start date:
2024-01-24
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Description

Below are the initial designs for the group page Redesign. I still need to do admin settings as well as the member invite modal but I thought I'd post these here to get us started.






Files

Groups - Logged In - Registered (Home).png (508 KB) Groups - Logged In - Registered (Home).png Sara Cannon, 2024-01-24 04:33 PM
Groups - Logged In - Registered (Events).png (547 KB) Groups - Logged In - Registered (Events).png Sara Cannon, 2024-01-24 04:33 PM
Groups - Logged In - Registered (Library).png (325 KB) Groups - Logged In - Registered (Library).png Sara Cannon, 2024-01-24 04:33 PM
Groups - Logged In - Registered (Forums).png (395 KB) Groups - Logged In - Registered (Forums).png Sara Cannon, 2024-01-24 04:33 PM
Groups - Logged In - Registered (Forums - Single).png (344 KB) Groups - Logged In - Registered (Forums - Single).png Sara Cannon, 2024-01-24 04:33 PM
2024-02-22_133606.png (43.8 KB) 2024-02-22_133606.png Raymond Hoh, 2024-02-22 04:37 PM
Group Comps 3.5.34.zip (13.8 MB) Group Comps 3.5.34.zip Sara Cannon, 2024-03-05 03:29 PM
3.18.24.zip (16.9 MB) 3.18.24.zip Sara Cannon, 2024-03-19 12:18 AM
Screenshot 2024-04-10 at 11.51.57 PM.png (90.1 KB) Screenshot 2024-04-10 at 11.51.57 PM.png Sara Cannon, 2024-04-11 12:53 AM
Group Settings.jpeg (1.11 MB) Group Settings.jpeg Raymond Hoh, 2024-04-16 11:35 AM
Group Forum CSV.png (11.5 KB) Group Forum CSV.png Raymond Hoh, 2024-04-16 11:35 AM

Related issues

Related to CUNY Academic Commons - Feature #19724: Updating Group/Site Creation and Completion pagesNewBoone Gorges2024-02-08

Actions
Related to CUNY Academic Commons - Feature #20014: Reskin of Group LibraryNewBoone Gorges2024-03-19

Actions
Actions #1

Updated by Colin McDonald 3 months ago

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.

Actions #2

Updated by Boone Gorges 2 months ago

  • Target version set to 2.4.0
Actions #3

Updated by Boone Gorges 2 months ago

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?

Actions #4

Updated by Raymond Hoh 2 months ago

- 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.

Actions #5

Updated by Laurie Hurson 2 months ago

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?

Actions #6

Updated by Matt Gold 2 months ago

can we discuss at today's meeting?

Actions #7

Updated by Sara Cannon 2 months ago

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"
Admin Notes:
  • 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

Actions #8

Updated by Boone Gorges 2 months ago

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.

Actions #9

Updated by Raymond Hoh 2 months ago

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.

Actions #10

Updated by Colin McDonald 2 months ago

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.

Actions #11

Updated by Sara Cannon about 2 months ago

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?

Actions #12

Updated by Raymond Hoh about 2 months ago

Sorry for not being clear, Sara.

Try navigating to a group you are a member of on production. I think you should be a member of this group: https://commons.gc.cuny.edu/groups/cac-community-team-project-planning/ . When logged in, you should see the attached screenshot.

Let me know if you are able to access the "Email the group" block.

Actions #15

Updated by Boone Gorges 30 days ago

  • Related to Feature #19724: Updating Group/Site Creation and Completion pages added
Actions #16

Updated by Boone Gorges 30 days ago

  • Category name changed from Design to Groups (misc)
  • Assignee changed from Sara Cannon to Raymond Hoh

Thanks, Sara. Ray, assigning to you to lead the implementation. I will break off the Library reskin into its own ticket.

Actions #17

Updated by Boone Gorges 30 days ago

Actions #18

Updated by Raymond Hoh 17 days ago

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.

Actions #19

Updated by Sara Cannon 7 days ago

Ray, Great work here! I'm going to note some things but I'm sure you're aware of a lot of them

  • "Leave Group" as a large button right below the profile image seems a bit foreboding - a prominent place like below the profile image should probably be reserved for positive actions or information. Can we move the action of leaving to be under settings only?
  • The activity page looks great!
  • Can we move the "Download CSV" to settings instead of above the forum?
  • Forum Search Results need formatting. I realize I never made a mock-up for this. Do you need me to?
  • Forum: "Post New Topic" should be an outline button
  • Forum: When posting a new topic, the form should be on a separate page instead of underneath the forum
  • Under Manage -> Details: a link in the info tool tip shows up black and extends past the tooltip
  • Manage -> Members, Events, Group Site: formatting needed
  • Sunset Digital research tools
Actions #20

Updated by Raymond Hoh 6 days ago

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.

Actions #21

Updated by Raymond Hoh 1 day ago

Some updates:
- Group forum display options now resides under the group's "Settings" page
- "Leave Group" button now resides under the group's "Settings" page. See attached screenshot. Can use some feedback on the copy.
- "Download CSV" now resides under the group's "Manage > Forum" page. See attached screenshot. Can use some feedback on the copy.
- "Post Via Email" email address can now be easily copied, similar to the email address in the Help dialog modal.

All are available for testing on cdev.

Actions

Also available in: Atom PDF