Project

General

Profile

Feature #3501

System(s) for Sitewide Announcements

Added by Chris Stein over 4 years ago. Updated over 2 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
User Experience
Target version:
Start date:
2014-09-28
Due date:
% Done:

0%

Estimated time:

Description

For a number of reasons we often have to notify our members of something. We don't currently have a standardized way to categorize the kinds of notifications or show them. The goal of this ticket is to begin a discussion on what types of announcements/notifications we need and how to show them. This will probably eventually break up into smaller tickets based on the different types we come up with.

Types of Announcements
To start things off we have needed these types:
  • Urgent One Time Announcement: this would be for something like a planned outage
  • Non-Urgent One Time Announcement: This could be announcing a new feature of the site or other non-critical info
  • Permanent Site UI change: for when we do something like remove/add a button or change a process. Some changes may be small and other really change the way people use the site. These may require different approaches.
How to show them?
This question will probably require more discussion. I'm attaching some screenshots with some examples of a few different ways in the Sitewide-Notifications-Examples.zip file. A quick rundown of those are:
  • Modal Overlay: this is a box of text that appears over the current content of the page. You have to close it to see the page. (see Modal-Overlay.png)
  • Announcement Box: this is added to the page somewhere and can either scroll with the text of the page (see Citi-One-Time-ServiceNotice.png) or can be fixed to part of the page (Meetup-Bottom-Announcement.png).
  • Clickable "Tooltip": this is where an icon or text on the screen indicates that there is more information and the user must click/hover on it to see the information (see Tooltip.png)
  • Walkthrough: this is like a tooltip but a series of them that are linked together. (see Walkthrough and Google-Walkthrough files).

Another discussion is whether any of these types should be included in the current Notifications functionality of the Commons (see Commons-Notifications files in zip). Currently these are used for individual-related notifications like a friend request.

Sitewide-Notifications-Examples.zip (1.22 MB) Sitewide-Notifications-Examples.zip Chris Stein, 2014-09-28 04:30 PM
onetime_urgent.png (392 KB) onetime_urgent.png Samantha Raddatz, 2016-03-15 11:04 AM
onetime_nonurgent.png (441 KB) onetime_nonurgent.png Samantha Raddatz, 2016-03-15 11:04 AM
newfeature_popups.png (340 KB) newfeature_popups.png Samantha Raddatz, 2016-03-15 11:04 AM
Screenshot_2016-12-08_21-38-40.png (54.5 KB) Screenshot_2016-12-08_21-38-40.png Boone Gorges, 2016-12-08 10:41 PM
Screenshot_2016-12-08_21-38-23.png (67.6 KB) Screenshot_2016-12-08_21-38-23.png Boone Gorges, 2016-12-08 10:41 PM
Screenshot_2016-12-08_21-38-00.png (52 KB) Screenshot_2016-12-08_21-38-00.png Boone Gorges, 2016-12-08 10:41 PM

Related issues

Related to CUNY Academic Commons - Bug #7022: Sitewide announcements should be displayed on, and dismissable from, mapped domainsNew2016-12-12

History

#1 Updated by Chris Stein over 4 years ago

  • Assignee changed from Chris Stein to Samantha Raddatz

Samantha, I'm making you the Assignee for now. After we're through 1.7 we can talk more about this. I've thought about it a bit but am interested in your opinion.

#2 Updated by Matt Gold over 4 years ago

Thank you for this, Chris! Though, looking through those examples, I have to ask: do users ever find these anything but annoying?

#3 Updated by Matt Gold over 4 years ago

FWIW, my preferences are for modal overlay or announcement box.

I do wonder whether can/should connect whatever announcement we make to an email push with the same messaging.

#4 Updated by Chris Stein over 4 years ago

Thanks Matt, I think the level of annoyance is tied to whether the info is in context and how easy it is to get rid of.

and yes, these should be a part of a larger process that informs people of whatever it is in different ways. For large things that could mean an email push. For smaller things there might be other processes

