Making the Abstract Concrete
Learnings and reflections from CMU’s Communication Design Studio in Fall 2020
In this project, we are tasked with explaining an abstract concept in a short video. And the topic I received is — Internet Cookies
Week 1
Internet Cookies — What are they?
I began this project by researching how internet cookies function. Understanding internet cookies first requires an understanding of the client-server model of the internet. This model is the standard method of communication between a browser on a computer and the web server. The web server is a centralized location where data is stored. It distributes data to each individual client, or browser, after receiving the request from the client.
An internet cookie is the means by which web servers recognize the client. It is in the form of a small text file and added to the client’s browser or machine by the server when the client posts a request to the server for the first time. When the client tries to access the website again, it will send the request along with the cookie to the server so it knows the client’s information such as identity, viewing history and preferences.
To better understand the process, I created an illustration to visualize how internet cookies work in the client-server model.
How are they used?
- Session management
A session refers to the series of interactions of a user with a website during an active connection through the web browser. An internet cookie can help the server remember information such as login credentials and shopping cart items in a session.
e.g. When you reopen Amazon’s website on your computer, you may find that you are already logged into your account and can see the items that you added to your shopping cart previously.
- User experience personalization
Because cookies can store data about a user’s preferences, they allow the server to tailor the personalize the content for the user.
e.g. When you choose the desired language on a website, the server saves your preferred language in a cookie. The next time you open the same website, it will automatically display all content in that language.
- Tracking
Cookies can track and save user’s browsing history, helping servers to analyze user’s behavior and provide targeted advertising.
e.g. If you want to buy a new gym outfit and search gym clothes on Google, later you may find many ads from different activewear brands on the websites you are browsing.
Why are they called “cookies”?
During my research, I found the story behind the naming of internet cookies a fun addition to the video. The developer of internet cookies Lou Montulli created the term from “magic cookies”, a pre-existing computing term that’s allegedly derived from fortune cookies for its embedded message.
Before the invention of internet cookies, magic cookies were used to pass data between the server and the local computer in the Unix operating system. The data could only be interpreted by the server and were used for identifying the client. In 1994, computer programmer Lou Montulli applied the logic of “magic cookies” for web communication and created internet cookies (also called web cookies or HTTP cookies). He was asked by a shopping site to come up with a solution to save clients’ browsing history data on their local machines as the server was nearly full. By keeping the data on the clients’ machines, the merchant could reduce the memory load on its server and save money. The cookie Montulli created for the online retailer eventually evolved into the cookie we see today.
Week 2
Storyboards round 1 — visualizing how cookies work
In the first round of visualizing the concept, I used a combination of “just show it” and “processes” methods to organize the key ideas. The main reason is that the structure is effective in demonstrating the transmission of cookies between a user’s machine and a web server.
Speed dating of the initial concept
To get fast feedback from multiple views, we did a speed-dating activity in class where we introduced our initial concept to three different classmates in three five-minute sessions. The feedback I received helped me confirmed that the level of technical details I included is appropriate for adult audiences who have some familiarity with how the internet works but do not know the mechanisms behind internet cookies. Another feedback is that my illustration focused on different actors throughout the process which may make it hard to transition between different scenes in the video. I need to think about ways of visualization that can help keep the scenes more consistent.
Constructing the narrative
To structure the script, I chose several key points from my research findings that I hope the audiences can learn from the video:
Internet cookies are files web servers put on a user’s computer for operational purposes
Internet cookies travel between a local machine and a webserver. On the user’s end, cookies record user data; on the server end, cookies help to identify a user
Three major uses for internet cookies are authentication, personalization and tracking.
Cookies are harmless text files but can be used to create detailed user profiles, leading to privacy concerns for some.
And I plan to unfold the story in the following sequence:
- Opening
The video will start by mentioning the pop-up alert about cookies that one has probably come across while surfing the internet to make the content relevant. Then the audience will be asked if they know why the websites put up the alerts to evoke curiosity. The last bit of the opening helps the audience see why they should care by pointing out cookies’ connection to concerns about online privacy. - What is a cookie
This part gives a high-level overview of an internet cookie and mentions the fun fact about the origin of its name. - How does it work
Explains how cookies are created and transmitted between the web server and the web browser on the client machine. - What can it be used for
Introduces the history of cookie and how it’s developed over time. Gives a summary of its three major uses (authentication, personalization, tracking) at present with examples. - Privacy concerns
Explains how cookies themselves are harmless but the ways they are used can incur concerns about data privacy. - Conclusion
The last section reminds the audience that internet cookies are an essential part of the modern web and that it’s important to know about them in order to take control of our own data.
Full script of the audio narrative
Week 3
After reviewing a bunch of YouTube videos about different styles of explainer videos like this one, I narrowed down my options to two — motion graphics and paper cutout animation, a form of stop motion animation. I want to present my story in a minimalistic 2D style to make the technical term less intimidating while adding a bit of fun to it as well.
Exploring the styles with moodboard
Storyboards round 2 –from subject-to-subject to action-to-action transitions
The feedback I received from the previous storyboards/visualizations was that the transitions were mainly between different actors or subjects. It a video, frequent subject to subject transition might not provide the best viewing experience because of the inconsistency in screens.
Therefore, in the new round of storyboards, I focused on trying to reuse the same actors through different scenes and keep the changes in screen elements at a minimum level. The only movements on the screen should be the key information that I hope the audiences to focus on. For example, in the “How do cookies work” section, the client machine and the web server are fixed in place while the data request and the cookie file move between them to show the process.
Week 4
I decided to cutout animation as the style of the explainer video. I hesitated to choose stop motion previously due to the worry that it’s limited and rigid motion would not add enough complexity to the narrative and the video might end up looking too juvenile for the targeted adult audience. But after checking many cutout animations online, I was amazed by how dynamic and creative one can achieve in animation using essentially just still images. Below is my favorite video:
Another benefit of paper cutout animation is that it gives a sense of accessibility, which would help make the abstract and complex concept seem less intimidating for people who are not tech-savvy.
Trying out cutout animation for the first time
As someone who is still a beginner in animation and has never done stop motion before, I did a quick testing with paper cutouts and photo shooting session to check the practicality of making cutout stop motion. Major steps in my process include:
1. Design the appearance of actors based on the storyboard;
2. Draw and ink the actors on paper cards and cut them out;
3. Manually arrange how the actors would move on stage while taking photos;
4. Compile the still images in After Effects to make the animation.
I learned from this trial session that it’s important to keep the background stage fixed or the screen would appear blurry. I also learned that stop motion animations usually take 12 frames per second. The bulk of my time was spent on drawing as I am not very good at it and it often took me several tries before I got the desired shape. But overall the process seemed fun and manageable for this project.
Week 5
Presentation & feedback
This week we got the chance to present our work-in-progress to the class and a guest lecturer. The feedback I received include:
- The animation communicated the information clearly and effectively.
- It can be helpful to add the actual message of a cookie alert in the pop-up. This way the audience can feel more familiar with the icon, making it more relatable.
- Can use color only on the key actors as a way to enhance information hierarchy and direct the audience’s attention.
Week 6
Feedback from peer review
Earlier this week each of us received feedback on our updated work in progress from three classmates:
Based on the feedback I got, things that I will work on include:
- Improve contrast to highlight actors on the screen that are directly related to the narrative. I plan to experiment with different ways I can manipulate contrast and information hierarchy such as color, relative size, and placement.
- Add sound effects including mouse click and notification alerts. These audio effects will add an additional layer of information in the audio channel to help illustrate the information.
- Reduce inactive/unnecessary actors on the screen.
Week 7 — Final Presentation
Final video
Behind the screens
Reflection
- The level of abstraction in icons and symbols is crucial in communicating abstract information. More realistic representation doesn’t equate to more easily understandable information. The balance of form and meaning is the key.
- When creating storyboards for videos, it’s important to consider transitions between different scenes. Transitions that require a lot of changes in actors may be distracting for the audience. A good strategy is to minimize the motion and help direct the audiences’ attention by only moving the key parts.
- Using multiple channels including narrative, visual, and audio helps to communicate the information more efficiently. These channels must be layered and synced carefully in order for them to enhance each other rather than causing distraction.
References:
How Cookies Track You on the Web and What to do About it. (2020, October 22). CookieYes.
https://www.cookieyes.com/how-cookies-track-you-on-the-web-and-what-to-do-about-it/.
Online Tracking. (2016, June). Consumer Information.
www.consumer.ftc.gov/articles/0042-online-tracking.
What are Cookies? (n.d.). Kaspersky.
https://www.kaspersky.com/resource-center/definitions/cookies
L, Jennifer. What Are Cookies? (2020, April 14). Privacy Policies.
www.privacypolicies.com/blog/cookies/.
Brain, Marshall. How Internet Cookies Work. (n.d.). Mindride.
http://www.mindpride.net/root/Extras/how-stuff-works/how_internet_cookies_work.htm
