Client Notification System

[Battler45]

Vihang,

One thing we've been talking about doing is implementing a notification system that would enable us to let users know when we've launched a new feature or made a change to the admin area. One method would be mass email, but we thought it might make more sense to build a system into the admin area, so that users could view and review the messages at the same time that they are actively using the system.

Reviewing our options, we think the best approach would be to implement something similar to what Twitter has done, which you can see in the attached screenshot.

As you can see, there is a blue band that spans the top of the page and pushes the rest of the page down. It contains a short notification and then a close button. The close button sets a flag in the database, I believe, so that the system knows not to display that notification to that user from that point on.

Creating a system like this would probably require a couple of new tables. The main Notifications table would contain:

• Notification headline

• Notification Body (In cases where we needed to display more than just a headline, the headline notification would contain a Read More link which would launch this Notification Body in an overlay)

• Notification Description (more on this later)

• Site Types to which this is to be shown (IDX, Standard Site, Pro Site, etc.) -- these would need to be selected via checkboxes, as we would need to be able to select more than one

• Security Levels to which this is to be shown (Agent, Manager, Primary Manager) -- again, these would need to be selected via checkboxes, as we would need to be able to select more than one

• MLS Regions to which this is to be shown -- again, need to be able to select multiple

• Date Posted

• Posted By

And then there would need to be a table to capture which users had closed which notifications.

The notifications would only be shown on the home page / Dashboard. In cases where there were more than one notification pertaining to the active user, they would all be shown in alternating color stripes. They should probably also auto-expire after 15 or 30 days -- meaning, if the user has not Closed them in that amount of time, they would automatically disappear for all users.

Then, of course, we would also need a couple of new pages to manage the notifications -- one a summary page to display all notifications we've created, and then a second page to allow us to add or edit a notification. These should be straightforward and I will work on mockups of these.

Please let me know if you have any questions.

Thanks

Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

Upon expiration, I think we should retain the data in the database, but simply hide those notifications from view. In the UserNotifications table, we will only be retaining data on which users have viewed (or Closed) which notifications, correct? It might be useful at some point to be able to track our response rate so see if changes to the user interface improve it over time.

Also, we had one more thought about targeting specific users. In addition to site type, admin user level, and mls region, can we also target site distribution type? So, for example, with the new tooltip functionality you just added, we would want to target only managers & above of those sites that have their distribution type set to either hierarchical or round robin.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

This looks good, but

1 - I think the "Body" field in the first table may be unnecessary. My thought for this was that the headline would be what is displayed to the user in the horizontal bar across the top of the page, and then the Description field would be displayed in the overlay when they click to view the details of the headline. We will use a tinyMCE editor window to enter the description, and so can include a headline there if we want. I don't believe that we would need another text field, but please correct me if I am missing something. Also, you may just want to use "Descrip" or "Message" for the name of that field, as I believe "Description" may be a reserved word (not that it can't still be used with brackets, but in general I try to avoid it).

2 - In the second table, could we add a couple of additional columns, "DateViewed" and "DateClosed" -- that will allow us (eventually) to analyze the average length of time between when an announcement is posted, when it is viewed, and when it is closed, so that we can track changes to the system and know whether these are improving or not.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Ben,

The requirements are pretty much clear. I'll start working on creating required tables and stored procedures.

A question regarding auto-expiration of notification: the notification record and corresponding records in UserNotifications table would be deleted upon expiration.

Thanks

Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Vihang,

Looks great -- yes, we might as well go ahead and add a "DateViewed" column so that we can track how many users have viewed a message. In conjunction with the "Close" rate, that will be an interesting statistic for us.

Thanks.
Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

Somehow I missed this feedback yesterday, I apologize. Regarding the orange color, that was a typo on my part. Originally I was going to suggest an orange color, but changed that to blue at a later point, and did not notice that there was still a reference to orange in the note.

1 - Reconsidering this, I actually think that these buttons might be "overkill" -- meaning unnecessary. For now, let's try removing these two buttons and replacing them with a silver "Close" button. The "Close" button should always just remove the overlay but not the notification. The only way for the client to remove the notification will be to click the Close button at the right edge of the notification itself. I think this will be the cleanest and most intuitive solution for users.

2 - Yes, I see why that would be. It's fine to sort only on Date Posted and Headline -- that should be sufficient.

3 - Great

4 - A couple of small final tweaks:

a. Please increase the padding between the edge of the notification text and the "Read More" link to 12px.

b. Looking again at the Twitter example, I can see that it would be useful to be able to include links in the notifications themselves (in the blue bar) rather than only in the overlay.  Can you change the current "Headline" text input to be a TinyMCE text editor instance?  We only need very basic functionality on that tool bar -- basically just Bold and then the link capability -- but it's fine to include the full toolbar if that's easiest.

Once those small changes are made, please push this out to the live site when you have time.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

Yes, I had a similar thought about the "Total" column. For our purposes, it does not need to be 100% exact. Perhaps we could simply calculate the total number of applicable users at the time the notification is created and store that as a static value in the database? That way, we would not need to worry about recalculating as new users are added or existing users are removed. Since only administrators will be viewing this info, it only needs to give us a rough idea of how many people are viewing & closing the notification. So, I don't believe we need to go to the trouble of storing all the notifications in the CAA_AdminUserNotifications table.

Please let me know if you think that will work.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Ben,

I've published the notification system changes on the development site. You can access the Manage Notifications page via "Manage Notifications" link under Accounts menu.

