Category Archives: Week 6

Considering the algorithm

“Media of representation shape our understanding of the world. They do not just contain information; they also determine what can be communicated. They provide the loom on which we can weave the fabric of human culture.” (Janet H. Murray, 2012)

If we are to consider the different components of the digital applications we use today to obtain information and communicate with others from a systems point of view that considers the affordances, constraints, and interfaces that emerge among users and the apps in a cognitively distributed way, an interesting group to analyze is that of algorithms.

Algorithms are the step by step instructions programmed into software that are meant to process specific input in a specific way to obtain a specific result. The results sought depend on the many potential uses of an application, and each is pursued through a series of algorithms that go through a step by step process. Each of these steps represent an interface in which information is processed according to a structure and logic based on cultural webs of meaning that, as explained by Murray (2012), would be “making meaning” as it goes.

Let’s consider a search algorithm. If I search for the term “Black Lives Matter” on Google, Facebook, and Twitter, I obtain different outputs and displays of this social movement campaigning against systematic racism.[i] From a perspective of distributed cognition (Zhang and Patel, 2006), we can observe mixed affordances in the display of results each search engine produces. In each application, information is organized according to physical, perceptual, and cognitive affordances (Zhang and Patel, 2006) that allow me to interact with it according to the cultural conventions of each platform.

Google search resultsOn Google, for example, I first obtain a list of “All” results which begins with an ad, followed by the link to the movement’s official website, to a subsection of news items, a link to the movement’s official Twitter account, the Wikipidia entry, and more Twitter links. I only see one image on this display, and I have the options of filtering results by media type (images, video) and content type (News and Shopping), and am offered further search tools.

On both Facebook and Twitter, on the other hand, the first result list displayed is the “Top” list, and each offer the option of filtering by posting time, (“Latest” on Facebook, “Live” on Twitter). The results of these social media apps are posts by people or organizations, and each contains information about how widely is been shared (number of views, comments, shares, likes, retweets).

Facebook search resultsIn both apps, there are various images of various sizes, changing the perceptual feeling of what is more prominent, each according to the conventions of each site.  Facebook has been promoting video consumption lately so the first category of results displayed are videos. What follows are “Top Public Posts” and “Posts from Friends and Groups.” As it is with Facebook, the display of results provides cognitive affordances for me to interact with this information based on what most of a Facebook-selected group of users are doing (“Top Public Posts”) and what a self-selected group is doing (“Posts from Friends and Groups”). Twitter also offers this choice but it requires further interaction with the platform for me to filter information to “People You Follow”. The social aspect of the information is much more prominent in the affordances of the Facebook and Twitter displays than on the Google one, and there seems to be more indication about what makes the results relevant (how widely and recently they have been shared) on the social apps than on Google (which does display time stamps for news items and Twitter links but doesn’t give indications of relevance on the other results).

Twitter search results

These results have been sorted by algorithms that processed my input query using databases and criteria that I can’t see or know, but once they are displayed, they provide a space— an interface—of affordances and constraints for me to interact with information about this movement. There is a moment in which I interact with this information that is blackboxed, but regardless of this, each result display is a space of distributed cognition among the algorithms, their displayed results, and my (and other users) interaction with them. As put by Murray in the above quote, it is a space of meaning making, but as each is a space designed according to cultural conventions, it “determines what can be communicated” (affordances and constraints), and thus how this meaning can be constructed.

According to media scholar Tartleton Gillespie (2014), algorithms are now “a key logic governing the flows of information on which we depend,” and thus require our understanding and attention. From the design thinking point of view of this seminar, it is interesting to consider the algorithm as one of the key components (which are blackboxed) with which we interact in the cognitively distributed systems of this “media of representation.” Algorithms themselves are constructed according to a cultural symbolic logic with which we interact and provide us with affordances and constraints to interact with information. (Blackboxed) algorithms are then an important component to consider when analyzing how we construct meaning in distributed cognition systems today.


