Author Archives: Xiebingqing Bai

Fan App: How Design Promotes Interaction

Xiebingqing Bai


This paper analyzes how fan app is developed and serves its functions in a design perspective, mainly using theories about socio-technical system, interface design and HCI. The major research question is how fan app uses design principles to engender better interaction. As part of the whole fan economy, fan app provides multiple services to fans and is crucial for the B to C business model. Fan app emerges in a complex social and technical context. It combines a wide range of technologies to perform better interactive functions. Since fan app is a complex system, it embodies the principles of design such as modularity and hierarchy to organize diverse functions and affordances. As a main tool for fans to interact with artists and their community, fan app integrates many interface design and human-computer interaction principles in detail. Through many design clues, fan app could use its interface to affect users psychologically and socially, thus promoting a deeper communication within a community. The app will be deblackboxed and three case studies will be analyzed to conclude what aspects designers should consider ideally when developing a fan app.

Fan app in sociotechnical system

With the development of fan economy and entertainment industry, many kinds of fan app keep emerging. There are official fan apps for a single artist or a specific group to interact with fans, and third-party apps gathering many celebrities. Fan app not only is a platform for fans to interact with artists, but also serves as an efficient tool to form and solidify fan community. In this paper, I focus on the first type of fan app which is for a single celebrity or a group. These apps are mainly developed by the artist’s company, and act as a main outlet to bond with fans. Fan app is part of a bigger socio-technical system, which involves all dimensions of mediation and interface, including social, technical, cultural, political, economic and demographic aspect. As a specific technology artifact, it mediates both the underlying medium function and social cultural institutions. Its emergence relies on Internet developments, smartphone industry, talent agency companies, entertainment ecosystem and special fan culture in Asia. 

Surprisingly, although fan economy is very mature in many countries in the world, the typical cases of this type of fan app I mentioned only developed in China due to different mutual influence of actors in the socio-technical system. Firstly, there is a strong market demand emphasizing the tight interaction of artist and fans in Asia, which is very different from western countries. Compared with China, fan economy in Korea and Japan developed in the era of personal computer, so the main outlets they use are official websites. Fans use the websites to view the latest information and purchase derivative items and that communication way remains today. However, Chinese fan economy developed at a different time, when smartphone started to boom and apps become the major way for them to get relevant information. As a result, fans mainly use multiple apps as main information outlets in China. Here comes the emergence and prosperity of fan app. We can see this specific technology artifact is highly related to the development of computer and smartphone industry. The social-technical relations are networks of distributed agency with multiple kinds of agents. Technology and human agents have mutual relations and technology actors can transfer the goal of actants (Latour, 1999). Also, fan app has a delicate relationships with other social media. On the one hand, it competes with social media like Weibo for users and attention. On the other hand, those fan apps can directly link towards other social media and fans are encouraged to do some tasks for fan community in other media.

The phenomenon that fan app mainly prospers in China also has demographic reason. Compared to other countries having vibrant fan economy, the huge population in China guarantees sufficient user growth and smooth operation on a daily basis. The steady user growth and adequate user-generated content is really important for an app, because an app is an isolated information outlet targeted at a vertical market demand while web has infinite information and is inclined to open for wider audience. Since fan community for a single artist is a relatively limited group of people, only huge population base can make this kind of fan app possible. In the whole fan economy, fan app not only promotes deeper interaction between artist and fans, but also facilitates the bonding of fan community. Fans could gradually form a using habit and get accustomed to contributing to this community regularly. In this way, more loyal consumers are created for talent agency companies regarding future purchasing behaviors and activities. Fan app as an artifact and interface, constantly mediates Chinese culture, population, institutions, economy, social atmosphere, smartphone industry and Internet development. It relies on many invisible forces to make it possible. As Gregory Bateson said, “What can be studied is always a relationship or an infinite regress of relationships. Never a ‘thing’. “(Bateson, 1972) We need to put it both in social-political system and technical system to study. 

Combinational technologies in fan app

Although fan app appears to be a simple interface for us to interact, it’s actually a combination of many kinds of cumulative technologies, which could be both in device and in network service. By deblackboxing it, we can find fan app combines technologies in a scalable and extensible way. Those technologies are functioning together to form a complete system and platform. The fan app has functions of uploading text, audio, picture and video posts, watching streaming content, searching friends based on user location, joining instant chatting, online shopping, playing some simple games and interacting with the virtual simulation of artist. The microphone and camera receive video and audio information then converter transfer it into binary code and send via a specific radio frequency. It also combines the technology of photo-polishing app to airbrush some images, changing the color value of pixels. And the length of binary code could be cut to edit the audio messages.

Most fan apps have their featured streaming video content about celebrity’s daily life and special activities, which could be watched while not completely downloaded. Streaming technology is a combination of Internet technology and audiovisual technology. Different from conventional information transmission using TCP/IP protocols to divide data into small packets then assemble them in the end-users, streaming technology usually uses RTMP and HLS protocols. Streaming video stores some data in buffering area to preload some video data in users’ device. When the bandwidth speed becomes low, the program will use some data from buffering area to guarantee a continuous video playing and reduce video lag. The buffer usually doesn’t need so much memory as we may imagine, since it uses a kind of loop structure to throw up data having been played and keeps emptying space constantly for buffering other content. Since streaming content needs the bandwidth speed quicker than playing speed in device, we can regard the buffering as a kind of redundancy to make up for the potential Internet interference, which is a common design strategy for steady information transmission.

Moreover, fan app always use GPS function to locate users and allow them to find other users nearby, further promoting the bonding within a community. GPS system uses GPS satellites to pin down our accurate coordinate on the earth. And those apps can identify who you are when next time you log in via cookie. Cookie is a small file stored in client device, associating with a particular web to record the user’s information and preference. At first the file become bigger and bigger while user browse the website frequently, the local storage can’t hold the file if it continues to expand. Then a smart design comes, which links the file with a unique ID thereby what stored in device is just that ID, and the whole file is stored in a server of that company. Users will be identified by their ID next time log in. 