#5 Updated by Samantha Raddatz about 4 years ago

Finally putting in my two cents here:

I definitely agree that there should be some standards created here. Based on Chris' outlined options, my votes would be the following:

  • Urgent One Time Announcement: The announcement box would be best here (like Citi-One-Time-ServiceNotice.png). I can't think of any announcements that we would have that are so urgent that they need to completely block the screen. We just have to make sure the announcement box is different enough from the rest of the page that it's highly noticeable. Maybe locked below the Wordpress bar at the top of the page in a bright color.
  • Non-Urgent One Time Announcement: I think that the announcement box OR walkthrough pop-up would be good for this depending on the information. For non-critical info it could be an announcement box -- could be a different color from the Urgent One Time Announcement box (maybe orange here rather than red). A walkthrough-style pop-up (Google-Walkthrough-step-4.png) would be best for additions to the site because they can point specifically to the new element if needed. This would have been ideal for My Commons.
  • Permanent Site UI change: Walkthrough; one or more as needed (Google-Walkthrough-step-3.png).

#6 Updated by Matt Gold about 4 years ago

I'm fine with all of that. Thanks, Samantha and Chris.

#7 Updated by Boone Gorges about 4 years ago

  • Target version changed from 1.8 to 1.9

Let's try to get some mockups etc put together for the next release.

#8 Updated by Samantha Raddatz about 4 years ago

Agreed. Will post mock-ups for this soon.

#9 Updated by Boone Gorges over 3 years ago

  • Target version changed from 1.9 to 1.10

#10 Updated by Samantha Raddatz about 3 years ago

Here's some suggested directions for the sitewide announcements -- mock-ups attached.

The three version are:
  1. One time non-urgent (Screenshot)
  2. One time urgent (Mockup based on the non-urgent layout w a brighter color. Also an 'X' instead of 'Dismiss message' -- either is probably fine though.)
  3. Site UI change (Walkthrough pop-up, mockup based on 'Help' pop-up)

I think the new-feature pop-ups/walkthrough ones are more involved from a UX and coding perspective and I'd be glad to have Boone's input on what considerations we should have there. It may be good to start a new ticket for those in relation to an exact use-case (maybe Social Paper post-testing?).

I had shared these with Chris Stein previously and he had the following notes:
  • Animation. I think that each of these should have some kind of CSS animation/transition that helps bring it to the attention of the user (slide down, fade in...)(Sam's note: I like slide down as an option here -- open to developer ideas/preferences)
  • Remove on Close: I'm thinking that for the one-time messages you won't see them after you close/dismiss them. Let me know if you have other thoughts.
  • For the walkthrough I'm not as sure. Right now I'm thinking that if you click through at all you won't have to see it again. However we may want to give people the option to see them again. Not sure if that will work as a context sensitive help or what.
  • Mobile: we should make sure that the messages fit on a mobile or at the very least are scrollable so the X/Dismiss can be clicked
    Administration
  • I'm assuming that these will be created in the WP dashboard in some way. Maybe I'm wrong.
  • For the first two I'm assuming a simple form will work to create them. Probably Type | Title | Message | Duration. Where type is urgent/non-urgent, Message allows HTML or markdown and Duration allows it to expire at a date even if the user hasn't clicked it.
  • For the walk through we will have to talk more about the best way to create these.
  • Multiple Announcements: can you do mockups on what it would look like if we have more than one of these at the same time (two of one, one of each etc)? I don't think that will happen often but there may be situations where it does happen. (Sam's note: My thought is that we should try to avoid multiple at the same time, but if necessary they stack below each other.)

If we're happy with these design directions, let me know what other considerations we've missed and/or other information I can provide.

#11 Updated by Boone Gorges about 3 years ago

Thanks, Sam. Mockups seem generally fine to me. You're correct that the walkthrough (3) is more complex, but I think there are JS libraries that should help us to set things up fairly easily.

