In the United States, one of every five visits to the Google homepage goes to iGoogle. You can put your content on iGoogle and on other pages across the Internet for free by creating and promoting your own gadgets. After iGoogle users add your gadget to the iGoogle page, they will see your content every time they visit Google. But not every gadget has lots of users, and it's very easy for people to delete gadgets they've added. In order to optimize your gadgets so the greatest number of people will try them out and keep using them over time, you should make sure your gadgets are well-designed. This document contains tips for optimizing your gadgets.

What are gadgets?
What do users like? What works?

• Rule 1: Use a standard height.
• Rule 2: Be engaging. Distinguish yourself from feeds.
• Rule 3: Keep your content fresh. Update it at least once a day.
• Rule 4: Be fun. Style counts.
• Rule 5: Be a good citizen.
• Rule 6: Avoid asking for personal information.
• Rule 7: Conserve real-estate

Creating gadgets that require login
How are gadgets discovered, ranked and promoted?
Some Specifics on UI Design and Style

• Width and different sized screens
• Images
• Look and Feel
• Presenting Information
• Setting and Editing Preferences

Gadgets are mini-applications that can be added to the personalized version of the Google homepage (iGoogle), Google Desktop and any page on the web. gadgets that can work on iGoogle, Google Desktop, and other pages across the web are created using our Universal gadgets API, and they're as easy to develop as a webpage.

http://www.google.com/apis/gadgets/index.html
There are a few rules of thumb for creating a good gadget. We've learned these from watching many gadgets come through the pipeline and seeing what kind of adoption they gain from users:

Gadgets have a uniform width but a variable height. Sometimes gadget creators with a lot of content make liberal use of the unlimited vertical real-estate to create a gadget that is much taller than it is wide. These gadgets don't perform well with users because they often create a feeling of inconsistency with the rest of the page. They also limit the amount of above-the-fold screen real-estate that the user can reserve for other things.



If you have a lot of content you want to fit into a gadget, the best thing is to limit the vertical real estate and break the gadget into tabs.



A feed is a great way to syndicate content, but the downside of feeds is that they're uniform and unidirectional. gadgets provide more flexibility and so they make it easier for you to make your content stand out. When creating a gadget, it's important to try to present content in a unique and interesting way. For example, if you are creating a gadget that announces the winners of the Emmy awards, you could create a quiz or a poll for the user leading up the awards, and then, after the awards are announced, notify the user about whether he or she was correct. gadget users love participating with their content rather than simply digesting it.



Some of the best-performing feeds and gadgets on the homepage have titles that end in "of the day": "Word of the day," "Quote of the day," and "Beer of the day," for example. All of these perform well and have lots of users. If you keep your content fresh, users will be much more likely to keep your gadget on their page. gadgets that update in real-time (i.e. every time a user refreshes their page) are becoming more and more popular.



It has become really clear to us that users care about fun. Our best performing feeds when we launched iGoogle were "Word of the day" and "Quote of the day." More recently, the feeds "How-to of the day" and "Oddly enough" were so popular that we placed them on the default homepage for new users. Our best-performing gadget right now is the "Date & Time" gadget, which renders a little Javascript clock that the user can customize into different colors. People love the colors. They also love the attractiveness of the gadget. Style counts.







When you create a gadget, you're entering into a contract with the user. While you're free to do anything with your own gadget, it's generally a good idea to keep the user experience consistent. Don't replace the gadget with a different gadget, suddenly start showing a banner ad, or "trick" the user into clicking through to your site. The content within the gadget is directly associated with your brand and you'll want that branding experience to be positively reinforced.

Remember that you are a part of the user's whole page and your gadget is going to sit next to other gadgets and feeds. When adding a large logo or a background color to your gadget, think not just about the gadget itself but about how the gadget will look in the context of the entire page. (See below for tips on gadget UI Design and Style.)

Many users will delete gadgets that ask for personal information, especially if the gadget is unfamiliar to them. However, in the rare cases where you must do it, here are a few points to consider:

1. Make the gadget work with or without personal information being entered in by the user.
2. Make it clear what the benefits are when personal information is provided.
3. Build trust in your users by branding your gadget to make it look more reputable and by clearly indicating the company and possibly what the intentions are.

Vertical space on the homepage is limited, and your gadget must share it with a number of other gadgets. Nobody likes it when a single gadget hogs unnecessary space on the homepage.

Conserve whitespace wherever possible by decreasing font sizes, paddings, and margins. If the height of your gadget changes due to dynamic content, use our dynamic height library to resize your gadget appropriately.