Janet Murray, Inventing the Medium: Principles of Interaction Design as a Cultural Practice. Cambridge, MA: MIT Press, 2012.

Jiajie Zhang and Vimla L. Patel. “Distributed Cognition, Representation, and Affordance.” Pragmatics & Cognition 14, no. 2 (July 2006)

Tarleton Gillespie, “The Relevance of Algorithms.” Media technologies: Essays on communication, materiality, and society (2014)

The importance of diversity for new affordances to become visible (and possible)

Some months ago, in a talk about capoeira, a Brazilian martial art that joins attributes of dance and fight, my husband was approached by a student interested in the capoeira’s movements to the study of robotics. She wanted to explore how such movements could contribute to develop new robots.

As one can see in the video, capoeira explores many affordances of human body, including its flexibility, adaptation of movements according to the other, rhythm – all synthetized in the word “ginga”. If one has ginga, s/he has these characteristics altogether. This is why the Brazilian soccer is known for its ginga, very influenced by African people.


If a robot will be able to reproduce the ginga, one can’t guarantee, but the fact that that African American student was engaged on this goal shows me that the characteristics of the designer also matters for the design itself. Depending on who is in charge of that task, the questions that will be raised will differ substantially as well as the possibility of breaking design conventions and the path dependence on what has been created so far.

Unfortunately, on my perspective, nowadays breaking design conventions became a strategy of companies to impose a programmed obsolescence on products and, consequently, to sell more. Maybe the motivations are grounded on the desire of improving things, but because most of the time the process lacks essence and diversity, with the same people thinking about the same products, transformations are more difficult to occur.

The conversion of hard copy books into digital ones is another example of difficulties in understanding what the digital mediums allow a book to be. Murray remembers that the 500- year books can be considered an expansion of our memory, given that, with them, it is not necessary to remember everything that is written, instead, one only must to know where to find what is looking for. This is why the old book indexes, very rare in hard copies, I need to admit, become, with a different format, the main affordance of digital books (CTRL +F). The Find tool makes the index unnecessary. This affordance also makes the page numbers less important than before.

Designers could rethink the book margins requisite, because printing is not mandatory in digital books. The conversion of reader into “interactor”, in Murray terms, is also a necessity. If the affordances of digital mediums allow such change, why do companies keep only translating the old book model into the new one, without giving the reader more centrality? I accompany this discussion in education and mobile learning fields, and one of the biggest development challenges of the area is taking advantage of the ubiquity, the interaction and the portability of mobile devices for education purposes.  This is why including teachers and students in the educational tools design teams seems key for me. They can bring more grounded thoughts and sensitiveness to understand the affordances of the digital world applied to their realities.

Diversity matters for better design.

Affordances and interfaces are formatting all human life

Affordances and interfaces of electronic devices are formatting all human life.


Both of these paradigms are two sides of the same “gold medal” – human life. Despite we can easily see evidences of this phenomenon on the samples of technology progress, I would like to focus my attention mostly on social area of its amplification. For example, we can easily bring numerous of the syntheses between affordances and interfaces on the sample of an ordinary computer (like applications and their icons, memory of computer and key words to find wanted files, etc.). However, it is much harder to outline the right disposition of these two paradigms within social aspects. I would like to name few of them first for the further discussion – state regulation and individual rights; gained human experience and knowledge and education system; natural resources and one’s accessibility to use them (or to be exposed to use them). In the both types of samples – for technical devices or social paradigms – it is necessary, but not sufficient, to have match between affordances and instruments (their interfaces) to display them and provide efficient access to them.

