New Notification UI

76 views
Skip to first unread message

Alex Faaborg

unread,
Aug 21, 2009, 8:40:45 AM8/21/09
to dev-apps-firefox List, dev-us...@lists.mozilla.org, Alexander Limi, Jennifer Boriss, Matthew Noorenberghe, Dave Townsend, Justin Dolske
[note: cross posting to dev-apps-firefox and dev-usability, let's use
the dev-apps-firefox thread for centralized discussion]

Over the last few weeks I've been working with Matthew and Dolske on a
potential redesign of the notification system in Firefox. These
mockups explain all of the rational and changes:

Full design: http://people.mozilla.com/~faaborg/files/20090821-notification/newNotification-i1.png

Intermediary step for 3.6: http://people.mozilla.com/~faaborg/files/20090821-notification/notificationNamoroka-i1.png

Note that some of these mockups build on proposed changes to the
windows theme, you can find more context on that in the previous thread.

Looking forward to hearing everyone's feedback,
-Alex

David Bolter

unread,
Aug 21, 2009, 11:07:24 AM8/21/09
to Alex Faaborg, Alexander Limi, Dave Townsend, Matthew Noorenberghe, Jennifer Boriss, dev-apps-firefox List, Justin Dolske
Very thoughtful. The existing UI problems you note do seem to be alleviated.

A11y impl. note: for any popup that doesn't automatically get focused
(e.g. the activity notification), we'll want to have some (unseen) text,
and possibly make it a live region (aria-live attribute).

cheers,
David

> _______________________________________________
> dev-apps-firefox mailing list
> dev-apps...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-apps-firefox

DonGato

unread,
Aug 23, 2009, 9:54:49 AM8/23/09
to
I think it's a quite nice approach. My only drawback is that your
default option might not be mine. I mean, someone denies always while
another one always allow. With this new approach it's doing more tasks
for the one that doesn't use the default option. That should be taken
in account in some way, but in any case I agree it's a better approach.

Mike Beltzner

unread,
Aug 23, 2009, 4:27:47 PM8/23/09
to dev-apps-firefox List
The only concern that I have is that for several notifications (such
as the example shown, remembering a password) it's somewhat nice that
the current UI doesn't require that users attend to it, and that it
doesn't block any of the page content.

I presume it would fade away on its own after time or lack of
interaction?

cheers,
mike

Aza

unread,
Aug 24, 2009, 2:36:14 AM8/24/09
to Alex Faaborg, Alexander Limi, Dave Townsend, Matthew Noorenberghe, dev-us...@lists.mozilla.org, Jennifer Boriss, dev-apps-firefox List, Justin Dolske
Hi Alex,

This is looking fantastic. My only real comment is that we should be
expecting extensions/Jetpacks to want to extend and use the notification
system. What are your thoughts on having a third badge next to page/tools
for browser modifications that only appears if there is an extension which
uses it.

-- aza | ɐzɐ --


On Fri, Aug 21, 2009 at 5:40 AM, Alex Faaborg <faa...@mozilla.com> wrote:

> [note: cross posting to dev-apps-firefox and dev-usability, let's use the
> dev-apps-firefox thread for centralized discussion]
>
> Over the last few weeks I've been working with Matthew and Dolske on a
> potential redesign of the notification system in Firefox. These mockups
> explain all of the rational and changes:
>
> Full design:

> http://people.mozilla.com/~faaborg/files/20090821-notification/newNotification-i1.png<http://people.mozilla.com/%7Efaaborg/files/20090821-notification/newNotification-i1.png>
>
> Intermediary step for 3.6:
> http://people.mozilla.com/~faaborg/files/20090821-notification/notificationNamoroka-i1.png<http://people.mozilla.com/%7Efaaborg/files/20090821-notification/notificationNamoroka-i1.png>


>
> Note that some of these mockups build on proposed changes to the windows
> theme, you can find more context on that in the previous thread.
>
> Looking forward to hearing everyone's feedback,
> -Alex
> _______________________________________________

> dev-usability mailing list
> dev-us...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-usability
>

Boriss

unread,
Aug 24, 2009, 4:12:34 AM8/24/09
to
Hey Alex -

