examples of "HUDs" on the web?

27 Jun 2008 - 10:02am
6 years ago
13 replies
779 reads
Meredith Noble
2010

Hi all,

Does anyone have any examples of web apps that use "HUDs" or "Heads-Up
Displays" to give the user feedback?

I'm talking a really light HUD here - basically a little rectangle that
comes up in the middle of the screen after the user completes an action,
says something like "Your widget has been deleted", and then fades away
after a couple of seconds.

The idea is to create feedback in the user's locus of attention rather
than somewhere else on the page where they might not be looking. (This
is where my app is failing right now - in user testing NO ONE saw my
beautiful yellow bar at the top of the page after they deleted a
widget.)

I recall watching an Autodesk (then Alias) presentation at UPA a few
years back about HUDs in their software... but I'm wondering who's using
them online and if there's anything I can learn from them.

(HUD: http://en.wikipedia.org/wiki/HUD_%28computer_gaming%29)

Thanks,

Meredith

Comments

27 Jun 2008 - 10:36am
Anonymous

The first thing that comes to mind is the 37 Signals "Yellow Fade
Technique" that is used as a visual device to create a temporary
focal point:
http://www.37signals.com/svn/archives/000558.php

-geoff

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

27 Jun 2008 - 12:24pm
Meredith Noble
2010

> The first thing that comes to mind is the 37 Signals "Yellow Fade
> Technique" that is used as a visual device to create a temporary
> focal point:
> http://www.37signals.com/svn/archives/000558.php

Thanks Geoff. That's pretty much what I'm thinking of, except I was
thinking of a box come up that actually obscures the rest of the page
for a moment (well, part of the page).

Google Reader does something similar to the "YFT" whenever a feed has a
new item added. The name of the feed glows yellow for a second.

My question with the BaseCamp example is, what happens when you're
editing an entry that isn't at the top of the page, and the user has to
scroll to see it? The yellow won't even show up.

This seems like a place where a feedback box in the middle of the page,
regardless of whether the modified item is showing on the screen, might
be a better option. (Or maybe the two techniques could be used in tandem
somehow... or YFT could be used when the item is showing, and my
technique could be used when the item is off the page?)

Meredith

27 Jun 2008 - 1:52pm
Matthew Zuckman
2008

Im In Like WIth You (http://iminlikewithyou.com) displays
notifications as users log into the system using AJAX, and there are
several OS-level (e.g., Growl for OS X), and application-level (MS
Office Outlook) that provide similar functions - notifying users that
an event has occurred.

I'm not sure they can be classified as a HUD - my understanding of
the function (certain aircraft, cars, games, etc...) is that HUDS
provide a persistent but presumably non-intrusive display of
information in a location that provides some sort of context to the
user's activity.

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

27 Jun 2008 - 3:42pm
Meredith Noble
2010

> I'm not sure they can be classified as a HUD - my understanding of
> the function (certain aircraft, cars, games, etc...) is that HUDS
> provide a persistent but presumably non-intrusive display of
> information in a location that provides some sort of context to the
> user's activity.

Thanks Matthew. I think they're not HUDs in the traditional sense -- I
think I just got that term from the Alias presentation (don't have
anything better to call it -- am open to suggestions!). I definitely
don't intend these to be persistent.

> Im In Like WIth You (http://iminlikewithyou.com) displays
> notifications as users log into the system using AJAX, and there are
> several OS-level (e.g., Growl for OS X), and application-level (MS
> Office Outlook) that provide similar functions - notifying users that
> an event has occurred.

I just spent a minute on Im In Like With You and that's almost exactly
what I have in mind, but I was intending mine to come up right after you
click "OK" to complete an action. I'll poke around a bit more and see
what else they have.

Much appreciated!

Meredith

27 Jun 2008 - 5:38pm
Michael B. Moore
2008

Have you considered the "Self Healing Transition" from the Yahoo pattern
library?(
http://developer.yahoo.com/ypatterns/pattern.php?pattern=selfhealing)

On Fri, Jun 27, 2008 at 1:42 PM, Meredith Noble <
meredith at usabilitymatters.com> wrote:

> > I'm not sure they can be classified as a HUD - my understanding of
> > the function (certain aircraft, cars, games, etc...) is that HUDS
> > provide a persistent but presumably non-intrusive display of
> > information in a location that provides some sort of context to the
> > user's activity.
>
> Thanks Matthew. I think they're not HUDs in the traditional sense -- I
> think I just got that term from the Alias presentation (don't have
> anything better to call it -- am open to suggestions!). I definitely
> don't intend these to be persistent.
>
> > Im In Like WIth You (http://iminlikewithyou.com) displays
> > notifications as users log into the system using AJAX, and there are
> > several OS-level (e.g., Growl for OS X), and application-level (MS
> > Office Outlook) that provide similar functions - notifying users that
> > an event has occurred.
>
> I just spent a minute on Im In Like With You and that's almost exactly
> what I have in mind, but I was intending mine to come up right after you
> click "OK" to complete an action. I'll poke around a bit more and see
> what else they have.
>
> Much appreciated!
>
> Meredith
> ________________________________________________________________
> 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
>

--
Michael B. Moore • Pure InfoDesign • 415.246.6690 M • www.pureinfodesign.com

27 Jun 2008 - 1:08pm
Kev Burns
2007

Google Maps.

http://maps.google.com

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

27 Jun 2008 - 1:42pm
Katy Jackson
2008

There's a couple of examples at UIPatternFactory under Same-Page
Feedback Messages. (Look at the screen shots toward the bottom
because they also include screen shots of examples of what I'm
imagining you already have.)

http://uipatternfactory.com/p=same-page-feedback-messages/

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

2 Jul 2008 - 4:18pm
Meredith Noble
2010

> Google Maps.
>
> http://maps.google.com

Kev, could you explain where in Google Maps I could see such a thing? I
can't find anything.

Meredith

2 Jul 2008 - 4:36pm
Meredith Noble
2010

> There's a couple of examples at UIPatternFactory under Same-Page
> Feedback Messages. (Look at the screen shots toward the bottom
> because they also include screen shots of examples of what I'm
> imagining you already have.)
>
> http://uipatternfactory.com/p=same-page-feedback-messages/

Wow, thanks Katy -- I've never seen UIPatternFactory before. Great
resource.

It's funny, my original design is almost identical to the Remember the
Milk example
(http://www.flickr.com/photos/jannejanne/2425356286/in/pool-uipatternfac
tory/) and it failed miserably in testing.

I suspect it's because in my design, people start on the page with
checkboxes, then go to a lightbox and provide more details of what they
want to do, then return page to the checkbox page, where they see the
confirmation. In the transition from lightbox to full page, the yellow
confirmation at the top isn't standing out. I wonder if animation (a
fade) would help with this or if it's just not in the user's locus of
attention, period. (Unfortunately they weren't able to add animation to
the prototype that we tested with.)

Meredith

2 Jul 2008 - 4:39pm
Meredith Noble
2010

> Have you considered the "Self Healing Transition" from the Yahoo
pattern
> library?(
> http://developer.yahoo.com/ypatterns/pattern.php?pattern=selfhealing)

Thanks for the suggestion, Michael. It's a fantastic pattern for
removing/deleting, but I need something that will work for any type of
action (e.g. deleting, copying, bolding, emailing).

I wish my app was a little simpler sometimes, but it keeps things
interesting at least :)

Meredith

2 Jul 2008 - 4:49pm
Meredith Noble
2010

Just another nod to Katy -- it turns out the guys at Humanized have
described what I was envisioning in great detail. (I found this via the
UIPatternLibrary.)

In case anyone else is looking for this kind of thing in the future,
instead of HUDs they call them simply "transparent messages". The full
write-up is here:

http://humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_mes
sages/

Unlike my original plan, which was to have the message fade after a
certain elapsed time (say, 2 seconds), theirs actually fade when the
user either moves their mouse or clicks. I'm not sure I'm a huge fan of
this approach, because the user could miss the message entirely if they
happen to be moving their mouse when the message appears. I think I will
try:

- A minimum of 1 second showing, even if the user is currently moving
their mouse (the 1 second is a guess -- will play with the exact
duration)
- After 1 second, showing the message on the screen as long as the user
isn't moving their mouse

I'd love to hear any thoughts about this proposed approach.

Meredith

2 Jul 2008 - 6:09pm
Kev Burns
2007

When I heard you say "HUD", I thought "HUD" (persistent, non-invasive
display of real-time data)
http://en.wikipedia.org/wiki/Head-up_display
http://en.wikipedia.org/wiki/HUD_(computer_gaming)<http://en.wikipedia.org/wiki/HUD_%28computer_gaming%29>

Upon further inspection, I see that you were referring to some sort of alert
message...
I was referring to the zoom, scale and orientation overlay on google maps.

- Kev

- --- ----- ------- ----- --- -
KevBurnsJr at gmail.com
http://kevburnsjr.com
- --- ----- --- -
AIM : KevBurnsJr
Skype : KevBurnsJr
YahooIM : KevBurnsJr
GoogleTalk : KevBurnsJr
- --- ----- ------- ----- --- -

On Wed, Jul 2, 2008 at 2:18 PM, Meredith Noble <
meredith at usabilitymatters.com> wrote:

> > Google Maps.
> >
> > http://maps.google.com
>
> Kev, could you explain where in Google Maps I could see such a thing? I
> can't find anything.
>
> Meredith
>

2 Jul 2008 - 9:01pm
Jared M. Spool
2003

On Jun 27, 2008, at 11:02 AM, Meredith Noble wrote:

> Does anyone have any examples of web apps that use "HUDs" or "Heads-Up
> Displays" to give the user feedback?
>
> I'm talking a really light HUD here - basically a little rectangle
> that
> comes up in the middle of the screen after the user completes an
> action,
> says something like "Your widget has been deleted", and then fades
> away
> after a couple of seconds.

LinkedIn.com uses such a box to verify that you want to accept bulk
invitations.

Netflix uses layered dialogues for all sorts of interactions, such as
showing that you've added something to the queue.

Hope that helps,

Jared

Jared M. Spool
User Interface Engineering
510 Turnpike St., Suite 102, North Andover, MA 01845
e: jspool at uie.com p: +1 978 327 5561
http://uie.com Blog: http://uie.com/brainsparks

Syndicate content Get the feed