Examples of UI fading in and out over content?

18 Mar 2009 - 10:25am
5 years ago
15 replies
889 reads
James Haliburton
2008

I'm a bit curious about the emergence of a pattern in recent years.

In embedded Flash movie players it has become pretty common to see
player controls (play, ff, rw, etc.) fade out after some time of
inactivity or mouse out, and fade back in on action, mousein, etc.
We can also see this when you use a quicktime player in full screen
mode.

The benefits of creating a seamless way to shift focus are obvious.

I was wondering if anyone could add a few more examples of when a UI
changes opacity to shift focus from control to consume? Or for any
other reason? Other examples than web?

Cheers.

Comments

18 Mar 2009 - 10:52am
Anonymous

Google Earth has its controls fade-in upon rolling over. However, in the
"off" state, an outline of the controls remains.

18 Mar 2009 - 11:22am
Eugene Kim
2005

A basic example of this might be the alert for apps like Thunderbird
or Entourage which notify you of new emails. Hover over the alert to
keep it from fading out and click it to go directly to the email.

The Android OS includes a "touch overlay" feature which provides a
contextual menu upon touching the screen. Here's an example from
Google Maps:

Lastly, I've got custom AppleScript for rating songs in iTunes that
pops up a minute or so after a song starts playing if it doesn't
have a rating.

Hope those help.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40142

18 Mar 2009 - 11:24am
Eugene Kim
2005

Oops, I guess the board software doesn't like HTML in posts...

http://i575.photobucket.com/albums/ss194/happyandsad/ixda/google_map_zoom.gif

http://i575.photobucket.com/albums/ss194/happyandsad/ixda/itunes_rating.gif

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40142

18 Mar 2009 - 11:40am
Matthew Ventre
2008

There are situations where a screen or viewport needs to be scrolled
or panned. In some cases the interface provides controls that become
visible in order to enable this behavior.

An example of this is the LovelyCharts UI. http://lovelycharts.com

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40142

18 Mar 2009 - 11:50am
Santiago Bustelo
2010

Apple's DVD player, not surprisingly, works in full screen mode very
much like QuickTime player.

In another fashion, selecting text in nytimes.com 's article pages,
brings a control to look up said text. There was a nifty script for
blogs allowing users to add a quoted comment of selected text, but mi
Google foo is weak today.

--

Santiago Bustelo
Buenos Aires, Argentina

18 Mar 2009 - 12:16pm
Jack L. Moffett
2005

Apple's MobileMe photo gallery slideshows have controls that fade in
and out.

There was a version of Powerpoint that had a button that would fade in
during a slide show, providing access to options.

The iPod controls on the iPhone and iPod Touch are displayed over the
album art and hidden with a tap. The same for video controls in the
YouTube app.

Jack L. Moffett
Senior Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

To design is much more than simply
to assemble, to order, or even to edit;
it is to add value and meaning,
to illuminate, to simplify, to clarify,
to modify, to dignify, to dramatize,
to persuade, and perhaps even to amuse.

- Paul Rand

18 Mar 2009 - 12:37pm
Casey Edgeton
2008

When viewing images on the iphone the controls fade away, you must tap the
screen again to see them.

Some people are starting to use hovering to reveal additional options like
'edit', 'delete' or 'save' on objects.

This is the only example I could find (from a previous email thread):
http://opl.bibliocommons.com/collection/show/4922901_emenel/library

c a s e y e d g e t o n
---------------------------------
Interaction Designer | http://www.designasaurusrex.com
cedgeton at gmail.com | casey.edgeton at oracle.com

18 Mar 2009 - 1:43pm
Alan James Salmoni
2008

Some of the open source video players (MPlayer, VLC) do this in full
screen mode. I'm fairly sure Windows Media Player does the same
thing too. Eye of Gnome also does this when viewing pictures in full
screen mode. However, the transitions are not gradual but sudden.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40142

18 Mar 2009 - 11:48am
Barry Briggs
2008

This is an interesting article about 'contextual interfaces'

http://alexiskold.wordpress.com/2008/05/15/the-rise-of-contextual-user-interfaces/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40142

