Project

General

Profile

Actions

Design/UX #16535

closed

News Page Re-Skin

Added by Sara Cannon over 1 year ago. Updated about 1 year ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
Design
Target version:
Start date:
2022-07-26
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Description

Re-skin the News page to become similar to the design of the directory pages and incorporate features from "MyCommons". https://commons.gc.cuny.edu/activity/

  • Add a featured section for the Academic Commons news that will disappear if the filters are changed.
  • In addition to "sitewide", add the ability to filter the results similar to My Commons (My Groups, My Sites, My Campus, My Friends)
  • Remove unnecessary personal updates in the feed ("Jayden joined the group X", "Scott changed his profile photo" etc)
  • Remove the photos in the copy of the updates to streamline the look
Current Filter Items:
  • Show Updates
  • Show Blog Comments
  • Show New Groups
  • Show New Group Memberships
  • Show New People
  • External Blogs
  • New Docs
  • Doc Edits
  • Doc Comments

What items on this filter list can we eliminate or change?


Files

News - Sitewide.png (852 KB) News - Sitewide.png Sara Cannon, 2022-07-26 07:43 PM
Screen Shot 2022-09-27 at 00.23.17.jpg (201 KB) Screen Shot 2022-09-27 at 00.23.17.jpg Raymond Hoh, 2022-09-26 08:35 PM
updated-filters.gif (368 KB) updated-filters.gif Raymond Hoh, 2022-10-31 08:31 PM
group-activity-filters.png (101 KB) group-activity-filters.png Raymond Hoh, 2022-10-31 08:35 PM
2022-11-01_161303.png (60.2 KB) 2022-11-01_161303.png Raymond Hoh, 2022-11-01 07:13 PM
activity.png (281 KB) activity.png Colin McDonald, 2023-01-17 11:12 AM
responsive-one-column.png (24.9 KB) responsive-one-column.png Raymond Hoh, 2023-01-19 08:11 PM

Related issues

Related to CUNY Academic Commons - Design/UX #16536: Main Navigation Drop-Down EliminationResolvedBoone Gorges2022-07-26

Actions
Actions #1

Updated by Boone Gorges over 1 year ago

  • Target version set to 2.1.0
Actions #2

Updated by Colin McDonald over 1 year ago

Actions #3

Updated by Colin McDonald over 1 year ago

Following up from the call today, let's adjust this design to show the My Commons filters across the top of:

All Activity
My Groups
My Sites
My Campuses
My Papers
My Friends

FYI, if you're logged in you can see the current My Commons layout here: https://commons.gc.cuny.edu/my-commons/

Then let's keep the secondary dropdown but simplify it a lot, so it only shows:

No Filter
New Posts (comprising public blog and forum posts in Sites and Groups)
New Sites/Groups (comprising new Groups and Sites)

So we're removing:
New Comments (I could see an argument for keeping this, though)
New Memberships
New People (this and the one above we discussed removing to not surface too much from new users right away)
External Blogs (not sure about this functionality?)
Docs options, now sunset

And now I'm wondering if this secondary dropdown will be useful enough to keep at all. Sara or others, what do you think?

Scott, I'm also adding you here for any feedback since you know My Commons well, and also to note that we should update the My Commons documentation here when we're done: https://help.commons.gc.cuny.edu/my-commons-2/

We should also discuss whether we sunset "My Commons" as a phrase to describe this page/functionality. Also now that I'm thinking about it, I wonder if instead of News this nav item should really say Activity, or something that gets more at the personal and Commons-oriented aspects of this page.

Actions #4

Updated by Colin McDonald over 1 year ago

Adding some watchers here to take a look at the update I just posted, thanks!

Actions #5

Updated by Boone Gorges over 1 year ago

Then let's keep the secondary dropdown but simplify it a lot, so it only shows:

If we are removing items from the filter dropdown, should we also remove those item types from the activity stream? For example, if you can no longer select 'New Docs', should we be showing 'Colin created a new doc...' activity items?

And now I'm wondering if this secondary dropdown will be useful enough to keep at all. Sara or others, what do you think?

Stepping back, the original purpose of the /activity/ page (both on the Commons and in BuddyPress more generally) is to help the user browse and drill-down into public site activity. If you remove options from the filter dropdown, or remove that dropdown altogether, you're reducing the ability to do this kind of discovery. Maybe this is OK and worth the simplicity trade-off - the amount of activity on the Commons is overwhelmingly large, and people may not want (or be able) to parse the firehose. In any case, we should be thoughtful about what use cases we're precluding if we remove built-in functionality like this.

Actions #6

Updated by Raymond Hoh over 1 year ago

