1-1. Digital Products and their Functions Ver. 2022.03.31

Consider the Following...

To begin, please use the Google Form sheet below to answer the following question. Your answer will be anonymous. Once you have filled in your response, please look at the answers other learners have provided.

In this lesson, we will learn how to analyze the various visual expressions and features integrated into digital products from several perspectives. Upon finishing this lesson, please reconsider what you have seen here one more time.

Doing so will allow you to compare the "you" from before and after you have engaged the key question of each lesson. What is important is that you experience this learning process for yourself. When doing so, please remain aware of any changes to your vocabulary or perspective that have come as a result of this lesson.

So what is a "function"? Let's think for a bit...

----------

----------

Discovering "Functions"

As you may have noticed, the video above is a fake. In all likelihood, you tried to click on the video and experienced some confusion when it did not play. What I want you to consider here is the following: why did you understand the situation in the way you did, and what led you to click on the video?

Functions refer to what a thing does. In the relation between a human user and a digital product, functions are things that guide our understanding and behavior (i.e., our actions). In the previous example, there was a function integrated into the "video" that led the user to click on it.

Now, what was the function that led you to this action? Take a quick break before thinking up your own answer and continuing on with the lesson.

----------

Q: Why Did You Click on the Video?

As one example, we might think that the play button led you to click on the video.

When trying to understand the functions of visual expressions, it can be useful to think to yourself: what if we got rid of this element? By pretending that one element you are seeing is no longer present, you can get an idea of how that element works in the overall scheme of the product. Now, why don't we consider this point just a bit more.

Our actions are patternized by the culturally embedded experiences we accumulate. Hence, in the context of our society, the play button and play bar indicate that this is a video that can be played.

Here, we should make sure to remember that the smaller parts that make up such contents serve as guides for our behavior.

----------

Functions Can be Analyzed in Terms of Properties and Relations

Moving on, I would like to offer a hint for analyzing the parts of a product. Namely, functions can be analyzed broadly in terms of "properties" and "relations."

Among functions, there are the colors and shapes of an object, i.e., its properties, as well the mutual activities that an object can perform with human users and other things, i.e., its relations.

Let us take another look at the play button. There is a relation between 2 parts with different properties, yes? What function do you suppose each of these parts play?

Now, let us try thinking a bit more from this standpoint of what would happen if we lose elements. Take a look at this image now that the black part has been removed. When only the triangular part in the middle is displayed, the play button does not stand out much against its background. Once we realize that, we will be able to see the function played by the black background behind the triangle. That is, we will notice how it allows the lighter grey triangle to stand out more against its background. Thus, it can be said to function as something that catches our attention visually.

In addition to the approach of thinking about what happens if we get rid of certain elements, we can also think about what would happen if we replace them in order to understand what they do. Now, let's try thinking about what would happen if we changed out some of the constitutive elements of the play button. Please keep in mind how replacing elements can change how something feels to you as you watch the video below. (This video is not a fake, so don't worry and press the play button)

As you can see, having a right-facing triangle is the most important part of creating a play button. As far as size is concerned, it would appear that making the button too large can make it look strange. If you make the play button too large, you won't be able to distinguish it from the video in the background.

On the other hand, making the play button large enough to be perceived and getting a grasp on its core properties can help you customize your design. As an example, try comparing YouTube and Vimeo's video players. As you will notice, the part beneath the triangle is different for each of them. Each of them use their brand-colors as backgrounds. Here, colors serve the function of displaying each site's brand identity.

----------

Hence, asking what would we happen if we got rid of or replaced something can help us understand how the constitutive elements of our digital product act upon human perception and cognition. Next, we will learn about 5 concepts from psychology to help give us more standpoints for analyzing an object's functions.

What are the Fundamental Principles of Interaction?

Interaction refers to the mutual activity (i.e., the communicative process) between humans and objects. In a broader sense, this term also covers the mutual activity occuring between one object and another.

Interaction relates to the act of deciphering what possibilities the digital products we use can offer us or how we can use each particular part of a product.

----------

The 5 Fundamental Principles of Interaction

The fundamental principles of interaction we will deal with come from cognitive scientisit D. A. Norman's The Design of Everyday Things. We can consider interactions between humans and objects outgoing from the following 5 psychological concepts. Here, we will consider each concept as we continue along with this lesson.

1. Affordances
2. Signifiers
3. Mapping
4. Feedback
5. Constraints

----------

1. Affordances

The term affordance refers to the relation between a person's capabilities and a thing or, otherwise, the possible actions that a person may perform.

Let us think briefly about the relation between these educational resources and yourself. Naturally, in order to access the digital contents you are currently reading, you are almost certainly using some kind of device.

Let us suppose here that you are using a tablet with a touchscreen. Try to imagine the relation between the capabilities you and your body possess and the tablet. What kind of actions can you perform? Generally speaking, you can look at it, listen to the noises it makes, or even touch the screen with your fingers.

Pay specific attention to the fact that the affordances are the relations made between a person's capabilites and an object. For instance, it may not be the case that everyone is able to see the same colors. Additionally, depending on things like age, what one's body is capable of varies among individuals. As an example, we can think about what is afforded by a chair. An adult may be able to easily pick up and move a chair. However, for a baby, it is little more than a tool to grab on to or a crutch to be used for standing. Hence, how one relates to a chair will change in accordance with what he or she is capable of.