In most fan apps, users can have directly access towards other social media. And if you want to purchase something in fan app, you will be linked to other transaction apps like Ali Pay. The functionality linkage of different apps is achieved via API (Application Programming Interface). API enables apps to connect different services and bring more functions to people without knowing their complex source code, which is convenient for apps to combine functions from multiple platforms. Some fan apps create a digital simulation of artist for fans to click and interact. When users click on the simulation appearance, they can enjoy a virtual conversation with artist. That function utilizes the magical touchscreen technology. Each pixel on the screen is coordinated and matched with a mapped grid pattern. When we touch pixels of that simulation image, the invisible wires on the pixel display layer can sense the voltage change and detect the specific location, then microcontroller will translate the location information and send the response to the pixel layer according to the location. In this way, further animation effects will be triggered as a feedback when we press the matched area on the screen. What’s more, as other apps, fan app have an option allowing users to clean cache in the set up module. Cache memory is a software component to store data besides main memory. Since the CPU speed is much faster than main memory, it will take a while to retrieve data from main memory. The data cache stores is the result of recent computing, which could be directly requested in a faster way if CPU needs them again. Although we can’t tell this processing difference, the processing system is designed to optimize the possible computing performance. Combing technologies of receiving, transmission, presentation, location and processing, fan app uses fan culture as a lens to orchestrate all cumulative and scalable technologies.

The modularity and affordances of fan app

Most fan apps have clear hierarchy, layers and modules. The complexity of actions are abstracted into several big concepts and modules. In a fan app called Vae+, there are four layers in the design hierarchy overall.  The similar functions are gathered in a subgroup.

Vae+ is a fan app designed only for one Chinese singer Vae. We can see it’s a complexity composed of multiple modular parts serving a particular function. As Langlois said, “one way to manage complexity is to reduce the number of distinct elements in the system by grouping elements into—by hiding elements within—a smaller number of subsystems.” (Langlois, 2002, P20) This app has gone through several iterations, and constantly add more functions. Modularity allows for repeating reconfiguration to match different purposes, such as adding more subgroups in the community module. With clear abstraction layers, all functions could be easily indexed. This modular design is similar to other fan apps, although they have different level of complexity. Another fan app M77 is designed for a Chinese actress Shuang Zheng. It has modular parts of posts, announcements, badges, messages and setting. In general, fan apps commonly have a home page for latest news and announcements, a modular part for communication within the fan community, a module for purchasing items.

Those fan apps also have obvious affordances and constraints. As part of the smartphone system, it already has some built-in affordances with the touchscreen, camera, microphone and keyboard. Under the purpose of those apps, they possess some particular affordances. Norman divided the real affordances and perceived affordances of artifacts. He said “in graphical, screen-based interfaces, the designer primarily can control only perceived affordances.”(Norman, 1999, P39) Perceived affordance is more important because it determines the most possible relationship between user and artifact, and how people will use the artifact at first. All digital artifacts belong to a shared landscape of potential affordances, fan apps also embody the procedural, participatory, encyclopedic, and spatial design strategies (Murray, 2012). Take Vae+ as an example, all tasks insides belong to a set of procedures. Every modular parts and design clues encourage a participatory user experience. The information on home page and posting modules is very comprehensive for this particular community. And the virtual appearance of that artist emphasizes a spatial sense by depicting his background architectures in detail. Some legacy affordances of newspaper and map are transferred into digital formats and have been refined in the process. Although fan app is a product developed under a vertical and narrow need, it actually offers a diverse range of possibilities for users to navigate. “Direct perception of possibilities for action is what the concept of affordance is about.” (Murray, 2012) In this app, users can enjoy the specific affordances of viewing information, interacting with artist, posting thoughts and artworks, joining communities, communicating with others and playing games. Users can even edit the audio concent and polish photos. And most affordances are in line with users’ mental model. But constraint is users can only upload one type of post in each subgroup within the community modular part. And there is a size limit for video upload.

Information richness is a result of many affordances the apps have. According to media richness theory, fans turn to those fan apps partly due to the richness of this particular kind of media. There are four aspects evaluating the media richness: the availability of instant feedback, transmit multiple cues, use of natural language rather than numbers, the personality focus of the medium (Trevino, 1990). Compared with other media outlets for communicating with artist such as websites and social media, those fan apps have much richer information. The content users post can be commented or liked instantly by other users. It’s also more likely to obtain opportunities to interact with artist in the app. And you may get instant feedback while having a virtual conversation with a simulation of artist. The diverse affordances allow users to generate many kinds of input, including text, images, audio message, videos and behaviors. And since a fan app is merely designed for a unique community, users can post more personal thoughts and the context could be better understood.

Interface design and humancomputer interaction of fan app

The two keys of interface design are page flow and page layout. The former establishes clear architecture and strict logic, while the latter integrates scattered information and determines clear primary and secondary relations. In this part, I will use three fan apps Vae+, M77 and Yianfan as case studies. Vae+ and M77 are designed for one single artist while Yianfan is for an artist group. The first principle of interface design is consistency, which means consistent actions, terminology and layout. We can see these fan apps are designed based on the characteristics and style of a particular artisit. The overall interface design of Vae+ is simple and elegant, aligning with the personality of the singer Vae. This app uses soft blue as dominant hue, and blue is for the font and button while white is for the major layout. At bottom there are five buttons originally filled with white for major modular parts, when users click on one button, it will suddenly fill with blue. And in the UGC module, the submodules for different topics represented by icons drawn with blue lines. 

