• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 3. Deconstructing the Problem: P... > Deconstructing an Interface: Designi...

Deconstructing an Interface: Designing from the Conceptual to the Concrete

As shown in Figure 3.2, the user interface of any interactive product, be it hardware or software, can be modeled using three tiers and nine layers. With the layers arranged from foundational to supporting, the model not only captures the components of the interface, but also offers a useful method for understanding and designing an interactive product.

Figure 3.2. This diagram aids interface design by deconstructing an experience into a series of nine interrelated layers that can be analyzed one at a time.

Tier 1: Structure

The Structure tier comprises the three lowest levels of the user interface: the conceptual model, the structural model, and the organizational model. Similar to the movie model, these three layers are not expressed in a single, concrete form that can be readily identified or touched. Rather, they represent the relationship between the interface and the world at large as well as the relationships between the pages, content, and information in the application. Although a typical user would rarely describe any of these layers in a direct manner, they form the conceptual basis of the entire experience and, as a result, are the most influential aspects of the design.

Layer 1: The Conceptual Model

The conceptual model is the most fundamental aspect of the interface, describing the relationship between the interface and the larger world. The purpose of the conceptual model is to place the interface within a frame of reference that draws on the user’s familiarity with a physical object or experience. For example, a newspaper serves as the conceptual model of most Web portals, such as myYahoo! or MSN. Although the customization and real-time updating of these applications clearly exceeds the experience of a printed newspaper, the physical object of a newspaper nonetheless forms their conceptual basis. By relating the application to a real-world experience, users can understand the basic operation of the product and accurately predict its core functionality.

Layer 2: The Structural Model

The structural model is concerned with the basic components of the interface and how those components work together to support complex operations. Unlike the conceptual model, the structural model is dependent on the specific technical environment supporting the interface. For example, the structural elements of a desktop application include windows, files, dialog boxes, and floating palettes, whereas a Web application is almost entirely constructed of pages and forms. For a Web application, the structural model also describes the relationship between connected groups of pages and forms. For example, a travel site’s structural model describes the multistep operation users follow to make an airline reservation. This is also referred to as the task flow.

Layer 3: Organizational Model

The organizational model describes how an application’s content and functionality are ordered. Also known as the information architecture, the organizational model addresses questions such as whether the content and functionality are going to be organized hierarchically and, if so, what the exact categories and subcategories are going to be.

Tier 2: Behavior

The three middle layers of the model form the Behavior tier. These layers describe the interface’s interactive qualities as opposed to its conceptual framework or visual presentation. Solving problems in the Behavior tier requires the designer to envision and communicate both the user’s actions and the application’s reaction as they unfold over time.

Layer 4: Viewing and Navigation

The Viewing and Navigation layer contains the behaviors that enable users to navigate between locations and change the presentation of their data. The distinguishing characteristic of these operations is that they result in a temporary change of state rather than a permanent change to stored information. Sorting, searching, and navigation are all examples.

Layer 5: Editing and Manipulation

The Editing and Manipulation layer describes the behaviors that allow users to make permanent changes to their stored information. In a stock portfolio application, for example, the operations for recording transactions, importing accounts, and updating values would all be contained in the Editing and Manipulation layer. These behaviors have three defining traits: they result in permanent, stored changes; they require an implicit or explicit submit action; and they typically require data validation.

Layer 6: User Assistance

As the final layer of the Behavior tier, the User Assistance layer contains the elements needed to inform users of the application’s activity and status as well as the components dedicated to user education. In addition to online help, the User Assistance layer includes a variety of different alerts and status mechanisms.

Tier 3: Presentation

The three layers of the Presentation tier describe the interface’s visual and textual expression. In contrast to the more abstract nature of the Structure and Behavior tiers, the Presentation tier is squarely focused on the concrete and visible expression of the site.

Layer 7: Layout

The Layout layer contains the aspects of the visual design related to placing and ordering the interface’s onscreen elements. In addition to providing an ordered visual flow, the purpose of the Layout layer is to support the Behavior tier by arranging the elements in a manner that helps communicate their behavior and usage.

Layer 8: Style

The purpose of the Style layer is to evoke an emotional reaction from users by establishing a unique visual tone and vocabulary. A challenge, however, is that this must be accomplished in support of established corporate brand values and adherence to Web-wide visual conventions. Although the Style layer is the most visible and conscious aspect of the interface, as the penultimate layer, it has a minimal effect on usability and is readily modified from a technical perspective.

Layer 9: Text

Separate from pure content, the Text layer contains the written, languagebased elements of the interface. Because many of the structural and behavioral elements are represented onscreen as words, the Text layer is tightly intertwined with the lower levels of the interface. For example, the labels used in the Organizational Model layer, the names of the input and navigational controls of the Viewing and Navigation layer, and the alert messages and help text called for by the User Assistance layer are all components of the Text layer.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint