Features

XVIII.1 January + February 2011
Page: 56
Digital Citation

Beyond interfaces and flows


Authors:
Davide Bolchini, Adam Neddo

“The real voyage of discovery consists not in seeking new landscapes but in having new eyes.”
        —Marcel Proust

Comprehensively modeling large interactive applications for analysis and design is a daunting task. Yet this activity is critical to mastering the organization of the overall information and navigation architecture of a website, for example, and supporting design decisions that can ensure an optimal user experience. Over the past 20 years, several methodologies have been developed to design and engineer interactive systems by modeling the high-level conceptual structure of the information and navigation design. These methods offer structured libraries of concepts that can be used by designers to express design decisions by provisionally abstracting both from implementation details and from interface-level decisions and page-level flows, and focusing instead on the high-level organization of the design from the perspective of the user experience [1].

Just as architects have a clear representation of the innervations of the building in the surrounding urban landscape prior to specifying the structure and flows of the artifacts, so too are interaction designers called to investigate (and somehow reify in a systematic and disciplined way) the high-level yet precise architecture for the user-experience design, long before exploring interface and page flows or wireframes. Only then will sketches, prototypes, and a variety of design manifestations find a place and role in a strategic frame. In mapping design architectures, proper abstractions are needed to master the complexity of very large structures. For example, interaction designers may need to make sense of thousands and thousands of objects and interaction units in large systems without being forced to design thousands of pages and links in a site architecture map. The level of abstraction at which designers can model and operate goes well beyond the level of interaction units, page flows, and traditional site maps.

Visual Aids to Map Architectures

In their seminal book Mapping Websites, Paul Kahn and Krzysztof Lenk illustrate advanced techniques for modeling effective site maps for planning, designing, and analyzing complex Web architectures [2]. They stress the importance of capturing the organic characteristics of the envisioned site architecture to keep the “big picture” of the entire design effort in focus. They showcase strategies to represent the organization of highly structured hypertext content and user navigation pathways as stunning conceptual “maps.” These maps serve as communication and visual analysis tools for designers and stakeholders during the design and analysis process of complex Web applications. The maps are innovatively proposed in a visually compelling format, adapting and refining a visualization technique called isometric projection used extensively in urban planning, architectural design, and landscape mapping since the early 19th century. This style of visualization allows viewers to master the complexity of the design largely by intuition. In their article “Applications of Isometric Projection for Visualizing Web Sites” [3], Kahn, Lenk, and Kaczmarek specify in detail the visual constructs that can be used by designers to represent the organic structure of complex websites as high-quality isometric maps. This approach is unique not only because of their use of isometric projection, but also because of the graphic quality of the maps. The care they exercised with regard to the graphic design of their visualizations transformed traditionally stark technical diagrams into informative and inviting representations of information architecture. More recently, other examples of isometric maps have been made available by user experience architects [4].

Moving Forward

There are two major opportunities to advance this initial line of work, one conceptual and one practical. First, existing techniques for producing isometric maps do not offer a common, reusable, and stable conceptual vocabulary that can be employed in different design contexts. If each map uses its own tactically and contingently defined syntax and semantics, this will limit reproducibility, reuse, and wider adoption. Although there is an intrinsic artistic value to high-quality maps, making them a successful communication tool across multiple applications, domains, and stakeholder communities also depends on establishing a finite, common language that can be ported to different contexts.

Second, to our knowledge, these and other efforts propose maps that can be created only by highly skilled graphic designers or by user experience designers with sufficient knowledge of professional graphic tools (e.g., Adobe Illustrator or InDesign). Although this may, in one sense, be a considered a strength (after all, producing high-quality maps is an art), it is also a constraint that prevents the widespread adoption and reuse of architecture maps as common, disposable, revisable, and evolving conceptual tools for design thinking.

Leveraging a Design Vocabulary for UX Architectures

In our previous work [1], we have meaningfully evolved and extended the results of a long-standing (15-plus years) design tradition in Web and hypermedia conceptual modeling to generate a usable, self-contained, yet very expressive vocabulary to characterize key traits of complex user experiences. Through the Interactive Dialogue Model (IDM), for example, we can sketch three essential architectural components of a “dialogue” between the user and system:

  • (a) Topics (i.e., type of content): For a tourism application of Milan, topics might be “Monument,” “Museum,” “Square,” or “Hotel.” Each topic can be designed in terms of dialogue turns, or dialogue acts, sketching the nature of the content with which the user engages. When we talk about a monument, we talk, for example, about its historical origins, the designer, its current usage, and its significance for the city.
  • (b) Dialogue shifts across topics (i.e., semantic, associative relationships): Users can move from a square to explore the nearby monuments, or from a monument to a hotel, according to a meaningful association, defined at design time. This concept models the nature of purely hypertextual/trail-based user experiences envisioned by Vannevar Bush [5] and more and more common in advanced Web architectures.
  • (c) Groups of topics (i.e., access structures to the topics): Users can browse monuments by historical periods, the “must see” squares, the historical hotels of Milan, or all hotels by price range. These concepts capture the common architectural styles of Web navigation based on various types and styles of access structures (typically, but not only, hierarchical) to reach content topics (orthogonal to b).

