Category Archives: Week 6

Affordances and Constraints of Gmail

An app that has always perplexed me is the Google Mail app on Android. It can be the hub of your email services if you wish. However simple the app may present itself as there are constraints to its design. It opens similarly to most other email apps you can find on Android or Apple devices. When opened it reveals an updated inbox with highlighted text for your unread messages. The affordances are a coherent view for your unread vs read emails, this must remain consistent with other messaging services such as iMessage and Whatsapp as the human brain has now come to identify a certain user experience when it comes to email/messaging applications.

However, this app, much like other services, wishes to be the place where all your email accounts, business or personal, can be stored. What is important for Gmail is how to compile these accounts onto the screen. It uses the standard Google interface of a blue circle in the right-hand corner which contains your initials. Once tapped on, it reveals all your accounts with highlights for accounts with new emails. The “hamburger” button on the left reveals the different inboxes and folders of an account, with the option of viewing all inboxes. However, here, there is no indication of unread messages here.

This separation of inboxes on a screen that is already busy with text does on the surface make sense. We are made to interact largely with one account at a time. This remains the same online with Gmail. Let’s say you have three accounts, one for school, one for personal and one for business or other use. You can have three tabs open on your computer with further tabs within the interface of Gmail identifying different folders. This presents a potential total of 12 different folders needed to be clicked on. This is a constraint of the idea that our accounts must be separated and organized by Gmail. They have tried to find a fluid and consistent interface. However, on a phone screen, it is virtually impossible to gauge a total, comprehensive view of what you need to pay attention to. Perhaps this is a cunning way to get you to spend more time on the app.

What is clear from this examination, is that email has become a human necessity for those in the professional or educational world. The layout has remained the same for years. Organizing it in an efficient way which is also cohesive with our basic human understanding of how it “should” look, is the complex task here. I found it particularly intriguing to learn about ‘external representations’ from Zhang and Patel. It seems emailing services have adhered to the ‘long term memory aids’ which have become the standard. This creates a set behavior, one must follow on the app, perhaps tot the detriment of the creative growth of a platform.

Bibliography :

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.

Martin Irvine, “Introduction to Affordances and Interfaces.”

A new understanding of design

Jun Nie

This week’s readings lead me thinking about what design is exactly. I have learned a Graphic
Design lesson last year, and I modified my draft eight times under the guidance of teacher so that it would have a better visual effect. At that time I was so confused about whether design had a correct answer, why the images and texts must be put in the certain position with specific matching of color and size. Now I realize that some regulations, the design rules underneath play an important role in the process. All the elements should match our aesthetic judgement, fitting with conventions that have accumulated for many years.
Even though the content of a specific book may not change while its material carrier has
experienced great evolution along with the technology development, we can not ignore the
variations of interactive design based on its different forms, which affects the way we think, act
and communication profoundly. When the printed book transferred into a computational, digital media displays, some features had to be preserved, because the interactive design was constrained culturally by users’ habitual expectations which are slow to change. Such as the way we slide the pages, use a bookmark to remind and take some notes with different strokes. Some electronic reading devices even mimic the texture of paper in order to provide a more familiar reading experience to users. At the same time, a considerable interactive design provides more convenience for users to change the size of the words and images, solving the problems of screen adaptation within different devices. Besides, more and more details of design have been added, satisfying multiple needs by observing users’ interaction in a real world. Such as the function of exploring the first few chapters before buying, looking up the meaning of new words by long press and a share button showing noticeably.
Good design leaves enough clues for users to perceive during interaction, because they respect the affordance continuities and keep improving under different technical conditions. However, there are not universal design principles as necessary properties of software or interfaces, because different physical constraints and service functions will stimulate disparate interaction intuitively, which should be considered specifically under multiple contexts and connotations and make some particular design choices.

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.

The Affordances and Constraints of Instagram

It is hard to recount since when Instagram has deep rooted into my social life. Sometimes when I unlock my phone, I will mechanically search for the little camera icon in purple and orange and open it. So, when it comes to affordances and constraints, I think of Instagram. As Norman points out, “an interface designer should care about the question of whether the user perceive that clicking on that object is a meaningful, useful action, with a known outcome” (40), the designer of Instagram did it and made users to focus “on the key functional elements and their relationship to one another in the app”.

