Category Archives: Week 6

Affordances of the iPhone Home Screen

Victoria Gomes-Boronat

In this week’s reading, Janet Murray starts by explaining that, “everything made of bits is part of the same digital medium,” (2012, p. 8) because it exploits the representational power of a computer and can be used for symbolic communication. According to Murray, the affordances provided by digital media can and should be considered within the context of procedural, participatory, encyclopedic, and spatial design strategies, therefore, I will analyze the affordances of the iPhone home screen interface within these contexts (2012, p. 23).

Murray argues that digital media is unique to earlier media of representation, such as books and art, because of its ability to “represent and execute conditional behaviors” (2012, p. 51). Murray cites the example of Joe Weizenbaum’s Eliza, an interactive program made possible by coded algorithms and procedural design. Weizenbaum’s Eliza program is reminiscent of and an antecedent to iPhone’s Siri.

The iPhone also acts as what Murray likes to call, a participatory medium, meaning that the relationship between the interactor and the iPhone is reciprocal, active, and sometimes susceptible to frustrating miscommunication (2012, p. 55). For example, the iPhone interface allows us to directly manipulate the home screen by creating folders/boxes, dragging/moving applications, and now with the new IOS update, personalize signifiers (more on that later). The human-computer interaction elicited by a participatory design also relies on the mental models formed based on the appearance and behavior of an object (Norman, as cited by Murray, 2012, p. 59). For example, when grouping applications together to organize the home screen, the iPhone uses the appearance of a box to signal to users that applications may be stored there, in the same way, that you would store files in a box at home. It is also important to note that the iPhone also scripts our interactions with it, for example, when rearranging the home screen, the interface indicates it is possible to edit the home screen by continually shaking the applications.

The most obvious affordance of the iPhone interface is access to a vast amount of storage space for data and information, classifying it as what Murray would call an encyclopedic medium. With regards to being a spatial medium, The iPhone home screen GUI creates a digital space where the interactor can navigate it through afforded actions like swiping through pages and tapping on applications. With the new IOS14 update, widgets can also now be created with shortcuts to/glimpses of various applications and their functionalities, for example. a weather widget that shows the weather throughout the day on one of the home screen pages. These various affordances allow users to interact with the digital space by tapping, dragging, reorganizing, and personalizing.

The iPhone IOS14 and many of android GUI’s now also allow users to more directly personalize their experience by affording them the functionality of creating their own signifiers. Norman (2013 as cited in Kaptelinin, 2013) explains the difference between affordances and signifiers by writing, “[a]ffordances define what actions are possible. Signifiers specify how people discover those possibilities.” Applications shown on the home screen have various affordances, however, their signifiers (the icons used for the application displays) are “any mark or sound, any perceivable indicator that communicates appropriate behavior to a person,” (Norman, as cited in Kaptelinin, 2013). Users are now able to create new signifiers, however, the affordances granted by the applications and the interface stay the same.

