Multiple Representations

Professional software presents multiple views of the same data at once, reflecting Mirel's observation that expert problem solvers hold structural, functional, and organisational representations of their work and need to move between them fluidly.¹ A 3D application might present a viewport (spatial), a properties panel (parametric), a timeline (temporal), a node graph (procedural), a scene hierarchy (structural), and a render preview (output). All represent the same scene. A video editor does something similar with its timeline, source monitor, program monitor, effects panel, and audio mixer. Such arrangements are standard in professional software.

Keeping these representations consistent is one of the defining challenges of information architecture in complex software. When this works, users move freely between views, editing wherever feels most natural and seeing the result in every view. When it fails, representations fall out of synchronisation, changes disappear between views, and users must manually reconcile information that the software should have kept consistent.

Revealing Different Possibilities

A different view can make a relationship or possible action apparent. Spreadsheet values can be shown as a chart. Connected objects can be shown in a hierarchical list or a graph, depending on the relationships the user needs to examine. Animation keyframes can be shown on a timeline or as curves that reveal changes in speed.

These views help users reason about the work without holding every relationship in their heads. Choose representations for the questions they help users answer, and provide clear routes between them. Context covers how the software responds to the working situation; this chapter covers how different views expose the same underlying material.

Bidirectional Linking

The standard to aim for is bidirectional linking: a change in any representation is immediately reflected in all others.² Select an object in the viewport and the properties panel updates. Change a value in the properties panel and the viewport updates. Drag a keyframe on the timeline and the viewport shows the new pose. See Direct Manipulation for the underlying theory: closing the gulf of evaluation means the result is visible without translation.

The principle is straightforward, but maintaining it becomes difficult as representations multiply. The common failures are predictable:²

• One-way updates: Selecting in the hierarchy highlights in the viewport, but clicking in the viewport doesn't scroll the hierarchy to match
• Delayed updates: Changes in one view only appear in another after a manual refresh or re-render
• Partial updates: Some properties stay synchronised across views, but others, particularly metadata, annotations or secondary notation, do not

Every one of these failures forces a Hard Mental Operation: the user must track which view is current and which might be out of date. The design has imposed this additional cognitive load on the user.

Move Between the Whole and Its Parts

An abstract overview should provide a direct route to the underlying objects, with the scope of an edit clearly shown. Users need to move from broad adjustments to detailed refinement without guessing which elements they are changing.

StudyCHI 2024

Piet: linked colour views

Piet, a research prototype for recolouring motion graphics, provided three linked views: dominant colours for the video, their distribution across a timeline, and colours belonging to individual elements. In a lab evaluation with 13 expert designers, these views supported broad theme adjustments followed by detailed refinement.³

Participants also needed to see which objects a palette edit affected. An overview helped them understand the colour scheme, but precise editing required an explicit connection between the palette and the elements in the video.

PDF

The Primary Representation

In most professional software, one representation serves as the primary workspace: the view where users spend most of their time and do the most direct manipulation.² In 3D tools, it's the viewport. In video editors, the timeline. In code editors, the source file.

The primary representation deserves the most screen space, the fullest support for direct manipulation and the most immediate feedback. Secondary representations support it by providing different perspectives: parametric detail, temporal context, structural overview and output preview.

A common mistake is to treat all representations as equally important. They all need to be accessible, but the primary representation is where the core creative or analytical work takes place. It deserves proportionally more design attention. Distribute that attention evenly and you will end up with five mediocre views instead of one excellent view supported by four good ones.

Toggling Without Disruption

Users toggle between representations constantly during a single workflow, checking a property value, returning to spatial editing and reviewing the timeline. Each toggle should be:

• Fast: No loading time, no re-rendering, no modal transitions
• State-preserving: The view the user returns to should be exactly as they left it, with the same scroll position, selection and zoom level
• Context-maintaining: If the user was working on a specific object, all views should stay focused on that object

If any of these conditions is unmet, each change of view adds work for the user.

The Split-View Pattern

Some professional tools offer split views, with two or more representations visible simultaneously. This removes the need to toggle between those views, but uses more screen space. The most effective approach is to let users choose: provide sensible default layouts, but allow full customisation of which views are visible and how they are arranged. Users need to be able to arrange the workspace to suit their work.

Consistency Across Representations

The same concept should be visually recognisable across all its representations.² If an object is blue in the viewport, its entry in the hierarchy should also be blue. If a keyframe is selected on the timeline, the corresponding property should be highlighted in the properties panel. Visual consistency across representations reduces the cognitive cost of switching views. Users can rely on colour and shape rather than re-reading labels every time they shift focus.

Where the same action is available in multiple representations (delete, rename, transform), it should work identically regardless of which view initiated it. Differences in the behaviour or scope of the same action across views are a significant and entirely avoidable source of errors.

Check the Relationship Between Views

Check	Practical question or example
Design decision	Do the views refer to the same object, selection and current state?
Failure to look for	The inspector edits an earlier selection while the viewport highlights another object.
Verification task	Select, edit and navigate through the hierarchy, viewport and inspector. Check object identity, mixed values and focus after each change.

Footnotes

1. Mirel, B. (2004). Interaction Design for Complex Problem Solving: Developing Useful and Usable Software. Morgan Kaufmann. Mirel documents this need in the general case — professionals holding structural, functional, and organisational representations of a problem and needing to shift between them fluidly; the viewport/timeline/node-graph examples here are the author's application of that principle to DCC software. ↩

2. Hutchins, E. L., Hollan, J. D., & Norman, D. A. (1985). Direct manipulation interfaces. Human–Computer Interaction, 1(4), 311–338. ↩ ↩² ↩³ ↩⁴

3. Shi, X., Wang, Y., Wang, Y., & Zhao, J. (2024). Piet: Facilitating Color Authoring for Motion Graphics Video. Proceedings of CHI 2024. Sections 3–6. Published paper. ↩