Since I previously did most of the work on My Commons, I started working on porting Sara's redesign of the News page over to cdev.

You might need to do a hard refresh in your browser to view the latest changes on cdev. For those that cannot access cdev, I've attached a logged-out screenshot.

Not everything is 1:1 to Sara's mockup yet, but I wanted to get something up.

Some implementation notes:

  • When logged-in, I renamed the "All Activity" tab from My Commons to "My Activity" because we also have the "Sitewide" tab. Having both "All Activity" and "Sitewide" as different tabs could confuse the user, which is why I went with "My Activity", but could use some thoughts on another label here. I also moved the "Sitewide" tab to the end instead of having it be the first item.
  • For the "Latest News" block, I'm re-using the same block that is on the homepage to avoid duplicating work. So this block doesn't match the mockup yet.
  • Also for the "Latest News" block, when logged-in, this block is only visible on the "Sitewide" tab.
  • I also left the filter options alone until we've made a decision on which items to keep and trim.
Actions #7

Updated by Laurie Hurson over 1 year ago

Hi all,

I am looking at this on cdev and it looks good! A couple comments:

When logged-in, I renamed the "All Activity" tab from My Commons to "My Activity"

This makes sense to me. I would also suggest we make "Sitewide activity" with the latest news tab the default one that comes up when a user clicks "News". After first seeing the sitewide tab, a user can click into their personalized "My X" tabs

Also for the "Latest News" block, when logged-in, this block is only visible on the "Sitewide" tab.

Also makes sense to me. Sometimes the block didn't always appear for me in the sitewide tab and i had to refresh.

I also left the filter options alone until we've made a decision on which items to keep and trim.

I lean toward keeping the filters. The dropdown is pretty unobtrusive and it does allow a user to drill down into more detail.

Also do we want to get rid of "My Papers" - didn't we discontinue this? And optionally, we could remove any filters items about "Docs" because thy are so rarely used...

Actions #8

Updated by Boone Gorges over 1 year ago

For our conversation, here's a list of the filters currently in the dropdown:

activity_update  Show Updates
new_blog_post  Show Blog Posts
new_blog_comment  Show Blog Comments
created_group  Show New Groups
joined_group  Show New Group Memberships
friendship_accepted,friendship_created  Show Friendship Connections
new_member  Show New People
exb  External Blogs
bp_doc_created  New Docs
bp_doc_edited  Doc Edits
bp_doc_comment  Doc Comments

Here's a list of activity types in the database that don't appear in this list. I've removed those that come from plugins that we've already deprecated (such as Social Paper):

activity_comment
added_group_document
bbp_reply_create
bbp_topic_create
bpeo_create_event
bpeo_edit_event
deleted_group_document
edited_group_document
group_details_updated
new_avatar
new_event
updated_profile
Actions #9

Updated by Colin McDonald over 1 year ago

Thanks for pulling these filters and activity types, Boone. Is it also possible to see what types of activity are shown by default in the current stream?

https://commons.gc.cuny.edu/activity/

I'm seeing items there like profile (or profile pic) updated and site created, wondering where these are coming from and if we can filter for them too.

I'll also note a few things from trying the current filter options on the page, working roughly from the bottom of the list to the top:

(First off, a lot of the filters have "Show" in front of them, like "Show New Groups" or "Show New People" etc. I think we can probably remove "Show" for simplicity.)

- Doc Edits: 6 in the last 10 months
- Doc Comments: 5 in the last 10 months (all by the same user)
- New Docs: Roughly 60 in the last 10 months

(I think we should at least combine these three into one "Docs" filter. Then it will be easy enough to see the different types of activity it contains, and the filtered items will be more active.)

- External Blogs: These all seem to be posts from the GCDI group or the Futures Initiative group, a couple every month or so.

(Should we combine this with the Blog Posts filter? Is it a meaningful difference to most users whether the posts are external?)

- New People, Friendship Connections, Group Memberships all seem good as-is, and I think will become more useful once we are offering the logged-in tab interface of our redesign.

- New Groups also good, wondering if we can offer one for Sites too as noted above. We could also show "group_details_updated" here and change the names to Group Updates and Site Updates, showing what's newly created as well as newly changed.

- Blog Comments seems good, and Blog Posts too with the caveat of the External Blogs combine above.

- Updates (as in the twitter-like update feature) is rarely used and we're already looking to deprecate as per our discussions of the Profile page/settings overhaul.

- I'd be interested in an Event Updates filter that shows bpeo_create_event and bpeo_edit_event