First, the design of Instagram applies lots of affordances for human capacity for symbolic expression, from the graphic icon to  symbolic icons representing each interfaces of the app. Starting from the design of Instagram’s icon, which features as a camera lens, it reminds users of Instagram’s main function, taking and sharing photos. When the user opens the app, there is a camera icon on the top left corner, which enables the function of “story”. Obliviously, the camera is a symbol of shooting photos and videos. Similarly, the TV icon on the top right corner represents the function of IGTV, which enables the users to upload videos longer than 1 minute. The TV icon reminds people of channels, programs and long videos.  The home icon is a symbol of homepage, the magnifier icon represents the searching function, and the portrait silhouette represents the user’s personal profile. What I find the most interesting is the icon of paper plane. When I was in primary school, I used to throw a paper plane to my friend, with some notes inside, if she sits far away from me in the classroom. This icon enables the feature of adding others’ post to my story, sending the post to other users, and commenting on others’ story. Sending “our current feeling”, such as commenting on other’s stories and sharing posts to them, to friends who are far away through Instagram is like sending message through a paper plane. Instagram is really good at connecting the symbolic meaning of objects to icons inside the app, which helps users to navigate the application by enabling them to “subconsciously” find out the function they need.

Second, the spacial affordances of Instagram give users a more fluent and comfortable user experience. Instagram pages are highly organized, both the nexus structure and the shape of its elements. According to Murray, users in the digital age assume that spatial positioning is meaningful and related to function. Instagram is structured based on its functions. In the home page, the story section is structured horizontally, the user browsing section is structured vertically and the navigation bar is structured horizontally. The story function is composed of the horizontally arranged avatars of the same sizes. The spaces between them are just right to make users feel comfortable. When the user click into one user’s stories, there are several progress bars also arranged horizontally, on the top of the page. If the user switches to the next user’s story, the interface will act like a turning cuboid, reminding him of turning the page of a book. No matter what page the user is in, the avatars are always in the shapes of the circle. The “like, comment, send post and save post” icons and main navigation icons are also arranged horizontally. Instagram’s designer puts icons of  similar importance and functions next to each other to give users hints of the functions.

One of the constraints of the app is that the user can only browse one photo at a time. If he wants to see more, he needs to scroll over the screen. If the post is consisted of multiple photos, the user needs to scroll the photo to see other photos. This constraint actually makes the layout of the application clearer and more well-defined by giving less information to the user at one time. It also reduces the number of the fundamental tasks the user needs to do at one time. If the user sees there is multiple photos in one post, he knows to scroll over to see more. Moreover, if the user likes the photo, he will click into that blogger’s personal page to see more photo. That is when the user knows he finishes a task and need to move to the next one.

Another constraint is that Instagram implants advertisements “implicitly”. The company appears on the homepage of Instagram as a user: it has avatar and Instagram post with caption, and users can like and comment on its post. But different than normal post, there is a bar with “shop now” at the bottom of the advertisement. To attract users’ attention, the bar will change color if a user looks at the post for more than 2 seconds. The bar will lead users to the shopping website of the company. Since the user can simply scroll over the advertisements, this constraint reduces the annoyance they bring to the user.

The affordances and constraints of Instagram have a lot to do with human sign and symbol system. It brings us back to the core of Instagram, photo, which itself is a human symbol.

Affordances: Potential and Actual

As commonplace as discourse on “affordances” has become in design theory and media theory has become, I deeply sympathize with Donald Norman’s attempts at correcting their rampant misuse and providing greater specificity as to what is meant by an affordance or a constraint. I disagree with Norman, however, when he implies at the end of his article, that discourse on affordances and constraints might be better suited if left to “physical objects, real knobs, sliders, and buttons” (p. 42). In fact, given Janet Murray’s charge to consider all computational media as a single medium, I think the application of affordances to digital media demonstrates the philosophical richness of the concept in a way that retrieves and updates the foundational concepts of potentiality and actuality.

Potentiality has to do with the possibility of an occurrence, whereas actuality has to do with the reality of an occurrence. In terms of affordances, JJ Gibson’s original concept shared much more similarities with potentiality than actuality. A physical book, for example, could afford anything which its properties would feasibly allow, including expected features such as reading, dog-earing, page turning, but also including absurdities such as throwing, sitting-on, or even eating. For Gibson, affordances have to do with the limits of potentiality for an object — what can be done with it, not what is done with it.