Animation. I think that each of these should have some kind of CSS animation/transition that helps bring it to the attention of the user (slide down, fade in...)(Sam's note: I like slide down as an option here -- open to developer ideas/preferences)

Yup, whatever you need is fine. Slidedown doesn't work for the walkthrough bubbles, but is fine for the top-of-the-screen notices.

Remove on Close: I'm thinking that for the one-time messages you won't see them after you close/dismiss them. Let me know if you have other thoughts.

+1. Flip side is that they will be persistent when clicking through to another page. Seeing the animation each time might be annoying (though the annoyingness might be a feature, as it encourages people to read and dismiss).

I'm assuming that these will be created in the WP dashboard in some way. Maybe I'm wrong.

This makes it more complicated than hardcoding. Let's get the user-facing UI settled first, and we can worry afterward about building an admin-facing interface for managing these things. Note that it's unlikely we'll be able to have an admin-facing UI for managing walkthrough-style notifications; these likely have to be described in code.

#12 Updated by Samantha Raddatz about 3 years ago

+1. Flip side is that they will be persistent when clicking through to another page. Seeing the animation each time might be annoying (though the annoyingness might be a feature, as it encourages people to read and dismiss).

Since these will mostly be notifications that we really want people to see (especially urgent ones) I agree that the annoyingness is a feature here.

This makes it more complicated than hardcoding. Let's get the user-facing UI settled first, and we can worry afterward about building an admin-facing interface for managing these things. Note that it's unlikely we'll be able to have an admin-facing UI for managing walkthrough-style notifications; these likely have to be described in code.

Sounds good!

Let me know if you need anything else from UX on this. Thanks!

#13 Updated by Boone Gorges about 3 years ago

  • Assignee changed from Samantha Raddatz to Boone Gorges

Thanks, Sam. This should be a good starting point.

#14 Updated by Samantha Raddatz almost 3 years ago

I assume the timeline is too short for this to be enacted next week, but taking the context of the upcoming site downtime as an opportunity to poke this ticket.

#15 Updated by Boone Gorges almost 3 years ago

Ah, yeah, I'm afraid I don't have the bandwidth to build this out at the moment. For Tuesday, I was planning on using the same dismissable overlay that we used for the survey. Does that seem OK to you?

#16 Updated by Samantha Raddatz almost 3 years ago

Yeah, that ones good for now, especially considering that it's summer -- no problem.
I would love to see these overlays enacted before the next alert is needed in the future, and now we have a great example use.

#17 Updated by Boone Gorges over 2 years ago

  • Target version changed from 1.10 to 1.10.1

This would be a great project for onboarding one of the new members of the development team. There's no real reason to tie to a specific release, since it's not a feature that regular users will be able to take advantage of. I'm going to move into 1.10.1 while we sort through issues for 1.10.

#18 Updated by Boone Gorges over 2 years ago

  • Target version changed from 1.10.1 to 1.10.2

#19 Updated by Boone Gorges over 2 years ago

  • Target version changed from 1.10.2 to 1.10.3

#20 Updated by Boone Gorges over 2 years ago

  • Target version changed from 1.10.3 to 1.10.4

#21 Updated by Boone Gorges over 2 years ago

I've got a first pass at the new system up and ready to test on cdev. I've attached a few screenshots, so you can get somewhat of a sense, but it's best tested in a live environment.

Code is here: https://github.com/cuny-academic-commons/cac-sitewide-announcements

A couple implementation notes:

1. Sam's original mockups showed a different interface for Urgent and Normal messages. I played with this but it felt wrong in a few ways, so I standardized somewhat. The only real difference is the background color. They both have the same Dismiss button, and they both cascade at the top of the page - they don't overlay anything.
2. The notices appear on any site across the network when the user is logged in. For the time being, dismissal is not persistent, so that you can test. That is, the messages will reappear on each pageload. This will obviously be turned off once I've gotten feedback.
3. Admin interface is a new Announcements menu in the Dashboard, available to Editors on the main site. The Title field is just for internal use. The Content is what actually appears in the message. Messages are "live" as long as they are published; they must be deleted or set to "draft" in order to disappear for everyone. It would be possible to add an auto-expiration feature, but IMO it's overkill - this'll be rare enough that someone can set themselves a calendar alert. So that we don't forget about live notices, I've added a count bubble next to the Announcements menu item, which indicates the number of active announcements.

Because of the nature of CORS policies and browser security issues, it's not currently possible to dismiss items from a mapped domain. This seems like a fairly minor issue to me. If it's very problematic, I suggest we disable the notices altogether on mapped domains for the time being.

Paige, I've added you as a watcher, as it'd be helpful to get your feedback on the front-end interface. Thanks!

#22 Updated by Matt Gold over 2 years ago

Thanks for all of this, Boone. Here are my thoughts:

Color -- Sam's comps didn't show the two colors together, and they look a bit off to me when posted together. So, two questions: how often do we think there will be both an urgent and non-urgent message at the same time? If that is possibly a common use case, especially for users who may not log in that often (and thus may accumulate announcements), I'd love to hear thoughts on the colors from Chris and Paige.

Multiples -- What happens if there are multiple non-urgent or urgent announcements -- do they just start pushing down the page and obscuring site content?

Thoughts on your implementation questions:

1. okay, though see my question about cascading above
2. okay
3. okay re no auto-expiration date, but we'll need to be very assiduous about logging these so that we remember to turn them off, especially as those of us who dismiss them may forget that they are active.

Mapped domain -- I think we should disable entirely on mapped domains if they can't be dismissed, as having the notices appear w/o the ability to dismiss could be very problematic. If if is possible to show the warnings on the dashboards of mapped domains but not the frontends, we might explore that, as it would give us a chance to warn admins of coming changes.

Thanks again for all of your work on this.

#23 Updated by Boone Gorges over 2 years ago

  • Target version changed from 1.10.4 to 1.10.5

#24 Updated by Boone Gorges over 2 years ago

Matt, thanks very much for the feedback.

Color -- Sam's comps didn't show the two colors together, and they look a bit off to me when posted together. So, two questions: how often do we think there will be both an urgent and non-urgent message at the same time? If that is possibly a common use case, especially for users who may not log in that often (and thus may accumulate announcements), I'd love to hear thoughts on the colors from Chris and Paige.

I'd think it'd be quite rare for them to appear at the same time. That said, I'm glad to swap out colors as you'd like.

Multiples -- What happens if there are multiple non-urgent or urgent announcements -- do they just start pushing down the page and obscuring site content?

They stack vertically. They don't obscure content (in the sense that they overlay it), but they do push the site content down further and further. I can't imagine that there'll be many circumstances where we have more than one or two notices active at a time (or, rather, maybe we should have a policy to this effect - it's not a great user experience to visit the page after a few months and have to click through a half-dozen notices).

Mapped domain -- I think we should disable entirely on mapped domains if they can't be dismissed, as having the notices appear w/o the ability to dismiss could be very problematic. If if is possible to show the warnings on the dashboards of mapped domains but not the frontends, we might explore that, as it would give us a chance to warn admins of coming changes.

For now, I'll disable on mapped domains. I'll look into implementing the feature on mapped domains as part of a separate ticket. It will require a technical kludge.

#25 Updated by Boone Gorges over 2 years ago

  • Related to Bug #7022: Sitewide announcements should be displayed on, and dismissable from, mapped domains added

#26 Updated by Boone Gorges over 2 years ago

  • Status changed from New to Resolved

I've made the fix so that mapped domains don't get the announcements.

I've added the plugin to the Commons in https://github.com/cuny-academic-commons/cac/commit/4d50fc85972a79395784d5c79bdff272f3391246. I'm going to follow up in #5316 about planning our first use of it. Let's handle specific tweaks to the look and behavior of the plugin in separate tickets.

Also available in: Atom PDF