1-2. Observing Digital Products Ver. 2021.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 section, we will learn how to observe digital products using the fundamental principles of interaction.

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.

What is Observation?

If we were to summarize the kind of definition one would find in the dictionary, we could say that observation could be understood as finding something new by paying close attention to an object, the situation it is placed in, and the changes it undergoes.

Have any of you paid close attention to digital products in your day to day life? What does it mean to pay close attention to an object's situation and the changes it undergoes?

As an example to help you think, please watch the following video (1:22). You will see a scene in which a white team and a black team pass balls back and forth. Make sure to count the number of times that the team in the white uniform passes the ball.

----------

What did you learn from this video?

In this video, the "constraint" that we must count how many times the white team passes the ball shapes our actions. As a result of focusing our line of sight on the ball, we don't even notice the gorilla entering the scene.

However, even without this kind of direct constraint, what we can observe will change in accordance with our state of consciousness. Our subjectivity restricts the range we are able to observe. This is referred to as cognitive bias. It is one type of constraint that determines our actions. In order for our observations to be objective, we must become aware of the restrictions that we make unconsciously.

Here, we can learn an important point. Merely paying close attention to an object is little more than looking at what is in the foreground of one's consciousness (in this case, how many passes have been made). In order to objectively grasp an object's situation and changes, we need to be able to start from this cognitive bias and open our eyes to what is in the background of one's consciousness (in this case, a gorilla).

What is important is not to look only at the object, but the relationship between the object and human users. Additionally, we must become aware of constraints that determine our state of consciousness.

----------

Approaches to Observation

"Experience" as User, "Analyze" as Creator

Creators and users are able to engage in communication indirectly through the mediation of digital products. Whenever you send an email to someone, you are indirectly communicating with them through the email application. Here, I would like you to recall the fundamental principles of interaction we learned before.

Now, the creator will have to anticipate the users' psychological state and goals in order to give them appropriate hints about how to use the digital product. The user relies on their grasp of these hints in order to use the product. In almost all cases, this is done at an unconscious level through the mediation of the user's culture and habits. Hence, these cultural and habitual constraints serve to form the hints that help us understand a product.

The observation of digital products is generally done from the creator's perspective. It entails focusing on how these hints influence users and analyzing interactions between a product and its users. Put differently, observation consists of trying to understand how a product guides our perceptions and actions to understand the communication between humans and objects.

Thus, observation is not something we do often in our daily lives.

In some cases, the creator will shift the blame for their attempts at expression not being intelligible to the user. Is this the right attitude to take? Often, such creators assume that users will carefully observe the digital products they use. However, sadly enough, observation is not something we do on a day to day basis. Hence, creators must remain aware that users will not thoroughly observe their products. Users move by feeling, not analysis. Skilled creators will likely keep in mind how their product will be seen by users as they are making it.

Experience as user, analyze as creator: this is a necessary art for properly understanding an object.

-----

The Observational Process

First, Go In With An Open Mind

It is crucial that one starts observation by getting a feel for the changes that take places in his or her own perceptions and emotions without analyzing the object at hand. Do you still remember your experience of the video you saw above?

"That was so simple! What did that mean? How interesting! If it were me, I'd have done things differently." Make sure to listen to your own voice when you find youself thinking these kinds of things. That is to say, you must make sure to take in your own experience of yourself as a user. It is helpful to write memos or notes recording these impressions.

-----

Pose A Question And Start Analyzing

Before you can start analyzing, you will need to come up with a question. Your experience as a user will be quite helpful during this process. Ask yourself why you felt positively or negatively about something as you look over the product one more time. It is the most obvious feelings that are the most valuable to analyze. Now, let us look at one concrete approach.

Experiencing As User; Posing Questions

Now, I would like to introduce the process in which our impressions and understandings come from when we observe a product. To start, I would like you to look at the web formatted digital product, 2019 Graphic Design Trend. What impression did you all get from this product.

For instance, you might feel that the expressions present here all coincide nicely with each other. In this case, we could ask why these expressions are so consistent with each other.

In order to answer this question, we must observe the product and find the source of this consistency. When observing, keeping in mind the fundamental principle of interaction we referred to as constraints can be helpful. Please revisit section 2.1 for more details on this topic.

----------

Constraits Create Consistency

Digital products have physical, cultural, semantic, and logical constraints. When looking for what creates a sense of consistency, we can focus on physical constraints and logical constraints in particular. Here, what kind of constraints can we pick up on?

-----

Physical Constraints and Media Formatting

This 2019 Graphic Design Trend is a webpage created using Adobe Spark, a specialized software for putting expressions into a visual story.

First, let us explore the two main patterns for accessing information. There is sequential access, in which information is presented along a linear progression, and random access, wherein there are multiple paths and choices to take for accessing the information.

Sequential access is like following a trail, where we move from one spot to the next on our way to learning what we want to know. In other words, there is a rationale that guides the order with which we are presented information in. If the order of events is changed drastically, it could cause a user to lose critical information needed to understand events properly. On the other hand, random access allows us to choose how to gather information freely.

Access patterns change greatly depend on media format. They can be organized as follows into the diagram below. Please think about how you take in information as you look at the media and access format diagram below.

For websites, if the process in which information is distributed is linear, then we refer to it as sequential access. However, if it is not linear, then it is referred to as random access.

Let's go back to the 2019 Graphic Design Trend page. From beginning to end, access to the information proceeds in one direction. Hence, this is a case of sequential access, similar to other things like lectures. The order information is presented in is decided in advance by creator.

