9A. Interface and Narrative

(JDrucker 9/2013)

An interface constructs a narrative. This is particularly true in the controlled environment of a project where every screen is part of the design. We imagine the user’s experience according to the organization we give to the interface. Of course, a user may or may not follow the structure we have established, but thinking about what the narrative is and how it creates a point of view and a story is useful as part of the project development. In amny cases, narrative is as much an effect as it is an engine of the experience. Odd juxtapositions or sequencing can disrupt the narrative. We are familiar with the ways in which frame-to-frame relationships create narrative in a film environment, or in graphic novels, or comic books. One of the distinctive features of digital and networked environments is that the number and types of frames is radically different from in print or film, and the kinds of materials that appear in those frames is also varied in terms of the kind of temporal and spatial experience these materials provide. Animations, videos, pop-up windows, scrolling text, expandable images, sound, and so on are often competing in a single environment. The ways we construct meaning across these many stimuli can vary, and the cognitive load on human processing can be very high.

Interface is the space of engagement and exchange, as we have noted, between the computer and the user. Besides the graphical organization, format features, metaphors and iconography, and the frames and their relation to each other, interface is also the site of basic navigation for a site/project and orientation. These are related but distinct concepts. Navigation is the term to describe our movement through a site or project. We rely on breadcrumbs that show us where we are in the various file structures or levels of a site, but we also use navigation bars, menus, and other cues to find our way into and out of a pathway. Orientation refers to the cues provided to show us our location, where we are within the site/project as a whole. Think of navigation as a set of directional signs and orientation as a plan or map of the whole of a project. Wayfinding is important, but knowing what part of a site/project we have accessed and what the whole consists of is equally important from both a knowledge design and a user experience point of view.

Exercise: Look at the Van Gogh Correspondence project. How do you know where you are inside the overall structure of the project? How do you know how to move through it? Contrast this with the ways in which Civil War Washington and Valley of the Shadow organized their navigation.

Exercise: Scalar is an experimental publishing platform meant to provide multiple points of entry to a project and various pathways through it. It is an extension of work that was done in Vectors where every interface was custom designed to suit the projects. Look through the Vectors archive and think about the relations among narration, navigation, and orientation conventions in these projects.

Interface designs often depend upon cultural practices or conventions that may not be legible to users from another background. The most obvious point of difference is linguistic, and language use restricts and defines user communities. But color carries dramatically different meanings across cultures, as do icons, images, and even the basic organization and structure of formats. Concepts of hierarchy, of symmetry, and of direct and indirect address are elements that carry a fair amount of cultural value. Creating designs that will work effectively in globally networked environments requires identifying those specific features of a project or site that might need modification or translation in order to communicate to audiences outside of those in which it was created.

Exercise: Early efforts were made by Aaron Marcus to work on this issue from a design standpoint, engaging with the studies of Dutch anthropologist and sociologist Geert Hofstede. While many criticisms of this work exist, the principles and issues it was concerned with remain compelling and valuable. Look through the parameters in this article. How do they compare with the factors that Evers suggests be taken into consideration? What, beyond some basic concerns with differences in calendars, cultural preferences, and so on, would you identify as crucial for thinking about global vs. local design principles?


Exercise: To take these observations further, go to http://www.politicsresources.net/official.htmand compare Iceland and India across the five criteria listed by Marcus. Can you see differences? Can you extrapolate these to principles on which cultural preferences can be codified? Pick two other countries to test your principles.

Exercise: Patricia Russo and Stephen Boor identify a number of basic elements in their concept of “fluent interface” and what it means cross-culturally. What are these? How do they conceive of the problems of translation, why do they isolate elements in an interface, and what do they mean by infusing these with “local” values. What kinds of problems and errors are common? They put emphasis on color values, for instance, so using their color value chart, return to the government sites you looked at and see if their assessment holds.

Exercise: Evers suggests that “localization is a moral obligation” What kinds of sites would pose a challenge if you were to apply this principle? What issues would come up in your own site?

Finally, we often ignore the reality that many users of online materials are disadvantaged or limited in one sense or other, including sight. The guidelines and principles of design accessible websites are not difficult to follow, and can extend the usefulness of your projects to other communities.

Exercise: Extract the principles for accessible design from HFI UX and Burgstahler and make a list of changes you would need to make to your project in order to make it more compatible with these principles.

Because interface is so integral to our access and use of networked and digital materials, the complexity with which it operates is largely obscured by its familiarity. Taking apart the literal structure of interface, identifying the functions and knowledge design of each piece, and articulating the conventions within a discussion of narration, navigation, and orientation is useful. So are the exercises of trying to think across cultures and communities. The fluency and flexibility of interface design is an advantage and a challenge, and the rapidly changing concepts of what constitutes a good or bad design, a workable or functional model, and a stylish or “contemporary” one shifts daily. A final exercise that provides useful insight into design principles is to look through the Best and Worst, to look at a site like Websites that Suck, http://www.webpagesthatsuck.com/worst-websites-of-2010-navigation.html and analyze the disasters that are collected there. Someone designed each of those thinking they worked.


Narratives are structured into the user interface and also into the relation of information in a digital project. The “narrative” of an exhibit, archive, or online repository may or may not correspond to the narrative of the information it contains. The tools for analyzing the argument of a digital project are visual and graphical analysis and description as well as textual and navigational.

Required reading for 9B

  • *Nezzar AlSayyad, “Virtual Cairo: An Urban Historian’s View of Computer Simulation”
  • *Sheila Bonde et al, “The Virtual Monastery”
  • * Geeske Bakker, et al “Truth and Credibility,”
  • * Chris Johanson, “Modelling the Eternal City”

Study Questions for 9B

  1.  What issues did Nezzar AlSayyad introduce that were unexpected?
  2. How are issues of gender central to the modelling of space in Bonde’s work and why are three-dimensional representations useful for presenting it?
  3. Do Bakker’s concerns with credibility shed any light on the work being done by Johanson?

Copyright © 2014 - All Rights Reserved