On the right there is a blue semicircle, when click on it, it will turn into an artist’s cartoon face, then the whole simulation image of the artist will be triggered for users to start a virtual conversation. That image is also against a blue background, with architectures and stars in white. Those architectures are some featured buildings in Beijing, where the artist lives. Those detailed could make fans feel very relatable. This part of design also reflects the principle of preventing errors. Since triggering the simulation image is a huge action in this app, and users are very likely to click on the blue semicircle inadvertently when viewing the home page, so the designer adds one step to avoid possible error. If users want to trigger the virtual conservation, they need to firstly click on the blue semicircle then click on the artist’s cartoon face. Those two steps of actions avoid a great amount of potential errors if there is only one step. To prevent errors in a design, we could add more steps for confirmation besides exerting some constraints on an artifact. 


In M77, the overall interface design is also consistent with the personality and style of the artist, a young lady. Most visual elements are dominated by purple, although with some color changes. The menus are underlined and filled by purple. Since “bubble” and “planet” are core concepts in this app, designers make many buttons and visual elements in the shape of circle to emphasize this concept, and it also has sound effect of bubble when clicking on the major buttons. In the dairy part, every date is also capsuled in a shape of bubble. Consistency in a sense is not only represented by the specific design details such as font and terms, but also how a product could be used and experienced as a whole, how a concept could be embodied consistently throughout a product.

Yianfan is developed for a group of teenager boy artists, so the app is designed under the context of a high school and users are regarded as their parents. The underlying concept for users in this app is raising their kids and watch kids’ growth. The overall visual style is very vivacious to align with their young age, with the dominate color of red and yellow. The icons also have many elements of high school, such as schoolbag, brush pot and notebook. And there is a module where designers create a virtual land modeled after a school, which could generate a relatable atmosphere among users. The whole layout promotes a sense of child raising and precipitate a special bonding between fans and artists. 

What’s more, those apps all use stack style and list style to display posts and announcements. Specifically, the stack style is mainly used for artist’s posts and official videos. In Yianfan, stack style also applies for music display. Users need to slide from left to right to view next stack. And list style is used for displaying users’ posts. Stack style is more eye-catching so users can immediately notice artist’s posts, which is what they most care about. That embodies the design principle of visibility, meaning the important part should be made very visible and salient. And list style could accommodate more and is suitable for showcasing user-generated content. The consistent displaying style also fosters a viewing habit to pay more attention on what designers want them to care more. All in all, consistency in essence means accordant representations for a set of symbols inside an app, applying an identical relationship between signifiers and the signified. Throughout design consistency could help users understand and further apply the underlying design logic and concept of an app, and simultaneously reduce possibility of errors. Compared with other kinds of apps, the consistent design style in the case of fan app is more important because it not only results in a more smooth user experience, also has a salient effect of immersing fans into a world with unique atmosphere and visual features, promoting the perception of a deep bonding within the community. 

The most remarkable thing in fan app is how they use design methods and clues to encourage more using time and acquire more user attention. First method is using many ways to identify and classify different users. Besides being marked with level, users can illumine particular badges when they achieve certain missions in M77. Different badges are designed for different kinds of users, such as users with a special talent or expertise, and users having attended certain activities. In Yianfan, users will be identified by which grade they are in this school. These special identifications can generate a competition. To achieve a higher level and a specific virtual accomplishments in the app, users will consciously commit on doing certain tasks. 

Plus, constant rewarding feedback is very crucial for continuous attention. In Vae+, designers create pine cones as the virtual money in the app. Fans can use those pine cones to do many things in the app. When users stay in the app for a certain duration of time, more pine cones will be collected. And there is a ranking list in the app, exhibiting users contributing most in a particular task. Different from other fan apps, in Vae+ the derivative items in shopping module can only be purchased by the credits in the app, rather than real money. And credits are collected through particular user behaviors in the app. This design changes what a shopping module usually could be, reframing a shopping context into a rewarding context. As Murray said, “Innovative design is often the result of reframing familiar activities, such as rethinking the context in which they can be performed.” (Murray, 2012, P26) In M77, when you reach certain level, the according privileges will be unlocked. An interesting design is that you can only know the privilege next to your level, but can’t know further beyond that. That sense of mystery stimulates a desire for continuous exploration. In Yianfan, there is a module for users to win a gift randomly. Everyday when you click on that module, a virtual gift will be presented. That’s really attractive for users to regularly stay in the app because you never know what gift you will get next time. When you accomplish the goals set in the app and obtain rewarding feedback as a kind of confirmation, you could acquire a sense of ritual and fulfillment. Rewarding feedback to a degree serves as a guidance providing users with directions about the ways they should use the app. Human expectations for artifacts are fostered by learning process, and gradually become habitual after a period of time. Constant rewarding feedbacks can form the using habits unconsciously. 

Additionally, interaction is the most significant function in fan app. Good interaction design can cultivate positive two-way communication and promote collective engagement. From Douglas Engelbart to X PARC and Steve Jobs, designers put more and more emphasis on human input in the field of human-computer interaction. As Murray said, designers need to transfer “users” into “interactors” (Murray, 2012). And the interaction process need to be consistent with users’ expectations to engender a sense of direct manipulation. In Vae+, as other social media you can comment and like a post, announcement and a piece of news. You can click on the simulation image of artist to start a conversation and every time there are several options provided for users to choose as a response to the artist. The simulation image also has some animation effects to emulate a realistic conversation. And this app provides an internal game module for users to play with each other, in this way fans in the community could have further interaction even without the artist. In Yianfan, you can send virtual flowers to the artists. Every time you enter the app, a voice of one artist will be played automatically to welcome you. Sometimes interactive videos will be launched inside, which will give users free choice to choose from several options at certain times in the video, and different users will see different results based on their unique choices. Fans can also write letters for their favorite artist via the app. And there is a space full of different virtual gifts for users to explore, which is designed as a playland. Some clues such as arrows are provided inside about how to interact with this interface. 

