CS2020:   Web Science, Sytems and Design
Instructor Outline Syllabus Projects Links  

Heavy Content Web Sites: Interface

modified from http://ijhcs.open.ac.uk/shneiderman/shneiderman-nf.html

 

Complex problems are often resolved by hierarchical decomposition into manageable units. For example, health problems can be discussed in terms of objects and actions in the human body. The objects are muscular, skeletal, circulatory, and other systems, which in turn might be described by organs, tissues, and cells. Similarly, the actions include digestive processes that can be decomposed into chewing, swallowing, and so on, which in turn might be described by muscle movements or chemical processes.
The Objects/Actions Interface (OAI) Model (Shneiderman, 1997) follows a hierarchical decomposition of objects and actions in the task and interface domains (Figure 7). It can be a helpful guide to website designers in decomposing a complex information problem and fashioning a comprehensible and effective website.

OBJECTS/ACTIONS INTERFACE MODEL
[figure
Figure 7: Objects/Actions Interface Model as a basis for web site design. The hierarchically decomposed task objects and actions become represented by interface objects and actions. Designers must choose the most effective metaphors and create visual representations that allow users to decompose their action plan into a series of detailed clicks or keystrokes.

The task of information seeking is complex, but it can be described by hierarchies of task objects and actions related to the information. Then the designer can represent the task objects and actions with hierarchies of interface objects and actions. For example, a music library might be presented as a set of objects such as collections, which have shelves, and then songs. Users may perform actions such as entering a collection, searching the index to a shelf, and reading the score for a song. The interface for the music library could have hierarchies of menus or metaphorical graphical objects accompanied by graphical representations of the actions, such as a magnifying glass for a search. Briefly, the Objects/Actions Interface Model encourages designers of websites to focus on four components:

  1. Task
    • Structured information objects (e.g. hierarchies, networks)
    • Information actions (e.g. searching, linking)
  2. Interface
    • Metaphors for information objects (e.g. bookshelf, encyclopedia)
    • Handles (affordances) for actions (e.g. querying, zooming)
The boundaries are not always clear, but this decomposition into components may be helpful in organizing and evaluating websites. This section describes the OAI Model, gives examples of decompositions of object and actions, and presents a case study with the Library of Congress.

Design of task objects and actions

Information seekers pursue objects relevant to their tasks and apply task action steps to achieve their intention. While many would describe a book as a sequence of chapters and a library as a hierarchy organized by the Dewey Decimal System, books also have book jackets, tables of contents, indexes, etc. and libraries have magazines, videotapes, special collections, manuscripts, etc. It would be still harder to characterize the structure of university catalogs, corporate annual reports, photo archives, or newspapers because they have still less standardized structures and more diverse access paths.

In planning a website to present complex information structures, it helps to have a clear definition of the atomic objects and then the aggregates. Atoms can be a birthdate, name, job title, biography, resume, or technical report. With image data, an atomic object might be a color swatch, icon, corporate logo, portrait photo, or music video.

Information atoms can be combined in many ways to form aggregates such as a page in a newspaper, a city guidebook, or an annotated musical score. Clear definitions are helpful to coordinate among designers and inform users about the intended levels of abstraction within each project. Information aggregates are further combined into collections and libraries that form the universe of concern relevant to a given set of tasks. Strategies for aggregating information are numerous. Here is a starting list of possibilities:

  1. Short unstructured lists. City guide highlights, organizational divisions, current projects (and this list).
  2. Linear structures. Calendar of events, alphabetic list, human body slice images from head to toe, orbital swath.
  3. Arrays or tables. Departure city-arrival city-departure date
  4. Hierarchies, trees
    • Continent - country - city (e.g. Africa, Nigeria, Lagos).
    • Concepts (e.g. sciences - physics - semiconductors - gallium arsenide).
  5. Multi-trees, faceted retrieval. Photos indexed by date, photographer, location, topic, film type.
  6. Networks. Journal citations, genealogies, World Wide Web.

These aggregates can be used to describe structured information objects, such as an encyclopedia, which is usually seen as a linear alphabetical list of articles, with a linear index of terms pointing to pages. Articles may have a hierarchical structure of sections and subsections, and cross references among articles create a network.

Some information objects, such as a book table of contents, have a dual role since they may be read to understand the topic itself or browsed to gain access to a chapter. In the latter role they represent the actions for navigation in a book.

The information actions enable users to follow paths through the information. Most information resources can be scanned linearly from start to finish, but their size often dictates the need for shortcuts to relevant information. Atomic information actions include:

  • Looking for Hemingway's name in an alphabetical list
  • Scanning a list of scientific article titles
  • Reading a paragraph
  • Following a reference link

Aggregate information actions are composed of atomic actions:

  • Browsing an almanac table of contents, jumping to a chapter on sports and scanning for skiing topics
  • Locating a scientific term in an alphabetic index and reading articles containing the term
  • Using a keyword to search a catalog to gain a list of candidate book titles
  • Following cross reference from one legal precedent to another, until no new relevant precedents appear
  • Scanning a music catalog to locate classical symphonies by 18th century French composers
Some actions are learned from youthful experiences with books or libraries, others are trained skills such as searching for legal precedents or scientific articles. These skills are independent of computer implementation, acquired through meaningful learning, demonstrated with examples, and durable in memory.

Design of interface objects and actions

Since many users and designers have experience with information objects and actions on paper and other traditional media, designing an appropriate computer interface can be a challenge. Physical attributes such as the length of a book or size of a map, that vanish when the information is concealed behind a screen, need to be made apparent for successful use. So website designers have the burden of representing the desired attributes of traditional media, but also the opportunity of applying the dynamic power of the computer to support the desired information actions. Successful designers can offer users compelling services that go well beyond traditional media, such as multiple indexes, fast string search, history keeping, comparison, and extraction.

Metaphors for interface objects

The metaphoric representation of traditional physical media is a natural starting point: electronic books may have covers, jackets, page turning, bookmarks, position indicators, etc. and electronic libraries may show varied size and color of books on shelves (Pejtersen, 1989). These may be useful starting points, but greater benefits will emerge as website designers find newer metaphors and handles for showing larger information spaces and powerful actions.

Information hierarchies are the most frequently represented metaphor with at least these examples:

  1. File cabinets, folders, and documents
  2. Books with chapters
  3. Encyclopedia with articles
  4. Television with channels
  5. Shopping mall with stores
  6. Museum with exhibits

Richer environments include libraries with doors, help desk, rooms, collections, and shelves, and the City of Knowledge with gates, streets, buildings, and landmarks. Of course the information superhighway is often presented as a metaphor, but rarely developed as a visual search environment. Metaphors can be appealing, but designers should exercise caution to ensure their utility in presenting high-level concepts, suitability for expressing middle level objects, and efficacy in suggesting pixel-level details (Cotton and Oliver, 1993; McAdams, 1996; Weinman, 1996).

Design of computerized metaphors extends to support tools for the information seeker. Some systems provide maps of information spaces or at least some kind of overview to allow users to grasp the relative size of components and discover what is not in the database. History stacks, bookmarks, help desks, and guides offering tours are common support tools in information environments. Communications tools can be included to allow users to send extracts, ask for assistance from experts, or report findings to colleagues.

Handles for interface actions

The central challenge for many users is to formulate an appropriate action plan based on the visible action handles such as the labels, icons, buttons, or image regions. In an early study of a library catalog command interface, we found that none of the subjects could formulate the six step plan to find all the books by the author of the novel Looking for Mr. Goodbar. A Web interface might provide visible action handles to suggest which plans were possible and how to construct them.

Intermediate-level plans such as author, title, or subject searches are made explicit with buttons, but other plans such as searching by date, language, or publisher could also be made more visible by a form fill-in interface or by widgets attached to the display of a catalog record.
Lower-level actions can be shown as a turned page corner to indicate next page operation, a highlighted term for a link, a magnifying glass to zoom in or open an outline. Other action handles might be a pencil to indicate annotation, a funnel to show sorting, a coal-car to indicate data mining, or filters to show progressive query refinement. Sometimes the action handle is merely a pull-down menu item or a dialog box offering rich possibilities. The ensemble of handles should allow users to compose their action plan conveniently from a series of clicks and keystrokes.

Case study with the Library of Congress

The OAI Model is still in need of refinement plus validation, but it may already be a useful guide for website designers and evaluators. It offers a way to decompose the many concerns that arise and provides a framework for structured design processes and eventually software tools. It is not a predictive model, but a guide to designers about how to break a large problem into many smaller ones and an aid in recognizing appropriate features to include in a website. In my experience, designers are most likely to focus on the task or interface objects, and the OAI Model has been helpful in bringing out the issues of permissible task actions and visible representations of interface actions.

In the early 1990s, we worked with U. S. Library of Congress staff to develop a touchscreen catalog interface to replace the difficult-to-learn command-line interface. In this project, the design was relatively simple; the task objects were the set of catalog items that contained fields about each item. The task actions were to search the catalog (by author, title, subject, and catalog number), browse the result list, and view detailed catalog items. The interface objects were a search form (with instructions and a single data entry field), result lists, brief catalog items, and detailed catalog items. The interface actions were represented by buttons to select the type of search, to scroll the result lists, and to expand a brief catalog entry into a detailed catalog entry. Additional actions, also represented by buttons, were to start a new search, get help, print, and exit. Even in this simple case, explicit attention to these four domains helped us to simplify the design.

In the more ambitious case of the Library of Congress website, many potential task objects and actions were identified; more than 150 items were proposed for inclusion on the homepage. The policy and many design decisions were made by a participative process involving the Librarian of Congress, an 18-person Policy Committee, four graphic designers, and staff from many divisions. The current design (Figure 12) for the hierarchy of task objects is rich, including the catalog, exhibits, copyright information, Global Legal Information, the THOMAS database of bills before Congress, and the vast American Memory resources, but it does not include the books. The exclusion of books is a surprise to many users, but copyright is usually held by the publishers and there is no plan to make the full text of the books available. Conveying the absence of expected objects or actions is also a design challenge.

For brevity we focus on the American Memory component. It will contain 200 collections whose items may be searchable documents, scanned page images, and digitized photographs, videos, sound, or other media. A collection also has a record that contains its title, dates of coverage, ownership, keywords, etc. Each item may have a name, number, keywords, description. etc. The task actions are rich and controversial. They begin with the actions to browse a list of the collection titles, and search within a collection, and retrieve an item for viewing. However, searching across all collections is difficult to support and is not currently available. Early analysis revealed that collection records might not have dates or geographic references, thereby limiting the ways that the collection list could be ordered and presented. Similarly, at the next level down, the item records may not contain the information to allow searching by date or photographer name, and restricting search to specific fields is not always feasible.

Continuing within the American Memory component, the interface objects and actions were presented explicitly on the homepage. Since many users seek specific types of objects, the primary ones were listed explicitly and made selectable: Prints & Photos, Documents, Motion Pictures, and Sound Recordings. The interface actions were stated simply and are selectable: Search, Browse, and Learn (about using the collections for educational purposes). Within each of the these objects and actions, there were further decompositions based on what was possible and what a detailed needs analysis had revealed as important.

At the lowest level of interface objects were the images and descriptive text fields. At the lowest level of interface actions were the navigation, home page, and feedback buttons.

The modest nature of the OAI Model means that it can lead to varying outcomes, but it would be unreasonable to assume that there is one best organization or decomposition of a website. In dealing with complex resources and services, it offers designers a way to think about solving their problems..

© Lynne Grewe