Interestingly, these simple notions (fully specified in technical details [1]) provide the essential, high-level elements to make architectural conceptual design decisions for highly complex, information-intensive designs. In fact, users—in any given moment of the dialogic experience with the application—can be in only one of the following three situations: exploring a topic, moving from one topic to the other, or selecting a topic from a group.

Long before any interface specification, these core dialogue components profoundly and organically model the nature of the user experience architecture being envisioned. This simple conceptual grammar allows designers to describe and visualize the user experience of a Web application with ease, saving them from developing new modeling rules on a case-by-case basis. Because it uses only a few simple primitives, IDM is suitable not only for refined analysis of the user experience, but also for brainstorming and conceptual “sketching.” [6]

However, despite the powerful abstractions offered, this and other structured models provide a flat and unevocative graphical representation that has remained quite underdeveloped. Traditional representations of technical diagrams for website engineering, in fact, do not exploit the full potential of the visual techniques for high-quality mapping. Modeling concepts—without extensive technical training—can still be hard to understand and use in the dialogue between designers and other stakeholders.

Integrated Conceptual Tool

Traditional modeling frameworks like IDM are rich in conceptual expressiveness and reusability but aren’t especially valuable in terms of their ability to communicate information to stakeholders in a visually-engaging way. Conversely, although high-quality isometric renderings use an ad-hoc language and are relatively laborious (or inefficient) to create for most designers, they communicate the essence of complex architectures more clearly than traditional, engineering-driven schemas.

Given the complementary nature of traditional modeling approaches and isometric mapping, we have developed an integrated conceptual tool for user experience architecture modeling (called Isometric-IDM, or I-IDM) that combines the visual communication advantages of isometric mapping with the rich expressiveness and nearly universal applicability of the IDM design vocabulary (see Figure 5). Examples of maps produced with our approach can be seen in Figures 1 and 2.

It is worth noting some important emerging properties (conceptual, cognitive, and visual) of the resulting user experience architecture maps.

Organic design as wholeness and purposeful movement. I-IDM maps convey a sense of wholeness of design important to a clear understanding of the user experience. They illustrate the unifying vision that holds the various design features together to form a coherent architecture in which the user experience may take place. This property is fundamental to the transformation of a “complex set of design elements into an integral whole” [7]. The underlying carpet, for example, collects the objects of the design schema and serves as the stage on which the user experience unfolds. Topics are bound to the application’s root with access structures and linked to other topics with lateral (semantic) navigation. This representation of the design indicates a sense of movement not between pages or interfaces but across higher-level components of the experience (topics and access structures), mastering the complexity of the design with fewer elements. Two types of movements are represented: hierarchical paths (following access structures) and hypertextual trails (following orthogonal, transversal links across the content). Access pathways run from the application root (e.g., home or starting unit) to groups of topics that lead to content topic areas. Specific navigation patterns structure content dialogue acts within topics (see Figure 3).

Overall, the organic nature of the design is clearly expressed in these maps. As in living organisms (from organon, Greek for “instrument”), each part is ancillary to the whole, and elements support one another to form coherence and function. To be sure, these important characteristics are already present in other approaches to isometric maps, but here they are expressed through a modeling vocabulary with profound and reusable design semantics.

Experiencing the design space. The holistic aspect of the design is intentionally expressed and very perceivable in these maps. By rendering the architecture in mock 3-D (the isometric view is also referred to as 2.5-D), I-IDM encourages viewer discovery and exploration of the user experience. Because I-IDM shares the spatial properties of the real world, the viewer may better understand the schema as an experience, something to be traversed and interacted with. Each point of user-system dialogue becomes a card for the viewer to contend with while navigating the pathways of the I-IDM map, just as we contend with doors and walls while walking the hallways of a building (see Figures 3 and 4).

