CHI '95 ProceedingsTopIndexes
Design BriefingsTOC

The Interchange(tm) Online Network: Simplifying Information Access

Ron Perkins

Senior Interactive Designer
AT&T Interchange Online Network
25 First St.
Cambridge MA 02141, USA
Tel: 617-252-5231
E-mail: ronperkins@ichange.com

© ACM

Abstract

The AT&T Interchange Online Network is an online service designed to foster a sense of community while making it easy for customers to find information. This briefing describes how numerous design iterations aided by usability testing led to progressive refinement of the interface, specifically the information space layout for navigation. By combining context and content, Interchange allows orientation in a large information space. It becomes possible to understand all that is contained in a specific area at a glance. One design goal was to leverage editorial expertise while simultaneously taking advantage of publishing models extended to a very large online information space. Our overriding objective was to create an elegant, modern, and professional information service that values the time of busy people. Testing showed that even people who had never used an online service successfully navigated the large information space and enjoyed using Interchange. At the time of this writing, Interchange is at a Beta test stage and the design may be modified by the time the briefing is presented.

Keywords:

On-line service, information design, information space, electronic publishing, hypertext, hypermedia, interface design, usability testing, information retrieval.

Introduction

This design briefing describes how Interchange combines logical hierarchical navigation with flexible searching and hypermedia links in an electronic publishing platform that takes advantage of editorial intelligence. Editors, as experts in a specific field know what interests people. The combination of editorial expertise with an easy to navigate information space should provide the best of both worlds.

One of the major problems confronting users of large hypermedia spaces is getting lost in hyperspace. An overview diagram of the information space can help [1]. Work at Bellcore on visualizing information with fisheye views demonstrates the usefulness of the technique but requires a highly structured hypertext [2]. There is some evidence that a hypertext organized both as a hierarchy and a network is more efficient than strictly one or the other [3].

The structure of Interchange, which simulates a hierarchy but is actually a network, incorporates both means of navigation using hyper links. Below is a directory page for the Washington Post(tm) showing a standard navigational structure. The special interest publishers are listed down the left side. Photos and direct links to highlighted stories are in the center. In the Post, under the word ‘Extra' is a index listing with all the major sections of this publisher.

Figure 1. The Directory Page for the Washington Post.

INTERCHANGE OVERVIEW

Interchange is an electronic publishing platform developed by Ziff Communications and now owned by AT&T. Following the publishing model of providing very deep special-interest information that made Ziff-Davis successful in the print medium, the challenge was to build an online service that provided customers with both powerful functionality and ease of use. Also, because it offers publishing partners modern editing tools, hypertext linking, and control of membership revenues, it is the first online service built specifically for a network of special interest publishers.

Running under Microsoft Windows ((tm)), and accessible via modem over telephone lines (soon over the Internet), Interchange allows compound documents that support a wide range of media types including graphics, styled text, and links to any other item in the service. The document architecture is easily extended to support video and sound. Editors can highlight new content daily, hourly, or by the minute. Users can customize information by organizing their own view of the entire network of services. They can create saved searches that function like simple agents to monitor information constantly. Users can save information off-line and connect to update the information on their PC as well as set up automatic dial-up sessions. Finally, they can participate in online discussions about the topics in each special interest area and talk to editors: this is where the community is formed around shared information. As a next generation online service designed specifically to take advantage of the Windows environment, the interface is notable for it's simplicity. As a result of numerous design iterations the complexity of this full featured online service is presented with an interface that has a browsable navigational structure, minimal menus, and simple search tools. In fact, computer professionals may find the interface unremarkable for the apparent lack of never- before-seen interface conventions. We consider it a success if customers find the information they need and do not consciously notice the interface itself in the process. Major feature innovations include:

Directory View

The top level directory view of Interchange showing the Central Directory Page open is shown below in Figure 2. This directory view serves as a map or overview of the entire network. Multiple services are available down the left side of the window, listed on buttons below Custom. The index to all of the content in Interchange Central is listed to the right of the buttons. Some links to stories are shown on the right, highlighting some important news, in this case fighting in Russia and the sale of our company.

Figure 2. The Beta design for Interchange's Central Directory.

Figure 3. The Beta design for News in Computing.

Opening a News folder maintains the same structure showing the contents list at this new level and more highlighted stories, shown in Figure 3 above.

Competing Design Goals

