A software engineer loosely shares what he learned from attending CIID’s IDP course (week 4). This week (3/16~3/20) was a week of learning how to shoot and edit prototypes with video. It was the first time I had to work late at night since classes began. Still, it was a fun and educational first time shooting and editing process. Also, this week I will be taking online classes due to the coronavirus.
This article is the English version of this below article.
There’s also a post for the week 3, so if you want to read it, please do. There is the link to the English version inside it.
Day 16: What is video prototyping?
On this day, we were given an overview of the video prototype. It was a new world for me, as I’m at the level of shooting video and cameras with a GoPro. I also felt that it was a very powerful tool to give an overview of the service in a short amount of time. In doing so, there are a few important factors to keep in mind in video prototyping, so I’m going to go a little deeper into them.
It’s not just about the product
First, watching the Polaroid camera video above (0:00 ~ 0:37), I was taught that video prototyping is “expressing intangible elements,” assuming that the viewer doesn’t know anything about the product. intangibles are four things: interaction, context, user, and emotion (I think interaction here is closer to how do you do?). And I was taught that the inclusion of all four of these things is a video prototype. This video is sketchy, but it is broken down as follows.
Interaction: launch the camera, press the shutter
Context: watching the kids play in the house during the day
User: A father with a child
The sentiment: it’s fun to share photos right then and there!
As this video shows, I was taught that the purpose of a video prototype is twofold. One is to clearly communicate what the product is all about, and the other is to leave the product in the viewer’s mind. That’s why it’s important to have video prototypes that generate understanding and empathy in the audience.
He also explained the two Donald Norman’s usability principles in explaining the interaction in the video below. He says it’s good to focus on these two things in the video.
DISCOVERABILITY: One of the major ways that people learn is by discovering patterns. New situations become more manageable when existing pattern knowledge can be applied to understanding how things work.
DISCOVERABILITY: One of the major ways that people learn is by discovering patterns. New situations become more manageable when existing pattern knowledge can be applied to understanding how things work. By giving a specific pattern of shapes, colors, etc., to the related objects and functions, the user can smoothly understand and use the situation. For example, since the alphabetic keyboards on your computer are all the same size and shape, you can quickly understand, “This is what I’m going to use when I type”. On the other hand, the tab and delete keyboards are different in size and shape from the alphabetic keyboards, so you’ll be able to notice if there’s something else going on. (I think these are Affordance and Signifier.)
FEEDBACK: The principle of feedback suggests that you should give users confirmation that an action has been successfully (or unsuccessfully) performed.
FEEDBACK: The principle of feedback suggests that you should give users confirmation that an action has been successfully (or unsuccessfully) performed. I think this is close to the “How do you feel?” question we’ve been asking. For example, the buzzing vibe when the smartphone starts charging is a feedback to the user that it has started charging correctly.
Then, at the end, he again introduced the following words of Donald Norman It’s a bit emotional, but I’d like to write it down because it stuck with me.
Cognition attempts to make sense of the world: emotion assigns value.
True to these words, this week we focused on how to create emotion in our viewers. I then learned that it’s important to use video prototypes and the two aforementioned principles to engage the audience and direct their expectations to the product and its stories. It was very refreshing because I had never before focused on “emotions” in this way and made things. And I realized that “emotion” is what we create through interaction. In interaction design, I think that “Understanding = Empathy” is the key to understanding.
The sentiment: it’s fun to share photos right then and there!
As this video shows, I was taught that the purpose of a video prototype is twofold. One is to clearly communicate what the product is all about, and the other is to leave the product in the viewer’s mind. That’s why it’s important to have video prototypes that generate understanding and empathy in the audience.
He also explained the two Donald Norman’s usability principles in explaining the interaction in the video below. He says it’s good to focus on these two things in the video.
DISCOVERABILITY: One of the major ways that people learn is by discovering patterns. New situations become more manageable when existing pattern knowledge can be applied to understanding how things work.
DISCOVERABILITY: One of the major ways that people learn is by discovering patterns. New situations become more manageable when existing pattern knowledge can be applied to understanding how things work. By giving a specific pattern of shapes, colors, etc., to the related objects and functions, the user can smoothly understand and use the situation. For example, since the alphabetic keyboards on your computer are all the same size and shape, you can quickly understand, “This is what I’m going to use when I type. On the other hand, the tab and delete keyboards are different in size and shape from the alphabetic keyboards, so you’ll be able to notice if there’s something else going on. (I think you’re probably talking about Affordance and Signifier.)
FEEDBACK: The principle of feedback suggests that you should give users confirmation that an action has been successfully (or unsuccessfully) performed.
FEEDBACK: The principle of feedback suggests that you should give users confirmation that an action has been successfully (or unsuccessfully) performed. I think this is close to the “How do you feel?” question we’ve been asking. For example, the buzzing vibe when the smartphone starts charging is a feedback to the user that it has started charging correctly.
Then, at the end, he again introduced the following words of Donald Norman It’s a bit emo, but I’d like to write it down because it stuck with me.
Cognition attempts to make sense of the world: emotion assigns value.
The literal translation is: emotion assigns value. True to these words, this week we focused on how to create emotion in our viewers. I then learned that it’s important to use video prototypes and the two aforementioned principles to engage the audience and direct their expectations to the product and its stories. It was very refreshing because I had never before focused on “emotions” in this way and made things. And I realized that “emotion” is what we create through interaction. In interaction design, I think that “Understanding = Empathy” is the key to understanding.
Next, watching the video above, I was taught that when shooting and editing a video prototype, it’s important to “be clear about the interaction” (Be Clear) and “be consistent in the video” (Be Consistent).
The scene above is a very clear representation of the interaction. You probably don’t understand English and can understand what you’re doing. I think these are examples of how well the motion graphics are applied in addition to the composition. The motion graphics don’t show up where they are not needed, and I think the motion graphics make the explanation of the interaction stand out.
Also, there is a sense of unity of color in the above scene. It is united by the light gray color.
And there’s a sense of unity of composition in the above scene. This taught me that it’s important to create tongues and patterns within the video to bring a sense of unity to the video. This principle of unity has a lot to do with the design system of websites and apps, and when it was explained to me, it became quite clear to me. Also, watching the other teams’ presentations on the day of the last presentation, I realized that the consistency of the video evokes a “very pleasant feeling” from the viewer’s perspective.
Then, at the end, he introduced the following words.
Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible, serving us without drawing attention to itself. Bad design, on the other hand, screams out its inadequacies, making itself very noticeable.
Bad design is more annoying than bad design, but good design means that we know what’s good and what’s bad without even thinking about it. Like these words, I think it’s important to make the interaction clear and the video consistent in order to create a video that is easy to follow.
Day 17: Visual language
On this day, I was taught how to shoot and edit a video. I was also taught that Visual Language, created by further filming and editing, evokes emotions in the viewer. At the time, I didn’t really know what Visual Language meant. However, as I will explain later, I feel like I somehow understood it when I actually edited it. I then tried to use the techniques I was taught that day to somehow express the Visual Language. In this chapter, I’m going to briefly summarize each technique. (It’s a technique book, so it might not be that interesting.)
Tips for shooting
Below are the attention points highlighted in the class.
1. Shoot each take multiple times, even if you think the first one was perfect
2. get coverage/b-roll (multiple angles) for every shot
3. use foreground and background elements, keep the shot interesting
4. don’t look straight at the camera (unless you are addressing the audience or POV)
5. Get coverage when shooting UI / Phone. Reflections and focus can vary.
No. 1,2, and 5 mean that you should shoot a variety of compositions. I realized these things during the editing process, which will be described later. No. 3 means to use the space before and after the subject to express more information about the subject in a single cut. No. 4 means to not look directly at the camera because it would be unnatural if you looked directly at it, as in the aforementioned interview video.
There were many other explanations, but I’ll leave the explanation to each site because there is a lot of them. (You’ll find out a lot of tips when googling)
Tips for editing
I’m using Adobe’s Premier Pro to edit my videos. A description of the software is given in the following link.
After editing, I found out that the quality of the video depends on how well you use the Premier Pro. I was a beginner, so I had a lot of trouble. The source that I thought would be good for me to study on my own was YouTube. There are various articles, but I didn’t understand it at all, even when it was explained in words, especially when it came to editing videos. On the other hand, YouTube was easy to understand because I could see what was going on while watching it. (We also learn the importance of visualizing here.)
Various editing techniques were explained, but since there is a lot of them, I’ll leave the explanation to each site. (You’ll find out a lot of tips when googling)
Day 18: Storyboard
The day was mainly about getting ready for the shoot. And I was taught that storyboarding is like a map in filming. I was told that just as a good map will keep you from getting lost, a good storyboard will make for a good shoot. I’m going to summarize what I’ve learned in creating the storyboard.
Visualize and talk about it
The afternoon before, I had been given the subject of “Designing things that can help me to continue my daily diet in the current coronavirus situation. We were completing the IxD framework that we did in the second week on that subject. I’ve included the images below. (The resolution is rough and there’s a lot to chew on, but this week I’m finishing it up quickly so I can focus on the video prototype.)
To be honest, it was a complete mystery what we were going to create at this stage. By the time Iditation came out, there was even a humanoid, and I felt like I was spreading the towel too far.
However, when we all wrote our own storyboards after this, we were able to communicate in details that we didn’t understand in the discussion. I can’t explain things in words alone, and when you speak English as a second language, including myself, the way you feel and receive things changes subtly. I think we were able to visualize this by using a storyboard to help us align our perceptions with each other. At this stage, it’s like, “If this is the case, we don’t need a humanoid robot,” or “Wouldn’t this prototype be more interesting with a doll-shaped device instead of an app? This led to discussions like, “What’s the point? I experienced the importance of speaking visually because we have different cultures and values. Also, I think this storyboard is the most primitive and easy prototype. I would like to use this storyboard in the future, whether or not I want to do video prototyping.
As a side note, here’s my storyboard too. No one wants a lofty streaking board, and I’d love to show you that “even at this level it’s debatable enough!”
Context Description
I had my teachers review it when the storyboarding phase was done. Then I got ragged on the first half of the storyboard before moving on to the second half. The summary of the reviews I received was “I don’t know why this person is using this product”. The teachers were then told to express the following questions on the storyboard.
What is the current status of your theme?
What problem are you trying to solve?
Who’s your main user?
Give depth to them, what’s their story?
What are their expectations?
When I looked at this question, I realized that we were grossly neglecting the explanatory part of the context. Somehow, unconsciously, we felt compelled to explain the product we had come up with. However, I felt that I had not been able to create the most important interest in the audience because I had neglected to explain the introduction part of the video. Also, when I watched the other team’s video on the day of the last presentation, I felt that if they did a good job of explaining the context, there would be a difference in the cloud ladder in getting into the video.
Then we added to the storyboard the idea of a scene that would represent the user, a “food blogger’s description,” a “transition of the situation before and after the onset of the coronavirus,” and a “passion for cooking. And I’ve included our finished storyboard and shot list below. A shot list is a list of where each scene was filmed and what needs to be done.
Day 19: Shooting
On this day, I did some shot list revisions before the shoot and then spent most of the day shooting for the first time. Then, in the evening, I did my first video editing work. It was the first time that we worked on this day, and the first time since CIID started, we worked until midnight. My overall impression is that the “How do you do?”, “How do you feel?”, and “How do you know?” elements of interaction design are gradually weakened when the product is explained through video. I’ve learned that editing is what makes up for it. So, I’m going to summarize a little in depth what I noticed during the editing process.
evokes emotions
It was in the “evoking emotion” part that I felt the power of the editing. The unedited video felt like a family home video. Those who have made it feel satisfied with the memories and the hard work they have gone through, but when they show it to their teachers, they say, “…? He looked at me like, “Oh, my God. It was at this point that I realized that “How do you feel?” was not conveyed very well. In the actual video, I thought that even though I was happy and satisfied with the performance, it probably didn’t come across to the viewers. It’s true, viewers haven’t actually touched it or experienced it.
Then, Visual Language showed a powerful effect. I think that the Visual Language supplemented the story alone was not enough. The Visual Language, which I found particularly powerful, was the cut assignment to the rhythm of the music and the adjustment of the white balance (light). The explanation of white balance is given in the article below.
They both gave the video a “vibe”. The rhythm of the music allowed me to conjure up more joyful emotions. I also found that adding contrast to the white balance before and after the interaction helped to emphasize the emotion more. I think this made the “How do you feel?” part clearer. I also learned that I need to convey my emotions a little over the top in my videos.
Below are some of the free sound sites featured in the class.
More clear interaction
Related to the above, you’ll notice that the “How do you do?” and “How do you know?” portions of the unedited video are weaker. In addition, this part is especially weak when the prototype is used as a cheat, as in this case. If these two questions are weak, the interaction will not be conveyed and the product introduction will be weak. Editing acted as a very powerful tool even in such times.
Our team went to add effects to the feedback areas anyway. Added startup sounds and sound effects, and added images so that colors change when interacting with it. I think these allowed me to highlight the feedback quite a bit.
I’ve been looking for sound effects on YouTube for some time now, so I’ll introduce a site to extract sound from YouTube.
As an aside, I felt that we didn’t need to actually make it because we could do it by editing up to this level. (Since I’m an engineer, it was a moment when I lost the value of my existence…) Also, since more than I can actually create is achieved by editing, o figure out where to put a stop to it. I thought it would be good for engineers to be involved in video prototyping at a time like this because they can discuss whether it is feasible or not.
You’ll definitely want to shoot again
When you actually do the editing, there are so many things you notice when you edit. In the case of our team, we realized that the storyboard and shot list had become just a story and not a map. I think this is because everyone on the team was a novice, but most of the storyboards and shot lists are shot from only one perspective. When I edit and look back at this, the language is trite but not funny. Then I noticed that the reference videos on YouTube were taken from more multiple perspectives.
When you think about it again, most movies are shot from multiple perspectives. Some of the cuts are pulled so that you can see the whole thing, some are zoomed in on the face, and some are taken from the protagonist’s point of view from the background. I was reminded that the main character’s emotions are expressed by combining these elements. The following article was helpful in thinking about the composition.
Also, if the video is shaky, it’s very hard to see. I was told in class that the most important thing is to keep the camera stable, but I felt it when I was editing. In addition, there were footsteps, noise from outside the window, and a lack of uniformity in the white balance over time.
As you can see, I notice a lot of things as I edit. I think a lot of things can be covered by experience, but “Isn’t that scene lacking? I’m sure there will be problems like “I want to cut from this angle” or “I want to cut from this angle too”. In fact, the teachers said that they often retake it. For this reason, I thought it would be good to have some shooting time available the day after the edit. Also, I don’t know if I’ll use it or not, but I think it’s a good idea to roll the camera from various angles, not just one.
We didn’t have time to shoot the next day, so we faked it by inserting a montage cut (reminiscence cut) using the video on the following site. I don’t know if we faked it, but…
https://www.pexels.com/videos/
Day 20: Presentation
This was the day to announce the project of the week. We came up with a prototype called “Gastro” and made a video of it. It is divided into two parts: research and product introduction. The video is below. (I’m there just a little too!)
One thing I’ve learned throughout the week is that video prototyping is different from what I’ve been doing before — you can go from the actual product to the concept in two to three minutes. I was able to experience the difficulty of expressing the whole world view of how the prototype is used and under what circumstances, how it is used, and what problems it solves.
Also, this week was the first time I’ve done so, and it was very hard, but I enjoyed thinking about it because the subject was linked to the current problem. Also, when I was editing the video, I watched a video with my teammates explaining Animal Crossing in Japanese, and I saw that they understood it even though it was in Japanese, and I thought, “I want to make a video like this”.
And even though I’m not very good at drawing, I thought it was fun to draw a storyboard. Next week was cancelled due to the coronavirus, so I thought I’d make it a drawing study week!