Page 341 -

308 Part 4 • the essentials of Design

Widgets and Gadgets—Changing the Desktop Metaphor
Related to dashboards are new, user-designed desktops. Systems designers who develop software
for personal computers should be aware of a trend to encourage users to personalize their desk-
tops with widgets and gadgets. These items are small programs, usually written in JavaScript
and VBScript, that reside either in a sidebar attached to a browser or program or even reside in a
special layer on the desktop itself.
What Yahoo! calls widgets Apple calls dashboard widgets and Google and Microsoft call gad-
gets. No matter what they’re called, widgets can be any type of program that may be useful to any-
one interacting with a computer. Clocks, calculators, bookmark helpers, translators, search engines,
easy access to utilities, quick launch panels, and sticky notes are popular productivity widgets.
Stock tickers, weather reports, and RSS feeds are also useful widgets. Gadgets allow users to
track packages and check schedules. Users can put amusements such as games, music podcasts,
and hobbies on their desktops as well. Widgets and gadgets possess dual, almost paradoxical
natures. They can empower users to take part in the design of their own desktop, and designers
who are observant can learn a lot about what users prefer when they study user-designed desk-
tops. But widgets and gadgets can also distract people from system-supported tasks. Designers
need to work with users to support them in achieving a balance. One possibility is to add user-
specific performance measures as widgets and gadgets that are helpful to decision makers.

Designing a Website
You can borrow some design principles from other displays when you design a website.
Remember, though, that the key word here is site. The first documents displayed on the Internet
using the HTTP protocol were called home pages, but it became apparent very quickly that com-
panies, universities, governments, and people were not going to be displaying just one page. The
term website replaced home page, indicating that the array of pages would have to be organized,
coordinated, designed, developed, and maintained in an orderly process.
Printing is a highly controlled medium, and the analyst has a very good idea of what the
output will look like. GUI and CHUI (character-based user interface) screens are also highly
controlled. The Web, however, is a very uncontrolled environment for output.
Different browsers display images differently, and screen resolution has a large impact on the
look and feel of a website. There is no “standard” resolution anymore. For many years displays
had a 4:3 aspect ratio and common resolutions were 1024 × 768 pixels or 1600 × 1200 pixels.
Now displays are made for HD and have a 16:9 aspect ratio. The issue is further complicated by
the use of handheld devices, such as smartphones and tablets, that are used to browse the Web.
The complexity deepens when you realize that each person may set a browser to use different
fonts and may disable the use of JavaScript, cookies, and other Web programming elements.
Analysts and users face many decisions when designing a website.

General Guidelines for Designing Websites
In addition to the general design elements discussed earlier in this chapter, there are specific
guidelines appropriate for the design of professional-quality websites.

Use professional Tools. Consider using Web editor software such as Adobe Dreamweaver
(for Windows) or Freeway Pro (for Mac OS). These tools are definitely worth the price. You will
be more creative and you’ll get the website finished much faster than if you work directly with
HTML (Hypertext Markup Language).

sTUdy oTher WebsiTes. Look at websites you and other users think are engaging. Analyze
what design elements are being used and see how they are functioning and then try to emulate
what you see by creating prototype pages. (It is not ethical or legal to cut and paste pictures or
code, but you still can learn from the other sites.)
Firefox, which is part of the open source software movement, is a useful browser for studying
other websites. It has a number of extensions created by third-party developers that are available
as free downloads. Run Firefox and click “Tools/Extensions” and “Get More Extensions.” There
are pages of extensions, but one called Web Developer is very useful to designers and Webmasters.
It allows you to outline tables and styles and to view JavaScript and cookies; it provides form
information as well as a wealth of other useful items from which to choose. Palette Grabber is