In those apps. Confirmative feedback is essential for a more confident interaction. When each button is clicked, a special effect will emerge as a confirmation. In Vae+, a button will be filled with blue color when you click on it. In M77, a button will change into purple with an animation effect such as spin and swag and a sound effect. And this sound effect applies throughout every step in the app. In Yianfan, a button will be filled or underlined by red. Confirmative feedback is part of the user-centered design and conforms to users’ psychological need. 

According to situated action theory, using behavior is a complex set of actions influenced by surrounding social and material world, rather than just mainly controlled by a specific way computer pre-scripted (Lucy Suchman, 2011). So designers not only need to know the purpose of an artifact, but also under what circumstances people will use it and how it could be used. In fan app, one person’s single behavior is a part of collective behaviors and is constantly affected by others. Many functions in fan app must be achieved through computer-supported collaborative work. In Vae+, the user-generated content is clearly divided into many subgroups such as daily lives, jokes, voices, games, photos, literature, popular topics, questions and announcements, and people can only post one type of content in each group. That restriction is solidified through a great amount of posting. What one person behaves is unconsciously defined and confined by others. In M77, content commented or liked by the artist will be displayed in a salient way, and those content also motivates others to generate similar posts to increase the possibility of being noticed by artist. To promote certain behaviors, designers should create a certain context for users rather than just specific modules and elements. 

All in all, fan app design should consider three levels of core human need (Murray, 2012). Firstly, it needs to have multiple functions, including providing relevant information about activities and tours, posting user-generated content in many forms, communicating with other people, interacting with artists, purchasing items and doing certain tasks. Those functions set some particular goals for users when employing the product. And for fan apps interactive function is the most important. Secondly, designers should investigate the underlying social context, relationships and value this app reflects and incorporate such context into the overall design. Fan culture has its unique conventions and behavior standards, and within different fan communities this culture has delicate mutations. The context of this kind of app is also quite different from other social media platforms where more conflicts are likely to appear and public topics are more welcomed. The communication context in fan app is generally more personal and younger with a unique discourse system. The app design should align with the particular system of symbols and communication of this specific fan culture and online community. For example, playing a voice of the artist automatically is a way to suddenly bring users into a certain context when they start to use it. Inserting songs and some special effects in the app could create an immersive atmosphere. And the overall design needs to be centered on an underlying concept in line with a certain context, such as a planet, village and school (a metaphor the whole community agrees on). Moreover, fan app is a part of general and enduring human activities and values. Human always tend to live in a community throughout thousands of years, and it’s the same in cyberspace, but it’s hard to find a group you can commit to in the open-ended website due to anonymity of uesrs. Nowadays we are not connected by geographical proximity anymore, and we are grouped by common interest and value. Fan culture is a powerful glue to aggregate a bunch of people tightly. And fans need to get some positive feedbacks when they continuously support an artist, but in China the offline fan activities don’t have a very mature operation pattern like Japan. What they actually need is not realistic interaction, but a sense of constant interaction and fulfillment in order to get the reason for keeping on. As a result, fan apps meet fans’ demand to associate with a community in cyberspace to stabilize a using habit and get positive feedbacks from their favorite artist for their further online behaviors. 


Fan app is a digital artifact embedded in Chinese special social-technical environment, and it has developed from simple version to a more interactive iteration. It uses fan culture as a core value to bring a diverse range of technologies together, and applies modularity to organize those functions in a hierarchy system to achieve information richness. For a good user experience, design details should cling to the consistency principle and accurately match with multiple affordances. Different display styles should be chosen for making important content conspicuous. Multiple design strategies should be applied to motivate user engagement, such as identifying different users by unique marks and providing constant rewarding feedbacks. Interactive design should meet with users’ mental model and give confirmative feedbacks. Design should also investigate the surrounding context of user behaviors and three levels of core human needs to draw the underlying design logic. Nowadays the interactivity is much more important for fan app than other social media. How to design a better interactive interface and how to use design clues to encourage deeper interaction is the eternal question in fan app designing.


Galitz, W. O. (2007). The essential guide to user interface design: An introduction to GUI design principles and techniques (3rd ed). Indianapolis, IN: Wiley Pub.

Latour, B. (1999). Pandora’s hope: Essays on the reality of science studies. Cambridge, Mass: Harvard University Press.

Murray, J. H. (2012). Inventing the medium: Principles of interaction design as a cultural practice. Cambridge, Mass: MIT Press.

Lo, S.-K., & Lie, T. (2008). Selection of communication technologies—A perspective based on information richness theory and trust. Technovation, 28(3), 146–153. 

Suchman, L. (2011). Anthropological relocations and the limits of design. Annual Review of Anthropology, 40(1), 1–18.

Complex engineered systems: Science meets technology. (2006). Berlin ; New York: Springer.

Norman, D. A. (2002). The design of everyday things (1st Basic paperback). New York: Basic Books.

Kornberger, M., & Clegg, S. (2003). The architecture of complexity. Culture and Organization, 9(2), 75–91.

Feldman, S. (2004). A conversation with Alan Kay. Queue, 2(9), 20.

Couldry, N. (2012). Media, society, world: Social theory and digital media practice. Cambridge ; Malden, MA: Polity.

Market Economy Institute of RAS, Loginov, E. L., Shkuta, Т. А., Market Economy Institute of RAS, Loginova, V. L., & Market Economy Institute of RAS. (2018). The supersystem of the digital economy: Functioning and development based on the principle of self-organizing integration. Market Economy Problems, (4), 48–53.

Baldwin, C. Y., & Clark, K. B. (2002). The option value of modularity in design: An example from design rules, volume 1: the power of modularity. SSRN Electronic Journal.

Norman, D. A. (2011). Living with complexity. Cambridge, Mass: MIT Press.