Customers, editors, development, and management had competing and seemingly incompatible goals. Customers vs. Editors. For Interchange, efficient access to information for service members was an important goal but at the same time editors needed a way to call attention to timely and important information. These goals were in direct competition. In early usability testing potential members of the service wanted a large table of contents to browse, and mistook the graphics and some figures for advertising, leading designers to think people want lists of data, data, and more data (see 'using customer profiles' below). But editors needed to present articles, software, and news stories as highlights at many levels in the hierarchy of contents, and many customers value this added benefit of information filtering; it simply saves time to have experts highlight important information.

Development's view: a hierarchical structure with links, powerful searching.

Management's view: a use model that affords rapid viewing of many special interest areas by alternately scanning either directories of information or editorially controlled highlights pages.

The current design reflects the above goals. A clearer picture should emerge when the stages of design are described later on, but first it's helpful to know what the present interface is like.

CURRENT DESIGN

The Interchange interface was designed to allow simple access to a vast body of information using a logical structure that is complemented by highlighted or featured items at each level. This standard structure serves to give a sense of place and allow the serendipitous discovery of information of interest. Three aids to information access make this possible:

  1. Logical Hierarchy including Highlights. The directory window shown in Figures 1 and 2 serves as an interactive map of the entire network of services. Selecting another special interest directory button on the left changes the directory page on the right. This illusion of a hierarchy seems to work well together with the featured stories, like in a magazine or newspaper, and the featured stories are simply links to items deep in the service. This model of a comprehensive list of contents combined with highlighted items on a directory page is consistently used throughout Interchange. It gives an overview of the structure at each succeeding level while showing important highlights at the same time. The combination of context and content allows orientation in a large information space. It is possible to understand all that is in an area at a glance, literally in seconds. At the same time the added value of editorial judgment to bring specific information to the attention of members at a top level has a number of benefits:
    • Readers get to see the importance of information without having to search for it.
    • There is a sense of place at each level, giving the member a clear and concise sense of "what's going on here" as well as landmarks for navigation
    • Members come across information placed by editors that they wouldn't see in a pure hierarchy.
    • Members have a common base of information adding to a sense of community. This sense of a shared common experience and the opportunity to communicate about it is one of the most important aspects of Interchange.
  2. Unique Hypertext Links. Members of the service can send each other links, precluding a need to describe how to get to a particular point of interest. Links to selected items can take you anywhere deep in the information space. They are the means for editors to give prominence to important information, bringing it to the top of an area. Because links can occur at any level throughout the hierarchy, not only as highlighted items on directories, this network structure allows direct access to related information for any given document or item.
  3. 3. Searching and Saved Searches. An online service can be a vast sea of changing data. Searching was carefully designed to promote easy iterative searching to narrow the member's focus to the desired items without requiring mastery of the complexity of Boolean operations and language syntax. Interchange allows searching at any time; it is not modal. You can navigate to an area of interest, search for a specific topic, and then continue navigating with links to a narrowed list of topics. In addition, editors as well as members can save searches to run automatically, collecting any new information matching the search criteria.

Giving Edit Credit

Information organized by editors using the means described above creates an information space that is more than a mere warehouse of data. When experts bring important information to the forefront, it adds value, creates a shared experience throughout the service, and for some reduces the fear of missing information. In addition to highlighted stories on directories, individual stories can have sidebar links to related information. For example, a new software product announcement could have links to the company's history, past products, financial information, and a demo of the product. A news story about O.J. Simpson could link to photos, constitutional law, and even a news clipping of archival football footage. Without editorial support, navigation would be about as exciting as a library card catalog. Observing people using Interchange in the lab, it became increasingly evident that the mix of editorial effort combined with a simple and attractive interface appealed to both experienced online users and novices.

EVALUATION SUMMARY: ITERATIVE TESTING AND DESIGN

Working with a prototype that was about a year ahead of the development schedule, designers successfully tested the interface with both experienced and inexperienced online users well ahead of any code writing. Simple usability procedures mixed with basic consumer testing acceptance criteria were used to obtain qualitative feedback on the design at very early stages. We were trying to answer 3 basic questions for the service:

Do they get it?
Can they use it?
Do they like it?

Testing the appeal and performance of a service is different than testing a software product or tool. Each time a customer uses a service, they can choose not to come back the next time. Instead of paying once for your product, they decide to pay each time they use your service. Performance was evaluated from task completion data and observation. Acceptability and appeal were measured with consumer testing instruments such as surveys and a line scale. The acceptability scores were measured with line scales to compare the overall appeal of the service with its competitors, a concept statement describing the service, and actual experience performing directed tasks. Our line scale has intervals from Terrible to Excellent and the test respondent marks each rating for their present experience with a service (online users), the concept of Interchange, and experience with the prototype on the same line. Thus each rating is relative, accounting for 'hard graders'.

Ratings Definitions (for Figure 4)