Please check the functionality and let me know your feedback.

Thanks

Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Ben,

I've implemented notification-form page and updated dashboard page to show notifications.

Please note that on the notification-form page,

1-- The text editor will have default stylesheet.

2-- The uploaded images/files will be stored under UserFiles/Notification folder.

On the dashboard page, the page contents are note pushed down when then notification bar is shown, rather it is displayed on top of the header section. I believe this is due the absolute positioning of some of the elements on the page. Please see the attached image.

Please let me know if you have any suggestions to fix this positioning issue. Also, please let me know how to style the notification bar.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Ben,

I've fixed the notification-bar positioning issue. Thanks for your suggestions.

I am now working on Manage Notifications page and will publish these changes tomorrow for your review.

Re. "Total / Closed" column:

Getting Closed count will be straightforward, however to get Total count, we will need to store all the notifications displayed to the user in CAA_AdminUserNotifications table. Upon user action (close/read more) the action columns value will be updated and such notifications will not be displayed next time. I'll also add an additional column LastDisplayedOn (datetime) - that will tell us when the notification was last displayed to the user.

Please let me know your thoughts on this.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Ben,

There should not be any problem in limiting notifications to a specific site distribution type.

I've created following tables for the notification system.

1-- CAA_Notifications

• ID int not null,

• Headline varchar(100) not null,

• Body varchar(500) null,

• Description varchar(max) null,

• SiteTypes varchar(15) not null,

• SecurityLevels varchar(15) not null,

• MLSRegions varchar(20) not null,

• SiteDistributionTypes varchar(15) not null,

• DatePosted datetime not null,

• PostedBy int not null

In the SiteTypes, SecurityLevels, MLSRegions and SiteDistributionTypes fields comma seperated ids would be stored.

2-- CAA_AdminUserNotifications

• ID int not null,

• AdminUser_ID int not null,

• Action tinyint not null

The Action field would have one of the following values:

1- Viewed, when user clicks on Read More link

2- Closed, when user clicks on Close button

Please let me know your feedback on these tables.

Thanks

Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Ben,

I've added DateViewed column and updated Mange Notifications page to show Total Viewed.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Ben,

Sorry for the confusion but I haven't yet published the changes. I was planning to do so based on your feedback. I'll look into setting positions using jQuery. I'll update you more on this tomorrow.

Thanks Posted by Shah Vihang(unfuddle username: vihang)

[Battler45]

Vihang,

Yes, I think there are only 2 or 3 classes that will need to be adjusted in cases where there are notifications, and you should be able to calculate the needed height simply by multiplying against the number of notifications to be displayed. The only suggestion I have would be to set the notifications container to display: none initially, and then only display it (maybe via show("slow")) once the position adjustments have been made -- that will prevent the notifications from ever overlapping the navigation. You might also make the background color of the notifications container the same as the background color of the site header to make it as seamless as possible.

The last piece we will need will be a "Manage Notifications" page, which will just be a simple list of all of our current active notifications -- I'll work on that for you today.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

Thanks, it looks and is working great. I especially appreciate how you were able to make the notification bar static when the user scrolls down the page -- very nice.

I can't remember what we decided about "expiration" of the notices -- will they automatically drop off of user's screens 2 weeks from the original post date?

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Vihang,

It really looks great, nice job!

A few comments:

1 - In order to help the notifications stand out a bit more, can you change the background color to: #3190e0 (blue), with white text? I'm not sure how that will look, but it's worth a try -- and it will definitely stand out! I know I indicated in my previous message that you might want to make the background color of the container match that of the main nav, but I only meant that as a background color for the notifications container as a whole, while the actual notifications themselves where loading in.

If there is more than one notification displayed at one time to a user, can you alternate the background colors of the rows, using the orange color above and then the slightly deeper shade: #1c7ed0

2 - Can you add a smaller version of the close buttion (http://client.sierrainteractivedev.com/res/images/btn_delete.png) next to the word Close to make that more visible? Perhaps 14px x 14px.

3 - In the overlay that pops up, please make it a bit wider so that the default width of the overlay is 800px. Also please add a bit more padding between the edges of the overlay and the message -- say, 25px on all sides.

4 - I'm not sure about having the notification disappear when the user clicks the "Read More" button. On the one hand, that's nice, but on the other hand, the user may want to keep it to view it again at a later date.

So, at the bottom of the overlay, can you add two buttons. The first, in the blue color, should say, "Keep this notification -- I'll view it again later." The second, in green below that, should say, "I'm done with this notication -- remove it from my Dashboard." If possible, it would be good if these buttons could be the same width and centered in the overlay window.

I know you've had trouble in the past centering these buttons (it's tricky, I agree), so one approach you might take is that, since the overlay will have a fixed width and the buttons will have a fixed width, you could place them in a div container with the appropriate amount of padding-left to make them look as if they are centered.

Please let me know if you have any questions or suggestions.

Thanks. Posted by Peskoe Ben(unfuddle username: bpeskoe)

[Battler45]

Ben,

I've removed Body column from the CAA_Notifications table and renamed Description to Descrip.

I've added a new column ActionDate in the CAA_AdminUserNotifications table rather than having separate columns for DateViewed and DateClosed, since there will be only one entry for user action on notification.

I've created necessary stored procedures and dataaccess methods. I'll now work on displaying notifications on the dashboard page. Please provide me mockups of the notification pages in a day or two.

Thanks

Posted by Shah Vihang(unfuddle username: vihang)