They’re tricky to build, but if you manage to do it, don’t assume the user has an account. Make sure the gadget shows interesting content even when the user isn’t logged in. Displaying a simple login form to the user is hardly interesting and most users won’t go through the trouble of setting up an account just to see the gadget in action. Instead, add some content and functionality to the gadget to entice logged-out users to keep your gadget. Also, be sure to provide a link that redirects users to create an account if they don’t have one.

A good example to look at is the Google Calendar gadget. A basic calendar is displayed even when the user isn’t logged in. It also provides a link that allows users to setup a calendar account.
Gadgets are available for webpage owners to add to their own webpages or for users to add to their Google homepage or to Google Desktop. Webpage owners can find gadgets in our directory of Gadgets For Your Page, Google users can find gadgets to add to Google in our directory of Gadgets for iGoogle or in our directory of Gadgets for Google Desktop, and anyone can discover new gadgets they like on pages across the web.

Gadget directories:
http://www.google.com/ig/directory?synd=open
http://www.google.com/ig/directory
http://desktop.google.com/plugins/


Since the gadget ranking in our directories depends largely on the number of users for your gadget, and since the number of webpage owners who use your gadget directly influences the number of people who see your gadget, it's in your best interest to make your gadget as useful and interesting as possible so that lots of people will use it. Here are some things you can do to improve the adoption of your gadget:

• Create an attractive thumbnail. When you submit your gadget, you will submit a thumbnail to be shown in the directory. This is the user's first impression of the module. Note: If you don't submit a thumbnail or a screenshot along with your gadget, your gadget is automatically demoted. These images are important.
• Use a descriptive title. It's best to use a short title that effectively communicates what the gadget does – for example, "Baseball scores," "World Cup," "Horoscopes," "Todo list," "Bible verse of the day."
• Submit your gadget to be included in our third-party directories. Google Modules is one example of such a directory.
• Promote your gadget on your own site. We provide an easy-to-use Add to Google button that will subscribe users to your gadget. You can use the button we provide or design your own. Encouraging your active users to subscribe to your content is a good way to keep them coming back to your site. Here's what the button looks like:
  
  http://www.google.com/webmasters/add.html
  
  

Screens can vary a lot in width, from 800x600 to 1400x1050 and up. Therefore it's important that your gadget scale from (at least) 250px to 500px. You can test various widths using Firefox, with the Web Developer extension (​http://chrispederick.com/work/webdeveloper/​, Resize menu).

• UI gadgets like input boxes and tables should not be fixed width. They should be width=100% so that they look good in different resolutions and window sizes.
• Centering elements often looks better on higher resolutions so there isn't excessive whitespace on the right.
• Using tables safely keeps things all on one line while allowing elements to resize when the browser resizes.

Images are slow to load but may convey more information than text. Consider carefully whether they are really needed.

• Images may convey more information than text and reduce screen space.
• Set the width and height attributes of an image ahead of time so the gadget does not "pop" when an image is done loading.
• An "icon" on the left of a welcome mode of a gadget points out to the user that they must enter information into the gadget.

Fonts

• If you're designing your gadget for iGoogle, use arial font and a font size to match the iGoogle page.
• #008000 for green links to things like news sources, #7777cc for unimportant/deemphasized links, default link colors for anything else.

Other

• On Google, links go places and buttons do things.
• Use a standard amount of white space between buttons and input boxes.
• Avoid intrusive ads and use the gadget title URL link to your page instead.

Many times there’s more information than there is space within a gadget that you want to display. There are typically two different UI models to achieve this. The first is to simply open up a new window that takes the user to a different page. The second is to dynamically generate and display the information within the gadget itself. Both have their pros and cons.

What’s the right answer? Surprisingly, the answer is both. We’ve observed that both UI models actually perform fairly well. For example, the Wikipedia gadget is very highly ranked in the content directory. It’s a basic search gadget where users enter in any search query, click ‘Search’, and a new window opens up with the results. On the other hand, Google Map Search is also a top-rated gadget. Instead of popping up a new window, it displays all the information directly within the gadget.

Try experimenting with both and you’ll soon figure out which model makes the most sense for your gadgets.

If your gadget requires preferences, use a "Welcome mode" and include sample values for them. Using an icon on the left side really helps.


Customizable user preferences (other than the first-time setup) should be put into the blue edit mode, not on the gadget itself. Also, consider having options to hide or show certain information in the gadget so user can see exactly what they want and minimize screen space.