Stone, D. L., & Open University. (2005). User interface design and evaluation. Amsterdam ; Boston, Mass: Elsevier : Morgan Kaufmann.

Arthur, W. B. (2009). The nature of technology: What it is and how it evolves. New York, NY: Free Press.

Anderson, Janna and Rainie, Lee. (2012). The Future of Apps and Web. Pew Research Center’s Internet &American Life Project. 

The layers of websites and its trend of “appification”

In this week’s reading, I’m more clear about the different layers enabling Internet work this way. The first underlying layer is about the basic infrastructure and information form, which are wires, cables, Wifi and binary sequence design. This architecture is the foundation of information transmission. The second layer above is about how to send specific information from one point to another. Here comes the TCP/IP protocol and router system. Every specific information could be broken down and transported in packets. Different from determining the information form in this previous layer, this layer secures information could be sent accurately. The third layer riding on it is about managing the sending and receiving process of web files, which is relied on HTTP, DNS and client-server system. And there are many additional measures to guarantee this layer work smoothly, such as SSL, TLS and search engine algorism. Search engine uses spider to collect information on websites and create a search index. Search rank algorism is very essential and varies from company to company. Google’s rank is based on how many websites are linked to that. For Baidu, the search rank is generally based on click rate, link number and overall reputation. But the controversial one in Baidu search principles is bidding rank, which received plenty of critiques for misleading consumers by ranking untrustworthy advertisement first. So how to find a reasonable and sustainable search rank model is still an crucial issue today.

Moreover, I found the debate of web and app on Pew Research is interesting. The web is actually undergoing “appification” now. HTML5 could create many interactive effects just like app. There are many accessible tools now for users who don’t know coding to make H5 interactive websites. But as far as I observe, those HTML5 interactive websites are still transmitted in apps by link for creative marketing, rather than serving as an aid for daily website viewing. I think the trend for apps to outpace websites is inevitable, because in this age of information explosion, we really need a filter for functional information, and apps can truly meet users’ needs in this sense. In my perspective, apps serve as a kind of beforehand filter and enhance the efficiency to access information. For example, if we need some recipes to cook for a party, the cooking app could directly recommend something suitable for you, and you can also view the comments below this recipe to decide whether you will use it. Yet the web is not so convenient in this case, it will take additional time for you to search one by one and you can’t see others’ feedbacks. However, I don’t think the apps can completely replace websites and they are mutual exclusive. I think the app and web debate is similar to the TV and mobile debate to a degree. The apps are isolated information island, and we can’t stay on the islands all the time. Technology methods we use are not simply a technological issue, but also have sociocultural meanings. TV can’t be replaced by mobile devise because it embrace the family culture and create an open space to communicate. Web is complimentary for the vertical needs in apps and serve more general functions and untargeted explorations.


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.

Janna Anderson, and Lee Rainie. “The Future of Apps and Web.” Pew Research Center’s Internet & American Life Project, March 23, 2012.

Internet as a socio-technical system

In this week’s reading, I find out how Internet is a sociotechnical system and how it’s conditioned by history coincidence and design principles. The three-sector research model combining government, private industry and universities is essential for the intense research at that time, and Internet could not emerge without the rapid development of telecommunication and computer industry in 1960s-1980s. Standards and protocols make incompatible computers have the ability to communicate with each other. TCP is responsible for breaking data into packets and reassembling these packets into the original. IP lets data have their clear destination. IP has a standardized hierarchy of its name, so the whole network can organize the specific devices well. And the DNS associates every website name with an IP address, so the computer can easily index every requested website. There are some methods to guarantee the reliability. TCP and router system can assure scalable data transmission. Redundancy design is an Internet version of saturated rescue, making data transmission fault-tolerant. These design philosophies not only make computers communicate smoothly, but also make the whole system extensible and scalable—it could adapt and absorb new communication technologies infinitely.

Many designs within Internet are modular and have distributed hierarchy. DNS Servers have different layers and split into major domains so it can handle requests from thousands of computers. And the router system serves as mediatory computers to keep data traveling well. We frequently encounter the router system in our daily life, we use both modem and router in home to connect with Internet. Modem has public IP address and uses a WAN network, bringing Internet to our home. Router assigns local IP addresses to bring Internet to your devices, which creates a LAN network. When your devices are connected with wifi, the wifi is actually connected with Internet Service Provider, and then you are connected with billions of networks through ISP, such as AT&T and Netcom. Since the international channel leasing is very expensive, we need an ISP as an organization to provide services for accessing, using, or participating in the Internet. The data transmission also relies on rigorous materials. The Internet speed can’t be as fast as ideally thought partly due to the latency and many radio interference. How fast the data could be transmitted mainly depends on waveform’s bandwidth. Increasing bandwidth capacity is essential for speeding up Internet. Faster Internet speed means more possibilities. Streaming technology nowadays highly rely on fast Internet connection, since it allows you to start using the content before the entire file is downloaded. A speed of 2 Mbps is necessary for streaming standard definition video without skips, reductions in quality, or buffering delays. With the advent of 5G, “on the Internet” could mean more to us.

I have some questions about the reading. Every devices on the Internet will be assigned an IP address, and all websites also have IP address via DNS. I’m a little confused about how websites could have a specific “location” on the Internet. And I’m also confused about the “two waves” which modular waves superimpose their wave pattern on the simpler carrier waves. I’m wondering how the original message could be identified in the entire new waveform.


Martin Irvine, The Internet: Design Principles and Extensible Futures.

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

Concepts behind and ahead computer development