Considering affordances is helpful for thinking about things like how a person with certain capacities might use an object or how that object could potentially be used.

----------

2. Signifiers

Signifiers are a guide for our actions. The concept of affordance refers to showing the possible actions that a person could take. However, if there are too many possibilities, one may very well get confused and not know what to do. This is where signifiers come into play. Signifers provide "signs" that show what one can do and help determine the possible actions one can take.

Once again, we shall assume that you are reading this lesson on a tablet. Affordance-wise, we can see that the whole screen is operable. However, once we have the play button as a signifer, we will understand which part of the screen we are supposed to touch.

As for other examples, we can see that scrollbars, buttons, text, and URL links all function as signifiers. Furthermore, the mouse cursor on your screen is another important signifier.

----------

3. Mapping

Mapping refers to the correspondence between the elements of two sets.

Let's think about scrolling on a screen. Please try to imagine the screen moving right and left whenever you move your finger up and down on the screen.

If this were the case, it would be quite difficult to understand what is happening on the screen. The scroll function works more naturally when you are moving up and down on a vertical axis. Thus, moving your finger up and down is mapped to making the screen move up and down. In this way, reconciling the embodied experience of the human user with what is being experienced on the screen creates a more natural mapping.

Let us think of one more example. To begin, imagine that all the font in this lesson is the same size. There is no longer any space between paragraphs and everything is the same color. How would you feel about this?

Take another look through these educational resources. At the beginning of each lesson, the title takes up the full screen. The font and size of the text have been adjusted at the start of each paragraph. Occassionally [----------] spaces are inserted to help give you room to breathe. In this way, the collective meanings and functions that constitute these contents are mapped out and put into visually accessible groups.

----------

4. Feedback

Feedback refers to the communication of the result of an action. For instance, if you move the mouse, the cursor will also move. How the system responds to your behavior is what we call feedback. While they are often overlooked, sounds can also be a form of feedback.

Try thinking of an example of feedback in this lesson. In other words, look for a case in which your actions caused a signifier to change. For instance, what happens, when you try to copy the text?

It would be quite inconvenient if the text you selected didn't change colors.

Now try thinking about examples outside of this lesson. After you filled in your answer on Google Forms, you probably received an automatic confirmation message. If you didn't, you might get quite worried that your answer wasn't received. The same is true when you buy things or sign up for events over the internet. These confirmation messages are just one example of feedback, i.e., the communication of the result of your actions.

----------

5. Constraints

Constraints limit the potential actions we can take. There are 4 categories of restrictions.

• Physical Constraints
• Cultural Constraints
• Semantic Constraints
• Logical Constraints

-----

Physical constraints: Think of a lock and key. If they do not share the same shape, the key will not be able to open the lock. In this way, physical constraints refer to physical interactions that limit what we can do.

Now, think about these educational resources. Whether it be a PC, tablet, or smartphone, you will be looking at this digital product on some sort of device. How much of this lesson you are physically able to see will be restricted by the size of your device.

Otherwise, if you are using a desktop PC, you will be able to use a mouse and keyboard to interact with this digital product. But, if you are on a touchpad, you will have to swipe and flick and control everything with your fingers. Thus, the physical constraints you face when using these digital contents will depend on shape of the device you are using.

-----

Cultural Constraints: These refer to customs and rules that are widely accepted in a specific culture. Now, we recognize the play button as a signifier that shows us how we can make the video play. At the base of this recognition, though, are the customs of the digital culture we belong to.

Because cultural constraints are often unconsciously ingrained into our customs, it can be difficult to make ourselves aware of them. When writing a sentence, we go from left to right. But what about if we went the other way? That would be quite strange. This is one cultural constraint. Yet, a long time ago, it was common to write from right to left in Japan. Thus, we can observe that cultural constraints change with the times. How fascinating!

-----

Semantic Constraints: Semantic constraints refer to how context and situation will limit the meaning that can be conferred upon an object. Please pay attention to the triangles in the image below. You can see that depending on the situation, the same shape can be said to have different meanings.

The triangular shape used for the play button, can also mean forward or backward. Otherwise, it may be used to show that there is a menu box available. There are likely other potential uses as well.

How are we able to understand these differences? It is because we have gradually learned how to use digital products in our daily life. After accumulating experiences, we become able to map out the context of the triangle and meaning it has been given. Semantic constraints are thus dependent on the habits built up between ourselves and digital products. As a result, they are liable to change in the same way that cultural constraints are.

-----

Logical Constraints: These can be thought of as cases wherein it is possible to infer something even though you do not have the requisite knowledge beforehand.

Here is an example: say you have to complete a 100 piece puzzle. You will necessarily have to use 100 pieces to complete the puzzle and there will be no pieces left over. Thus, if a piece is left over, you will know that there is a problem. This kind of mapping is referred to as a logical constraint. Logical constraints give birth to natural mapping and help us make inferences.

Think about one more example. In these resources, we saw that there are 4 sections on display. Yet, if it ended at the third section, we could infer that there is a problem. The logical constraints would be broken. Hence, logical constraints are useful for finding errors and unnatural mappings.

----------

Up to this point, we have looked at 5 concepts relating to human-object interactions. The fundamental principles of interaction are useful not only for deciphering a digital product's functions, but also for deciphering your relation to the world you live in. Understanding new concepts means increasing the perspectives available for you to dissect the world you live in. The concepts we have dealt with here will likely provide opportunities to broaden your field of view.