Concerned with design, Norman talks about perceived affordances in terms of communicating the proper use of an object through design choices, and not about the total scope of potentiality of an object. In other words, Norman talks about holding the user’s hand in leading them through to actualized affordances as useful for the user in distinguishing the most productive use of an object as opposed to the total scope of its potential affordances. For example, e-readers, like the early Kindle designs encourage the actualization of a “turning the page” affordance by the design of buttons with arrows pointing in either direction. This design operates as a sort of communication to the user that the device contains this potential affordance, for which it is designed to be actualized. For Norman, inserting these buttons did not “create the affordance.” The affordance existed independently of the buttons as a function of the computational design of the Kindle. The buttons merely work as a tool for the user to actualize the potential affordance which was there all along.

For examples like the book, or even the Kindle in some respects, this delineation seems rather tedious. However, if we take literally Janet Murray’s claim that all computational media are one medium, it becomes immediately much more useful. Murray claims that all digital media is “created by exploiting the representational power of the computer” (p. 8). In other words, she is stating that all digital media are defined by the set of affordances associated with the capacity to interpret and represent electrical impulses in a way understandable to human users (this definition is overly broad because it doesn’t account for differences in input like keyboards or touchscreens, but it works for our purposes here). Therefore, all computational media possess the potential affordances to do any number of actions associated with this process: scroll through a webpage, click a link, etc. The role of the designer, particularly the designer of computational software, is to guide the user to actualizing the limited set of useful potential affordances available in a particular program. As Norman says, “The affordance exists independently of what is visible on the screen” (p. 40), it is the designers role to make it visible or obvious to the user so they might actualize it.

Works Cited:

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

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

Design principles and affordances in time-managing app

Xiebingqing Bai

Time managing is a task embedded in human history for a long time, and we have used many tools to do that. In ancient times, we managed time mainly by calendar, but there is limited space to write in physical calendar and it’s hard to change a plan into another date. Nowadays it evolves into diverse digital artefacts. The time-managing apps can be categorized into 5 types: recording time, making plans, enhance concentration, summing up issues, improve sleep quality. And in digital artifacts the function of enhancing concentration is emphasized more compared to the legacy media. The affordances of time-managing apps design should conform to 3 levels of core human need. In function level, we can easily input our plans and insert them into specific time slots to remind us, and we can set up a period of time to stay undistracted to focus on our work. As for context, this age is the time when we are experiencing unprecedented knowledge explosion and constantly feel anxious about the insufficiency of enough time to learn, thus it becomes increasingly important to manage time properly. In the core need level, human are eager to truly get control over our lives and acquire a sense of fulfillment by accomplishing works. Faced with the paradox of limited time and infinite things we want to do, we always have a huge demand to possess tools to manage our lives. We can see many relevant apps now could reflect those human needs from their design details. I want to take Forest as an example.

Forest is an app designed for people to avoid touching phones and stay focused for a fixed period of time. One accomplished time slot will resulted in a virtual tree grown in the forest, and if you have stayed focus for enough time, you are eligible to plant a real tree in Africa. As a time-managing app, the interface of Forest associates time length with different states of tree growing process, engendering the affordance of visually representing the focused time and encouraging people to set up a longer time. The way of inscription in Forest is also very user-friendly. Instead of typing or choosing a specific time slot as other apps, it sets up time by simply sliding the dot in the circle, and the visual presentation of tree will change along with the dot. The interface design in Forest is very simple but clear, making the main affordance as salient as possible. As Janet Murray mentioned, we are interactors rather than users, Forest also performs well for participatory affordance. In the app, you can manipulate your virtual money and choose your own type of tree to plant and build a unique forest at end of the day. It has a mode for a group of people to plant trees together, imposing one more level of responsibility to stay focused, which makes this process into a social participation. And when you accomplish the ultimate goal in the app, which is planting a real tree in Africa, you could acquire a sense of ritual and fulfillment. But the constraint in this process is the app can’t show you exactly where the true is planted, which may cause some frustration and could be refined later.

Time-managing app is an example of how legacy affordances transferred into digital formats and how it has been refined in the process. We can see the spatial, procedural and participatory affordances embodied in them. And it scripts the interactors in a sense and more and more accents the participation process.


Martin Irvine, Introduction to Affordances and Interfaces.

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

Donald A. Norman, Affordance, Conventions, and Design. Interactions 6, no. 3 (May 1999)

Affordances and constraints in the interface of Spotify

Zijing Wang

Norman thinks that there are two types of affordance, one is real affordance another is perceived affordance. I think affordance is the “just right” status of an artifact. People can immediately know how to use the artifact without much consideration. The Affordance in HCI is the object’s feedback to the person. What you can learn from the affordance of objects depends on your immediate psychological expectations, plans, subjective will, values, and level of knowledge. Constraint is more like rules and regulations that confine what users can do and cannot do. Physical, logical, and cultural constraints draw out the line of artifacts. Affordances show the range of possibilities and constraints limit the alternatives

Take Spotify as an example. When First initiate the app, its interface has three modules (p1): sign up free, continue with Facebook, and log in. These physical constraints control the attention of users and give only three ways to enter the app. The primary color in this interface is black, while the modules are white with a rectangular boundary. Differences in color make the modules look like real buttons in reality, which provide the affordance of pressing.(pic 1)

After clicking the “login,” you will enter another interface. As picture 2 shows, the “login in” would be dark unless users fill the information blank correctly, which is also a physical constraint that limits users’ actions.

(pic 2)

Spotify search interface(picture 3) establishes table-like grids and set up squares of the same size to distinguish similar item from different purposes. The search bar is on the top, and the menu bar is at the bottom. Music genres in the middle part of the grid is an essential part of the app. This constraint makes users focus attention on music information. In the search bar, there is an icon that looks like a microphone. Users naturally understand the function is using voices to search or control this app. This psychological constraint simplifies usability and reduce errors.

(pic 3)

In the home interface(picture 4), Spotify divides the page into different parts like “made for you,” “recommended for today,” “new releases for you,” etc. This affordance displays a variety of music styles, thus enhance symbolic expression on music. Every square has a representative picture which provide affordance of understanding the possible songs in this playlist. When you click on the square, it will become light and small compared to the other square. This change gives us immediate feedback on the consequence of clicking.

(pic 4)

In the Spotify play interface(picture 5), it has some icons that use to change songs or pause songs and a player bar that can switch playback progress. These are conventions that display conventional methods of understanding and interacting and are useful for making systems consistent and easy to use.

(pic 5)

In conclusion, as Murray pointed out in his articles, Good designs in HCI should resonate with users’ expectations. To design highly interactive products, designers need to focus on what is happening in real life instead of creating in a laboratory.


Martin Irvine, “Introduction to Affordances and Interfaces.”

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).

Affordance in Paper Books, Digital Books and Audible Books

As indicated in Wikipedia, book, a physical object, is a stack of usually rectangular pages oriented with one edge tied, sewn, or otherwise fixed together and then bound to the flexible spine of a protective cover of heavier, relatively inflexible material. This kind of book is relatively modern compared with stone books, bone books created by our ancestors. All kinds of book can pass on information from generation to generation and this information is one of the reasons why we live the society today, with lots of rules, code, conventions, which in turn influence book’s content and functions.

Let’s first take a look at a traditional paper book, whose affordance is reading. However, reading is a general idea and in be more specific, with a book, we can search information, gain knowledge, explore ideas, etc. However, different people may have different perceived affordance for books, since “under the distributed cognition framework, affordances are distributed representations extended across external and internal representations”, as mentioned in Distributed Cognition, Representation, and Affordance. For example, from a blind man’s perspective, a paper book may be the same as a brick. In this case, the book doesn’t afford reading, but constructing.

The interface of a book is every page with information. Generally, we interact with books by turning the pages with hands. In this case, the book affords the action “turn”. In order to achieve this function, a book should have a reasonable size and weight, which are compatible to form factors to make sure that we can carry a book by hands and turn pages easily.

With the development of technology, now we have audible books and digital books. These new types of books have new affordance which set lots of challenges for designers because they not only have affordance inherited from paper books, but also develop their own affordance in a new interactive system. Take the most widely used digital book Kindle as an example. We can read it and carry it as a traditional book for that the design of Kindle tries to imitate a real book: the interface and the size. Different from the past that we can only buy books in a bookstore, we can shop in Kindle directly and the books will be downloaded in it within seconds. In this way, Kindle affords shopping and downloading.