Many visions and concepts preceded the computer development and were far more ambitious than what the computer is today. The main conceptual leap enabling computer design to develop beyond earlier designs is to consider computational technologies are powerful symbolic engines for abstraction and representation. The two major research and development labs in the 1960s-70s represented two major direction of “human-computer interface” design principles: One is to turn computer into a comprehensive media machine dealing with multiple media in a single device. The “metamedia” metaphor is fantastic because it could embrace both the existing media and those not-yet-invented media. The other is to augment human intellect, whose ultimate end is to enhance and expand human intellectual abilities and creativity through symbolic representation process. These visions led to screen which can display and manipulate symbols for users. What fascinating is although these concepts seemingly have the same consequences in computer development, they actually have different possibilities. And the “time-sharing” concept, which became networked computing later, rendered many possibilities in interpersonal communication and work cooperation. All in all, the greatest conceptual leap is the screens and displays could be designed to take input as instructions back into computing process, rather than passive representational substrates. The concept not only contributed to the invention of interactive interface in 1960s-70s, but also the many new functions in smartphone today like customized content (take our inadvertent using habits as input).

There are many concepts not fully fulfilled even today. Engelbart’s concept of “view control” can be seen in many software today such as Word and Powerpoint. And it becomes more dynamic today, even in some video platform, users can choose if they want to see the cut of a specific character. However, it’s still hard to turn one medium representation into another medium, and the “chain of views” are totally unfulfilled. It could be implemented today such as when go to a video platform, we can switch the view of video and script. And in some apps to write down our to-do list, we can switch to view the possible locations of these things. Another unfulfilled concept is Kay’s vision of programming environment, which provide users already- written general tools to reprogram for a customized need and make their own creative tools. This is still not possible for most users because nowadays computer and apps are black boxes. To achieve this, we need to make our computer programming an open source system, but it could conflict with copyright in many cases. Additionally, Nelson’s vision about hypertext and hypermedia is very experimental, and it goes far more beyond hyperlink. His emphasis on complexity and interconnectivity and on breaking up conventional units for organizing information is consistent with post-modernity. There are some platforms experimenting this idea through interactive videos, such as Black Mirror: Bandersnatch. But Nelson’s vision still has many possibilities to achieve, like allowing users to choose and create the sequence of a storyline. And I believe those possibilities could be more vital and realistic with the advent of 5G technology.


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

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

Understanding binary system and computer programming

In Evan’s reading, I have a deeper understanding of how binary system serve as the fundamental brick of computer science and how information transmission is based on probability. How many 0 or 1 needed to represent a specific message is hinged on the depth of binary questions, which is determined by how many possible values it could have. It also gives me a clearer idea of the information theory and entropy in last course. We could know how many bits are needed in advance of transmission through a simple mathematic formula of log2k. Different form the analog computer who has continuous representation, digital computer is discrete due to the binary system. And the text, audio, visual information could all be designed into binary questions. However, although the binary system could encode infinite messages and the hardware of computer is still under Moore’s Law, the design of computing and programming is still rigorously restricted because human cognitive capability has a great limit. So how to frame programming language in a simple, clear, regular and economic way with a flexibility to abstract is a significant design question.

The Language and Computing part help to understand better about data structure in computer. Like natural language, a program is composed of expressions and definitions. Expressions could be primitives and application expressions. At the basic level, primitives have 3 types, which are numbers, Booleans and primitive procedures. As detailed as coding is, we have many ways to abstract it to simplify and understand easily. To abstract details in programming, we could use compiler or interpreter to serve as a transition between high-level language and machine-level language. Nowadays the Integrated Development Environment is frequently used as a program combining different abstracting functions. And to abstract specific mathematics of code, we could use functions to capsule one kind of computing into a abstract function. As Evan said, what distinguishes a computer from other machines is its programmability. Computer program is a series of procedures executed automatically and is dealt with in abstract level rather than physical matters as other mechanics. As for abstracting text, we could use strings to refer to blocks of text. Additionally, variables could also be seen as an abstract for a consistent value, like we use the abstract “meal” to refer the specific food we eat everyday, and we could assign a single variable for multiple references.

As detailed and accurate as it is, computer programming uses many ways to achieve different aspects of abstraction. Beyond the artifact itself, it reflects both the symbolic power of human cognition and the distinct limitation it exerts on us.


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)

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

The universality and uniqueness of information

Xiebingqing Bai

Information is a combination of universality and uniqueness. In daily life, we communicate our messages through diverse formats, such as writing, speaking, drawing, and singing, etc. Information theory, founded upon probability and mathematical statistics, is about the fundamental particle of all forms of digital communication. In physical world, all items can be measured in kilogram or pound, through which we can measure different things by a unified scale. Information also could be measured by a universal scale, which is entropy. In thermodynamics, entropy means the degree of chaos, and in information theory similarly it means how much the small probability one thing has. In simplest form, information can be thought of as the exchange of symbolic differences. For example, the amount of information in two e-books could be compared by using a unit called bit, a measure of surprise. And the bit is linked to a very simple question of yes or no. In this way, the multiple types of information on the Internet is essentially the same. Entropy is the scale and bit is the minimal displayed unit. That is why the signal-code-transmission model is not a description of meaning, because this model is putting all kind of information with different meanings on the unified scale of bit.

When we are using the content/container and transport/conduit metaphors, we are splitting the real content of meanings out of the information transmission model, and assuming the bits working in electronics are just container of real meanings rather than possess meanings themselves. The conduit metaphor helps us to better consider about the speed limit, maximum density and transport construction of information transmission. With that in mind, we can deepen our thinking about how to design the conduit to maximize the information density. The nowadays trend of increasing bit density on electronic devices is a result of conduit thinking.

Since information theory is mainly about the universality of information transmission, it’s not sufficient to explain the whole process of our daily communication in digital devices, which is so unstable and volatile. So the combination of information theory and semiotics could tell the whole story. Language is where communication begins, and each language could be broken down into many symbolic patterns. During communication process, we are encoding our thoughts into different symbolic patterns and receive messages to match existing symbolic patterns. Beyond the solely information transmission level, it’s human who possess the interpretable features and inferences with social-cultural meanings. Therefore, to successfully encode and decode information, sender and receiver should share the similar social-cultural backgrounds and cognitive pattern. Different information is not so distinct in essence, it’s our cognitive and symbolic ability that renders its uniqueness. Information is universal by mathematical measurement, yet is unique by our symbolic cognition.