Apparently, to maintain the process of matching between affordances and interfaces in both social and technical areas it needs obtaining certain knowledge and skills. Therefore, one of the core pillar for realizing the human gained knowledge and experience (as affordance) is education process, which may be considered as an interface (reflection of knowledge) for obtaining required knowledge and skills. Another example may be drawn from living individuals in groups / communities / societies. On one hand, for individuals living in communities gives more opportunities for life and development, but on the other hand, it limits there freedom or behavior. Hence, we need to employ special regulation (society agreement) to live together and use common opportunities (it may be considered as an affordance), but outline the rights and responsibilities of individuals (may be considered as interface; how regulation reflects in real life) to provide the fair access for everyone to common resources and life opportunities.

More samples of affordances of social life may be described like a sources of cultural / values aspects (as an cognitive affordance[i], which is provided by cultural tradition / convention) and their exposure on identity characteristics and distinguish behavior of individual(s) (as interfaces of such affordances / values). The cultural heritage of the passed generations may be reflected on next ones through individuals who are positioning themselves as descendants of past civilizations (or their values). Looking from this perspective, in general, past civilizations themselves may be considered as affordances and each next generation as their interfaces.

Another observation for social affordances may be classified them to objective and subjective ones[ii]. For example, the cultural heritage of previous civilizations may be considered as objective values for next generations, however, everyone may perceived and reflect these values from her/his own individual perspectives.

Making some comparison between technical devices and social aspects of affordances and interfaces, we can discover the certain level of relation between visual artifacts (as an icons on the touchscreen of smartphone), which by clicking[iii] we can activate and derive information “hidden” behind them.

[i] Jiajie, Zhang, and Patel Vimla L. 2006. “Distributed Cognition, Representation, and Affordance.” Pragmatics & Cognition

[ii] Victor, Kaptelinin. 2013. “Affordances.” In The Encyclopedia of Human-Computer Interaction, 2nd Ed. ; chapter The notion of affordance.

[iii] Norman, Donald A. 1999. “Affordance, Conventions, and Design.” Interactions 6 (3): 38–43.

Affordances and Constraints in game design process

In his article Affordance, Conventions and Design, Norman emphasizes the difference between perceived affordance and affordance.[1] Thus, affordance can not be understood as feedback made by system when we are using screen-based equipment and instead it should be explained as something that “provide strong clues to the operations of things”, according to DOET written by Norman[2]. In general, affordance serves as the role that leads users and consumers to think, learn, analyze and interact.

As a representative form of interactive media, video games never lack materials for us to research design principles such as affordances, constraints and conventions.[3]

1.HUD design in video games
When we talk about interactive media, it is inevitable to talk about user interface and user experience. As for video games, a player can not judge the quality of gameplay when he first starts adventure, but he can decide whether the art style is to his liking or not once he sees the title. Jesse Schell in his book The Art of Game Design explicitly explain the hierarchical mental structure of players’ cognition. Even though for designers, mechanism, story, aesthetics and technology are equally important, the first two things players notice are usually aesthetics and mechanism maybe because these two are most easily to be symbolized.[4] So the combination of aesthetics and mechanism should provide players with enough affordances.

Games, especially the role-playing game, often leave tons of information for players to learn. Obviously, game designers in modern age will not list everything on screen just as their predecessors did. Instead they just place the most important information, such as hit point, mana point and ammunition, on the screen. Actually, the important information presented on screen is called Head Up Display (HUD), which is originally used in military area, describing the parameters shown in cockpit. To keep the HUD interface as concise as possible, one strategy is integrating the information into game contents.

The ammunition design of COD: AW

In Call of Duty: Advanced Warfare, designers cleverly make the ammunition information one part of the guns (the number will move as you move the gun and change view), giving players clear information that it is something related to weapons.

However, this strategy does not make game mechanism clear all the time. Metro 2033 uses the watch to indicate the duration of gas mask. It is really a good idea if players have been familiar with the game mechanism, but the vague and indirect relationship between mask and watch can frustrate new players at first. In contrast, Call of Duty: Black Ops uses the cracks on mask to warn players, which is a more intuitive design.


The watch design of check gas mask is somewhat confusing

