195 captures
25 Nov 2006 - 14 Nov 2020
About this capture
Download PDF version of this page.
Promote Your Website's Content Using Gadgets
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?Creating gadgets that require login
How are gadgets discovered, ranked and promoted?
Some Specifics on UI Design and Style
What are gadgets?
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.

What do users like? What works?
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:

Rule 1: Use a standard height.
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.

Some users are so tidy that they line up their gadgets of the same vertical height in a row. These users will never adopt a gadget of non-standard height. See detailed section on style for exact pixel suggestions.

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.

This gadget uses the tabs library.

Rule 2: Be engaging. Distinguish yourself from feeds.
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.

Developed by People.com, In-style and EW.com.
Note: This is a mock-up and does not necessarily reflect the outcome of the 2006 Emmy Awards

Rule 3: Keep your content fresh. Update it at least once a day.
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.

This gadget from tarot.com gives a daily update of my horoscope.

Rule 4: Be fun. Style counts.
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.

Rule 5: Be a good citizen.
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.)

Rule 6: Avoid asking for personal information.
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.
Rule 7: Conserve real-estate.
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.

Creating gadgets that require login
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.
How are gadgets discovered, ranked and promoted?
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:

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:
Some Specifics on UI Design and Style
Width and different sized screens
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).
Images are slow to load but may convey more information than text. Consider carefully whether they are really needed.
Look and Feel
Fonts Other
Presenting Information
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.

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

This "welcome mode" gives the user a friendly way to set up the gadget for the first time.

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.
©2011 Google - Home - About Google
Add to the Google homepageAdd to Google DesktopFind gadgetsFAQTerms of serviceGet startedGuidelinesGoogle Gadget Ventures