And I have one question regarding information transmission: What kinds of “noise sources” could affect the transmission process? How can we avoid or reduce these noises?


Martin Irvine, Introduction to the Technical Theory of Information

Luciano Floridi, Information: A Very Short Introduction. Oxford, UK: Oxford University Press, 2010.

Design principles and affordances in time-managing app

Xiebingqing Bai

Time managing is a task embedded in human history for a long time, and we have used many tools to do that. In ancient times, we managed time mainly by calendar, but there is limited space to write in physical calendar and it’s hard to change a plan into another date. Nowadays it evolves into diverse digital artefacts. The time-managing apps can be categorized into 5 types: recording time, making plans, enhance concentration, summing up issues, improve sleep quality. And in digital artifacts the function of enhancing concentration is emphasized more compared to the legacy media. The affordances of time-managing apps design should conform to 3 levels of core human need. In function level, we can easily input our plans and insert them into specific time slots to remind us, and we can set up a period of time to stay undistracted to focus on our work. As for context, this age is the time when we are experiencing unprecedented knowledge explosion and constantly feel anxious about the insufficiency of enough time to learn, thus it becomes increasingly important to manage time properly. In the core need level, human are eager to truly get control over our lives and acquire a sense of fulfillment by accomplishing works. Faced with the paradox of limited time and infinite things we want to do, we always have a huge demand to possess tools to manage our lives. We can see many relevant apps now could reflect those human needs from their design details. I want to take Forest as an example.

Forest is an app designed for people to avoid touching phones and stay focused for a fixed period of time. One accomplished time slot will resulted in a virtual tree grown in the forest, and if you have stayed focus for enough time, you are eligible to plant a real tree in Africa. As a time-managing app, the interface of Forest associates time length with different states of tree growing process, engendering the affordance of visually representing the focused time and encouraging people to set up a longer time. The way of inscription in Forest is also very user-friendly. Instead of typing or choosing a specific time slot as other apps, it sets up time by simply sliding the dot in the circle, and the visual presentation of tree will change along with the dot. The interface design in Forest is very simple but clear, making the main affordance as salient as possible. As Janet Murray mentioned, we are interactors rather than users, Forest also performs well for participatory affordance. In the app, you can manipulate your virtual money and choose your own type of tree to plant and build a unique forest at end of the day. It has a mode for a group of people to plant trees together, imposing one more level of responsibility to stay focused, which makes this process into a social participation. And when you accomplish the ultimate goal in the app, which is planting a real tree in Africa, you could acquire a sense of ritual and fulfillment. But the constraint in this process is the app can’t show you exactly where the true is planted, which may cause some frustration and could be refined later.

Time-managing app is an example of how legacy affordances transferred into digital formats and how it has been refined in the process. We can see the spatial, procedural and participatory affordances embodied in them. And it scripts the interactors in a sense and more and more accents the participation process.


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.

Donald A. Norman, Affordance, Conventions, and Design. Interactions 6, no. 3 (May 1999)

The Sociotechnical Mediation System of TikTok

Xiebingqing Bai

After reading materials of this week, I could put the technical artifact into an interdependent system, where the underlying medium function, the specific technical artifacts and social, cultural, political forces interwine and interplay with each other. If we look into our phone, we can find out almost every app is a combinational technology, especially those featuring strong media function. TikTok is a great example for sociotechnical system. As an app mainly designed for sharing short videos, it serves as an interface mediating both the underlying medium and the forces of culture, society, market, industry and institution. Firstly, as a type of pre-existing medium, video mediates perfectly with this app. Neil Postman said one underlying feature of video is its fragmented and entertainment tendency, which is exactly the function TikTok is designed for. TikTok is a social media video app for creating and sharing short lip-sync, comedy, and talent videos, which only allow for at most 15-second length. The affordances of this time duration are inclined to create interesting, virus and relatively simple videos rather than something intellectual and informed. Thereby the videos posting on TikTok are just fractions of a whole narrative with attractive audiovisual effects. In this way the design intention perfectly accords with the video medium function and its interface.

Besides mediating with its medium function, TikTok also mediates with a broader system. When it comes to social forces, the app has spawned numerous viral trends and internet celebrities, and propelled many grassroots songs to fame. And the proliferation of those trends and songs could in turn promote more people to use this app. And TikTok also has the function of social media, catering to the needs of consumers to socialize with friends and strangers by recording their lifestyles. Gradually the social atmosphere of accentuating appearances has been intensified, especially among young girls. As for the mediation with economy and market, the advent of TikTok truly animated Chinese short video industry, which resulted in plenty of other emerging apps similar to it, thus engendering a competition situation in the market. And this competition again prompted TikTok to modify itself. Plus, one interesting phenomenon now in China is some music companies mainly producing viral songs targeting at TikTok just emerge in recent years, which produce catchy music merely through immediate monitoring system to capture the hot topics and keywords instead of making artistic endeavors. Those companies provide upstream content for TikTok, thus an ecosystem has been formed. In this ecosystem, TikTok is a central content platform while other music companies and companies for incubating Internet celebrities serve as upstream providers. Through this example, we can see how technical artifacts mediates in a larger sociotechnical system.


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

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

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.

Mind-transforming cognitive artifact: from language to emoji

Xiebingqing Bai

The language we use every day is a kind of cognitive artifact, which mediate us both with the external world and other people. The core generative feature of natural language is the open combinatoriality, rendering the possibility for people to redesign and reinterpret. One thing embodies this combinatoriality is the popularity of emoji.