2.Map and interactive elements design
It is the responsibility for game designers to tell players what they should and should not do during the gaming process. HUD serves as the instructor of player from beginning to end, but it is not enough for players to do well when they are required to make immediate response. So designers should leave hints to players.

One thing that designers are good at is using both affordance and constraint to give players instructions. In many action games, players have to manipulate their characters to climb cliffs or trees and jump over chasms. Under such circumstances, designers often mark rocks that can be climbed and restrict characters to access those areas that can not interact with players.


The climbable part in Rise of the Tomb Raider is different from other parts

In Rise of the Tomb Raider, the ice that can be climbed is evidently lighter than the unclimbable part. What’s more, it is a standard design in the whole game, meaning the pattern of climbable part can be understood instinctively by players.

Another common trick used by game designers is setting margin for map with seemingly accessible perspective. I guess every player of Counter-Strike has the experience of fleeing outside the map. A more intricate way is to destroy the environment intentionally in order to force players to move to the next scene, especially in some linear cinematic games. Naughty Dog is the master of using such a strategy. In Uncharted franchise games, players must keep moving to avoid being buried by collapsed houses and cliffs, which in turn destroy the scene and stop characters from going back. This constraint ensures that players can have compact gaming process and have no problem with finding the destination.

3.Thoughts of future game design

Murray in her book Inventing the medium listed four affordances for digital artifacts: encyclopedic, spatial, procedural, and participatory.[5] Intrinsically a computer program, video game itself of course own the four affordances. For example, RTS(Real-Time Strategy) and MOBA(Multiplayer Online Battle Arena) games produce infinite possibilities for players and professional tournaments with bonus of millions of dollars. Compared to legacy media, video game is totally multisequential and interactive.

However, the complexity and flexibility of video game have brought designers a question – how to know what players really like. In traditional media age, users receive information passively, so designers only have to consider the transmission process from one direction and in digital media age, especially during the process of designing HCL system, designers should select the appropriate conventions that human interactors can understand, according to Murray.[5] Modern video game design is based on the mature media like movies and novels and asks designers to consider the balance between mechanism, story, aesthetics and technology. The problem here is that players have different preferences so designers can only accumulate experience by making mistakes to set good conceptual models for most players. A typical example is the failure of No Man’s Sky, whose developers are seduced by new technologies. [5] They create an universe by automatic random algorithm but neglect the importance of level design, thus making the world vapid, sterile and repetitive.

In general, game design is a formidable process and requires developers to correctly construct conceptual model for most players and make clear affordances, constraints and conventions.

[1]Norman, Donald A. “Affordance, conventions, and design.”interactions 6.3 (1999): 38-43.
[2]Norman, Donald A. The design of everyday things: Revised and expanded edition. Basic books, 2013.
[3]Norman,Donald A, “Affordance, Conventions, and Design.” Interactions 6, no. 3 (May 1999): 38-43.
[4]Schell, Jesse. The Art of Game Design: A Book of Lenses. 2nd edition. Natick: A K Peters/CRC Press, 2014. Print
[5]Murray, Janet H. Inventing the medium: principles of interaction design as a cultural practice. Mit Press, 2011.
[6]Stonehouse, Anthony. “User interface design in video games.” Gamasutra. 27 Feb 2014.
[7]Zhang, Jiajie, and Vimla L. Patel. “Distributed cognition, representation, and affordance.” Pragmatics & Cognition 14.2 (2006): 333-341.




Book under a magnifying glass: affordances of a book

Chen Shen

Through all the readings in these weeks, we are fairly familiar with the concept of affordance and well prepared to employ this concept to daily experiences. Today I’ll try to analysis the affordances of a book.

Affordance as a relation

