Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Two types of app tab glow states

11 views
Skip to first unread message

Alex Faaborg

unread,
Sep 15, 2010, 7:07:38 PM9/15/10
to dev-usability
I've been thinking more about our app tab glow states, especially now that
my app tabs are turning red. It seems like there are really two different
use cases:

-Asynchronous notifications: you want to look directly at the app tab to see
if it contains new information (web feeds, twitter). You ping it.
-Synchronous notifications: the app tab actually needs to get your attention
(im chat incoming, calendar event about to occur). it pings you.

The Chrome developer channel has been working on a very lightweight style
for their app tab notifications, it doesn't trigger in your peripheral
vision at all, and you have to stare directly at it in order to see the
effect. I think we should consider using this type of approach initially
for title changes, it works really well.

The more noticeable glow state should be used to draw the user's attention
to the existence of tab modal dialog boxes (like how google calendar popups
up a javascript alert for appointments).

In the future we can add a notification API that exposes invoking both types
of glow states to Web apps, along with a recommendation of when to use
each. For instance:

new gmail message: very light style change (assynchronous)
new gchat message: full tab glow (synchronous)

Alex

Stephen Horlander

unread,
Sep 16, 2010, 12:07:41 AM9/16/10
to Alex Faaborg, dev-usability
> The Chrome developer channel has been working on a very lightweight style for their app tab notifications, it doesn't trigger in your peripheral vision at all, and you have to stare directly at it in order to see the effect. I think we should consider using this type of approach initially for title changes, it works really well.


> The more noticeable glow state should be used to draw the user's attention to the existence of tab modal dialog boxes (like how google calendar popups up a javascript alert for appointments).

I did some thinking on this the other day while trying to figure out how apptab indicators and tab modal notifications could overlap and coexist.

Some of the ideas I played with:

- Texture instead of glow with an inserted icon: http://bit.ly/ahy28O
- Subtle pulsing: http://bit.ly/9CqUT1 - http://bit.ly/bfcEc8

I was drawn to the texture and icon approach because anything more obvious combined with the colored apptab would be seriously distracting. I dislike pulsing UI but competing with a noticeable color requires an even stronger color or motion.

The colored apptab background approach seems a little heavy even when changed to the more subtle blue light approach: http://bit.ly/d5Kv5d

I agree that a lighter approach would be just as effective as a passive change indicator without being distracting: http://bit.ly/9VGz7q

It also wouldn't compete quite as much with notifications that require user action.


- Stephen

Aza

unread,
Sep 16, 2010, 2:54:05 AM9/16/10
to Stephen Horlander, Alex Faaborg, dev-usability
How about extending the tab up a little bit, so that as you scan your eye
over the tabs they stick out like bookmarks?

-- aza | ɐzɐ --

On Wed, Sep 15, 2010 at 9:07 PM, Stephen Horlander
<shorl...@mozilla.com>wrote:

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

Allan Caeg

unread,
Sep 16, 2010, 3:28:50 AM9/16/10
to Stephen Horlander, Alex Faaborg, dev-usability
Having the two types of app tab glow states is a good idea.

Another challenge is how it would look like while there's no API to
differentiate asynchronous and synchronous yet.

Also, I wonder how a tab glow state can work on each platform. On Windows
and OS X, is this way of rendering a tab glow state already a convention? As
for Linux, I don't remember seeing a GTK+ app do it yet. Perhaps, we'll add
it to the UI Pattern Library.

On Thu, Sep 16, 2010 at 12:07 PM, Stephen Horlander
<shorl...@mozilla.com>wrote:

--
Regards,
Allan
http://www.google.com/profiles/allancaeg#about<http://www.google.com/profiles/AllanCaeg>
+63 918 948 2520

Alex Faaborg

unread,
Sep 16, 2010, 4:10:44 PM9/16/10
to Allan Caeg, Stephen Horlander, dev-usability
>
> Another challenge is how it would look like while there's no API to
> differentiate asynchronous and synchronous yet.
>

I think we should use:

java script dialog: synchronous - color change/obvious activation
title change: asynchronous - slight change (slight glow, raise up, etc.)

This doesn't perfectly match how current Web apps behave, sometimes you will
get a title change for a synchronous communication (gchat, mibbit), but in
general I think it is good enough for now util we get the API exposed to Web
apps.

-Alex

Boriss

unread,
Sep 16, 2010, 7:47:38 PM9/16/10
to Alex Faaborg, Allan Caeg, Stephen Horlander, dev-usability
The title change case could be an update (new news story, new sports score),
or it could be numeric (numbers of emails). Earlier we talked about letting
some pages - especially email clients - give a number that we could expose
near the app tab's favicon. I'm guessing this has been dropped because
there isn't time for 4.0, but I wonder if we could be clever if the page
title includes an increasing number. Perhaps we could subtly change the
color of the app tab so that a higher number (more mail) is darker or
brighter than a low number (less mail).

Allan Caeg

unread,
Sep 16, 2010, 9:49:53 PM9/16/10
to Boriss, Alex Faaborg, Stephen Horlander, dev-usability
On Fri, Sep 17, 2010 at 7:47 AM, Boriss <jbo...@mozilla.com> wrote:

> The title change case could be an update (new news story, new sports
> score), or it could be numeric (numbers of emails). Earlier we talked about
> letting some pages - especially email clients - give a number that we could
> expose near the app tab's favicon. I'm guessing this has been dropped
> because there isn't time for 4.0, but I wonder if we could be clever if the
> page title includes an increasing number. Perhaps we could subtly change
> the color of the app tab so that a higher number (more mail) is darker or
> brighter than a low number (less mail).


A challenge here is the definition of urgency/importance. If that's done,
the user will perceive greater urgency/importance based on the magnitude of
color change. However, this could be misused or abused. A Twitter tab could
call for too much attention and become obtrusive at a time the user doesn't
have to be distracted by social networking. Some sites can also take
advantage of this feature by always using the darkest possible colors to
frequently call attention, even if they don't have to.

0 new messages