Top Two Categories -- This is an absolute measure of how the service was rated. The respondent rates the prototype in the very good to excellent categories on the rating scale.

Two Way Wins -- This is a relative measure of how the service compares with a written concept statement describing the service, and with a respondent's prior experience. The respondent rates the service higher than the concept and rates the concept higher than their previous experience with online services, or their perception of online services.

Over 130 people, taken from Ziff subscriber lists, were tested with design prototypes over time as shown below. Informal testing of specific design and content issues also contributed to the evaluation of the design.

Figure 4. Ratings during iterative testing sequence.

Here's how our ratings have looked over time in Figure 4 above. Note that the top-two categories scores bounce around, while the line-scale ratings for two-way-wins represent a steady trend as we refined the design. These scores have been normalized to a sample size of 12, which is the typical number of respondents, though individual studies have had as few as 10 and as many as 15 respondents.

Two groups always tested.

Both experienced and inexperienced online users were in every group tested. We were looking for differences in their performance and overall ratings to make sure we didn't build a service that only either experts or novices would like. Twelve people were tested in each formal lab that we ran, acting sort of like a jury: when we got near unanimous opinions or performance on a design issue, the changes to make were very clear.

Using Customer Profiles

When looking at diverse users, we found it helpful to categorize different types of customers according to their motivations, traits, and skills. This helps when observing their behavior during testing. Without them it would be easy to get pulled in many directions by seemingly contradictory opinions and behavior. For example, if you know someone is a 'database diver', they generally will not value editorially formatted information spaces but will look for powerful searching tools.

Some Anecdotes.

Mac Users vs. PC Users. Early designs were tested with both Mac and PC users. A curious difference in attitude appeared in each group that probably speaks more to the architecture of each machine. Mac users were confident and told us what was wrong with our design. PC users felt beaten down and said "I can learn this, just give me more time or let me read the manual!".

What kind of an animal is this? Another way we got a feel for people's perceptions of the service was by asking projective questions like "if this service were a person, what kind of person would it be?" Later, we substituted ‘animal' for person and got amazingly consistent answers, once people got over the "this is a stupid question" feeling. The question seems to reveal the most salient aspect of the service to each respondent and whether it is a positive aspect or not. The service was consistently compared to fast cats: "it's a panther, sleek, powerful, and fast". Another frequent comparison was made to animals that "go and get things for you, like a retriever".

Figure 5. Panther, fast, sleek, and powerful.

Figure 6.Retriever, gets things.

EARLY DESIGNS: NO, IT'S THE INFORMATION.

People come to an information service for the content, not the interface. Often the interaction is what needs design more than the interface. The rest of this briefing shows evolutions of the design and will focus on information design issues, specifically the way the highest levels of the service evolved to a simple hierarchy that balances context with content. To get the right mix of content organization and the contextual cues needed for orientation in a hypermedia space, the design moved through various stages including a matrix, a dual card directory (Early Channel Changers), and hybrid directories of information (Tab Design) up to present. Many issues around the use of a table of contents for each successive section of the service to maintain context (directory) will be explored.

Organizing Information in a Matrix

Early attempts at organization used a matrix with publishing products on one axis and different types of information on another. Picking any two points on the axes would show the intersection, in this case, Computing and News, in the center screen as shown in Figure 7.

Figure 7.Matrix organization with types of information on the left and Magazine products across the top.

For a large information space this approach turned out to be impractical. If you analyze the matrix, it's very similar to a spatial metaphor, like a cityscape; you have to memorize the locations along each axis. You have to present a continuum to impose some ordinal discipline, like a city street grid to make it useful. Without a continuum, the axes are little more than a new list that requires memorization. We could not identify a rational order for information to make the matrix navigable. Another problem was that some of the axes could not be filled in for all combinations of choices, so this idea was dropped even before lab testing.

Fighting for Space on the Front Page

Satisfying the competing design goals previously mentioned would take more than a matrix. Focusing on the use model that management suggested, the next design addressed scanning special interests and deliberately separating navigation and content.

A design using buttons on the left to represent sections of the service (like channel changers on a television) and a card that showed either highlights or a table of contents controlled by a Directory button toggle (on the lower right) is shown in Figure 8. The anticipated use model that lead to this design was that a customer could flip through their special interest areas by scanning either all of the highlights or the contents very rapidly. Testing this design in the lab showed the importance of directory information; nearly everyone got lost trying to navigate between the content and highlights. People had to sidestep highlighted stories to get a view of the content in each section, never developing any orientation. This was confounded by an affordance problem; the channel changers on the left were related to the Directory button on the lower right, but the spatial separation made them look un-related. We had to take the blame for rushing this design into the lab. Fatigued by arguments from an influential member of management, we tried his idea and may not have implemented it well. Here is an unsolicited warning to designers--listen carefully to management design requirements, interpret rather than implement. Back to Interchange, all subsequent designs were focused on varying the balance of content on a highlights page as this seemed the key to navigating.