In Norman’s The Design of Everyday Things, he defined affordance as  “a relationship between the properties of an object and the capabilities of the agent that determine just how the object could possibly be used”. So affordance is a relationship between an object and the agent using it. Thus to say it’s meaningless to discuss the affordances of a book without addressing human as its user: human. Many of the form factors can obviously reflect the need of a human reader:  a typical 5*8 inch book has a rough measurement of 14*21 cm.


The height is nearly the length of one’s thumb to his little finger when spreading the palm (which is also a Chinese measurement unit, 一揸), giving readers a proper length to hold with either one or two hands, without being too big as newspapers which require either two hands holding or page folding, nor being too small to hold with palm naturally stretched-which would cause muscle strain if holding for long. The width and length bear a golden ratio which meets the aesthetic taste of the reader without conscious recognition. The width of a 5*8 book enable the reader’s eyes to scan through a whole line without the need of head moving, so reading can be a fairly stable and relaxing activity. As for the thickness, due to both the psychology of reader and the constraints of bookbinding, few books exceed 600 pages at which multiple volumes are ideal alternatives.


The three-dimensional figure also determines a book’s weight (if we don’t consider the paper type for the moment), a typical 5*8 book usually weighs less than 1000 grams, which also contributing to a long period of reading. Different types of books vary much in physical measurement and this variation is connected to how people use this book. For instance, a reference book, which is typically used in formal work which means stable surfaces are provided, so weight is not an important matter thus we have reference books way thicker and heavier than ordinary ones. On the contrary, a novel, which should fit a more casual reading scenario, seldom outweigh what a person can comfortably hold single-handed for long. If the work is voluminous,  In Search of Lost Time by Proust for example, different publishers chose to break it down to volumes in unison.


Another example of the relation between measurements and reading style is the magazine. With its noticeably larger size ,  magazine beats 5*8 book in the amount of information a page contains, but suffers in portability as well as durability (due to the different binding method). These characteristics make magazine as a material format of published medium highly suitable for magazine and periodical journal as a media type of reading material: ideally for skimming, better visual impact (that’s almost everything advertisements want), shorter production phase, less need for preserving in a long run as well as reading multiple times.


Affordance in anatomy of a book

A book affordances are so much more than the physical measurement. If we conceptualize a book’s physical part, it should be something like this:


Take Spine as an example, Spine is not typically an affordance for reading – during which the spine is imperceptible. The affordance of Spine is not dualistic but tribasic: the Spine of the book, the reader, and how people stack, preserve, exhibit book (as in the upper figure). Imagine a culture within which people don’t use book shelves and stack books in a way shown in the lower figure, Spine of the book then is totally for strengthening the book and has little symbolic value.


Now we know human reader shape the books into what they are today, in fact, this relation is mutual. In visual design, the visual direction is studied and exploited such as the Gutenberg diagram, which suggests users of western culture (and many other who read books in the Gutenberg format) typically move their sight from top-left to bottom-right, even when they are not reading a book. So designers can deploy  accordingly so that the most important information can be found in the psychologically prominent position.


Other affordances of physical books

Books also have other affordances, like the table of content and page number affords searching, the paper and ink printing affords marker highlighting, the margin and line spacing affords notes taking, the foreedge affords dog-earing and super-fast skimming, the endpaper affords inscription, the code bar in the back affords scanning, the index affords locating, the reference affords citation and further reading.

Books and eBooks