Overall I think this looks great & the direction is the correct one.
I'm a bit w/Beltzner in that this is definitely a more distracting UI
than before. In cases like remembering a password, something the
current UI does well is strike a balance between something that
catches your attention (movement, color), but can be ignored if the
user chooses (does not block content). I think we could hit most of
your 12 points with something along these lines that is a little less
distracting, keeping the better use of space and color, icon, etc.

Boriss

On Aug 23, 11:36 pm, Aza <a...@mozilla.com> wrote:
> Hi Alex,
>
> This is looking fantastic. My only real comment is that we should be
> expecting extensions/Jetpacks to want to extend and use the notification
> system. What are your thoughts on having a third badge next to page/tools
> for browser modifications that only appears if there is an extension which
> uses it.
>
> -- aza | ɐzɐ --
>

> On Fri, Aug 21, 2009 at 5:40 AM, Alex Faaborg <faab...@mozilla.com> wrote:
> > [note: cross posting to dev-apps-firefox and dev-usability, let's use the
> > dev-apps-firefox thread for centralized discussion]
>
> > Over the last few weeks I've been working with Matthew and Dolske on a
> > potential redesign of the notification system in Firefox.  These mockups
> > explain all of the rational and changes:
>
> > Full design:

> >http://people.mozilla.com/~faaborg/files/20090821-notification/newNot...<http://people.mozilla.com/%7Efaaborg/files/20090821-notification/newN...>
>
> > Intermediary step for 3.6:
> >http://people.mozilla.com/~faaborg/files/20090821-notification/notifi...<http://people.mozilla.com/%7Efaaborg/files/20090821-notification/noti...>


>
> > Note that some of these mockups build on proposed changes to the windows
> > theme, you can find more context on that in the previous thread.
>
> > Looking forward to hearing everyone's feedback,
> > -Alex
> > _______________________________________________
> > dev-usability mailing list

> > dev-usabil...@lists.mozilla.org
> >https://lists.mozilla.org/listinfo/dev-usability

Mark Banner

unread,
Aug 24, 2009, 4:17:05 AM8/24/09
to
On 24/08/2009 07:36, Aza wrote:
> Hi Alex,
>
> This is looking fantastic. My only real comment is that we should be
> expecting extensions/Jetpacks to want to extend and use the notification
> system. What are your thoughts on having a third badge next to page/tools
> for browser modifications that only appears if there is an extension which
> uses it.

This is similar to one of my concerns as well.

Firstly how would different notifications stack up e.g. Password + Share
Location on one page (unlikely I know, but just an example). Would you
get multiple popups you'd have to dismiss? Though I guess that is the
same as the current notification bar - but to me the display of a big
box is more intrusive than the display of the notification bar, even if
simpler to deal with.

Secondly, we are currently using the notification bar system in
Thunderbird. I could see some aspects of your system wanting to be used
as well - and extensions wanting to do the same, but we just don't have
the same types of elements. Could the core of the notification system be
kept a toolkit element capable of being attached to any suitable widget?

Standard8

belt...@mozilla.com

unread,
Aug 24, 2009, 6:40:32 AM8/24/09
to Aza, Alexander Limi, Dave Townsend, Alex Faaborg, Matthew Noorenberghe, dev-us...@lists.mozilla.org, Jennifer Boriss, dev-apps-firefox List, Justin Dolske
Wouldn't that add more visual clutter precisely as we're trying to
remove it?

I'd rather that we have a single locus for the "page" speaking to the
user (JS dialogs, page specific options and page-specific Add-ons or
JetPacks) and another for the "broswer" (application updates,
downloaded file alerts, future ability to alert about updated content
elsewhere on the web, JetPacks or Add-ons) but not a third solely for
extensibility.

I think we have the same goal, I just see the page specific locus as
being the site-identity button, and a single additional badge (or
perhaps if we want to get funky, the Firefox logo) as the one for non-
page specific actions. The key is whether the dialog is about the page
in focus or the browser as a whole.

cheers,
mike

On 2009-08-24, at 2:37 AM, Aza <a...@mozilla.com> wrote:

> Hi Alex,
>
> This is looking fantastic. My only real comment is that we should be
> expecting extensions/Jetpacks to want to extend and use the
> notification system. What are your thoughts on having a third badge
> next to page/tools for browser modifications that only appears if
> there is an extension which uses it.
>
> -- aza | ɐzɐ --
>
>
> On Fri, Aug 21, 2009 at 5:40 AM, Alex Faaborg <faa...@mozilla.com>
> wrote:
> [note: cross posting to dev-apps-firefox and dev-usability, let's
> use the dev-apps-firefox thread for centralized discussion]
>
> Over the last few weeks I've been working with Matthew and Dolske on
> a potential redesign of the notification system in Firefox. These
> mockups explain all of the rational and changes:
>
> Full design: http://people.mozilla.com/~faaborg/files/20090821-notification/newNotification-i1.png
>
> Intermediary step for 3.6: http://people.mozilla.com/~faaborg/files/20090821-notification/notificationNamoroka-i1.png
>
> Note that some of these mockups build on proposed changes to the
> windows theme, you can find more context on that in the previous
> thread.
>
> Looking forward to hearing everyone's feedback,
> -Alex
> _______________________________________________
> dev-usability mailing list
> dev-us...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-usability
>

belt...@mozilla.com

unread,
Aug 24, 2009, 6:43:16 AM8/24/09
to Mark Banner, dev-apps...@lists.mozilla.org
I think the APIs should stay the same, and you can override the
presentation to fit Thunderbird a you wish. I would expect it to be
written such that it selects an element off of which to "hang".

cheers,
mike

On 2009-08-24, at 4:21 AM, Mark Banner <bugz...@invalid.standard8.plus.com
> wrote:

Alex Faaborg

unread,
Aug 24, 2009, 5:53:09 PM8/24/09
to Mike Beltzner, Mark Banner, Matthew Noorenberghe, dev-apps-firefox@lists.mozilla.org List, Justin Dolske
>> we are currently using the notification bar system in Thunderbird.
>> I could see some aspects of your system wanting to be used as well
>> - and extensions wanting to do the same, but we just don't have the
>> same types of elements. Could the core of the notification system
>> be kept a toolkit element capable of being attached to any suitable
>> widget?


I don't actually know what API changes are being considered, but
Dolske and Matthew can provide more details on the specific changes.
Even in Firefox there are some cases where we plan on continuing to
use notification bars for feedback (for instance inside of the add-ons
manager window), so we definitely aren't removing the capability to
display notifications bars.

Also I think we should consider adding these additional notification
capabilities to toolkit, since as an overall design pattern it could
certainly be useful outside of Firefox.

-Alex

On Aug 24, 2009, at 3:43 AM, belt...@mozilla.com wrote:

> I think the APIs should stay the same, and you can override the
> presentation to fit Thunderbird a you wish. I would expect it to be
> written such that it selects an element off of which to "hang".
>
> cheers,
> mike
>
> On 2009-08-24, at 4:21 AM, Mark Banner <bugz...@invalid.standard8.plus.com
> > wrote:
>

Rob Campbell

unread,
Aug 25, 2009, 12:59:17 PM8/25/09
to
Nice presentation, Alex. I do like your diagram style.

Will this steal keyboard focus? That'd be Bad. I also agree with
Beltzner and Boriss that this is a bit too "in your face", hard to ignore.

I think ideally, for password save dialogs, I'd like to be able to
dismiss them with a hotkey, but not have them interfere with or overlap
content.

Boriss wrote:
> Hey Alex -
>

> Overall I think this looks great& the direction is the correct one.


--
Rob Campbell - robcee _ mozilla _ com (fill in the blanks!)
http://antennasoft.net/robcee

Alex Faaborg

unread,
Aug 25, 2009, 2:19:48 PM8/25/09
to Rob Campbell, dev-apps...@lists.mozilla.org
These won't take focus when they appear, although we could (depending
on what currently has the focus) provide common keyboard commands for
dismissing, like esc.

-Alex

Jomel

unread,
Sep 26, 2009, 7:02:10 PM9/26/09
to
Nice mockups. How might this interact with any web app notifications
that were added in future (for example Gmail new mail notifications,
Google Calendar event reminders or Last.fm now playing notifications).
Unlike the page notifications mentioned above, web app notifications
would often be triggered by background tabs, yet should generally be
shown immediately (possibly even if the browser is minimised), without
having to switch to that tab first. Or should such notifications just
use Growl-style system notifications?

