- Design Considerations
- Challenges for the User Interface
- Visual Themes
- Transparent Images in the Gadget
- About Accessibility
This chapter is from the book
This chapter is from the book
This chapter is from the book
Challenges for the User Interface
A gadget looks quite simple, but developing a rich and effective gadget takes much more than HTML and JavaScript code. The design of the gadget almost always decides the fate of the gadget. Therefore, while developing gadgets an important factor to keep in mind is size limitations.
So far, we have approached gadget design in a methodical way. If you take care of information first and consider the usage pattern, you can develop a good user interface and ensure the behavior of the gadget. It's time to give boundaries to the gadget. Note that by boundaries, I mean the actual dimensions of all the interfaces of the gadget.
A gadget should not be treated as a web page. For example, the Zodiac Sign Gadget in Figure 3.19 outgrows the width of the Sidebar and has scrollbars. This is not a good design. The size of the gadget window should not be larger than the Sidebar when docked. A larger size is desirable only in the undocked mode.
)
Figure 3.19 A Zodiac Sign Gadget with width greater than that of the Sidebar looks cumbersome in the desktop.
Knowing the standard dimensions to use when designing specific gadget types is essential for you to have success in gadget development.
Standard Dimensions
All the interfaces in a gadget are HTML pages, each with recommended and allowed dimensions. These dimensions are set in the corresponding CSS files. There are different recommended dimensions for the different types of pages you might use. These page types include
- Gadget page when docked
- Undocked gadget
- Settings page
- Flyout page
Each of these types is documented in more detail in the following sections. Table 3.1 summarizes the recommended and maximum dimensions for each page type. These dimensions are recommended by Microsoft. More information on guidelines can be found at http://msdn2.microsoft.com/en-us/library/aa511443.aspx.
Table 3.1. The Maximum Dimensions for Each Page Type
|
Type of Page |
Recommended WidthxHeight |
Maximum WidthxHeight |
Minimum WidthxHeight |
|
Gadget main page when docked |
130 pixelsx150 pixels 5 pixels transparent border (2 left/3 right) |
130x200 |
130 pixelsx57 pixels |
|
Gadget page when undocked (floating) |
250 pixelsx180 pixels |
400 pixelsx400 pixels |
130 pixelsx57 pixels |
|
Settings page |
280 pixelsx180 pixels |
300 pixelsx400 pixels |
Variable |
|
Flyout page |
320 pixelsx240 pixels |
400 pixelsx400 pixels |
Variable |
Gadget Page When Docked
A gadget width when docked should be not more than 130 pixels. The Sidebar width is 150 pixels. The image used for the gadget's background needs to have two pixels on the left and three pixels on the right side for the gadget's drop-shadow effect. These five pixels are also sometimes kept transparent (see Figure 3.20).
)
Figure 3.20 The Currency Gadget docked size is 130 pixels wide and 83 pixels high.
The minimum height for a gadget is 57 pixels, which accommodates the Settings and Drag icons in the upper-right corner. The maximum height for a docked gadget is 200 pixels. Remember that a gadget that utilizes space efficiently is more likely to be used.
The recommended size for a docked gadget is 130×150 pixels.
Undocked Gadget
An undocked gadget size should differ according to the gadget's functionality. If the gadget needs more real estate when undocked to show more information, the size changes accordingly. The maximum size is 400×400 pixels, and the recommended size is 250×180 (see Figure 3.21).
)
Figure 3.21 The undocked size for the Currency Gadget is 254×196 pixels.
Settings Page
The size of the settings page, like the one shown in Figure 3.22, depends on the amount of customization given to the user. For example, a Weather Gadget just needs to have an option for city and for temperature unit. The maximum allowed size for a settings page is 300×400. The recommended size is 278×180.
)
Figure 3.22 The settings page for the Notes Gadget is 278×310.
Flyout Page
The flyout window is meant for extra information and is optional. The maximum size allowed for a flyout page is 400×400 pixels. The recommended size is 320×240.
Other Interface Guidelines
The following is a list of other interface guidelines that should be considered:
- Use Windows styles for text, cursors, icons, and so on. Because gadgets reside within the Vista operating system, the images, text, and icons used should go along with the Vista theme.
- Use a similar style for the gadget's docked and undocked states. The style used for fonts, colors, and sizes should not be completely different between docked and undocked state.
- A gadget should be self-explanatory, with no need for help files. A gadget is a lightweight application and should be simple to understand and use.
- After installation, the gadget should start working. Initial gadget configuration makes a gadget look cumbersome. A gadget should come with working default settings. For example, a Weather Gadget shows the weather of a default city as soon as it is installed. The user is able to customize it later. Asking the user for a configuration as soon the gadget is installed is not the norm and should be avoided.
- An option to resize the gadget in its docked state is absolutely essential in a good design. A gadget that comes with an essential mini version in the docked state becomes an instant favorite of users.
- Flyouts should be used for additional information, but keep in mind that they automatically hide when the focus is in any other window. Flyouts cannot be used to display live data updates.