18 Mar 2009 - 11:25am
Tao
2009

Good topic. I am not a big fan of Microsoft but,,Windows operation
system has function of auto hide-taskbar. So as the inactive icons at
bottom right corner.
By the way, in Office Word 2007, the scale tab won't be present
until your mouse point stop at left side/top for one or two seconds.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40142

19 Mar 2009 - 10:44am
James Haliburton
2008

Thanks for all the examples contributed here!

Can anyone see any downsides fading out the controls of your content?

While it is a nice transition which supports a rapidly shifting
context (control content to consume content) - what we lose is
glancability of controls. That is, if the set of controls/actions
associated with content is sufficiently complex, the user may forget
what is available while busy consuming content.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40142

19 Mar 2009 - 12:57pm
Jack L. Moffett
2005

James,

From the examples that have been given, I would say that the set of
controls is typically very low complexity. The other trend is that
this pattern is used when the content takes up all of the available
screen space: video, slides, photos, etc.

Best,
Jack

On Mar 19, 2009, at 5:44 AM, James Haliburton wrote:

> While it is a nice transition which supports a rapidly shifting
> context (control content to consume content) - what we lose is
> glancability of controls. That is, if the set of controls/actions
> associated with content is sufficiently complex, the user may forget
> what is available while busy consuming content.

Jack L. Moffett
Senior Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

There is no good design that is not
based on the understanding of people.

- Stefano Marzano
CEO of Philips Design

19 Mar 2009 - 1:23pm
Dan Kalafus
2009

On Thu, Mar 19, 2009 at 5:44 AM, James Haliburton <
james.haliburton at gmail.com> wrote:

> Thanks for all the examples contributed here!
>
> Can anyone see any downsides fading out the controls of your content?
>
>
One problem would be if the user wasn't made aware that the controls were
there in the first place... I've seen this in media players, where the
controls aren't faded out, but rather faded IN on mouse over (if the user
happens to think of doing that).

It'd be interesting to see how that works on actual user tests... is this a
common enough behavior that people will expect it, and think of looking for
it?

22 Mar 2009 - 2:12pm
Dave Cortright
2005

Yahoo Local has a contextual action bar at the bottom of each search result
that only shows up on mouse-over:
http://local.yahoo.com/results?csz=94043&stx=coffee

And of course the new Facebook feed has a close button that only shows up on
mouse-over.

I'm a big fan of this sort of UI, especially when it is exposing contextual
actions on a single item in a list. Rather than repeating the UI on each
item, or having a single toolbar at the top that requires a selection first,
this pattern keeps the UI in close proximity to the item, and only exposes
the UI when needed.

Regarding the issue of discoverability or glancability, I think the controls
should be shown for the first item in the list when there is no item
moused-over. Once the mouse is over an item, it goes away (unless of course
it is the first item).

·Dave

27 Mar 2009 - 2:19pm
Dan Kalafus
2009

Nice example. This one works well since the user is likely to be moving the
mouse over at least one of the results at some point, so discoverability
isn't much of a problem. I'm not sure it'd work as well for a media player
though.

Has anyone seen in user tests whether people understand the implication of
the controls appearing at first, then fading?

-Dan

On Sun, Mar 22, 2009 at 4:12 PM, David Cortright <davecort at gmail.com> wrote:

> Yahoo Local has a contextual action bar at the bottom of each search result
> that only shows up on mouse-over:
> http://local.yahoo.com/results?csz=94043&stx=coffee
>
> And of course the new Facebook feed has a close button that only shows up
> on
> mouse-over.
>
> I'm a big fan of this sort of UI, especially when it is exposing contextual
> actions on a single item in a list. Rather than repeating the UI on each
> item, or having a single toolbar at the top that requires a selection
> first,
> this pattern keeps the UI in close proximity to the item, and only exposes
> the UI when needed.
>
> Regarding the issue of discoverability or glancability, I think the
> controls
> should be shown for the first item in the list when there is no item
> moused-over. Once the mouse is over an item, it goes away (unless of course
> it is the first item).
>
> ·Dave
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

Syndicate content Get the feed