Yet, when comparing a webpage with something like a lecture, it is safe to assume that there are differences between different forms of media, even though they may both be cases of sequential access. In a lecture, no matter how much you desire it, it is not possible to speed up or slow down your professor's explanations. However, on a webpage, the user can decide how much time it takes to go through information. Do you read through the webpage slowly? Do you click on all the links? Do you skip them? This is all up to the user.

In other words, a web page's sequential access is similar to reading: the user is able to actively control speed in which they go through the content.

Now, here's a question for you: is Hokkaido University's OpenCourseWare site a case of sequential access? Or is it a case of random access?

As you can see, this is a case of random access. Newspapers and online news sites, subway maps, and more are all made so that the user can choose which information to access. Even if the sequence that different pieces of information are presented in will change, it will not have any great influence on our understanding of the content.

Here, I would you to be aware of the fact that physical constraints caused by the form the media is presented in will in turn constrain the flow with which we obtain information.

A rational observer will first start by grasping the whole and then moving on to individual parts. Let us look at one more example of an over-arching physical constraint.

-----

Physical Constraints and Devices

Websites can be viewed from a variety of different devices. Depending on what you choose to view them with, the way their contents are presented will differ.

If you are using a web browser on you personal computer, you will be able to adjust the axes of your browser or use Chrome's developer tools to observe how it would look on other devices. In the following video, you will see how things appear when using developer tools.

When looking at websites in this way, you will see subtle changes in the size of fonts and images as well as the websites layout. In this websites case, even if the device changes, the impression we get from it will not change. Why is this the case?

Signifiers like the font, color, and images, as well as logical constraints and effective mapping, play a big part in this. Now, let us observe the constraints related to such signifiers and mapping to consider how such a consistent layout was achieved.

-----

Signifiers

Let's categorize the writing on this website while paying attention font style and size. Doing will allow us to find differences between titles, section headings, main text, and buttons.

Now, why were we able to achieve this distinction? One reason is that some font sizes were bigger or smaller than other sections. This let's us see how important or prioritized one part is over the other. Another reason is the way that words are organized. Titles and section headings are written out before the main text and often consist of key words that summarize the content spelled out in the main text. Link buttons are written using particular phrases like "learn more" or things of that nature.

On webpages, you do not look at still images like you would when reading a magazine. You can actively scroll on the website to interact with what you are reading. How easy something to read is will be partially determined by the act of scrolling. If you scroll through on this webpage, you will likely feel that the section headings are a bit difficult to keep track of. In observation, we must try to remain in touch with our own experiences and feelings. For instance, if one feels that it is hard to make out a section heading, then it could be better to make the font for section headings larger.

-----

We can also observe webpages while looking at colors. Look through the webpage and try to identify the neutral-colored parts and chromatic-color parts. Even looking briefly at the webpage will reveal the following pattern:

• Neutral Colors: Main Text, Links
• Chromatic Colors: Pics

Once you have finished this classification, try thinking about the websites you use most frequently. On this website, there are no colors in some places that most websites tend to use colors for.

Did you realize where there are no colors? On most websites, links will be colored. Yet on this side, there are no colors for the main page or the links. The mouse cursor also remains neutrally colored with the [Learn More] links. The signifiers are as simple as they can possibly be. Why do you think that is?

One interpretation would be that it accentuates the main part of this web page: the pictures. We could infer that, by making all the font and buttons out as neutrally colored, the photos all pop out more.

What is important here is that the rules about the fonts and colors are all applied universally throughout the website. This is one restriction that gives rise to consistency. Had the font and coloring been entirely different in each part of the site, this fact that they are different alone would give rise to a different meaning. Even if the differences are only slight, breaking such rules will lead us to interpret what meaning there is in this act. If you have no reason for doing so, then save the user the time they would need to interpret these differences, and instead apply rules consistently.

-----

Logical Constraints and Mapping

As we have seen, mapping refers to the correlative relations between two different sets. What kind of mapping can we find? The webpage's content serves as an introduction to keywords relating to visual trends. One can grasp that each keyword shows the reader the same patterns of text and pictures.

Here, we will refer to these parts that introduce a particular keyword as a "module". Modules are constructed as follows:

Did you catch how keywords are being repeated in this module? Webpages all have their own "rules" which serve to create a sense of consistency. By experiencing these rules repeatedly, we are able to make inferences about how the webpage works. Additionally, please note that repeatedly experiencing these modules can create a consistent sense of rhythm in our experience of scrolling through the page.

By deciphering the modules that make up webpages, it is possible to grasp their whole structure. On this webpage, we can see that there is a title, 4 modules, and a credits section.

Each constitutive element should play the role of "saying something" or, in other words, have a function to say something "in some way." Making a sketch or structural diagram can help us understand the relations between different parts.

• Title: Showing 2019's Visual Trends
• Module 1: Keyword「Creative Democracy」Intro（Outline＋Examples）
• Module 2: Keyword「Natural Instincts」Intro（Outline＋Examples）
• Module 3: Keyword「Disruptive Expression」Intro（Outline＋Examples）
• Module 4: Keyword「Brand Stand」Intro（Outline＋Examples）
• Credit: Gives Credit to the Creator

----------

Organizing the Constraints We Find

What's important when observing digital products is finding the constraints that help create consistency. What we get from observation in this case is that everything but photographs are uniformly neutrally colored, that titles, headings, and the main text font sizes are determinate, and that the way modules are designed is all uniform. While we will be getting ahead of ourselves in noting this, is important to see that this is crucial in achieving the "goal" of digital content. The creator can think from this perspective to give constrictions to their expressions.

----------

Various constraints are in play in our experience of creating digital products. Constraints can be understood as patterns, laws, and structures.

Observation is the process of categorizing and analyzing various different parts in terms of meanings and functions. It is the process of finding the patterns, laws, and structures that arise when we put together different parts.