Figure 8. Early Channel Changers: Highlights page with a separate Directory button (lower right).

Finding the Right Mix: a Balance of Highlights and Context

One of the next designs split special interest areas among folder tabs, and combined highlights with directory lists within each area, as shown in Figure 9. There are two separate issues here: Navigation between services on the network and navigation within a service. Folder tabs were used as a familiar metaphor for separating services.

Figure 9. The Tab interface that was most successful, combining highlights and context.

The other issue was that of navigating within a special interest area or service. The hypothesis was that the first page (highlights page) could serve as mix of hierarchical order and show some story highlights at the same time, to emerge as a hybrid structure. The contents of a section were listed on the left with highlighted stories on the right. This mix began to work very well in the lab, where people began to find information without getting lost. The overall ratings went up at this point (see May 93 in Figure 4).

Usability Testing : "How do you know when you're done?" or "It tested well but we are still not happy"

We all know there are limits to usability testing--you cannot test good design into a product or get users to solve your problems. You can only try to reduce the number of problems customers have. Designers are very good at taking extremely diverse requirements and putting together solutions. One scheme used throughout the design effort for was to remind ourselves of a set of high level objectives, or a mantra. For Interchange, it was ‘EMP', standing for Elegant, Modern, and Professional. The tab folder interface was not.

It was generally felt among members of the design group that there was too much graphical complexity at the top of the window in the design previously described. A tool bar, tabs for categories, window borders, and dividing lines for stories added numerous horizontal lines. Lab respondents remarked that it was ‘busy'.

Figure 10. Fox, clever.

Moving to the Current Design

The cleaner look of the current design (Figure 2.), with Directory buttons down the side and feature buttons at the bottom, drew excitement from a majority of lab respondents. There was no statistically significant measure for this, in terms of ratings, but everyone observing the labs could ‘feel' the difference.

Moving the features and status lines to the bottom gives prominence to the content, which is more important than the interface. There appears to be less interface. A layout grid is used to locate all of the content in the window, and the fonts are quieter. Screens are clean and screen transitions are smooth due to a layout grid. The list of directory buttons showing services on the left are more scannable in vertical list format. Also, there is more room for directory buttons.

SOME OTHER LESSONS LEARNED

These are a mix of other things not really detailed here that we believe we did right and some we did wrong but learned from them just the same:
Start testing before any code is written.
Use a prototype with the same architecture as that planned for the product
Rapidly change the design in early stages. Don't spend time on details to fine tune before testing. It's better to be fast and 80% right than slow and try to be dazzling.
Document your design criteria, changes, and the reasons you changed (you may find the circle completes someday)
Use profiles of customers showing their diversity of values to keep conflicting reports and opinions straight.
Test often with real prospective customers--once a month, if possible, during rapid change periods.
Don't be afraid to make small changes to the interface right in the middle of a test--it's qualitative data anyway.
Get important and influential people to come to watch the testing.
Make testing a fun part of everyone's job; provide good food.
Lastly, and very important; address management proposals for design carefully and present the ideas with an analysis and a better (if possible) design before going into the lab for testing--it will save both time and face.

CONCLUSION

Thanks to constant refinement and iterative testing, the design of Interchange offers efficient access to a large information space. As a result of our taking advantage of editorial intelligence and integrating the mapping of contents with highlights, users found that orientation was less of a problem in hypermedia.

Figure 11.Octopus, has it's tentacles everywhere.

Acknowledgments

The work presented in this briefing reflects the collaborative efforts of many people including Dave Rollert, Marty Gardner, glenn mcdonald, Cynthia Shanahan, Maethee Ratnarathorn, Karen Tichy, Cindy Augat, Andrew Kleppner, Kevin Wells, Andrew Knight, Charles Dao, and Judy Marlowe. Many members of the development team (responsible for architecting and coding the software) participated actively as well. Thanks also to Matt Belge for review comments.

References

1. Neilson, Jakob, Hypertext and Hypermedia, Academic Press, 1993.
2. Furnas, G.W., Generalized Fisheye Views, Proc. ACM CHI 1986, 16-23.
3. Mohageg, Michael F, The Influence of Hypertext Linking Structures on the Efficiency of Information Retrieval, Human Factors, 1992, 34(3), 351-367.