In this modern age, emoji comes to serve as an aid for language. Within online communication, emoji is integral to text but has become a new cognitive artifact which is used very frequently. Just as language, emoji is associated with different social contexts, and the same emoji could mean differently in diverse areas. The main reason we constantly use emoji is online chatting lacks dialogue context so that the uncertainty of meaning increases accordingly. Emoji can alleviate this uncertainty as a more concrete symbol. What interesting is the emotion expressed in online-chatting emoji is always much more intense than the way we express ourselves in offline conversation. For instance, if one friend says something hilarious to us face-to-face, we may just show a smile for one second. But if it happens online, most of us may send a very exaggerated emoji such as laughing to cry as a response rather than just sending an emoji with slight smile. That’s also because we need an exaggerated expression to avoid misunderstanding resulting in that context uncertainly online. And if we see the whole process in a system view, the emoji as a cognitive artifact also modifies human’s cognitive capability. According to Donald A. Norman, artifacts could enhance human ability by changing intensity and changing nature. I think as for emoji, it works in both these two ways. Firstly, it increases the intensity of emotion expression in our online conversation. Secondly, it changes the nature of online conversation from text to image-oriented, and it could be a still image or a gif.

If we look back into earlier ages, actually we have a long history of using visual information to serve cognitive functions such as conveying our ideas and expressions and informing others some messages, from the ancient totem to transportation sign. Images can always serve cognitive functions better because it have richer information and more concrete context. As what Andy Clark says, language itself is a form of mid-transforming cognitive scaffolding, and the same as image. In these recent decades, the popularity of images and videos on mass media really make us less willing and attentive to read text. In the process of sending emoji, we are actually practicing the transformation this cognitive artifact has exerted on us.


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

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.

Andy Clark, Supersizing the Mind: Embodiment, Action, and Cognitive Extension (New York, NY: Oxford University Press, USA, 2008)

The Interface Design of NetEase Cloud Music

Xiebingqing Bai

NetEase Cloud Music is a Chinese music streaming app developed and owned by NetEase. It’s a very popular music app in China and has more than 0.5 billion users now. Its development and success are unique because when it was published, the market of music service is highly competitive and monopolized. Most people thought it couldn’t obtain great success at that time. But it finally found its own way to attract users and has become the leading application in music service market now, and one of its features is the extraordinary UI design which makes users feel so relatable and comfortable.

The framework of Could Music’s user experience derives from three aspects: customizing recommendation, dramatizing comments and socializing playlist. That made the app evolve into the combination of music app and social media. Instead of just being a music repertoire, it seeks to accent the concept of building your own music world and music community. And that underlying principle embodies in every aspect of the app design, including the whole architecture, interface, hidden information and banner design.

In general, this app has been divided into five modules, one for discovery, one for watching music videos, one for viewing my music list, one for joining the community and one for setting. Each module has very diverse affordances, but how to select the visible information is very essential. I want to talk specifically about the development of the home page interface , which clearly showcases how interface design could affect user experience. At the beginning in the recommendation part, the hottest songs and playlists are merely mixed with the customized recommendation, making users hard to distinguish which one is popular in the public and which is customized just for you.

Then NetEase made a modified version, and this modular operation splits the recommendation part into two separate ones, one is for hottest songs and another is particularly for customized songs. This version is more welcomed than the previous one.

But then comes another problem, some users complained that the overall content in home page is too little to fulfill their needs. Afterwards the NetEase divided the home page by different types of content to make diverse content more accessible. At that situation, the two-part recommendation was supposed to be changed because the page could be too dense to view comfortably. Then they combine the two part together again, but in order to highlight which playlist is customized, they put the recommendation reason on the top after user click on one playlist.

In this way, NetEase substitutes the previous module design by another comfortable one. This new interface design of home page last very long time, though there were also some small changes. This overall development of the home page design reveals that visible information serves as a guide and is significant to direct user to obtain the optimal experience in the app.


Richard N. Langlois, “Modularity in Technology and Organization.” Journal of Economic Behavior & Organization 49, no. 1

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

Reflection on the Development of Internet

As Brian Arthur said in The Nature of Technology, every new technology derives from the combination of existing technologies. When I reflect on the history, what interests me is that even the most groundbreaking ones all abide by some basic design principles and highly rely on previous technologies which people at that age all took granted for.

The most remarkable technologies in our history, with no doubt, are steam engine and the Internet, which marked the Industrial Revolution and Information Revolution. The arrival of Internet seems like a legend, suddenly bringing about so many fundamental changes and showcasing the clear distinction compared with former communication measures. But if we take a close look on its development, we can find it embodies many former technologies and design concepts we are familiar with. In the early stage, multiple computers are connected through the Local Area Network, which means divide computers into some groups and attach each group to a switch, and those switches communicate with each other. That structure is similar to human social organizing structure in which people communicate with leaders and they communicate with each other. As the quantity of computers increase later, this Local Area Network evolved into the World Wide Web, then servers took place of the switches to process tons of data and communicate with other servers, but the main assembly behind didn’t change and just alter a component could have different effects.

As for the information transmission process in the elemental level of design, in early stage it relied on broadband where the parallel data in computers are converted into serial data. As the wireless technology advanced, we can get rid of the broadband and use the Internet freely. But the wireless transmission technology is not something new at that time, radio and telephone also share that underlying technology. It just uses different types of electromagnetic waves as information carriers, and information is transmitted through an  oscillating circuit, thereby achieving purpose of information transmission. The reason why the wireless transmission adopted into Internet late is because the Internet has more complicated and unstable signal so that technology must be modified to conform to Internet, but the basic principle never changed. There are many levels of design when it comes to Internet, and each cluster of technology behind it is not surprising, but it’s little modification and combined configuration that engendered such a breakthrough.


Brian Arthur, The Nature of Technology: What It Is and How It Evolves.

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