On Aug 21, 1:40 pm, Alex Faaborg <faab...@mozilla.com> wrote:
> [note: cross posting to dev-apps-firefox and dev-usability, let's use  
> the dev-apps-firefox thread for centralized discussion]
>
> Over the last few weeks I've been working with Matthew and Dolske on a  
> potential redesign of the notification system in Firefox.  These  
> mockups explain all of the rational and changes:
>

> Full design:  http://people.mozilla.com/~faaborg/files/20090821-notification/newNot...
>
> Intermediary step for 3.6:http://people.mozilla.com/~faaborg/files/20090821-notification/notifi...

Alex Faaborg

unread,
Sep 28, 2009, 7:26:17 PM9/28/09
to Jomel, dev-apps...@lists.mozilla.org
We haven't really thought about this in too much detail yet, but
something along the lines of the tab producing a notification
extending out of it if the browser window is visible (although
probably limited to app tabs since otherwise we basically have a new
form of pop-up). If the browser window isn't visible, fall back to a
system tray notification (Windows), Growl (OS X), dbus? (Linux).

-Alex

voracity

unread,
Oct 6, 2009, 6:30:03 AM10/6/09
to
This is a great proposal. (Although it makes me wish the 'Tools'
button was called 'Firefox' instead.)

Even though popups annoy me greatly, I still like this proposal
because it actually balances the right needs in this situation (for
me, at least). Here's my reasoning:

When Firefox had modal dialogs for remembering the password, I was
annoyed that I was forced to make a choice *every* single time. Even
still, I would choose "Not Now" every time because I was never sure
whether I eventually wanted to remember the password for any given
site. (Putting the options in the Page menu solves this, because of
its undo-like nature.)

Later, when notification bars were introduced, things improved greatly
but that's just because I began ignoring the notifications altogether
--- i.e. I developed notification bar blindness. That's not actually
what I want. I really do want a visual reminder about my options, and
this will do exactly that without interfering with my flow.

My only real concern about this proposal is how stacking would look.

I have three main suggestions:

1) Make the notification somewhat translucent until moused over.

2) Remember what the user chose last time. (Critical for me!)

3) 'Attach' Javascript dialogs (like speech bubbles) to the tab
instead, because it's the page talking to the user rather than Firefox
talking about the page's configuration. If that were the case, you
could actually just extend the |alert| function --- and give |alert|
full-blown notification power if the user makes the page an app tab.

TheArchitect

unread,
Nov 11, 2009, 9:03:26 PM11/11/09
to
A couple ideas here:

- I think that the idea of dismissing a notification when you click
elsewhere could be inconvenient, for example if the software/computer
"lags", and the user clicks in the content window before their system
has rendered the popup, it could be dismissed without their noticing.

- Also, (not sure if this is the right thread, if not please say so)
in the proposed "page" menu, it has been proposed that they are 48x48
pixel icons. I believe that this is inefficient use of screen space,
and not aesthetically pleasing, what with the empty space in between
labels.

-Calum Smith

Blair McBride

unread,
Nov 15, 2009, 4:40:29 AM11/15/09
to dev-apps...@lists.mozilla.org
My understanding is that clicking outside the popup will only close the
popup if its already been open for X milliseconds. Where X is some
number that's long enough for the user to notice the popup, but short
enough so that clicking outside the popup is still a quick way of
closing it.

- Blair

KWierso

unread,
Dec 18, 2009, 12:36:14 AM12/18/09
to
On Nov 15, 3:40 am, Blair McBride <bmcbr...@mozilla.com> wrote:
> My understanding is that clicking outside the popup will only close the
> popup if its already been open for X milliseconds. Where X is some
> number that's long enough for the user to notice the popup, but short
> enough so that clicking outside the popup is still a quick way of
> closing it.

Perhaps "flash" whatever element the doorhanger is being attached to,
and once the "flash" is done, allow mouse clicks to hide the
notification?

"Flash" being something like alternating the element's color for a
second or two?

KWierso

unread,
Dec 18, 2009, 12:36:22 AM12/18/09
to
On Nov 15, 3:40 am, Blair McBride <bmcbr...@mozilla.com> wrote:
> My understanding is that clicking outside the popup will only close the
> popup if its already been open for X milliseconds. Where X is some
> number that's long enough for the user to notice the popup, but short
> enough so that clicking outside the popup is still a quick way of
> closing it.

Perhaps "flash" whatever element the doorhanger is being attached to,

Reply all
Reply to author
Forward
0 new messages