Kirill Grouchnikov's Blog

Providing visual indication of changed contents in Swing frames

Note that the close button is painted in red and pulsates every 5 seconds, changing its theme from red to yellow and back to red in two seconds.

Comments

• Actually, the pulsating button makes me want to press it. Alloy look and feel has a nice pulsating effect when you hover a button.

  Posted by: gfx on October 20, 2005 at 02:22 AM

• Alloy also pulsates default enabled buttons in focus-owner windows. The same is provided by Substance. I thought about providing a simple non-pulsating red-themed close button (as in XP), but then it's too close to XP :( Have you tried the Web Start demo to see it in action? Go to "Desktop" tab, click on "add" button and click on "Mark changed" in the new internal frame.
  I have started work on other animation effects in Substance, such as gradually going from metallic to color when mouse enters a button / scroll bar / check box / radio, and then providing a slight pulsation as long as the mouse remains inside. There's a long list of animations that can be done (especially on minimizing / restoring / closing internal frames), but i need to see if the software implementation will not take too much CPU time. Overall, the animations are planned to make the UI experience a little smoother.

  Posted by: kirillcool on October 20, 2005 at 02:53 AM

• I like animations in UI but only when they are related to the task I'm doing. Therefore, having a pulsating widget when I mouse over it is fine with me. But seeing a pulsating close button in the corner as I'm still working on the document just annoys me, a bit like Windows applications flashing in the taskbar for not-so-important reasons.

  The case of MacOS X is that when you reach the close button to dispose the window, you can see the document has changed. The pulsating effect is different: as soon as the document changes I am notified. I prefer your idea of just changing the color of the button instead of animating it.

  That said, this is just my opinion. It would be good to conduct usability tests on this particular effect.

  Anyway, thanks for coming up with so many cool ideas :))

  Posted by: gfx on October 20, 2005 at 05:35 AM

• Romain,
  Thinking about it, it is annoying :( However, how about the following - as long as the document is not saved, have close button in red theme with occasional pulsation (say, every 5-10 seconds), changing it color from red to yellow and back to red. Can be a nice midground.

  Posted by: kirillcool on October 20, 2005 at 06:01 AM

• When I hover on the pulsating close button as I start the application in Web Start I get the tooltip "Close [contents not saved]" with "Java Application Window" just below it.
  This happens 50% of the time, but does not happen to other buttons' tooltips

  Posted by: alexlamsl on October 20, 2005 at 06:24 AM

• oh, I'm using Mustang b56 btw

  Posted by: alexlamsl on October 20, 2005 at 06:25 AM

• alexlamsl,
  I've opened a defect on JGoodies Looks since i'm using their code to create drop shadows on popup windows. This happens in WebStart applications when the popup window (either menu or tooltip) overflows the rectangle of the main frame. You are welcome to monitor the above link.

  Posted by: kirillcool on October 20, 2005 at 06:38 AM

• I like the idea of having a way to show that the content is updated, though I don't think it should be tied to the close button.
  Maybe you could use an optional "updated/dirty" icon in the title bar (enabled/disabled)? (!) (*)
  Or overlay the custom window icon by adding a small "updated" marker. That would also show that an update happened if the Frame is minimized. (given that the os "taskbar" supports it)

  A couple of use cases that comes to my mind right now are:
  Manual changes to user entry "forms" that probably have to be persisted by a "save" command.
  Content that is updated due to an external factor (think IM, DB, dynamic web page)

  In case 2 you'd probably want to have a time stamp and what was changed, but that would be application dependent.
  It could be useful to have this property for TabbedPanes also:
  I had a case where I wanted to alert the user of changed content in a tab that didn't have focus in a tabbed pane, and I ended up using a CompoundIcon(updateMark, originalIcon) but in that case image width didn't matter.

  I looked at substance before and I like a lot of things in it., and I enjoy reading your blog, nice work.
  

  Posted by: jorgenrapp on October 20, 2005 at 10:27 AM

• jorgenrapp,
  I think that Mac designers had made a good choice (duh, they are Mac designers) with tying the behaviour to the close button. Additional indication in the close button hints that you should have a second thought before clicking on it. When you go to close the frame / window, the center of your attention is quite far from the application / frame icon, and i wouldn't want to add a confirmation dialog on behalf of the application.
  Overlaying the "update" indication on the frame icon can be done as easily by the application itself (unlike the pulsating effect on the close button). However, i like the idea of extending this behaviour to tabs. It can be accomplished by flashing (once every five seconds) tabs that have been marked as changed. I'll add it in the next few days.

  Posted by: kirillcool on October 21, 2005 at 03:18 AM

• Romain,
  I have changed the pulsating to be every 5 seconds. See the link to the updated video.

  Posted by: kirillcool on October 21, 2005 at 03:40 AM

This work is licensed under a Creative Commons License.