So much for the affordance of physical books, now we may examine the digital ones which are currently doing their best to emulate physical book reading experience. If we break down a physical book into two parts: physical part and symbolic part, digital books seem to have the ability to inherit everything symbolic. But the fact is a little more troublesome. Due to the advantage of adjustable font sizes of many digital books, there’s no unified form of how letters are presented. Usually, it is not a big problem, but when it comes to IT books which formatting is an essential part of coding, eBooks become utterly baffling. eBook is also trying to inherit physical books’ physical part. Kindle may be a typical example, by embracing the technology of electronic paper, Kindle reifies the physical part of books’ symbolic contents-the letters and pictures as cognitive artifacts. The e-ink technology enables Kindle to overcome two major problems of other eBooks: battery life and eye exhaustion by LCD. Though it has its own problem,  like the response speed of electric paper, the relatively small display, this quasi-paper solution is a promising way to transfer the mental model of books into a new experience of reading. eBooks sacrifice the physical characteristics of a book that a bibliophile cherishes but compensate with tricks no physical books can do. Some of the most appealing functions are text-based find, infinite portability, and collective reading. Though formal books have indices by which you can locate some of the keywords, eBook’s find-function outclasses books by orders of magnitude. So is the portability issue. Both these advantages are addressed fairly redundantly for me to explicate.  But the collective reading is worth mentioning. Kindle can show notes taken by other users reading the same book, which fundamentally change the nature of reading. Given time to improve the technology, reading is going to be a real-time multi-user cooperating task, thus to further strengthen books’ purpose as cognitive artifacts of informing and inspiring.

Though eBooks are emulating the reading manners of books, it doesn’t necessarily mean traditional book-reading manners is optimal and tolerates no improvement. It is more like a transition for people already familiar with physical books. For a generation raised in the Digital Age, the one with a firm mental model is digital books. Books are not innately prior to digital books, everyone watched the video A magazine is an iPad that does not work may feel the same.

Digital books’ downward compatibility implies eBooks are of a higher level in the revolution track of books, but there is still one problem eBooks fail to overcome at the moment. Studies have been done on the comparison of reading speed and retention. Results show that paper still has advantages over LCD. One reason contributing to this is reader perceive the following Word both in a symbolic way and physical way. And the physical position of a word in a page of a paper book help to form a mental map to retain the information.

It’s hard to compare different book forms in general, the Gutenberg printed book responded to the urging needs of mass publication. As a result, though it lost some of the aesthetic touches of manuscripts and come with so few fonts, it gradually replaces manuscripts as the need of a new era. eBooks probably are going to replace paper-based books eventually though paper books do have advantages, but when these advantages become incompatible with the new needs of book in a new era, paper books will become obsolete.


It took hundreds of years to shape physical book into the way they are, with affordances obvious and hidden. All these affordances aim for a better reading experience in general, but some constraints with the paper-based books are insurmountable. eBook has its own problems but is more compatible with the information revolution. Thus it can  possibly replace paper books.

Norman, Don. The Design of Everyday Things: Revised and Expanded Edition. Rev Exp edition. New York, New York: Basic Books, 2013.

Kump, Peter. Breakthrough Rapid Reading. Revised edition. Paramus, NJ: Prentice Hall Press, 1998.

“Design Principles: Compositional Flow And Rhythm.” Smashing Magazine, April 29, 2015.

Jabr F. Why the brain prefers paper. Scientific American. United States: Scientific American, Inc; 2013;309:48.

Janet Murray, Inventing the Medium: Principles of Interaction Design as a Cultural Practice. Cambridge, MA: MIT Press, 2012.

Kaptelinin, Victor. “Affordances.” The Encyclopedia of Human-Computer Interaction, 2nd Ed., 2013

Donald A. Norman, “Affordance, Conventions, and Design.” Interactions 6, no. 3 (May 1999): 38-43

Jiajie Zhang and Vimla L. Patel. “Distributed Cognition, Representation, and Affordance.” Pragmatics & Cognition 14, no. 2 (July 2006): 333-341






Jieshu – Dark Echo: A discussion about Affordance

I will use an iPad game called Dark Echo to exemplify the affordances and constraints I learned from this week’s reading. Dark Echo is one of the most amazing puzzle games I encountered for years. Basically, it’s a two-dimensional escape game. It orchestrates both simplicity and complexity, demonstrating many design principles explicitly.

1. Interfaces of Dark Echo

1.1. Click to start

