Hang around information architects and user-centered designers for even a brief period of time and two questions will invariably come up:

1. What tools should I use for prototyping?
2. What technologies do I need to know?

Prototyping is one of the most common tasks of information architects, who are called on to produce everything from low-fidelity wireframes to clickable fully-functioning prototypes. The technology question is bandied about by all related fields whose practitioners are trying to keep current with the industry, to learn new skills to help them do their job better, or just to keep up with the Joneses.

In the user-centered design circles, these discussions focus on general Web standards, programming languages, and proprietary software. Visio, Illustrator, and OmniGraffle are mentioned frequently, as are technologies like HTML, XML, and relational databases.

Rarely mentioned, however, are technologies that control the display of information—mainly CSS. Cascading Style Sheets can be one of the most important tools in a user-centered designer’s toolkit when working on rapid prototyping. The combination of valid HTML/XHTML markup and external CSS can be used to rapidly create prototypes, speed up the development process, and easily incorporate more user-centered techniques into the design process.

CSS has been extolled for its ability to separate the underlying structure of the data from its presentation. (For an introduction or more background on CSS, see the recommended articles at the conclusion of this column.) This allows for quicker downloading, better support across multiple platforms and devices, and better control over page display. However, most of the talk of the benefits of CSS has been focused on using it for publicly available and lasting sites.

CSS can be ideal for use by information architects and interaction designers for rapidly developing prototypes for usability testing, review, and analysis.

CSS’s main benefits for prototyping purposes are:

• forcing the development team and business owners to focus on the underlying conceptual model and content before worrying about presentation and design, and
• enabling quick iterations, and the ability to test multiple designs concurrently with little additional effort.

Substance before style

One common complaint among project team members is that clients and business owners focus too much on the visual elements of a design and not enough on the structure. Developing low-fidelity wireframes can help, but even then, the design process has moved on to the page structure without first solidifying the content.

Instead of developing a low-fidelity wireframe or storyboard, a simple XHTML page can be created. By just using basic HTML elements—headings, lists, and paragraphs—the page content and function can be discussed without any unnecessary debate about page layout, design, or color. This focuses the attention on the conceptual model of the underlying site or application, which is critical to the overall user experience and usability. The hierarchy of information can be analyzed as well, to make sure that the most important information is placed at the most prominent place on the page. Creating the content first also makes it easier to see if anything is missing on the page—copyright information, newsletter signup, search box—rather than having to take large steps backwards later on to add these elements.

Once the content is created and approved, these valid XHTML pages can be linked together to create a very low-fidelity functional prototype, which can then be employed for usability testing. Bringing in users at this time, rather than later on in the process, makes it easier to identify problems with the conceptual model, workflow, or text. Testing with a prototype that is just plain black text on a white background may feel a bit strange, but the benefits will be huge.

Form follows structure

After issues are identified and resolved at the conceptual and content level, the real power of CSS can be harnessed. A single style sheet can be referenced from all of the XHTML pages, allowing a design to be quickly applied to the entire site or application. Multiple style sheets can be created to produce different designs that may be similar or quite divergent.

The first round of usability testing will have helped identify problems with the information architecture, page flow, and content. Additional testing at this point can focus on the interface design. When issues are identified, they can be quickly modified with changes only to the main style sheet, allowing for rapid iteration and improvement. The use of standards also assists with creating consistency across the entire project. Often, much time is spent late in the development cycle to ensure that, for example, all form elements display consistently. Using XHTML for data and tying all display to styles will eliminate the time needed to troubleshoot and fix prototypes before or after testing.

One Step Beyond

For those who want to get more advanced with rapid prototype development, data-driven pages and database queries can be simulated by storing data in XML and using XSL/XSLT to apply designs. Since XML can be processed automatically in some browsers, it is possible to create a prototype simulating a database interaction without database or server access. Using XSL/XSLT and CSS to apply the design allows for rapid changes and quicker iterations. Usability testing one day may reveal issues with the display of information in a hierarchal navigation, for example. Minor edits can be done to the XSL and CSS to instantly resolve the issues and create an entirely new prototype for the next day’s testing, without any extensive rush coding.

Wave of the future

Information architects and user-centered designers have a plethora of tools available for prototyping, ranging from whiteboards and pen-and-paper to full-fledged application development packages. The combination of valid XHTML for content structure and CSS for display structure, and also XML/XSL, takes the benefits of a quick-to-develop low-fidelity approach and adds the advantages of a realistic high-fidelity approach. Additionally, as Web standards and accessibility become more recognized in the workplace, these techniques will keep user-centered design current and involved throughout the entire development process.