Our book:
Defensive Design for the Web: How To Improve Error Messages, Help, Forms, and Other Crisis Points
Available Now ($16.99)
Most Popular (last 15 days)
Looking for old posts?
37signals Mailing List
37signals Services
Syndicate
Web Interface Design Tip: The Yellow Fade Technique
19 Feb 2004 by Matthew Linderman
“Because something is happening here / But you don’t know what it is / Do you, Mister Jones?” - Bob Dylan
A lot of web sites & applications make you feel a bit like Mr. Jones.
That’s why we’ve pioneered the Yellow Fade Technique (YFT) in
Basecamp. It’s a nifty way to subtly spotlight a recently changed area on a page.
Why does this matter? When you edit or move something on a web page it usually forces a reload of that page. The problem is once the page reloads it’s often difficult to spot and confirm the change (especially if the change occurred somewhere in the middle of the page). The YFT uses JavaScript to create a yellow highlight that briefly spotlights the change when the page reloads. Then, in a second or two, the highlight fades and the page reverts to its normal state. The YFT makes it super easy to spot edits/changes yet its unobtrusive nature lets people quickly get back to work once a modification is confirmed.
Let’s take a look at an example.
Let’s say I want to change the name of the second post on this Basecamp page from “CEO Photo” to “Jim Messier Photo.”
First off, I’ll go to the “Edit Post” page and change the post’s title.
Once I save the change, the original page then reloads with the YFT (the yellow highlights the post I just changed). In the subsequent images, you can see how the yellow slowly fades out so it doesn’t dominate the layout forever.
Voila, the page is back to normal within seconds.
To see it in action, sign up for Basecamp (you can try it for free). There, it’s especially useful for page with lots of small items, like to-do lists and milestone pages.
29 comments so far (Post a Comment)
19 Feb 2004 | Mark Fusco said...
Too bad YFT won't work on that book cover.
19 Feb 2004 | Don Schenck said...
When I was beta testing Basecamp, I noticed the Yellow Fade Technique.
It's very effective. Kudos, major kudos.
19 Feb 2004 | jazer said...
Wow.
19 Feb 2004 | Matt said...
I know it seems like a little thing, but that really is one of my favorite touches in Basecamp.
19 Feb 2004 | Charbel said...
I'm in love with the fade technique...It works great and makes sense...I even think you should prolong the fade period by a 3 or so more seconds..
19 Feb 2004 | pek said...
Enough about the fucking book cover! (although Mark, your comment did make me laugh) By the book and tear the cover off - geez.
19 Feb 2004 | Jon Gales said...
I edited things twice just to see that effect more. Amazing. Good work!
19 Feb 2004 | huphtur said...
why use javascript? this same effect could have been accomplished with css and a background gif.
19 Feb 2004 | dalager said...
Is there a YFT patent with your names on it,
or did AT&T take that in the 70's?
;-)
19 Feb 2004 | RS said...
why use javascript? this same effect could have been accomplished with css and a background gif.
A couple lines of Javascript load quicker than an animated GIF and allow us to make a very, very smooth fade.
19 Feb 2004 | Mark Fusco said...
pek -
Yes, I agree. If this were an auditory blog, you would have surely heard the "dry humor" tone in my voice as I spoke that in after the fact jest.
20 Feb 2004 | Mike P. said...
very, very smooth fade.
That it is, and a nice touch!
The 'completed' tasks moving to the bottom of a list are cool too...
20 Feb 2004 | Jon said...
I suppose it's pretty nifty, who's so braindead that they can't remember what they just edited?
20 Feb 2004 | Garrett Dimon said...
I had implemented something similar for anchors & FAQ pages that highlighted the FAQ you were jumping to in order to help users find the FAQ they just jumped to on the page.
I thought I was hot stuff with my little idea. That is, until I saw what Basecamp does with the fade. Kind of makes my little trick look amateurish.
20 Feb 2004 | Brandie said...
You guys continue to amaze me. One innovation after another. I still can't believe 37signals is only 3 people. You'd think you'd be 50 or more by now.
20 Feb 2004 | Croma said...
Anyone may please tell me where I can get the Javascript lines to make this effect?
20 Feb 2004 | Jakob S said...
Excellent idea and it works really well. Patent pending? ;)
I admit it, roughly 10 minutes after seeing the effect in use on Basecamp I went and implemented my own Javascript to do the same. Now I just need a project to hook it up to.
20 Feb 2004 | Hilary Mark Nelson said...
I think Garrett Dimon's application of this idea (hilighting the target section of a page when using a link to a named anchor) may appeal to me more than the purpose for which you designed it. Cool idea, though, however you use it!
Would you be willing to post the source code for this? A tip isn't especially useful if it tells you something is possible, but doesn't show you how to do it. ;-)
Thanks!
20 Feb 2004 | Jason L. said...
This is a pretty cool technique - the shopping cart on omahasteaks.com has been doing it for several years. I always thought it added a nice touch without being distracting and over-the-top.
20 Feb 2004 | Tim said...
First off, i've been using Basecamp (admittedly, the 1-project version), and I love it. However, I never really got the point of the YFT. I saw it in action and immediately understood what it signified (newly updated content)...but I never really viewed that as a problem previous.
In a nutshell (akin to what Jon said)...if i'm updating the name of a post...i'll know that I just updated it. The YFT seems to be saying "Hey, you just updated this." Which is neat, yet (and maybe it is just me) I can't quite grasp the workflow/organizational improvement it provides. I feel like it would be the same if I press "Post This Comment" on this post, i'll see it appear with a yellow fade.
I view the "What's Fresh" link as more helpful in determining what is new/updated content.
20 Feb 2004 | RS said...
I never really got the point of the YFT. I saw it in action and immediately understood what it signified (newly updated content)...but I never really viewed that as a problem previous.
We came up with the YFT when we built the To-do section of Basecamp. If you spend some time editing and moving lists of to-dos (especially long lists, or items in the middle of a page of lists), you may find the effect to be much more valuable.
20 Feb 2004 | Brad Hurley said...
In a nutshell (akin to what Jon said)...if i'm updating the name of a post...i'll know that I just updated it.
Yeah, but isn't the purpose of the yellow fade to highlight the changes for the others on your project team? If I make a change to a post or add a new post or milestone, the changes are highlighted for every other person on my team when they log in and views the site. Right? It draws their attention to whatever I've changed.
It would be nice if the yellow lasted just a bit longer before fading away, as you could practically blink and miss it.
20 Feb 2004 | Trisignia said...
It would be nice if the yellow lasted just a bit longer before fading away, as you could practically blink and miss it.
What if the color faded up from yellow to a light orange and then back down to white? I experience the blink-and-miss-it problem with Basecamp, and this is the solution I've worked out for my own site.
20 Feb 2004 | Matthew Oliphant said...
I never really got the point of the YFT. I saw it in action and immediately understood what it signified (newly updated content)...but I never really viewed that as a problem previous.
It's all how you define "problem." Was it a usability problem that people couldn't remember what change they made just 5 seconds ago? As usual it depends. But the good thing about YFT is that it does seem (I say "seem" since I haven't seen it tested) to be a design solution to help alleviate the mental load on the user. And that's always a good thing (probably:).
I also agree with the concept behind making the YFT last a little longer, especially if the user has to react to the page reloading, then scroll to the point on the page where the changes were made; they might miss it. But I suppose it has to be balanced with not getting in the way (as a distraction) of the next task because some users may not care to follow up on the change with visual confirmation of success or failure.
20 Feb 2004 | JF said...
especially if the user has to react to the page reloading, then scroll to the point on the page where the changes were made
Come on now, you don't think we thought about that? ;) The page (almost) always anchors to the point of change.
20 Feb 2004 | JF said...
The more you watch people use web sites and application interfaces, the more you hear people say "what just happened?"
The YFT helps people know "what just happened."
20 Feb 2004 | Matthew Oliphant said...
Come on now, you don't think we thought about that? ;) The page (almost) always anchors to the point of change.
Fine. Be that way. ;)
In making that statement, part of my mind was on an app I am working on currently. Trying to think through how YFT would work in changing multiple things on a page at the same time with changed objects above and below the fold.
Not that I am going to use YFT (really!), just imagining.
20 Feb 2004 | Tim said...
Yeah, but isn't the purpose of the yellow fade to highlight the changes for the others on your project team?
A ha...I thought that was the case...I wasn't aware that if I were viewing a page (a To Do list, for ex), and someone else on my team changed something...I would be able to see the yellow fade. That makes sense...in our case, there's just three of us, so the chances of us overlapping our basecampe updates are slim, but for larger teams, it makes sense.
But, it's a good/cool/creative solution that doesn't hamper the experience if a dolt like myself doesn't get it off the bat ;)
04 Mar 2004 | lee said...
When is a tip not a tip?
When it's not shared. Any code going?
