pepperstreet VIP
Total posts: 3,837
21 Mar 2014 22:24

Hello, Growl-sytle animated notification alerts are cool. But there are some UX concerns, if...:

  • the screensize is average or small. i.e. around 960-1200px, tablets etc.
  • there are a lot of notifications. Spanning the whole screen in height.

=> The alert boxes cover too much content and important UI elements. Alerts are shown on lists and detail pages. Closing some of them does not help, because other alerts follow-up.

Suggestions + Ideas

1.) Is it possible to show the Alerts in an Off-Canvas area? Then reveal it with an an appropriate icon (maybe incl. total#). I think, you have seen the effect for mobile navigations, or in some templates i.e. Gavick Bluap, JA PurityIII, also your YT square has a similar position for navigation. Not sure if all templates allow to put anything in this position, just know for latest Purity. Which can use regular menu + the off-canvas for other content.

1.b) Keep current display and position, but add a floating button at the top corner to toggle transparency/visibility. Maybe a script that fades out all alerts. A second click toggles back to full visibility. Behavior is comparable with a lightbox, but vice versa.

2.) Keep current display and position, but do not occupie the full screen height. Maybe margin-top on alert wrapper DIV? So, upper 3rd is always clear, not populated with alert boxes.

3.) Count/Total#. I remember, I've created a Notification Menu-Item default layout override. It shows the Total# of new events right next to the menuitem title. This could be the Forum Section- or Notification-Center item: e.g. MyMenu (999). Maybe more applicable to a site without active module and Notimoo alerts... or if alerts are hidden in a sidepanel like I mentioned under 1.).

4.) :D I forgot about the most simple solution: Just publish the notification module on selected MenuItems. Not on all pages. Simple as that. Maybe on homepage only, or only on main pages for Downloads/Depot/Forum.

BTW, the Notification module on mintjoomla seems to load multiple CSS style files? Why is this?

Thanks for listening.

Last Modified: 03 Apr 2014


nican VIP
Total posts: 392
22 Mar 2014 14:11

following!


Sergey
Total posts: 13,748
24 Mar 2014 06:19

I turn it off for now unless I find or decide how to display them.


pepperstreet VIP
Total posts: 3,837
24 Mar 2014 18:22

Sergey I turn it off for now unless I find or decide how to display them.

That was not my intention! Just wanted to make some suggestions for other style or better use of screen estate.

I think, Cobalt8 had a wrapper/container div around the alert boxes, right? Maybe just add 25-45% top-margin...?


Sergey
Total posts: 13,748
25 Mar 2014 07:12

I think of button in the coner with number. And if clickked then display notification boxes. If not only button.


nican VIP
Total posts: 392
25 Mar 2014 10:45

Sergey I think of button in the coner with number. And if clickked then display notification boxes. If not only button.

this sounds smart


pepperstreet VIP
Total posts: 3,837
26 Mar 2014 20:13

Sergey I think of button in the coner with number. And if clickked then display notification boxes. If not only button.

I think, Yootheme WARP7 templates have a suitable position and script. As far as I remember it, they use their own UIKIT script for off-canvas feature. They use it for their mobile menu... but it should also work for other stuff. They often had an absolute module position in their templates. Don't know for "YT Square".

BTW, I noticed you have turned-off the menu feature? At least the menu and even the logo disappears on mintjoomla on smaller screens?!

Bootstrap 2! example: - on Codepen


Sergey
Total posts: 13,748
27 Mar 2014 06:56

pepperstreet BTW, I noticed you have turned-off the menu feature? At least the menu and even the logo disappears on mintjoomla on smaller screens?!

I did not do anything. it is how this template work ot of the box.

pepperstreet I think, Yootheme WARP7 templates have a suitable position and script

That is not usefull anyway. We have to create universal solution that would work on any template out of the box.


pepperstreet VIP
Total posts: 3,837
27 Mar 2014 18:42

Sergey I did not do anything. it is how this template work ot of the box.

I don't think so. The YT Square demo has this feature enabled. IMHO, it is the new standard mobile menu for WARP7.

Sergey That is not usefull anyway. We have to create universal solution that would work on any template out of the box.

Not sure about that. It was just a specific suggestion for this site usage (= many notifications)

In general, a "growl" style alert is defined by this type of popup appearance and animation. So, basically it is working as it should be. It is the "nature" of this notification "style".

The only important issue is the occupation of the full screen height. As I mentioned earlier, I would give a top-margin on the wrapper.


pepperstreet VIP
Total posts: 3,837
02 Apr 2014 23:41

pepperstreet The only important issue is the occupation of the full screen height.

4.) I forgot about the most simple solution ;-) Just publish the notification module on selected MenuItems. Not on all pages. Simple as that. Maybe on homepage only, or only on main page for Downloads/Depot/Forum. Or on User's profile/account page.


Sergey
Total posts: 13,748
03 Apr 2014 06:47

!Excellent! I'll think what is the best page.

Powered by Cobalt