More time and tips for creating gadgets

Posted by E.K. Chung, User Experience Designer

Due to user feedback, we've decided to extend the deadline for the Google Desktop Gadget Contest by two weeks. You now have until Monday, August 14, to submit your gadget. Winners will be announced on September 5. For more details, check out the contest homepage.

And for those of you thinking about the look and feel of your gadget, here are some general tips:

1. Buttons, checkboxes, and tabs should look clickable. Mouseover, mousedown, and disabled states are needed to inform users that the button is active or inactive, and also to confirm interactions.

	normal state	mouseover	mousedown
Checkbox (To-do checkbox)
Button (Remove button)
Tab (Playlist tab)

2. Create selected and unselected states for your tabs. The usual UI design that defines a selected tab are 1) removal of any lines that separate the tab and its content area (a la the Windows tab UI), and 2) matching the color of the selected tab to its content area.

My Music tab is selected Playlist tab is selected


Live tab is selected Matches tab is selected



3. Use a gentle, light color for backgrounds. When selecting backgrounds, avoid intensely bright colors that can cause eyestrain. (These kinds of colors should be used very sparingly in general.)



The left image shows good color usage, while the one on the right is harder to read.



4. Take advantage of a "details" or "expanded" view. If the gadget is info-centric and primarily text-driven, try to offer "details" or "expanded" views, like news and web clips. These views allow you to display a lot of information in an efficient way.

5. Group similar items together. When there are many buttons or links, try to group relevant buttons and links together. This not only makes it easier for people to find the functions they're looking for, but it also helps them remember where things are.

6. Follow conventions. If a button is commonly used in a UI--like the close, remove, and OK buttons in Windows or Google Desktop--try to follow the conventions associated with those buttons and place them accordingly.

For example, a close button is always on the upper right corner.

Details view Options window