Author Archives: Zijing Wang

What makes TikTok possible——the technologies and design principles behind it


Technology is not only the fusion of existing technology, but also the extension of human cognitive ability. As one of the most popular and time-wasting applications, TikTok has gained huge success all over the world. People spend lots of time on TikTok without realizing it. Why is it so hard for people to quit TikTok? This paper approaches this question by detailed analysis of the design principles and technologies behind it. TikTok integrates a variety of technologies and make them into a multi-functional video social software. Through the example of TikTok, we can further understand that on the one hand, technologies are always the combination of technologies that already exist and the harness of new pheromone in society. On the other hand, technology is bound to bring change both in good ways and wrong ways, so we need to use critical thinking to analyze and view technology.


Launched in 2016,Douyin has become one of the most popular apps in china. To extend the global market, TikTok, the English version of Douyin, was launched in 2017. According to market research company Sensor Tower, TikTok, the short video app, was downloaded more than Facebook, Instagram, and YouTube in the first three months of 2018, reaching 45.8 million downloads. Since Douyin and TikTok have little difference in product design and functionality, this essay uses “TikTok” to represent both the version of Douyin and TikTok in a unified way.

Figure 1. Top non-game apps by downloads(Source:

Figure 2. TikTok new installs by month in 2018(source:

TikTok is a short-form mobile video app that is mostly focusing on young people. Users can shoot a variety of 15-second music short videos, including dance performance, script imitation, talent expression, emotional expression, skill-sharing, life record, and other content forms to create their works. Unlike most video apps, TikTok doesn’t have a “start” button. Once the app is open, the video starts playing automatically. You can scroll through different videos by swiping up and down, just like you scroll through pictures on Instagram. When you follow a particular account, TikTok also feed you a similar account. Whether in the car, when eating or even at work, you can always open to browse funny videos. TikTok even reached 500 million monthly active users as of June 2018(SCMP, 2018), of whom mostly below 25.

Figure 3. Age group of douyin users(source:

The popularity of TikTok exists for three reasons: Immersive interaction design, diverse functions, fragmentation propagation. Through 15 seconds short videos, people can not only share their life but also get to know all kinds of funny things. My following essay will de-blackbox TikTok in three aspects to see what makes TikTok addictive: interaction design, systems, and modularity, short-form video technology.

Interaction design

Interaction design is the practice of designing interactive digital products, environments, systems, and services. (Cooper,2007). Interface is significant in interaction design because the interface is what the user sees and operates; it sits between the machine and the person, like the knobs and dials on a toaster, or the icons on a computer screen (Murray,2011). Interaction design strives to create and build meaningful relationships between users and products. Its goals can be analyzed from the perspectives of “usability” and “user experience,” focusing on human-centered user needs.

The interaction design of TikTok can be categorized into three aspects. Firstly, TikTok chooses to play videos on full screen, which draws users’ attention immediately and significantly reducing the user’s cost on learning how to use it. As Janet Murray said: “A better design value than intuitive is transparent: a good interface should not call attention to itself but should let us direct our attention to the task(Murray,2011).” A well-orchestrated user interface is transparent(Cooper,2007). The first time people enter TikTok, they can learn how to use it right away without thinking. Because the interface is arranged in a neat and easy understanding way, no matter how cool your interface is, less of it would be better (Cooper, 2007). On its main interface, we can only see some necessary icons, including post videos, thumb up, comments, and share. Another attractive design is when viewing the comments and filling in the comments, only one pop-up appears, and the video continues playing. This pop-up design creates a continuous watching environment for the user because even when they can only see the videos on half of the screen, they still can listen to the sound from the video.

Figure 4. TikTok home page and comment page.

Secondly, TikTok has efficient gesture interaction, which provides proper conventions for users. Constraints limit the possible actions that can be performed on a system. Proper application of constraints makes designs easier to use and dramatically reduces the probability of error during interaction (Lidwell, Holden, & Butler, 2010). When using phones, we get used to scrolling up and down to adjust the order of the page. TikTok applies the same conventions; that is, the user can switch between different video contents only by sliding up and down. Each swipe can get new content, which is efficient and straightforward. If the user wants to know more about the account that they are watching, they can scroll left to see all the videos on this account. Users can do most of the functionality just by swiping and clicking on a page in TikTok.

Figure 5. TikTok gesture interaction.

Before TikTok, most video apps like Snapchat and Instagram usually design a home page that shows a thumbnail of the video, and users can view the video by clicking on the video cover. However, TikTok cuts down the process between “click the video” and “watch the video” ,which reduce time for users to enter videos and switch between videos.

Figure 6. Snapchat and Instagram interface.

Another unique gesture is double-clicking. By double-clicking on the screen, people can thump up and collect the video. In design, it is crucial to show the effect of an action. Without feedback, one is always wondering whether anything has happened. Icon of little red heart appears on the screen after double-clicking to give feedback to users so that they can make sure their actions are valid. Once the user double-clicks the video, TikTok stores it in  like list so that users can watch it whenever they want.

Figure 6. Double-clicking effect in TikTok.

Thirdly is immersive design. After opening TikTok, the user cannot choose what the next video is. TikTok plays the popular content on the whole screen based on its recommendation algorithm, which provides users with unexpected feeling. This sudden feeling is the result of rewarding stimuli. Rewards are attractive; they are motivating and make us exert an effort. Anything that makes an individual come back for more is a positive reinforcer and therefore a reward (Schultz,2015). One important function of the positive reward is to maintain an active repertoire of behavior (Ferster&Skinner, 1957). Thus, unknow videos make users get addicted to scrolling up the screen to watch more videos. Besides, videos play on a loop until people slide up or down. In this way, people immerse themselves in current videos without distractions. If the user plays the video more than three times in a loop, the system of TikTok assumes that you like the video. Consequently, the “share” icon becomes another social media icon to encourage the user to share the video on other social media.

Figure 7. The change of share icon in TikTok.

TikTok also highlights music attributes, such as music information display. A critical reason for TikTok’s success is its soundtrack. Soundtrack in every video can be directly used by other people,which lower the cost of video shooting, encourage users to create and produce hot spots. After clicking the record icon, it jumps to the select music page. Users can press the “use this sound” to use the same soundtrack for their videos.

Figure 8. Soundtrack link in TikTok.

System and modularity

Technologies are built from a hierarchy of technologies. A technology consists of main assembly and supporting assemblies; each assembly or subsystem must be organized this way too (Arthur, 2009). All the functions of TikTok are made up of several small modules. The video shooting function of TikTok consists of a video module and an audio module. After user input videos and choose music, TikTok decodes and combines them and finally outputs the complete video on the platform. The video editing technology can be classified into various modules such as face recognition, real-time capture, and beauty algorithm. By working at the same time, they provide us with filters and effects used on the video.

Figure 9. TikTok effects and beauty function.

The technology of recommending videos is also the consequence of modularity. What you watch in the next video is decided by different algorithm modules such as the content of the video that you like, the amount of video comment, the amount of forwarding. What can be studied is always a relationship or an infinite regress of relationships. Never a ‘thing’ (Bateson, 2000). TikTok is not an isolated product but the result of various interdependent subsystems of modules working together.

Figure 10. Main function and module of TikTok.

Short-form video technology

There are two types of TikTok video,one is the live video, and another is the recorded videos. In this part, I would explain how does TikTok provide these two different videos.

As an application, TikTok operates under the layers of the internet. Each layer only processes data to and from the layers it connects to, and is designed not to “know” or have to deal with all the complex variables handled by the other layers(Irvine). When we initiate TikTok, the application layer provides us with the main interface through internet protocols such as HTTP. When we use TikTok to watch videos, the transport layer transmits information into specific data from the database through the internet and presents them into the application layer. The core protocol of transport is TCP/IP protocol. To be specific, TikTok sends requests to its back end through the internet. Its back end is a system that supports the operation of TikTok running on mobile phones. Then, TikTok’s back end sends a request to its database. The database would find out what the user needs and send them back to the back end and the interface on phones. All these procedures happen in one second to provide what we see on TikTok now.

Influencers or celebrities usually initiate live streaming videos on TikTok. When celebrities use some equipments to broadcast videos, an encoder collects data and compresses into a video stream that can be watched and transmitted. The encoder itself may be inside the camera, but it can also be a stand-alone device, computer software, or mobile application. After that, the video data are packaged into a real-time transmission protocol for transmission over the internet (Miller, 2018) Then, the media server in the cloud receives all the video data and changes them into streaming video.

For the recorded videos on TikTok, they consist of multiple images, which is a continuous set of images. Capture chip inside the phone act as a server for internet video. It receives analog signal form TikTok and turns the signal into digital information at a rate of 30 frames a second (White, 2007). Then, the capture device sends the information through some compression standard. When displaying the videos on TikTok, the compression algorithm divides the videos into frames. The compression algorithm transfers those different parts between frames to transmit less data and make videos play smoothly. Videos on TikTok use the H.264 compression standard. The H.264 standard represents coding efficiency enhancement and flexibility for effective use over a wide variety of network types and application domains. It differs from previous technology in enhanced motion prediction capability, use of a small block-size exact-match transform, adaptive in-loop deblocking filter, and enhanced entropy coding methods (Wiegand, Sullivan, Bjontegaard, & Luthra, 2003).

One of the highlights of TikTok is its vibrant and exciting soundtrack accompanying videos. The audio we hear on our phones and computers is digital-analog audio(White,2007). To provide music in a limited app, the audio module in TikTok processes sound in three ways. Firstly, it perceives sound as a signal and digitizes the sound. Secondly, it changes the digital signal into a binary bit. Thirdly, TikTok records the sampled and quantifies data in a specific format to play, copy, and retrieve the music.


In conclusion, The reason why TikTok is addictive has two: first, excellent interaction design that brings good user experience and sense of agency; second, precise algorithm and technical support. With the example of TikTok, it is easy to find out that what makes it popular is not because it invents new technology, but because it can combine various technologies. All the video related features can be found on TikTok so that users can satisfy their needs on one application. Although TikTok is different in some ways from other video applications, but the design principles behind them are the same. They are all sociotechnical artifacts. As Vermaas has said, technology is an expression of our endeavors to adapt to the world in which we live to meet our needs and desires. Technological action may, therefore, be termed a form of goal-oriented human behavior aimed at primarily resolving practical problems(Vermaas, Kroes, Poel, Franssen, & Houkes,2011). TikTok acts as a medium between culture and society. Through videos, it spreads cultural values as well as popular hot topic and establishes connections between strangers. Instead of the content that it displays, the significant function of TikTok is extending people’s recognition of the diversity of the world.

Admittedly, TikTok does change the way of entertainment and social networking. But we also need to be cautious of its fragmentation of information. Fragmentation of information could make people get used to receiving short forms of information and make it harder to concentrate on complete and long information such as books.

Work Cited

Arthur, W. B. (2009). The nature of technology: What it is and how it evolves. Simon and Schuster.

Bateson, G. (2000). Steps to an ecology of mind: Collected essays in anthropology, psychiatry, evolution, and epistemology. University of Chicago Press.

Borak, M. (2018, July 24). Douyin is the most downloaded app in the Apple App Store · TechNode. Retrieved from

Cooper, A., Reimann, R., & Cronin, D. (2007). About face 3: the essentials of interaction design. John Wiley & Sons.

Ferster, C. B., & Skinner, B. F. (1957). Schedules of reinforcement.

Graziani, T. (2018, October 21). How Douyin became China’s top short-video App in 500 days. Retrieved from

Iqbal, M. (2019, February 27). TikTok Revenue and Usage Statistics (2019). Retrieved from

Irvine M. The Internet: Design Principles and Extensible Futures.

Lidwell, W., Holden, K., & Butler, J. (2010). Universal principles of design, revised and updated: 125 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design. Rockport Pub.

Miller, J. (2018, December 6). Live Video Streaming: How It Works: Wowza. Retrieved from

Murray, J. H. (2011). Inventing the medium: principles of interaction design as a cultural practice. Mit Press.

Schultz, W. (2015). Neuronal reward and decision signals: from theories to data. Physiological reviews, 95(3), 853-951.

Tung, H., & Zhang, Z. (2018, July 24). 8 Lessons from the rise of Douyin (Tik Tok) · TechNode. Retrieved from

Vermaas, P., Kroes, P., van de Poel, I., Franssen, M., & Houkes, W. (2011). A philosophy of technology: from technical artefacts to sociotechnical systems. Synthesis Lectures on Engineers, Technology, and Society6(1), 1-134.

White, R. (2014). How computers work: the evolution of technology. Pearson Education.

Wiegand, T., Sullivan, G. J., Bjontegaard, G., & Luthra, A. (2003). Overview of the H. 264/AVC video coding standard. IEEE Transactions on circuits and systems for video technology13(7), 560-576.

Yang , Y. (2018, July 17). Tik Tok racks up 500 million global MAU as short video craze continues. Retrieved from

De-black boxing Youtube streaming function via web technology


The modern mobile application architecture consists of three parts: the client-side, the server-side, and the database. The client-side is the interface or the application logic of a device. The server-side is a computer that stores web pages, sites, and applications. When a client device wants to retrieve a web page, a copy of the web page is downloaded from the server to the client machine and displayed on the user’s browser. The database is a unique management data resource system in the computer application system. Data can take many forms, such as text, digital, symbols, graphics, images, and sounds.

How is the web technology working when we watch streaming videos on YouTube? When we click on the video, the computer will immediately transmit the signal into digital information and download and decodes a small portion of the media file in real-time. When displaying on the interface, the computer will divide the whole video into millions of frames. Interframe compression records the amount of change between each frame and display those pixels that change from one scene to the other. As we all know, as long as the switching time between two frames is longer than 1/24 second, human eyes cannot discover change, which means frames will look like continuous video.

As the picture above shows, the progress bar has different colors. The red color indicates the part that you have already watched. The white color means that part is fully loaded so you can watch it without getting stuck. If you have an unusually fast Internet connection, the files may be fully downloaded before you can finish watching or listening, which is why even if the Internet is cut off, the stream continues for a while.

Every day there are millions of videos uploaded on YouTube. To provide as many videos as possible and guarantee the video update rate, YouTube needs to build a vast database to store all the videos


However, as Mr. Berners-Lee has said in The New York Times, web technology is being abused. The Internet is becoming a tool for political manipulation and privacy invasion. There is still a long way to go before we can reasonably use the Internet.


Martin Irvine, Intro to the Web: Extensible Design Principles and “Appification”

Ron White, “How the World Wide Web Works.” From: How Computers Work. 9th ed. Que Publishing, 2007.

Invisible principles of the internet


The development history of the internet is essentially a history of innovation. It is an interwoven and interactive process of technological innovation, commercial innovation, and institutional innovation, and ultimately forms an evolutionary account of human civilization in the Internet era.

The internet is a global network of computers that communicate with each other in standard protocols. Internet is not a specific technology but a mixture of various components and agencies. So “on the internet” means connecting to one of its nodes and gaining access to services on the sociotechnical systems. If we regard the internet as a variety of subsystems, subcomponents, and social institutions, we first need to understand the three principles brought by Barbara.

Firstly, the internet consists of independent modules that work together. The internet does not rely on one central computer but distribute on any device. That’s why we can surf the web anywhere as long as our devices connect with the WIFI. Modularity also provides adequate flexibility for information communication. Each module has its function, so when a module occurs breakdown, it doesn’t affect other modules. Also,each module provides a standardized process interface to the directly coupled module. No matter how the internal implementation of each module is not stipulated, the external interface must be a standard part, so that the coupled module can be connected seamlessly

Secondly, the internet is based on relaxed layering with a portability layer. The portability layer is the first layer that contains the central program and theory. People can use the services between the layer they chose and the portability layer. Based on the portability payer, people can use the internet to send an email or watch a video. Still, they can’t change the algorithm or the transmission time of the information on the internet. The layers are independent. The layer does not need to know how its next layer is implemented but only needs to know the services that the layer provides through the interface between the layers. Because each layer performs only one relatively independent function, it is possible to decompose a complex problem that is difficult to deal with into several smaller issues that are easier to deal with, thus reducing the complexity of the whole problem.

Thirdly, the internet use end-to-end argument. The end-to-end principle divides the operational process into two stages: the input end and the output end. When people are using internet they only need to care about the information they want to convey. Transmissions through layers are completed by machine itself., which improves the accuracy and reliability of the internet.


Martin Irvine, The Internet: Design Principles and Extensible Futures

Ron White, “How the Internet Works.” Excerpt from How Computers Work. 10th ed. Que Publishing, 2015.

Barbara van Schewick, Internet Architecture and Innovation. Cambridge, MA: The MIT Press, 2012.

Martin Campbell-Kelly and William Aspray. Personal Computers and the Internet, excerpt from Computer: A History Of The Information Machine. 3rd ed. Boulder, CO: Westview Press, 2014.

Interface design principles of Google


The interaction design has significant impacts on the ways users interact with computers. When users’ expectations meet with the actual procedures of computers, the pleasant experience of agency will appear. Interaction design should develop an interactive system that can arouse the user’s positive reaction so that the user can feel relaxed and comfortable, and enjoy it. In my following paragraphs, I will apply some principles from Murray on Google.

One of the design principles that Murray mentioned is transparent. She thinks that an excellent interface should make users focus their attention on the primary function of the system naturally instead of compulsorily. As the picture shows, after opening google, users can’t ignore the search bar at the center of the web. The search bar also gives clear direction on how to use it: search google or type a URL.

Another design principle is multiple instantiation. The interaction interface is not a fixed object, and it should offer various choices for users to explore. The shortcuts below the search bar provide using habits for different users. They can add their most visit websites under the search bar, which enhance user efficiency. Moreover, at the lower right corner, there is a customize button. By customizing the colors and themes, users can gain unique experiences.

Last but not least is visuality. At the upper right corner of this page, we see four buttons. It is easy for users to understand their different functions because their icons are exactly their function characters. The design of the button that is the image of nine dots follows common sense in users’ expectations. Everyone knows it means “more.” More importantly, all the icons are designed according to their physical images. Envelop represents Gmail, paper represents google docs, camera represents google meet. All these designs reflect the principle of visuality.

Martin Irvine, Introduction to Symbolic-Cognitive Interfaces: History of Design Principles
Janet Murray, Inventing the Medium: Principles of Interaction Design as a Cultural Practice. Cambridge, MA: MIT Press, 2012.
Brad A. Myers, “A Brief History of Human-Computer Interaction Technology,” Interactions 5, no. 2 (March 1998)

The magic of computer design

Zijing Wang

The computer has become an indispensable part of human society. We quickly take for granted that the computer was born to enhance daily human life. It takes a long time to change the computer into a cognitive artifact.

Doug Engelbart brought out the concept of “Augmenting Human Intellect.” He classified human capabilities into four areas that can be enhanced: artifacts, language, methodology, and training. He believed that a computer should support the intrinsic abilities of human thought and extend humans’ s capabilities in solving problems. In this way, computers are not only a calculating machine but a symbol system that fulfill human’s cognitive interpretation. People and computers work as integrity to deal with everyday problems. This concept broke the barrier which surrogate computers with ordinary people and create the possibility of designing a more easy-understanding computer.

To make the computer more accessible to the public, Doug also pointed out that interaction between people and computers should be real-time. Users can immediately know the results of manipulating the black-box behind the machines. So he invented the mouse. It is hard to imagine how difficult it would be to operate the computer without the cursor today.

Later in the 1970s, Alan Kay and his research group tried to turn the computer into a personal media. They achieved the goal by simulating existing media together within a computer. Kay regarded the computer as a two-way tool, which provides people with the function that the non-digital version does not have. He believed that simulation is a critical feature of the computer. The computer should be able to add many other functions to existing media. Like the example Lev Manovich mentioned, when we are using the word, we can delete the context or change the format. This makes the computer more comfortable to use for non-expert.

Also, the design principles for graphical user interface contributes a lot to the popularization of the computer. Xerox Star for the first time in 1981 using the window design. Designers think the user interface is a system that connects the displaying part and the invisible part. The design of the interface requires a transparent representation of symbolic engines. From the keyboard to the touch screen, the interface has made the computer an everyday object in daily life.

The magic of advancing computer is putting human symbolic-cognitive capabilities at the center. No matter what our computer has become, it will always serve for human cognition needs.


Martin Irvine, Introduction to Symbolic-Cognitive Interfaces for Computer Systems: History of Design Principles

Lev Manovich, Software Takes Command, on the background for Allan Kay’s “Dynabook” Metamedium design concept.

Bill Moggridge, ed., Designing Interactions. Cambridge, MA: The MIT Press, 2007.

Rules for computer programming

The computer program consists of a series of instructions that humans give the computer to process, such as calculating the result of 2+3, displaying the letter Y on the screen, and determining whether the user hit the space bar to make a pixel on the screen appear white. Programming languages are the way humans express instructions to computers.

Through the tutorial lessons on the python programming language this week, I understand more about computing. First of all, as Jeannette said:“ computational thinking is thinking recursively. It is parallel processing. ”Computer programming decompose a complicated problem into several small issues and operate all of the problems at the same time. For example, during the lessons, one instruction asked me to make a grocery list to plan the budget. In programming, the problem of planning budget became three small problems: numbers of cucumbers, price per cucumber, and the total cost of cucumbers. No matter how complex a problem is, it can eventually be broken down step by step into a single basic instruction and how those instructions fit together.

Secondly, Formatting language is essential in programming. The computer cannot recognize the orders that disobey its code format. For python, print(“ ”) is the basic rule when programming. When I was inputting codes, I made several mistakes in quotation marks, brace, and capital letters.

Computer language has three components: primitive, means of combination, and methods of abstraction. The primitives are the basic units in programming that cannot be broken into smaller parts. The means of combinations are the structure that combines the primitives and build up sentences in the computer. Abstraction is a process of generalization. It replaces complex concepts with simple words. When programming, you can find out these three components are everywhere.

Thirdly,programming in computer use symbols to represent words. Representative symbols conduct information transmission in programming. For example, “=” in programming means equals to, “+” means the sum of the input numbers, “*” means the product of the input numbers, “#” means hide the sentence on the terminal in python, and “print” says the message should be seen on the terminal.

In conclusion, The essence of programming is computability. All programming becomes a computer representation of the mathematical calculations of a limited range of abstract models. It is the commonly used language in the computer, which connects the input side with the output side by strings of words numbers and symbols.


Martin Campbell-Kelly, “Origin of Computing.” Scientific American 301, no. 3 (September 2009)

Jeannette Wing, “Computational Thinking.” Communications of the ACM 49, no. 3 (March 2006)

Peter J. Denning and Craig H. Martell. Great Principles of Computing. Cambridge, MA: MIT Press, 2015.

David Evans, Introduction to Computing: Explorations in Language, Logic, and Machines. 2011 edition.

Features and limitations of information theory

Information theory defined information as something used to eliminate random uncertainty. In signal transmission theory, entropy is created to measure the uncertainty and redundancy of the information quantitively. In general, what information a source sends is uncertain and can be measured in terms of the probability of its occurrence. The higher the likelihood of the event, the lower the information entropy, and vice versa. The unit of measurement for encoding and measuring information is bit.

Information in transmission theory can be transmitted and received without its meaning. The process of accurate signal transmission depends on point to point model. This model regarded information as the content in a container. Receivers are the two sides of a conduit. Sending information in specific frequency, which guarantee the integrity and reliability through transmission,can erase Information errors。

However,in Shannon’s theory, information is dead, it does not consider semantics, it does not consider the inconsistency of information, and even the contradiction of information, so there is no need to accept feedback and compromise adjustment. In information theory, it has not been considered that information is often incomplete and partial and needs to be integrated. People can usually derive new information from given information.

Moreover, most information can be perceived, but cannot be measured, because the appropriate definition of information has not been found, and therefore cannot establish a theory like Shannon information theory. For example, we can perceive the joy, anger, sadness in emotional information, but it is difficult to measure them, and we can only use vague adjectives to describe different degrees of feelings. We can’t say exact, or how many more bits that love has than this love.

It is also difficult to give an objective quantitative description of information such as aesthetics, taste, smell. This kind of information is highly subjective, which makes it more challenging to define accurate measurement. Due to the diversity of real things, their vast differences, and endless changes, information theory does not apply in our meaning system. As Peter Denning mentioned in his article: “How can a system process information without regard to its meaning and simultaneously generate meaning in the experience of its users?”

Another reason that information theory cannot be applied in extending to models for meaning systems is the point-to-point model. In many communication systems, information may come from different ends or transmit to different ends. In these situations, information theory is insufficient for designing models.


Martin Irvine, Introduction to the Technical Theory of Information.

James Gleick, Excerpts from The Information: A History, a Theory, a Flood. (New York, NY: Pantheon, 2011).

Peter Denning and Tim Bell, “The Information Paradox.” From American Scientist, 100, Nov-Dec. 2012.

Ronald E. Day, “The ‘Conduit Metaphor’ and the Nature and Politics of Information Studies.” Journal of the American Society for Information Science 51, no. 9 (2000)

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

how should we deal with the relationship between technology and social culture?

Zijing Wang

Accompanying with the dramatic technology revolution in the last decades, people tend to believe that technology and culture are dichotomous. But this week’s reading provides me with different opinions on this issue. On the one hand, the relationships between technology and culture are complementary. Culture is the product of human society, and technology is the method for achieving a social goal. Artifacts are not just independent objects, but an essential part of human society. Technology serves as a mediation and display culture thoughts. In this way, design principles become the bridge that connects technology and human culture. When we begin working with the sociotechnical idea, we will understand the fundamental rule among every technology around us, that is, humanization design. As I learned from previous readings, only when the designer module consists of the user module can the product produce the best results. Changing the view of technology vs. culture dichotomy make designers realize the essential role that culture plays in the development of technologies.

On the other hand, human actions are not only the result of individual intentions and social structures but also the results of using artifacts. The effects of using objects involve human actors and nonhuman actants. Designers have to delegate each actant a special responsibility. Those responsibilities must combine technology functions and culture consequences because neither actors nor actants can decide what will happen after applying the technology, just like it is neither guns nor people that kill. It is the combination of people and technology that determine the outcome. Designers need to predict and analyze the mediating phenomenon of technology to make sure the effect of technology on human behavior is moral and ethical. From this perspective, culture and technology influence each other and improve each other.

In conclusion, culture and technology have different connotations, but they are inevitably intrinsically linked. Technology is the law of exploring things, which is “seeking truth.” Culture is the direction of science and technology, the “pursuit of good” and how to be a man. Culture helps science and technology solve problems of directions and values. The combination of technology and culture can promote the sustainable development of society. Only in this way can science and technology benefit humankind better. Culture and technology are inseparable. Science and technology can’t develop healthily without correct humanistic views. Without concern for human beings and life, science and technology may bring nightmares to human beings. Also, humanity without science and technology can not correctly understand the changing real world, nor can it make objective and rational judgments of reality. It can not solve the terrible new human problems accompanied by the invention of modern science and technology, nor can it guide the direction of social development.


Martin Irvine, “Understanding Media, Mediation, and Sociotechnical Systems: Developing a De-Blackboxing Method”

Pieter Vermaas, Peter Kroes, Ibo van de Poel, Maarten Franssen, and Wybo Houkes. A Philosophy of Technology: From Technical Artefacts to Sociotechnical Systems. San Rafael, CA: Morgan & Claypool Publishers, 2011.

Bruno Latour, “On Technical Mediation,” as re-edited with title, “A Collective of Humans and Nonhumans — Following Daedalus’s Labyrinth,” in Pandora’s Hope: Essays on the Reality of Science Studies. Cambridge, MA: Harvard University Press, 1999, pp. 174-217.

Regis Debray, “What is Mediology?”, from Le Monde Diplomatique, Aug. 1999. Trans. Martin Irvine.


How cognitive artifacts mediate between the human and the social world

Zijing Wang

Cognitive artifacts functions as a bridge connecting human minds and the outside world. They reveal human cognitive performance and present it in other forms. From Kate Wong’s article, modern technologies, which based on human beings’ symbolic capabilities, are just improvement inherited from earlier tools. Like the camera, people usually remember and describe what they have seen, but using a camera helps them deepen the impression and record images. Pictures contributes a lot when sharing with others. Before inventing the camera, people draw down what they want to express. Camera display imagination function and enhance human’s memory and expression capabilities.

Another example is the calculator. Calculator make mathematics problems easier. By inputting numbers and choosing methods, we can get the answers at nearly a second. Without a calculator, we can still figure out mathematics problems but only slower. Calculator improve our cognition on math notation.

Considering computational and media technologies as “cognitive technologies” help us better understand the secrets of those technologies. Firstly, it develops a variety of computational opportunities and provides a more accessible path when analyzing the algorithm of these technologies. No matter how complicated these technologies are, they all intend to enhancing human cognitive abilities. So the cognitive technologies view help people understanding abstract patterns and thus better de-BlackBox techniques, which encourage people to create new technologies.

Secondly, it connects technologies with the social world of human beings. Machines don’t exist isolation; they interact with daily human life and become a part of human cognitive capabilities. Only when regarding those machines as symbolic-cognitive artifacts, can we fully understand their design principles.

Thirdly, considering technologies as cognitive artifacts can foresee the benefits and dangers of these technologies. From the system view, cognitive artifacts improve human cognition. From the personal view, the artifact does not enhance perception but change the mission into learning new methods. Human and cognitive technology intermingle and change each other. For example, many people think by implanting chips into the brain, they will be able to upgrade human memory and cognition on a large scale. However, from a personal perspective, cognitive artifacts in different positions mean different ways of accomplishing tasks. The external computer provides the user with a data access interface through which the user can operate the information extraction process and determine the value of the extracted information. It is not clear what form of interface the implanted chips will have to access data. In other words, implanted microchips in the brain means a different kind of cognition, and implementing the new method is not as simple as changing the size and location of an out-of-body computer. We need to pay more attention to the results when applying these technologies on human.

Martin Irvine, “Introduction to Cognitive Artefacts for Design Thinking”

Kate Wong, “The Morning of the Modern Mind: Symbolic Culture.” Scientific American 292, no. 6 (June 2005): 86-95.

Michael Cole, On Cognitive Artifacts, From Cultural Psychology: A Once and Future Discipline. Cambridge, MA: Harvard University Press, 1996.

Donald A. Norman, “Cognitive Artifacts.” In Designing Interaction, edited by John M. Carroll, 17-38. New York, NY: Cambridge University Press, 1991.

How do Modular principles and systems interact with a graphical user interface?

Zijing Wang

Every successful product consists of module and system.  Modularity enables us to divide a large structure into separate element while the system provides modularity with hierarchical construction.

In <universal principles of design>, William pointed out several design principles including affordance, hierarchy, mental model, and modularity, to help me better understand the composition of smartphone.

Affordance is the capability of an object. When affordances meet with their designed functions, the product can achieve the goal quickly and efficiently, vice versa. Take charge interface of the smartphone as an example. All the smartphones’ charge interface is in the shape of a unique concave, which offer users only one correct position for plugging. Another point is that symbols on smartphones’ GUI are all imitated from common images. This help improve the practicability of a design.(see below picture from Apple official site)

Hierarchy structure make objects easy to visualize and understand. Smartphone commonly use a nest structure. Settings on smartphones are mostly nest structure because it can explain relationships between different functions as well as minimize the difficulty of using them.

Mental model only works when system models stay the same with interaction models. Products perform maximum functions only when designers gain precise predictions on users’ behaviors and expectations. Under this principle, the iPhone uses the same interface visual style and interaction in every product. When users switch between different products, it is easy to find the shadow of products that they have used so they can quickly adapt to the new product.

Applications nowadays have become essential tools in smartphones. Take Instagram as an example. It can take photos and videos, add different filters to photos, comment and like others posts, share locations, hashtag and recommend people you may know, etc. Under these functions, we interact with all kinds of modules. First, before we use it, we have to create an account, which uses the registration module. Then when we add filter on photos, we use LUT module. A LUT is a program that changes colors in one image to another range of colors. Next, when we add hashtag, we use hashtag modules. Moreover, the function “people you may know” use recommender system,a module base on the search history or mutual interests or friends.

How can interface take us beyond what we can see to all the invisible functions in a system? Firstly, I think users need to know all the necessary information and tools before operating the system. Secondly, designers should provide users with appropriate control and give them chances to learn to use the systems. Thirdly, people need to know every consequence of their actions and also take nearly no responsibility for making mistakes.

From my perspective, creating a unified action of an app its interface needs Familiarity and innovation. Familiarity means to provide users with a stable interface style and interaction. Innovation means observing users’ experiences and create new design to improve the system’s efficiency.


Martin Irvine, Introduction to Modularity and Abstraction Layers.

Lidwell, William, Kristina Holden, and Jill Butler. Universal Principles of Design. Revised. Beverly, MA: Rockport Publishers, 2010.

Richard N. Langlois, “Modularity in Technology and Organization.” Journal of Economic Behavior & Organization 49, no. 1 (September 2002): 19-37.

Carliss Y. Baldwin and Kim B. Clark, Design Rules, Vol. 1: The Power of Modularity. Cambridge, MA: The MIT Press, 2000.

Apple Watch: The existing technologies and design principles in novel inventions

Zijing Wang

This week’s readings changed my view on innovative technology as well as design principles for artifacts. As Arthur pointed out, revolutions on technology must not only rely on the incorporation of existing technology but also the accurate observations on human desires.

Take apple watch as an example. Apple watch serve more than a traditional watch that can check the time. Its functions contain message notification, calls and texts, listen to music, record heart rate and exercises, online pay, and so on. At first, it might seem astonishing that a watch can do so many things. But after thinking deeply, every “new” function in apple watch already exists for a long time. What apple watch do is catch sight of what human want and put their needs into reality. People want to check out their messages without taking out their phones from pockets while crossing streets; they also want to record their exercises without carrying a massive phone. So, apple watch was born. As their slogan says: You’ve never seen a watch like this. Of course, we have never seen a watch like this, but we do have seen a phone that has the same functions as Apple Watch.

When it comes to designing principles, Norman believes when designers’ models consistent with users’ mental models, product can gain success. The design model is how the system should operate from the designers’ perspective. The user’s model is how users predict the consequences of their actions. Every label and instructions in Apple watch are clear and easy to understand, which enables users to operate the functions by route or even blindly. I think a transparent module in Apple Watch is one of the reasons why Apple watch is fashionable among all kinds of smart devices.

In my opinion, designing products is quite complicated than what we see. It is a contradiction that good technical models require several wrong attempts while the market cannot tolerate any failure. So how to solve the problem is still a thorny business.


Martin Irvine, Introduction to Design Thinking: Systems and Architectures.Print.

Brian Arthur, The Nature of Technology: What It Is and How It Evolves. New York: Free, 2009. Print.

Donald A. Norman, The Design of Everyday Things. 2nd ed. New York, NY: Basic Books, 2002.