Bird’s-eye view of manageable elements. These types of maps give a bird’s-eye view of a conceptual design. Of course, this bird’s-eye view is an illusion (I-IDM schemas contain the same amount of actual information as traditional IDM schemas), but the simulated overhead 3-D viewing angle of the isometric map radically changes the viewer’s understanding of the schema. In these maps, high-complexity designs pre-attentively appear as made of fewer, more manageable elements. We achieved this appearance of simplicity by leveraging the unique properties of isometric projection and—inspired by Kahn, Lenk, and Kaczmarek—through careful attention to the visual design of the isometric objects. Furthermore, by including a third dimension in the rendering, even very complicated IDM designs don’t appear cluttered, as they might if rendered traditionally. Topics, the core of an IDM schema, are represented as large isometric carpets populated by content dialogue act cards. They have a visual weight that serves to make the other elements of the schema appear supplementary, contributing to an overall sense of simplicity. To prevent crowding, we designed semantic relationships and transition acts to take advantage of the vertical dimension (the “height” of the map), freeing the map floor for topics, groups of topics, and access paths.

Gracefully shifting from in-the-large to in-the-small-design. These types of maps also support analysis of the user experience at any level of granularity. Multitiered analysis of this kind is particularly well suited to very large printed maps or maps viewed on large format zoomable displays. Taken as a whole, an I-IDM map illustrates the high-level aspects of the user experience: the types of information available and the relationships among those types. By narrowing focus and studying the map at the level of individual dialogue acts, designers and stakeholders may analyze the precise nature of the envisioned user-system interaction and discuss design decisions in dialogue with the requirements: Are we providing adequate content to support the key scenarios? Are the access structures comprehensive, appropriate, and logical? What might be interesting connections across content that might provide an interesting and rich user experience?

Accessibility to non-designer stakeholders. Because these maps intuitively appear to be less dense than they actually are, I-IDM artifacts seem particularly well suited to communicating otherwise complicated design ideas to stakeholders. Non-designer stakeholders may feel frustrated or overwhelmed by the unfamiliar symbols of traditional technical schemas, in which elements are given relatively equal visual weight, or, worse, they may derive inaccurate meaning from the schema altogether. The proposed maps, on the other hand, because they appear to be relatively simple (although design is inherently complex), can be processed systematically by stakeholders, beginning with the core elements (overall view and architecture) and drilling down to the details (micro-interaction among elements). In general, these maps are an example of design representations that invite the reader to explore the design complexity largely by intuition, with technical explanation as needed to master the details. With respect to the existing isometric representations of user experience architectures, I-IDM has the potential not only to be comprehensible by non-designer stakeholders (with some basic explanation), but it already offers a structured approach towards lower-level design and structured implementation.

Opening Access to User Experience Maps

Can any user experience designer (regardless expertise level) start producing these maps, easily and quickly? The answer is yes.

Lowering the threshold to access, produce, and proficiently use these maps enables more people to approach design from an organic and architectural perspective, and with greater efficiency.

For this reason, we have created and made a full set of I-IDM graphical elements available online in a format that is easy to use, re-use, improve upon, and share: PowerPoint files. The mapping library in PowerPoint, available at http://mypage.iu.edu/~dbolchin/UX_mapping.htm/, provides an easy way for designers to quickly produce their own high-quality user experience architecture maps by leveraging the visual communication potential of isometric projection and the expressiveness of IDM (see Box). Although a proper application of IDM may be difficult to master, designers can quickly try out and represent their architectural design ideas in a rigorous yet readable format in just a few minutes, by simply copying and pasting the available elements of the library and of the editable examples. We encourage all UX designers and scholars to download, re-use, and share our UX Architecture Mapping toolkit, licensed under Creative Commons.

User experience maps can be effectively used to discuss and engage stakeholders in grounding strategic design decisions across a range of issues, including content, content structures, main navigation paths, critical user scenarios, design and production feasibility, correspondence and adequacy of the design to the identified requirements, and alternative designs. Finally, it is worth noting that as language does not make poetry, so the availability of a user-experience mapping vocabulary does not make good design. The purpose of this conceptual tool is to easily guide, structure, and represent—organically—design ideas for user experience architectures. The architectural decisions made with these maps can directly inform subsequent steps of detailed design, such as page-level design, detailed page flows, interface sketching and prototyping.

Acknowledgments

This research is based upon work partially supported by the NSF Grant #1018054, on designing complex Web-navigation architectures for aural user experiences.

References

1. Bolchini D. and Paolini P. Interaction dialogue model: A design technique for multichannel applications IEEE Trans. on Multimedia 8, 3 (2006), 529–541.

