datapanik - elegant tools that do useful things for real people
Vancouver, Canada
phone: 604 767 1997

What it is and why it's important

The basics of how and why I do this

What can I do to help?

Annotated examples of my work

Articles and comments on designing for real people

A few design ideas that are up for grabs

Return to the Samples main page

Shopping Centre Directory on CD-ROM (SCD)

The National Research Bureau in Chicago, USA, has been publishing a directory of shopping malls for almost 40 years. This directory contains detailed information about nearly every mall in the USA, including statistics about the malls themselves, contact information for the various administration offices, lists of tenants, etc. In 1996 they began to produce the directory on CD-ROM, through a third party developer using a proprietary template solution.

In 1999, datapanik was invited by Webcom Limited (the printers of the paper edition) to build a new, custom application for NRB. We took the old version of the application, examined it in detail, and then embarked on a thorough process of requirements analysis and cooperative design before building a new application which is still being used to this day.

My partner and I sat down with NRB and discussed how the product was used by their customers and made a list of features, both current and future, which needed to go into the application. We also polled their customers with a hardware questionnaire to get a reliable picture of our target platform.

We drafted a detailed requirements document followed by a period of design and protoyping, involving the clients at all stages. Within ten months we had researched, designed, built, and shipped a complete application which featured innumerable improvements to the previous version.

The first major change we made to the application involved abandoning the single window, highly modal interface. We studied the types of information and interactions that made up the application and defined the basic windows and processes.

This was the design of the screen for the previous version (click on picture for a full sized view).Note that all interactions, dialogues, and data were dispalyed in this one window. Only the Center Details Window is visible in this view.

The revised window layout looked more like this (click on picture for a full sized view). Visible are the Center List and the Center Details Windows.

This new approach allowed for much improved ease of use and gave us greater flexibility to implement more advanced features.

Improved Search Dialogue Boxes

The SCD on CD-ROM is essentially a big database, so a large component of its use consisted of searching. In the previous version, the search function took over the screen, offered limited choices, and looked like this (click on picture for a full sized view).

Our interface opened a dialogue box that looked like this. (This image is full size.)

We offered more flexibility in the choices, including a completely custom range setting, and grouped the options appropriately.

The new interface also allowed the user to search to the entire database (All Centers) or just those visible in the Center List (Visible Centers). This allowed the user to perform a series of searches, narrowing in on the Centers they were looking for.

Early in design we discovered an issue with this. It was easy to forget to set the Apply Search To option and end up with no search results. Typically the user would narrow down the Center List (for example, Centers built after 1970), work with that data, and then do another Year Opened search, forgetting that the list was already only showing only a subset of the data (for example, searching for Centers built before 1960 on top of the previous search).

The basic solution to this problem was quite simple - we needed to remind the user of what they were searching. It seemed that the radio button was not noticed at the crucial moment. I tried a number of changes, including making the text bold, using two action buttons instead of radio buttons, and various other concepts.

In the end, the design that worked best involved placing the indicator right at the user's locus of attention - the action button. I added a small graphic to the button that changed when the Apply Search To option changed. This approach placed a noticeable clue in the one place where we could guarantee the user would be looking. After making this small adjustment, the number of errors declined significantly.

Presentation of Information

One of the greater challenges in designing the interface for this product lay in presenting a lot of information clearly. The original Centre Details Window looked like this.

For many centers, most of the useful information was hidden and comparisons between one center and another were very difficult at best. I spent many hours trying various alignments and arrangements, looking for the most efficient and useful display. In the end our window was smaller, but showed more data.

Notes Interface

The application included a facility for attaching notes to Centers. The original interface was confusing and required many steps to accomplish the three basic tasks - creating, saving, and deleting notes.

Our revised interface had a list of notes on the left and the note contents on the right. Saving was automatic, and all the other functions were clearly labelled with familiar terms.

These are a few of the visible details of this interface. The biggest improvement came in the software's overall design. Tasks were simpler, the interface was more forgiving of errors, and the user was giving more power and flexibility. The reactions from end users was extremely positive and some of NRB's competitors have adopted elements of our design.

Return to the Samples main page


CREDITS: The SCD on CD-ROM was designed and built by datapanik software systems. Joey deVilla was the programmer and technical lead, Adam Smith was the interface designer and project manager. Additional efforts and thanks to M Snider, E Good, S Cameron, P Kelly and the staff at NRB.

Top of
this Page
Home | User Centred Design | Design Philosophy
Services |
Samples| Articles and Resources | Free Ideas