Dr. Dobb's is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.

Channels ▼

Designing for Web Services

Designing for Web Services

Learn how to design a system that balances performance with user experience

April 2002

Many technology companies, consultants, and academics are hyping the future of Web services. But how will this background transfer of data between applications affect the user experience?

The idea of exchanging data among different computer systems isn't new; our bank statements are the result of information passed among credit card companies, automatic teller machines, merchants, and so on. But before the advent of XML, creating a conduit for information between systems was awkward and time consuming. The use of standards will speed development, making it less expensive to create and distribute new applications and information.

Design shops need to prepare for the challenges that Web services create. Designers should ask: What is the best way to implement design systems instead of a single design? Can we predict how people will respond to new customization and personalization options? Web services demand metadata, but who will provide it, and how? Finally, we need to figure out how to balance system performance with administrative effort.

Although Web services run over all kinds of platforms, it's helpful to focus on site-based examples because they offer the most straightforward comparison point when examining the shift in user-experience issues.

The Dynamic Layout

The fact that Web services let sites dynamically discover and display new information presents some design complexities. In traditional design, you can examine the content and create a specific layout. With Web services, you have to devise rules that let the Web site create the layout. For example, imagine a Web site that aggregates news stories on various subjects. This site could use Web services to constantly search for and find new information publishers, subscribe to their syndicated news feeds, and display the resulting stories. The whole process could be automatic.

Consequently, the user interface must morph to accommodate changing numbers and types of news stories. Flexible design is key.

Today's dynamic sites, such as commercial portals and e-commerce sites, work with known information types like news stories and product descriptions. With the advent of Web services, designers may not know in advance what type of information is available. So how do you design for content that's constantly in flux?

Several well-known techniques will help: liquid tables that use percentages instead of pixels, cascading style sheets, and the dynamic presentation that accompanies a content management system. Beyond this, you may want to design different formatting for two different news stories, using combinations of fields like headline, date, and author to create an algorithmic design. Designing for Web services may mean implementing design systems rather than a single design.


Web services will change more than just layouts. You may build a page that displays different logos, each of which must adhere to its own branding guidelines. Considering all of the possible design fluctuations is a significant part of the design process. You'll need to consider criteria such as:

Information Channels. Try to anticipate all information channels that will use the data. For example, multiple Web sites, mobile phones, and PDAs. This helps determine how granular your information should be—in other words, how finely to break it up. Increasing granularity provides more flexibility, but requires more effort to tag individual pieces of information.

Design Elements. Pay particular attention to each element: typography, color palette, sound palette, the tone of the text, logos, and so on. Determine the possible ways that each element might change, and how you would want it to change. For example, logos may change in size, background color, and placement.

Design System. Prototyping the design system is crucial. Make prototypes that use various incarnations of each design element. Software testers test at the extremes: 0, 1, and 99,999..., you should do the same. For example, how does your design look if an information provider chooses not to include a logo? What if a partnership arrangement requires you to display ten logos?

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.