Kaptelinin, V. (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.

Murray, J.H. (2012). Inventing the medium: Principles of interaction design as a cultural practice. MIT Press.

What Tinder Affords?

Don Norman was very clear in his distinction between real affordances vs perceived affordances. Real affordance is more similar to Gibson’s original definition – “An affordance is an action possibility formed by the relationship between an agent and its environment ( J. Gibson 1977; J. Gibson 1979)…… An agent does not need to be aware of the afforded action, such as the affordance of opening a secret door.”  Perceived affordance would be a doorknob popping out of an otherwise plain door. Of course, the door would no longer be a secret door then!

It is a fine line between convention and affordance as it really depends on what is considered universal. A button affords to be pressed or is it a learned convention over 200 years? It is so transparent now that we no longer see it as learned. In practice this question matters a little less (in now way am I suggesting that it is to be rid of completely!) as long as we are sure buttons will prompt the user to “press” without any training, then the button is a “perceived affordance”.

The touchscreen by itself affords everything from touching, tapping, scrolling, hitting, licking, pressing, pushing the palm into it, etc. These would be real affordances and they do not necessarily have to make sense but they are the “action possibilities” (Gibson, 1979). The task then is to restrict some of these affordances (no not constraints, we will talk about constraints later) by allowing for perceived affordances to be narrowed down to real doable action translations instead of mere action possibilities. Let’s consider “Tinder”. I choose tinder because it is constrained in the number of actions that can be performed in it. On most days the only actions on this app are – swipe left or swipe right. Texting on it (a later phase) may involve some more interaction with the app features, but we will consider only the basic actions performed by users on most days.

As an icon on the touch screen, tinder does not have a perceived affordance of “tapping” but rather tapping is a learned convention and the icon is visual feedback that advertises the affordance (Norman, 40).  The icon is a real affordance but there is no obvious action potential stored within the iconography. The feedback is the app launching and taking over the entire screen. On launching, we see all sorts of icons on the display which are matters of cultural convention. (See fig)

The icons: heart, x, star, back, thunder, require training in cultural conventions, and then some context in how they are used on tinder. Without performing actions and receiving feedback one does not immediately grasp what actions can be afforded. These conventions can be divided in accordance with various constraints offered: physical, logical, and cultural. (Norman, 40)

Physical constraints are the limited spaces on the screen where one can tap and expect feedback. The embossed icons or clearly defined buttons are good conventions that call out for a command “Click here” or are good action translators (Irvine, 5) suggesting that other places are not meant to be tapped. Another physical constraint would be the otherwise white background that offers no perceived action possibilities.

The intuitive swipe left or swipe right features on each photograph on tinder are still a learned convention. Maybe if they were presented as a stack (where we could see that more pictures exist behind) then the notion of swiping left-right as if swiping through flashcards would have been a very good perceived affordance.

An easy to spot logical constraint is the photo that appears after the one you swiped. It demands a similar action out of you. The logical constraint generates a clear affordance of what to do with the pictures underneath.

Since most GUI are now touch-based, designers are primarily left to operate with cultural conventions as a way to achieve perceived affordances, but it would be great to see a perceived affordance arising without the use of cultural iconography.

Reference:

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

Gibson, J. J. (1986). The Ecological Approach to Visual Perception. Psychology Press.

Martin Irvine, “Introduction to Affordances and Interfaces.”

What Are Affordances in Web Design? (2014, July 15). Treehouse Blog. https://blog.teamtreehouse.com/affordances-web-design

Affordance and Design

In this week’s readings, Murray argues that by “calling objects made with computational technology new media obscures the fact that it is the computer that is defining difference not novelty.” And because of the fact that this term, new media, includes a variety of applications, it may encourage sloppy thinking and with sloppy thinking, as Norman also suggests, often leads to sloppiness in design. Thus, Murray recommends replacing this term with a single new medium, digital medium. She says that there are four representational properties of digital environments/medium: procedural, participatory, spatial and encyclopedic. Let us take a look at iOS keyboard. Why is the iOS keyboard good? Although the virtual keyboards of other systems are basically larger than the iOS keyboard in terms of size, their visual experience is still a mess in comparison.

The iOS keyboard is the ancestor of the (new generation) virtual on-screen keyboard. It has many innovative designs and technical applications. When the first generation of iPhone was launched, Apple made a detailed and comprehensive video introduction, including an introduction to the iOS keyboard. Steve Jobs introduced the iPhone at WWDC 2007 starting with a revolutionary user interface; he started with listing four mobile phones with full keyboards, Moto Q, BlackBerry, Palm Treo, and Nokia E62, which were called “smartphones” at the time. Their buttons and operations cannot be changed, whether you need it or not, it is always there. But different applications require different user interfaces and so in contrast, the iOS virtual keyboard only appears when needed. Different keyboards are used in different applications. For example, if you open up Safari on your iPhone, your keyboard will automatically provide you with a keyboard that has “.com”. At the same time, the virtual keyboard needs to solve the problem with accuracy and efficiency so that typing can be easy and fast. And the use of magnifying glass for easy cursor repositioning, automatic correction and phrase matching. There is also an innovative design that predicts the next letter, word, phrase or even name based on the dictionary and users’ typing habits or preferences. Speaking of another innovative design of the iOS keyboard, it is the enlarged display card when the key is triggered. Whether it is from the visual experience before, during or after the operation, the iOS keyboard makes people feel its implicit excellent performance. Although in fact we are just tapping the glass/screen, it enriches the experience. It is just a piece of glass. Why do some people have a better experience and some don’t? Of course, this is not too much related to glass. It is mainly because of the interactive interface. For example, the iOS keyboard is easier to press than the Android keyboard, so what are the advantages and features of the iOS keyboard? The answer “good design” is too general so let’s look at affordance.

Clear information focuses more on the organization, arrangement and presentation of information. This is more obvious in user interface design because the carrier of the affordance and the perceivable information are similar. Since the interface is displayed on one screen, then the information, the organization, arrangement, and presentation of the “scale” determine its pros and cons. The reason why the iOS keyboard looks better is not because it looks more like a physical keyboard but because of the exquisiteness of the scale. Just like the virtual keyboard, the interaction through the interface is a process. Under this affordance (in some cases, it can be used for input) is embedded with many other affordances, and its user experience is an integral process.

References:

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

Janet Murray, Inventing the Medium: Principles of Interaction Design as a Cultural Practice. Cambridge, MA: MIT Press, 2012. Selections from the Introduction and chapters 1-2.

Affordances of Digital Media

Mary Margaret Herring

One part of this week’s reading that I found to be particularly interesting was Janet Murray’s (2012) argument that new media should instead be called digital media. She writes, “[c]alling objects made with computing technology ‘new’ media obscures the fact that it is the computer that is the defining difference not the novelty” (Murray, 2012, p. 8). Since this computing technology is central to the way that we interact with digital media, I’d like to apply Murray’s ideas to the screen interface on my laptop. To do this, I will start by examining Murray’s argument that there are four affordances of digital media and then discuss how those affordances shape the way that we interact with digital media.

Murray argues that digital media are procedural, participatory, spatial, and encyclopedic (Murray, 2012). Because computational technologies are programmed to execute conditional behaviors, Murray (2012) argues that media are procedural. Further, digital technologies are participatory because they are scripted for both the user and the machine. This allows the interactor and machine to interact in a way that is meaningful to each other (Murray, 2012). Murray (2012) also states that digital media are spatial because it creates digital space and encyclopedic because they are able to store more forms of information than any medium before could. While all affordances are certainly interesting, I will focus on the encyclopedic and spatial properties that digital media afford.

I will apply these affordances to the home screen on a MacBook. Because computers are able to store large amounts of data, many people use digital media to store a large number of files and applications. The home screen creates a digital space where the interactor can access their files placed on the desktop and applications in the toolbar. To navigate this digital space, the laptop affords actions like using the trackpad or mouse. Similarly, text or shortcuts may be entered on the keyboard. These affordances allow users to interact with the space by clicking, dragging, and typing. Often users will organize files on their desktop. The designers of the Mac’s graphical user interface worked with the affordances offered by the laptop to allow the user to interact with content on the screen. As the home screen demonstrates, the encyclopedic and spatial properties that digital media afford enable users to interact with media in new ways.

But, the true genius behind the way that the graphical user interface (GUI) comes from signifiers rather than affordances. Norman (2013 as cited in Kaptelinin, 2013) distinguishes between affordances and signifiers writing, “[a]ffordances define what actions are possible. Signifiers specify how people discover those possibilities.” For example, Murray (2012) notes that file folders on the desktop can be renamed and organized like physical folders. This element of the graphical user interface (GUI) mimics conventions of the physical world and makes the organization of information intuitive to the user. In this way, the folder signifies the possibilities of organizing information on the computer by drawing on the user’s prior experience with physical file folders.

A brief tangent: In undergrad I conducted some A/B testing on a news sharing social media site that I created. While I wanted to include research about affordances in this study to motivate the modifications that I was making to the site, I found it extremely hard to understand. After this reading, I now understand the difference between affordances and signifiers and realized that I was actually looking to modify signifiers on the site rather than affordances. This clarification of a research keyword opens up a ton of possibilities for my future research!


References

Kaptelinin, V. (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.

Murray, J.H. (2012). Inventing the medium: Principles of interaction design as a cultural practice. MIT Press.

Affordances and Interfaces of Book and E-Book

Affordances and Interfaces of Book and E-Book
Yingxin Lyu
Books have many affordances. As mentioned in Introduction to Affordances, Constraints, and Interfaces1, they provide paper as surfaces for people to write, read, and print, their shapes are for users to hold while reading, they are portable, and they can be stored in bookshelves. Besides these ones, I tried to find other different affordances.
First, because more people are right handed, they tend to write from left side to the right. Similarly, they read from left to right, thus the book is designed to open from left to right, which allow people to read in the way they are accustomed to. In addition, the affordance is more like a perceived affordance worked with cultural conventions, as Noram’s2 saying. Second affordance is related to what Norman defined as “physical constraint”. He uses a good example: “it is not possible to move the cursor outside the screen.”3For a book, at the end of every page, the reader will know the sentence, or the story is not end although on the present right side of the paper, there is no more content. He or she will turning  the page and start to read one new page from the left side instead of trying to discover more content in the original right or left side pages. The reader knows the constraints, and the “physical constraint is closely related to real affordances”.4
Moreover, about the concept “interface”, Herbert Simon proposes that “An artifact can be thought of as a meeting point – an “interface” in today’s terms – between an “inner” environment, the substance and organization of the artifact itself, and an “outer” environment, the surroundings in which it operates.”5 Thus, a book can be considered as an interface, and its inner and outer environment can be various. First of all, the substance and organization of the book itself is the words or pictures printed in it, or the content; and the surroundings in which it operates is anywhere the reader is, a study, a classroom, or an underground train, but more specific, it must be near the reader to read. Then, it can be summarized as the interaction between the content and the reader. The book shows something readable and understandable, and the reader tries to learn and understand something shown in the book. Now, trying to apply the definition of “interface” as a technical term, that is, “an interface is anything that connects two (or more) different systems across the boundaries of those system”6, to the interaction between the content and the reader, the content actually refers to the knowledge world created by writer, or the editor, and the reader refers to anyone who receive the knowledge through the book. Thus the book, as an interface, helps the knowledge system created by the writer cross the physical boundaries to interact with readers, because the reader can hardly meet the writer or learn from him or her in reality.
Finally, when considering the transformation from the book to the e-book (or the e-book app in smartphones), the function of the book as an interface does not change a lot, but its affordances change in many aspects. First, it becomes far more portable. A physical book is not only larger but heavier; however, an e-book is very light with thousands of book stored in it, and its shape is better to hold with one hand. Second, the e-book imitates the function of how people turn a page with the physical book. This imitation is for a user to understand how an e-book page-turning function more quickly. Third, the constraint of the screen area (and is also the area for reading) let the user understand the end of a page.

References:
1. Martin Irvine, “Introduction to Affordances and Interfaces.” 4.
2. Donald A. Norman, “Affordance, Conventions, and Design.” Interactions 6, no. 3 (May 1999): 39.
3. Donald A. Norman, “Affordance, Conventions, and Design.”40.
4. Donald A. Norman, “Affordance, Conventions, and Design.”40.
5. Simon, H.A., “The Sciences of the Artificial. 3rd.” (1996).
6. Ibid., 4.