Fan App: How Design Promotes Interaction

Xiebingqing Bai

Abstract

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. 

Conclusion

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.

References:

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.