According to Donald Norman, icons on a screen only have perceived affordances, instead of real affordances, and they don’t afford clicking because you can click anywhere on the screen. Clicking an icon is a cultural convention, a constraint that encourages some actions such as clicking while discouraging others such as sliding[i].


the icon of Dark Echo

The icon of Dark Echo has a mixed affordance:

  • The icon is displayed on an iPad screen, so there is a physical affordance—you can only get feedbacks by clicking on the area of the touch screen of iPad. The area is limited by the physical size of iPad.
  • The icon has a cognitive affordance of clicking. In their Distributed Cognition, Representation, and Affordance, Jiajie Zhang and Vimla L. Patel suggested that cognitive affordance was provided by culture conventions[ii]. According to Norman, a convention is not arbitrary, but fits human cognition intelligently[i]. Here I will briefly discuss why the icon cognitively affords clicking.
    • As you can see, the icon is black while the background is gray, forming a clear contrast. In her Inventing the Medium, Janet Murray suggested that, if the color or size of an item is different, people would expect that some different actions will be triggered by clicking or touching it[iii]. So, I was thinking, what if the contrast is small, will it afford clicking? Here I did two experiments:
      • I change the wallpaper to black and found that when I click my “Game” folder, the folder popped up and turned gray. So the contrast ratio is also great.
      • I dragged the icon out of the folder and put it on the entirely black wallpaper, and found that I still couldn’t help clicking it, because even if the boundary of the icon faded away into the background, the bright white lines radiating from the center of the icon formed a different pattern from background, arousing my expectation that it was clickable.
    • The shape of the icon is a rounded rectangle, just like any other icons on the screen. According to Murray, if two items are close, we will assume that they have similar properties and would behave in similar ways because cultural convention makes us assume that “spatial positioning is meaningful and related to function”.

1.2. Right after you start

After you initiate the app, the whole screen turns black. Then, an image of headphone appears on the screen.


The icon of a headphone

The image serves as an icon resembling the shape of a real headphone, as well as an index to indicate the action of putting on your headphone because a real headphone affords wearing. Thus, even if you don’t read the words under the image, you would immediately know that you are recommended to put on your headphone in order to get the best game experience—actually to be scared most seriously. It is a cultural convention, a constraint that encourages you to make a specific action—putting on your headphone.

Then, the name of the game appears on the screen, with a line of “touch to start” under the title.

03After touching anywhere on the screen, you enter into the interface of level choosing. There are two great levels (Darkness and Light), each with forty sublevels. I have reached the thirteenth sublevel of the Light level, so it automatically presents me where I need to continue.

the string connecting levels for choosing

the string connecting levels for choosing

In the level choosing interface, sublevels are represented by numbered squares connected by a fine line, forming a string. You can slide to move the string to the left or right, but not up or down. Inside the squares of locked sublevels are images of a lock.

Here are some perceived affordances and constraints.

  • The squares of sublevels afford clicking because the shapes of and numbers inside the squares highlight them and differentiate them from the black background. Actually, when you click one of the squares, the line of the square becomes thicker, just like a physical button being pressed down.

when you touch one square, its line becomes thicker, resembling a physical button being pressed down

  • The line connecting squares affords sliding in the horizontal directions and restricts actions on the vertical directions. The string stretches from the first to the fortieth sublevel. If you are in the middle, the string extends to the edges of the screen, indicating there are something more outside the edge, similar to the swipable touchscreen slider mentioned in the chapter of Affordance in Victor Kaptelinin’s The Encyclopedia of Human-Computer Interaction[iv]. It is also a cultural convention, a constraint that encourages horizontal action, a mental model developed by the one-dimensional extension of stringed things, such as shell jewelry and tying knots.
  • The icon of gear in the lower-left corner and the icon of two bent arrows afford clicking. Without any instruction, you are crystal clear that the gear is for settings. Another cultural convention.

1.3. When you play

After you enter a sublevel of the game, all you will see is a white icon of a pair of shoe prints in the middle of a totally black background, indicating a dangerous dark room.