We also should think about how the available filters need to change with each tab that will be shown now as well. We've been talking about adding a new tab that shows only activity for your campus/groups/sites/friends and calling it My Network, but I'm leaning toward My Commons now for the all-encompassing name. Then the filter breakdown would be:

Sitewide - all filters
My Commons - all filters
My Campus - all filters (for a user's campus)
My Groups - New/Updated Groups, New Group Memberships, add in bbp_topic_create too perhaps?
My Sites - New/Updated Sites, Blog Posts, Blog Comments
My Friends - Friendship Connections, and what can we show cross-referencing a user's friends and then activity done by one of their friends, like a new Site created? If this is doable, it could be nice to show a wide cross-section of friends-only activity.

Actions #10

Updated by Boone Gorges over 1 year ago

Thanks for pulling these filters and activity types, Boone. Is it also possible to see what types of activity are shown by default in the current stream?

What's shown in the stream is a combination of the two lists in https://redmine.gc.cuny.edu/issues/16535#note-8 We can add dropdown choices for any of these, in any combination.

Actions #11

Updated by Colin McDonald over 1 year ago

Thanks, Boone. I guess updated_profile covers profile pic changes/uploads? And which activity type in the two lists you mention covers sites created? Is that lumped in with the group types?

Actions #12

Updated by Boone Gorges over 1 year ago

I guess updated_profile covers profile pic changes/uploads?

Yes, that's right.

And which activity type in the two lists you mention covers sites created?

The existing feed at /news/ shows all activity. The exhaustive list of activity types:

| activity_comment           |
| activity_update            |
| added_group_document       |
| bbp_reply_create           |
| bbp_topic_create           |
| bp_doc_comment             |
| bp_doc_created             |
| bp_doc_edited              |
| bpeo_create_event          |
| bpeo_edit_event            |
| cacsp_paper_added_to_group |
| cp_project_added           |
| cp_task_added              |
| cp_task_commented          |
| cp_task_list_added         |
| created_group              |
| created_link               |
| deleted_group_document     |
| edited_group_document      |
| exb                        |
| friendship_accepted        |
| friendship_created         |
| group_details_updated      |
| joined_group               |
| last_activity              |
| new_avatar                 |
| new_blog                   |
| new_blog_comment           |
| new_blog_post              |
| new_booking                |
| new_cacsp_comment          |
| new_cacsp_edit             |
| new_cacsp_paper            |
| new_event                  |
| new_forum_post             |
| new_forum_topic            |
| new_groupblog_comment      |
| new_groupblog_post         |
| new_member                 |
| new_status                 |
| new_tp_project             |
| new_wire_post              |
| page_edited                |
| tool_marked_used           |
| updated_profile            |
| wiki_edit  

In my earlier comment, I'd filtered out those that are no longer relevant because they belong to deprecated plugins, etc.

Actions #13

Updated by Sara Cannon over 1 year ago

Here are the latest screens for the activity design and filters: https://www.figma.com/proto/egUblnG1UzGfKU05esn9Jl/CUNY-Design---Fall-2022-(Development)?page-id=1979%3A4064&node-id=1980%3A4125&viewport=43%2C656%2C0.25&scaling=min-zoom

Sitewide, My Commons, & My Campus

  • Events (Event Creation, Event Updates) - new_event, bpeo_create_event, bpeo_edit_event
  • Site Updates (Site Creation, Site Updates) - new_blog, page_edited
  • Site Posts (Site Posts) - new_blog_post, new_groupblog_post
  • Site Comments (Comments on Site Posts) - new_blog_comment, new_groupblog_comment
  • Group Updates (Group Creation, Group Updates) - created_group, group_details_updated
  • Group Memberships (People who joined or left groups) - joined_group
  • Group Library (Document, File, & Link Creation, Edits, & Comments) - bp_doc_created, added_group_document, bp_doc_edited, edited_group_document, deleted_group_document, bp_doc_comment, created_link
  • Group Forums (Topic Creation, Post Creation, Replies, & Attachments) - new_forum_topic, bbp_topic_create, new_forum_post, bbp_reply_create
  • New People (New People) - new_member
  • People Updates (Profile Updates, Photo Updates, Friendship Connections) - updated_profile, new_avatar, friendship_created, friendship_accepted
  • External Blogs (Updates from GCDI group or the Futures Initiative group) - exb

My Groups

  • Group Updates (Group Creation, Group Updates) - created_group, group_details_updated
  • Group Memberships (People who joined or left groups) - joined_group
  • Group Events (Event Creation, Event Updates Associated w/groups) - new_event, bpeo_create_event, bpeo_edit_event
  • Group Documents (Document Creation, Edits, & Comments) - bp_doc_created, bp_doc_edited, bp_doc_comment
  • Group Files & Links (File, & Link Creation, Edits, & Comments) - added_group_document, edited_group_document, deleted_group_document, created_link
  • Group Forums (Topic Creation, Post Creation, Replies, & Attachments) - new_forum_topic, bbp_topic_create, new_forum_post, bbp_reply_create

My Sites

  • Site Updates (Site Creation, Site Updates) - new_blog, page_edited
  • Site Posts (Site Posts) - new_blog_post, new_groupblog_post
  • Site Comments (Comments on Site Posts) - new_blog_comment, new_groupblog_comment

My Friends

  • Profile Updates (Profile Updates, Photo Updates) - updated_profile, new_avatar
  • Friendship Connections (Friendship Connections) - friendship_created, friendship_accepted
Actions #14

Updated by Raymond Hoh over 1 year ago

Thanks Sara.

I've updated cdev with the new activity filters. For those that cannot access cdev, I've attached a GIF: https://redmine.gc.cuny.edu/attachments/23864 . One other thing I've done is also updated the activity filters on a group's page. See screenshot: https://redmine.gc.cuny.edu/attachments/23866 . This is to better align with the group's nav items as well as the work done here for the Activity page. With that in mind, I've also slightly rearranged the filters on the Activity page to match the group nav priority.

Also while testing the Activity page, I found a bug where group events were not being displayed under the "My Groups" tab. The bug is due to a conflict with the Social Paper and the BP Event Organiser plugins. I have a fix ready to go for that here: https://github.com/cuny-academic-commons/social-paper/pull/103. Once that's merged, I will add the fix to cdev.

Actions #15

Updated by Raymond Hoh over 1 year ago

  • File deleted (group-activity-filters.png)
Actions #17

Updated by Colin McDonald over 1 year ago

Thanks for this Ray, it's looking great. Those group page filter updates make sense too.

On the order of the top tabs, I think it makes sense for Sitewide to be first on the left, then have it progress to more granular tabs after that: My Commons, My Campus, My Groups, My Sites, My Friends. My Campus is tricky because some may not have a campus selected, but for those that do (or have multiple), it should be a sizable amount of activity.

I think this could be the order even when you're logged in and the default tab on this page would be My Commons, rather than Sitewide if you're not logged in.

I was wondering about the ordering in the drop-downs, too. Maybe Sara could speak more to why she set them up how she did in her mockups. I don't think it's a big issue, but we should try to be consistent.

Actions #18

Updated by Raymond Hoh over 1 year ago

I've updated cdev to rearrange the tabs on the Activity page, as well as updating the dropdown filter so it is styled like the other directory pages. For those that do not have access to cdev, I've attached a screenshot.

Actions #19

Updated by Colin McDonald about 1 year ago

Am I doing something wrong on the dev site to be seeing the attached at https://commons.gc.cuny.edu/activity/ ?

Wasn't sure if it might be related to the SQL reboot we had to do last week or something else. Tried in an incognito window with no luck.

Actions #20

Updated by Boone Gorges about 1 year ago

I'm guessing something needs to be configured with the page template or something like that. Hopefully Jeremy can take a look when it's PST working time.

Actions #21

Updated by Raymond Hoh about 1 year ago

cdev needed the latest changes. Should be good for testing now.

Actions #22

Updated by Raymond Hoh about 1 year ago

Scott found a bug where images were not responsive on the Activity page. See https://commons.gc.cuny.edu/?p=134721.

I've done two things:
1. When the current device has a width of <= 570px, the layout becomes one column and activity stream items are centered. See attached screenshot.
2. Images are now responsive. I think we talked about removing images from the activity stream in an earlier discussion. Do we still want to remove them?

Commits: https://github.com/cuny-academic-commons/cac/compare/4eea277...989641325d

This is available for testing on cdev. You will probably need to purge your browser's cache or do a hard refresh to view the changes.

Actions #23

Updated by Colin McDonald about 1 year ago

Thanks Ray (and Scott!), this is looking good to me. Sara, what are your thoughts/recollections about removing activity stream images on mobile? I think this solution is fine though, so we can at least move ahead for now. The images are nice to have and break up the stream, even if it is more scrolling.

Actions #24

Updated by Sara Cannon about 1 year ago

I don't think we should remove the images. If we want the feed to be more condensed, I can work on an alternative layout.

Actions #25

Updated by Colin McDonald about 1 year ago

Ok Sara, sounds good. Let's see how it settles post-launch and we can circle back.

Actions #26

Updated by Boone Gorges about 1 year ago

  • Status changed from New to Resolved

Looks slick!

Actions

Also available in: Atom PDF