In the case of audible book, from my perspective, depending on its function, the audible book is a book, because it imports us information and this information are structured in a more regular way in order to express the ideas or illustrate plots better. However, if we treat audible book from a different angle, it could be a radio program because of its format and the way it interacts with people. This kind of book exists in broadcast applications and affords pronouncing and “reading”.  In order to offer better user experience for us, for instance, the designers of Amazon audible book application Audible add an affordance to it: changing the speed of radio so that people with difficulty in listening can adjust the speed based on their preference.

Books keep evolving and their new affordances might appear. This outcome can be illustrated in a distributed cognitive system which consists of internal and external representations. The development of external representation drives us develop our internal representation and more affordance are required in order to bridge across them.

In sum, affordance will change along time and space with inner motivation of human and the characteristic of outside world.


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.

Martin Irvine, “Introduction to Affordances and Interfaces.”

Affordance and Restrains in the Interface of Lime and Scooter

Xueying Duan

Affordance and constrains present us with a direct perception of an artifact as we see it. So the process when an artifact is designed also accord with the affordance principle that allows us to quickly specify its function under the outer cover of it. When considering an artifact, the inner function should be appropriate to the outer environment that the artifact can serve its purpose perfectly. For this term, I come up with the invention of scooters as well as the application Lime which serves as an electric scooter rental platform.

Firstly, Scooter provides me with a good example of the understanding of affordance and constrains. Scooter as a new transportation vehicle shares the same affordance with traditional vehicles that enable citizens to travel for a long distance within the city rather than walk on foot. Scooter exists during the evolution of a skateboard, that notify people to stand on the large deck and generate it with rolling two wheels at the front and back. As it comes to people that it is often difficult for many of us to keep a balance on a skateboard, a scooter installs a standing rod to help navigate the direction as well as keep a balance. There’s also a kickstand in the middle of the deck to mobilize the whole scooter when the user wants to park it temporarily. These are all physical affordance according to Zhang and Patel. Moreover, an electric scooter also has an accelerator on its handle that provides propulsion to the scooter. As the handle is designed to be a cylinder as well as the wheels, users can easily get to know to rotate the handle for accelerating as it matches with the principle of perceptual affordance. We also learn how to stop an electric scooter using brake that is a convention from the familiarity of the bicycle. These characteristics enable us to quickly identify a scooter’s affordance when look at one rather than any separated part of it. Also because we’ve already familiar with many types of vehicles like cars, bicycles and scooters. We can easily see their constrains. The usage of a car is constrained by its physical appearance that limits its driving occasion, road condition and requires the accessibility to a gas station. The application of scooter is limited by its electric support that one can hardly cover a long distance using a scooter. Also, it might be not that firm for some occasions. But we can still see the remediation between a scooter and a car that scooters have gradually been optimized to support more outing occasion.

As for the interface of the application Lime, firstly we can quickly identify it as something related to a scooter from its icon as a wheel. The shape of the name “lime” also accords with the shape of a real wheel. After entering the “desktop” of it, what presents us is actually a nearby map that shows the location of the available sharing scooters. The explicitness of the location of the scooters as well as the annotation about the distance and estimated time all influence the decision-making process of a consumer as it has provided many conveniences. On the bottom of the interface is a “scan” button with an icon of a line in the middle of a square. Users’ are so familiar with the QR code and the scanning instruction on our other applications that we get to know there will be a scan box for us to put the QR code on the body of a scooter in it. Moreover, there’re small battery icon beside each available spot for scooters that shows the remaining electricity of the specific one. When a user pressed the scooter icon, there exists a command whether to ring the scooter or reserve it, as well as the remaining distance it can cover and the exact spending on this journey. It also shows the navigating reference line for the user to reach the scooter faster. Moreover, while moving the map to some remote area, it also shows the parking-forbidden area which is marked red on the screen that leads us to acknowledge the appropriate parking area. The whole system is carried on the direction function of Google Map and an online database of the condition of each scooter as I can hardly find its constrains as a user. However, from the system design and accumulative perspective, Lime also need permission to some private data like payment methods and location service. And this function can be constrained when people do not have a powered smartphone with cellular data.

Designers have always been doing some refinements to a pre-existing product to make it affordable with people’s daily needs and habits. And we should always see our nearby object from the perspective of system designing to see how something is designed under the consideration of its affordance, constrains and interfaces.


Martin Irvine, “Introduction to Affordances and Interfaces.”

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.