The screen affords touching. So, basically, there is only one thing you can do—touching the screen. Long press means striding in one direction, while click means walking gently, avoiding making noise to wake sleeping monsters. The sound waves of the footsteps are represented by fading white lines stretching from the walking shoe prints, echoing and bouncing around the walls, revealing the shape of the dark room.


Just like in real life, the virtual walls you perceived afford stop, while the virtual paths you perceived afford marching. The puddle you perceived with the sound of water and blue sound wave lines afford wade. The doors afford open, and the monsters afford death.

I think, one of the most interesting parts of this game is that it vividly instantiates the concept of affordance proposed by James Gibsoniv. Gibson suggested that there was no need for animals to build a representation of the objective world. The purpose of perception is to gain meaningful information that is important for them to act in the environment. By detecting invariants in the array of energy (e.g. ambient light or sound wave as in the Dark Echo), animals can pick up meaningful information about the environment. This information is of affordance that is the “action possibilities offered by the environment to the animal”. In Dark Echo, you are in a dark room where lights are out. The only important and meaningful information about the environment is in the invariants in ambient sound. When you move around the dark room, you gather the echo information, whereby to build an internal representation. After that, even if you stop moving and the white lines representing sound waves are disappeared, you still remember the position of at least the nearest wall.

2. Design Principles are not built-in properties of software and hardware

In Dark Echo, we can see many design principles. Here are some examples:

  • Affordance: the icon of the game, the numbered square for choosing levels, and the gear-shaped icon all afford clicking.
  • Constraint: The horizontal string for choosing sublevels limits the sliding direction.

I understand they are choices, not simply necessary properties of software and pixel-grid screens. First of all, these principles are not built-in physical properties of the touch screen, because the screen affords an infinite number of touch patterns. Second, they are not necessary properties of software neither, because there are “alternative methods that work equally well[i]”. For example, the horizontal constraint of the string for level choosing can certainly be replaced by a vertical swipable slider or drop-down list. The gear icon of settings can also be replaced by a word “settings”. The “touch to start” line under the game title can be replaced by an icon of a play button.

3. Designs for Symbolic Expression and Attention Controlling

In Dark Echo, I think eighty percent of the design is for symbolic expression. For example, the Roman numbers in the squares for level choosing, the shoe prints representing the foothold of your avatar, the red radiating lines representing monsters, let alone the horrible sound effects, especially the scream when you die.



However, I doubt that the designs for symbolic expression and designs for controlling our attention are mutually exclusive since the designs for symbolic expression would also attract our attention.

4. Digression: distributed cognition and democracy

In Distributed Cognition, Representation, and Affordance, the authors mentioned Hutchins’ position, that is the cognitive properties of distributed system can be totally different from that of the individual components of the system. This prompts me to think about the nature of democracy. Democracy can be seen as a distributed cognitive system, whose properties are most determined by the interactions among its components (e.g. individual persons or organizations). Are the results of democratic vote always better than those of other political systems? Why do most people consider democracy as the best option, better than centralism and constitutional monarchy? How do we organize an efficient political/economic/business/educational/scientific research… system using distributed cognition? Those are fascinating questions I’d like to probe into.


[i] Norman, Donald A. 1999. “Affordance, Conventions, and Design.” Interactions 6 (3): 38–43. doi:10.1145/301153.301168.

[ii] Jiajie, Zhang, and Patel Vimla L. 2006. “Distributed Cognition, Representation, and Affordance.” Pragmatics & Cognition 14 (2): 333–41. doi:10.1075/pc.14.2.12zha.

[iii] Murray, Janet H. 2011. Inventing the Medium : Principles of Interaction Design as a Cultural Practice. Cambridge, US: The MIT Press.

[iv] Victor, Kaptelinin. 2013. “Affordances.” In The Encyclopedia of Human-Computer Interaction, 2nd Ed.