2. Kahn, P. and Lenk, K. Mapping Web Sites. RotonVision, East Sussex, U.K., 2001.

3. Kahn, P., Krzysztof, L. and Kaczmarek, P. Applications of isometric projection for visualizing Web sites. Information Design Journal 10, 3 (2001) 221–228.

4. Eightshape Unify; http://unify.eightshapes.com/what-you-get/deliverable-element-libraries/isometric-experience-maps/

5. Bush, V. As we may think. The Atlantic Monthly 176, 1 (1945), 101–108.

6. Buxton, B. Sketching User Experiences: Getting the Design Right and the Right Design. Morgan Kaufmann, Burlington, MA, 2007.

7. Nelson, H.G. and Stolterman, E. The Design Way–Intentional Change in an Unpredictable World. Educational Technology Publications, Englewood Cliffs, NJ, 2003.

Authors

Davide Bolchini is an assistant professor in human-computer interaction at Indiana University’s School of Informatics in Indianapolis. His research focuses on user experience design models and vocabularies for highly structured Web, hypermedia, and multimodal applications. He has extensively published on Web requirements analysis, conceptual design, and usability evaluation methods. Currently, he is the principal investigator for the NSF-funded project “Navigating the Aural Web” (Grant #1018054).

Adam Neddo is a freelance user experience designer and master’s student in the Human-Computer Interaction Program at the Indiana University School of Informatics in Indianapolis.

Footnotes

DOI: http://doi.acm.org/10.1145/1897239.1897252

Figures

F1Figure 1. An example of an I-IDM map. The UX architecture for a site promoting local breweries in Indiana. Design elements are editable and reusable in PowerPoint at: http://mypage.iu.edu/~dbolchin/UX_mapping.htm/

F2Figure 2. An example of I-IDM map. Reverse modeling of the UX architecture of IMDB.com. Design elements are editable and reusable in PowerPoint at: http://mypage.iu.edu/~dbolchin/UX_mapping.htm/

F3Figure 3. IMDB Architecture. Zoomed view: Topic “Movie” and its access structures.

F4Figure 4. Local breweries. Zoomed view. Semantic relationships across multiple topics.

F5Figure 5. I-IDM reusable vocabulary. IDM blends the conceptual modeling primitives of the Web engineering and design tradition with the power of isometric projection. The stencil is available for re-use in PowerPoint at: http://mypage.iu.edu/~dbolchin/UX_mapping.htm/

Sidebar: Design Practice: Do It Yourself

Let’s assume you are in the early design (or redesign) stage of a complex website, and you have established some initial requirements with the appropriate stakeholders. You have also produced a number of sketches, schemas, syntheses of user research results, and design ideas in various forms. To give a coherent shape to your design idea, and still keep your exploration at the proper level of abstraction, you can produce an initial user experience architecture map. To quickly produce a high-quality user experience architecture map, you can follow these steps:

  1. Download the PowerPoint Isometric-IDM Object Library from http://mypage.iu.edu/~dbolchin/UX_mapping.htm/
  2. Start copying and pasting the design elements from the library to a new PowerPoint slide (resized as needed, we recommend 56” × 40”, the largest size allowed by PowerPoint), and explore the representation possibilities.
  3. Copy and paste elements from the editable examples of maps for your specific architecture. For advanced mastery of IDM vocabulary, read the brief contextual guide to Isometric-IDM included in the Stencil. For more extensive reading and in-depth explanation of IDM, see: http://www.common.unisi.ch/pdf_pub2870/
  4. Edit and organize your mapping elements with clear labels as appropriate.
  5. To maximize visual rendering and portability, save the PowerPoint file and convert it to a high-resolution PDF. Zoom in and make sure all labels of the isometric cards are readable in the PDF. For an example of correctly rendered PDF maps, see: http://mypage.iu.edu/~dbolchin/UX_mapping.htm/
  6. Use your user experience architecture maps in meetings with clients and main stakeholders and with your design team (with maps displayed on large posters or on large visual displays; see Figure 6 for examples) to communicate and discuss strategic decisions about content structures, main navigation paths, critical user scenarios, content-production issues, costs, feasibility, correspondence and adequacy of the design to the identified requirements, and alternative designs.
  7. I-IDM maps can then be used as a conceptual frame to inform lower-level design representations in the form of page sketches, wireframe, or prototypes.

F1-6Figure 6. Using I-IDM architecture maps on large-wall digital displays.

©2011 ACM  1072-5220/11/0100  $10.00

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.

The Digital Library is published by the Association for Computing Machinery. Copyright © 2011 ACM, Inc.

Post Comment


No Comments Found