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.
Dark Echo: Chapter One is the first episode of the second season of Dexter Early Cuts series. It belongs to the Dark Echo storyline, which is the main plot from season two of Dexter Early Cuts. 'Dark Echo' is a ghost story that is highly atmospheric and spooky from beginning to end. One of the main characters is evil incarnate; a devil worshipper who commits gruesome,ritualistic murders to maintain his power. The plot is driven along by the classic battle between good and evil, and the victor remains unknown until the last few pages. The zombie ghost of a drowned excursion boat captain Manfred Gohr haunts an Austrian lake in search of vengeance against those who caused the accident.The plot of 'Dark Echo' sounds familiar for an avid horror fan.It pretty much reminded me John Carpenter's horror classic 'The Fog'.The film offers some atmospheric moments shot in caves and old castles and few interesting underwater shots.The. “Dark Echo is a brilliant, unique, and incredibly tense must-have masterpiece.” 5/5 - TouchArcade “A masterful execution of minimalist design play this with headphones, in the dark, alone.” - Indie Game Enthusiast “One of the creepiest and most creative horror games on the App Store.” 4.5/5 - 148Apps.
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 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”.
- 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:
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.
After 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.
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
Dark Echo Productions
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.
Dark Echo Free
References
[i] Norman, Donald A. 1999. “Affordance, Conventions, and Design.” Interactions 6 (3): 38–43. doi:10.1145/301153.301168.
Dark Echo Bosch
[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. http://site.ebrary.com/lib/alltitles/docDetail.action?docID=10520612.
Dark Echo Free Download
[iv] Victor, Kaptelinin. 2013. “Affordances.” In The Encyclopedia of Human-Computer Interaction, 2nd Ed. https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/affordances.