Author Archives: Liwen Zhang

Deblackboxing: Taobao Leading by Design

The most powerful things about our technologies are invisible.

— Irvine’s Law


Taobao is a Chinese Internet-based third-party platform where many small businesses and individuals sell goods and services. The website combines the key features of previous online shopping platforms while plugging in several new functions and adopts an efficient recommendation system to reach a balance between providing more merchandise and helping consumers make decisions in a shorter time. It is a complex system that should be regarded as a mere website, but a mini-society where social background, culture, regulation and people all play a crucial part.

In this paper, I will focus on the question why Taobao, the e-commerce giant, is designed in this way rather than another way. To figure it out, I’m going to briefly introduce the current situation of Taobao by a series of statistics. Then, I will use design, computational and socio-technical thinking to deblackbox, trying to find out what is behind the website.


Unlike Amazon or eBay that focus on either C2C or B2C, Taobao offers the both.

According to the Online Consumption Report, 2016, released by (a Chinese e-commerce think tank), in 2016, Taobao took up 85.6% of Chinese e-commerce market with the gross merchandise value amounting to RMB 3767 billion ($569 billion); it had 4660 million active users, about one quarter of the country’s population. is a success.


Design thinking:

In Chinese, “Taobao” means “searching for treasures” literally. As Norman once said that “when things are visible, they tend to be easier than when they are not”, Taobao conveys an obvious message to consumers: this is a place full of treasure waiting to be explored.

Modularity & Abstraction:

Abstraction is a technique for managing complexity that is deeply ingrained in human beings.

Design rules volume 1: the power of modularity.

the four-hierarchy taobao interface

The interface of Taobao can be briefly divided into four hierarchies from top to bottom in terms of consumers’ shopping experience:

  • Front page

The front page serves mainly as a searching page. It provides three ways for consumers to search items: the search box (in the top middle of the page), category sections (under the search box and in the left side of the page) and recommendation section (taking up the rest of the page). Users can search items by directly typing the key words into the searching bar or find things they may be interested in from the suggestions.

  • Searching result page

In this page, users can find items in the order of lowest/highest price, best sellers and sellers’ credit. Certain filters (like brands, features) can also be applied to narrow down the searching results.

  • Description page

This page provides users with detailed descriptions of an item as well as reviews.

  • Payment page

The four layers are relatively independent from each other while information can only flow from a higher layer to a lower layer through interaction points, i.e. interface. By clicking on the picture of a specific item in the searching result page, a consumer can enter the description page of the item. In this case, the picture is an interface bridging the two pages. But he cannot go to an upper level page from a subpage unless he clicks the browser’s “Backward” button.

This structure hides a substantial amount of the information in each module, leaving parameters to the discretion of the module designers. Therefore, the designers can work separately, adding new product pages to the website without affecting other pages.

Cumulative Combinatoriality & Extensibility of Combination:

The development of technology is the procedure of combining the already existed ones together. In his book, Arthur once said that “novel technologies must somehow arise by combination of existing technologies”. Taobao is a combination of the previous online shopping website; an extensible platform embracing future adaptations and growth built-in.

Amazon home page in 1995. Source:

The year 1995 witnessed the birth of Amazon and eBay. At that time, the former one was an “online bookstore” receiving online book orders from all over the world, finding books from publishers and delivering them out. Although the website page looks quite simple compared with modern websites, it functioned well, processing orders totally valuing 12 thousand dollars the first week opened its virtual doors. Years later, the company expanded from a “bookstore” to a “grocery store”, selling not only books, but almost everything in the world like clothes, electronic products and so on.

Different with Amazon, eBay was more like a flea market providing a platform for users to make deals with each other online. Long before eBay, there was flea market, but eBay was the first to move it online.

Then comes the year of 2003 when was launched by Alibaba Group. The website was born under the influence of Amazon and eBay, but it develops further. It is a Chinese Amazon where consumers can search, compare and buy thing online; a Chinese eBay where users can make an auction or sell their used products; an online platform for people to order food from different restaurant; a travel agency where people can rent cars, buy tickets and consult with trip advisers; a movie agency selling tickets; an online branch of telecommunication company offering self-service for paying bills.

Besides, Jack Ma, founder of Taobao, introduced two novel features to Taobao, setting the website apart from competitors. First, consumers can directly talk with sellers at any time on Taobao to acquire information they want and even ask for discounts. This gives consumers a feeling of shopping in a real store. Besides, joined by “Alipay”, a payment system developed by Alibaba, Taobao has a different payment system from other e-commerce platforms. The website assures consumers that once an order is placed, the payment will be kept by Taobao and won’t be sent to the seller until the buyer confirms that he has received the product or the order has been placed for one month. As Chinese consumers were skeptical of the safety of e-commerce when Taobao was launched, this model gave people confidence to give the website a try. In 2012, cooperating with HuaTai Insurance Company, Taobao launched a new insurance called “shipping insurance” to users. When placing an order, a consumer can buy the shipping insurance (usually costs 0.5 to 2 yuan, ie. 0.1to 0.3 dollars) in case he may not like the product when receives it. With the insurance, he can get a compensation to cover the shipping fee to turn the product back.

Computational thinking

The recommendation section takes up the largest part of Taobao’s front page. Why?

The Rapid development of technology brings people more ways to gain information than before. Meanwhile, information overload occurs as people have a fair limited cognitive processing ability.

When shopping online, a consumer will get hundreds of searching results for one key word. This is a strength as well as drawback of online shopping platform. User wants to have choices as much as possible when shopping, but the more choices he gets, the more confused he will be and eventually spend more time finding out the one that suits him the best. The flooding information makes it difficult for people to make decisions.

Recommendation system, an information filter technology, is an efficient tool for online shopping platforms to achieve a balance between the number of products and the length of consumption-decision time. The system can collect a massive volumes of raw user event data captured during sessions in which consumers log in to the website. By compiling and analyze these data, the system can predict future consumption actions and trends and recommend products or online sellers to users. On one hand, the recommender system reduces the time for a user to find his ideal product thus brings more sales to the platform. On the other hand, it can redistribute the flows of the platform, attracting users to less-popular items and new sellers by showing the items or traders in the recommendation session.

To some extent, we can say that recommender system plays a crucial part for the success of an online shopping platform.

The recommender system of Taobao, as shown below, can be divided into three levels.

the three-level Taobao recommendation system


  • Collect raw user event data, including: what the user is searching for, which seller he adds as favorite, how much money he has spent, etc.
  • Build up a basic database dividing products and users into different classes.
  • Based on the basic database, the system consumes that product A and B have a similar tag as users fond of product A usually favorite product B; user A and B belong to the same group as the favorite list of user A are similar with that of user B. It will also analyze the user’s behavior over sessions to better understand a user. With these data, the system set up a core database with more specific classifications on products and users.

Real-time response:

  • External factors, like physical surroundings and the time a user logging in to the website, will also be taken into consideration.

Response valuation:

  • Examine and improve the database by analyzing data like CTR (click-through rate), GMV (gross merchandise volume) and conversion rate.

Berners Lee once pointed out in his book that “a computer typically keeps information in rigid hierarchies and matrices, whereas the human mind has the special ability to link random bits of data”. The recommender system is to some extent, give computer the ability of “associating”, narrowing the gap between a computer and human.

the interface of recommendation system. Source from:

Meanwhile, the interface of recommendation system is also personalized in two aspects: the category of recommendation and the specific item shown in the front page. Different people will see the recommendation categories in different orders. For female users, the categories tend to be shown in order of clothes, costumes, overseas shopping, while males are more likely to have electronic products ahead of the recommendation list followed by sports accessories. Besides, the specific item displayed in a specific category also varies. Users preferring spicy food tend to see picture of La Tiao (a kind of spicy gluten) as representation of the snack category while users like sweets may see Hershey’s.

Different platform employs different recommender system as they have different strategies and targets., the second largest e-commerce giant in China according to the report released by, has a recommender system built on two models: recalling model and reordering model.

Ever since the first day went online, the platform has a slogan of “Making life easier and happier”. The recommender system is good at calculating out the potential interest of users but falls short in timeliness as it needs a great amount of calculating. On the other hand, the pre-analysis section and modularity feature gives Taobao advantages in calculating logically with a high speed. This is consistent with Taobao’s recent actions: improved the delivery speed and announced that the platform would pay refunds on behalf of sellers to good-credit-users before they send the items back. But Taobao’s emphasis on speed also lead to the system’s lacking in personalization in recommendation.

Socio-technical thinking: is not a website build up with codes and machines; it is an interdependent social configuration of technologies and institutions.

Social background:

Both Amazon and Taobao are e-commerce giants offering omnibearing online shopping service, but their development tracks are totally different.

The American society experienced the Dot-com Bubble from 1995, the year when was set up. At that time, the world wide web had already had a solid foundation of American users. People believed that the world wide web would play a crucial part in the future. This led to a pomp up of new internet companies. Before Amazon was set up, there were already several e-commerce corporations in America. When designing, Jeff Bezos targeted the website at being “Earth’s Biggest Bookstore”, as the American book market had not been monopolized by one single company yet. Books are easy to be delivered at a long distance and have a relatively high market demand in America. Besides, online book selling can largely reduce the cost of a book by eliminating the fees for bookstore rental. Two years after foundation, in 1997, Amazon became listed on NASDAQ valued as 5400 million dollars.

In contrast, Chinese e-commerce trade started from late 1990s, years later than that in America. When was set up in May 2003, eBay had the largest share of Chinese online retail market. At that time, traditional Chinese companies could not accept the emerging way of trading online, while many individual sellers were more willing to make deals online. Based on this social environment, the Jackie Ma oriented at a C2C (consumer to consumer) online shopping platform. To win the battle with eBay, Taobao adopted a series of rather liberal regulations to the platform: everyone could sell goods on the platform even those without business license or off-line stores; to register a virtual shop on, traders did not need to pay any registration fee.

Driven by the increasing trader population and higher penetration levels, Taobao moved forward to B2C (business to consumer) market and developed a sub-website, “Tmall”, in 2007. And finally became a platform offering nearly all kinds of goods and services.

Physical surroundings are another factor needs to be considered. The reason why Bezos chose Seattle, WA as the birthplace of Amazon is that Seattle was already a big I.T city with Microsoft located there. The headquarter of biggest book distributor in the U.S. at that time, Ingram Book Group, was also close to Seattle.

Similarly, when founding Taobao, Jack Ma compared the top three cities of mainland China at that time: Beijing, Shanghai and Hangzhou. The capital city was filled with state-owned companies, while Shanghai was the warmbed of foreign companies. In both cities, competitions were fierce and rentals were expensive. On the contrary, the local government of Hangzhou had a series of policy encouraging people to set up their own companies. Therefore, Jack Ma eventually chose Hangzhou as the headquarter base of Taobao.


The traders’ nationality and culture background can have an influence on the structure of an e-commerce platform. Hofstede said in his book, culture’s Consequences, that people in the US rate high on individualism and moderate to low on power distance, while those in China are high on collectivism and power distance. These differences affect the Chinese e-commerce market structure and Taobao’ behavior.

Meanwhile, Taobao reshaped Chinese culture. In 2009, Taobao started the first “‘Double 11’ Shopping Festival” on November, 11 to boost sales and get more people involved in the platform by offering lower prices than normal. The first “‘Double 11’ Shopping Festival” was an immediate success. The total sales on that day was RMB 52 million ($7.8 million), far exceeding the ordinary daily sales of the website. Nowadays, the eight-year-old festival now becomes the Chinese version of “Black Friday”. On that day, not only Taobao will have a series of discount activities, but all the Chinese e-commerce platforms. On the Double 11 Day this year, the festival made a record that the daily sales of Chinese e-commerce market exceeded RMB 253.9 billion ($38.3 billion) with RMB 168.2 billion ($25.4 billion) of Taobao.

Along with the festival, appears many new understandings to traditional Chinese phrases to describe consumers’ feelings or actions. For example, one may use the phrase “Duo Shou(剁手)” to say that he spent a huge sum of money in online shopping at a time while the phrase’s traditional meaning is to chop one’s hand to stop him from doing (including buying) anything. Literally, “Bao Cang(爆仓)” means storing too many things in a warehouse and eventually leading to explosion; but nowadays, it is a phrase specially refers to the scene where express delivery companies have too many packages in their garages to deliver as people made millions of orders on the “‘Double 11’ Shopping Festival”.


National law can affect the operation of the website.

Regulated by the government, Taobao provides commercial voucher for every user shopping in “Tmall Supermarket”, the online supermarket of Taobao. In June, 2010, the Ministry of Cultural Affairs issued new regulations on online games industry aiming at providing a better online game environment, including banning transaction services for uncensored or unrecorded online games. Sooner, Taobao removed all the transaction services for overseas in-game currency from the website.

Apart from national law, Taobao has its own regulations to keep the platform works well. Take “‘Double 11’ Shopping Festival” again as an example. According to the website, on November 11, the price of the off-price merchandise must be lower than 90 percent of the lowest price of that item during the period from September 15 to November 10; the trader must raise the price right after the festival and cannot lower it down at least in the coming month.


It is not only Taobao Team that is working behind Taobao, but millions of people from different industries.

People involved in Taobao can be briefly showed as follows:

A project done by the School of Labor and Human Resources of Renmin University of China shows that by the end of 2016, Taobao has provided 33 millions of working oppotunities in China, creating many new jobs, like cybershop designer, online selling trainers.



What can be studied is always a relationship or an infinite regress of relationships.

Never a ‘thing’. 

—Gregory Bateson

Looking back to the question raised up in the beginning of the article — why Taobao is designed in this way rather than another way, it can be answered as follows:

Influenced by the existing e-commerce platform Taobao combines all the key features of e-commercial platforms while keeping introducing new features to the website during the years of development. It solved the problems of flooding information, regulating the ways traders make deals on the platform and connecting consumers with sellers in a direct way. The design is also affected by social background, regulations and cultural factors.

Taobao doesn’t have to be designed in this way, and in fact, there is no specific way to design a specific thing. Design is not born from necessity. What leads Taobao to the design we see today are a set of ways of thinking, including design thinking, computational thinking and socio-technical thinking. By deblackboxing Taobao, people can find useful clues in perfecting the conceptual model of e-commercial platform.


reference: (2016).Online Consumption Report, 2016. Retrieved from:

Arthur, W. B. (2011). The Nature of Technology What It Is and How It Evolves. New York: Free Press.

Baldwin, C. Y., & Clark, K. B. (2000). Design rules volume 1: the power of modularity. Cambridge: MIT Press.

Bateson, G. (1972). Steps to an ecology of mind. Chicago: University of Chicago Press.

Berners-Lee, T. (1999). Weaving the Web: the past, present and future of the world wide web by its inventor. London: Orion Business.

Greeven, M., Yang, S. Y., Yue, T., Heck, E., Krug, B. (2012). How Taobao bested Ebay in China. Retrieved from:

Hofstede, G. (2001). Culture’s consequences: comparing values, behaviors, institutions, and organizations across nations. London: Sage Publications.

Hong, L., Ren, Q. Y., Liang, S. X.(2016). A comparative study on the recommendation system in Chinese e-commercial websites — take Taobao, JD and Amazon as examples. Book Information, 60 (23):97-110.

Kalpanik, S. (2011). Inside the giant machine: an story. Los Angeles, CA: Center of Artificial Imagination.

Li, J. (2017). A study on the profit model of B2C companies. Caihui Express, (20):61-65.

Ma, S. (2007). An analysis on Amazon. Time of Commerce & Trade, (07):47-48.

Norman, D. A. (2013). The design of everyday things. New York, NY: Basic Books.

Norman, D.A. (1999). Affordance, conventions, and design, interactions, v.6 n.3, p.38-43, [doi>10.1145/301153.301168]

Xiong, F. J. (2010). A study on the profit model of Taobao. Shandong University

Google Images’ Secret

To do an image search on Google, one way is to type “Google Images” into the searching bar and then click on the hyperlink of “Google Images” from the searching results. This hyperlink is an interface connecting us with another computer. Another way to find the website is to type its URL: . “http” shows that Google Images is using HTML on the World Wide Web.

I uploaded an image into the searching engine and it quickly showed me the basic information of the picture as well as a guess of the picture’s theme. After another click, the website showed me pictures that were possibly related to the one I uploaded. The browser is the interface covering the complicated processing of matching an image with another and keeping us away from what is in the blackbox.

In this procedure, the main technology Google Image used is Convolutional Neural Networks. This technology can help a computer understand that when an object shows up in different positions of pictures, it is still being the same object (i.e. translation invariance). When the engine is searching background information of a picture, it will first split the picture into small pieces and give them a sequence of index number. It will then compare the sequence with other sequences already existed in its data base and find the similar ones.

The idea of Convolutional Neural Networks is the same as what Lee said in his book — “A computer typically keeps information in rigid hierarchies and matrices, whereas the human mind has the special ability to link random bits of data”. And it is this sentence that interests me the most when doing the readings this week. In fact, human brain is the result of billions of years’ evolution from fish through amphibians and reptiles to mammal and ultimately to human beings. The Internet is also on this way: from the original single software to a metamedia platform. I guess that in the future, the Internet’s function of working as an interface will be highlighted and applications will disappear from the desktop and are inserted into browsers as plug-ins. In this way, the Internet will perform like a human brain and the interface to almost anything in the world.

climbing over the great wall

What I read this week reminded me of a feature story I wrote as a senior student in university. It was about “climbing over GFW (the Great Fire Wall)”.

When doing the report, I asked one of my friends majoring Information Security for background knowledge of GFW and VPN. He explained the procedure of climbing over the “Wall” with an analogy of cross-border trade: GFW performs like a gatekeeper , while the search commands we send out are goods packages and the website from which we want to get information are destinations. The gatekeeper has a blacklist of destinations thus goods for these destinations are not allowed to be delivered out. Therefore, we need to first send the packages to a delivery transit point — VPN, where the goods will then be sent to the final destination. His explanation was vivid and I quickly grasped the point, although I was still confused on questions like “why do we need to pack up data” “how can the transit point know where the goods is sending to”. But as the feature story was focused on the influence of GFW to ordinary people in Shanghai and the DDL was approaching, I didn’t explore deeper on this issue.

Now that I have learned more on Internet design, I understand the topic better.

The picture provides a simplified view on how our messages get to their destination through the Internet. From the picture, we learn that every computer or device on a TCP/IP network has an IP address to receive or send out information. An IP address is a sequence of number and dots and is difficult for users to remember. But “DNS” is much more readable and easier to be recalled. Every time a user types in a DNS, the DNS server (usually provided by ISP) will translate it into an IP accordingly and send it back. This is one of the nodes that GFW works on. GFW can send a pseudo IP back to your computer earlier than DNS server does and finally lead the user to a wrong site. As DNS server can memorize what has been searched, it will remember the wrong address. Therefore, next time when another user searches the same DNS, the server will give back a wrong one.

Below is a typical data packet:

Short for Virtual Private Network, VPN can create a virtual point-to-point network for users to send and receive data and prevent disclosure of private information by working on the IP layer. It can repackage the data packet with a new header, changing receiver address with the VPN server’s address. When VPN server receives the packet, it wraps the package, finds the original header, rewrites the sender address with VPN server’s address and the receiver address with the original one, and send it out. Finally, it again repackages the response packet and send it back to the user. In this way, the user climbs over the GFW. The procedure is quite complex and I think this is why the wire speed slows down sharply whenever I’m using a VPN to visit some foreign websites.

There are also other ways to climb over the wall like changing the computer’s DNS server or hosts document and all of them work on the network layer of the OSI model.

It’s a shame that the government built up a wall at the boundary blocking out freedom. I know that the country has flaws and imperfections, but I also know that it would be better in the future.


Computer as a metamedium

As what I learned from last class, computer was first invented to solve a set of complex mathematical problems. At that time, computer is medium, simulating the function of calculator (and even to some extent, the role of abacus). Then, after the Second World War II, the goal of a society was shifted from augmenting armies or accumulating interest into building up a better living environment for human beings. Meanwhile, several computing gurus redefined computer: Bush and Licklider predicted that computers would be cooperators of human beings in daily life; Suterland invented “Sketchpad”; Engelbart focusing on augmenting human intellect introduced new properties of computer like graphic interface and mouse. Following the series of changes, Alan Kay’s model of “Dynabook” is a new revolution in computer history.

Kay described his “Dynabook” as being able “to simulate all existing media in an editable/ authorable form in a highly portable networked form”. He said that the main point for a Dynabook was to qualitatively extend the notions of “reading, writing, sharing, publishing, etc. of ideas”

From Alan Kay’s conception, we can see that modern computer is a metamedium rather a medium:

  • It can represent most other media while augmenting them with many new properties. The audio editing software “GoldenWave”can broadcast music as well as visualising the sound waves; We can also listen to music on QQ Music as well as  make comments and read other people’s comments; the application of “GarageBand” provide amateurs a handy tool to produce music.
  • It is active. While users keep telling computers what to do next, computers also give users feedback in return.
  • It can handle virtually all of its owner’s information-related needs. Today, there are various software (like excel, power point) to meet our needs of information. As Manovich mentioned in his book “Software Takes Command”that there was no such thing as digital media, there was only software, to some extent, the properties of computer are software techniques defined to work on particular types of media exologies, content and media data.
  • It is also a system for generating new media tools and new types of media.

From what I learned this week, I will say that computer is a spread of our sense, an artifact of our cognition to the world.

We may not have the time to go to a live house, but we can watch the video of it on the Internet at a later time; we can’t see how an electron run around a centron, but a model of an atom built by the computer can make a five-year-old kid easily understand the micro-world.

However, just as what Noah Wardrip-Friun commented on hyperlinks that the Web implemented only one of many types of structures proposed by Nelson, People should not be satisfied with the extension with the help of internet. Although nowadays we do have offline softwares like PhotoShop and Illustrator to draw and reproduce images, this is far from enough. Most of the computing softwares are augmenting our sense of visible and auditory sensation but seldom our sensation of feeling and touching. I remembered that once in an interview, Kay said that modern computer had done far more enough. In fact, an ideal computer model of Alan Kay is one that users can wear on. In this case, I guess that perhaps in the future, people can “feel” from a computer.

From “Calculator” to “Computer”

After reading the articles this week, I have obtained a new perspective to view my computer. For so many times, I took the convenience of technology development for granted that I even have an illusion somehow that modern computer was born to be a modern computer.

I’m going to talk about what I’ve learned from a brief “graphical interface history”.

  • 1945: Vannevar Bush published his essay, “As We May Think”, predicting the future of computer and explicating how “Memex”(a portmanteau of “memory” and “index”) would work. He raised the idea that the next step for scientists was to make the recording of “confusing” and “complicated” knowledge easier and more explicit.
  • 1960: “Man Computer Symbiosis”written by J.C.R. Licklider outlined a plan of turning computers from military and commercial tools into cooperators of human beings in daily life.
  • 1963: Ivan Edward Sutherland invented “Sketchpad”, ancestor of modern computer-aided design programs.
  • 1968: Douglas Engelbart delivered the famous speech “Mother of All Demo”, showing a series of new things and concept including graphic interface, mouse and video conference. Inspired by Bush, Engelbart explored on new techniques that would do massive recordings of human activity thus augmenting human intellect. In his article, he said that “the intellectual worker must know the capabilities of his tools and have good methods, strategies, and rules of thumb for making use of them”.
  • 1970s: Alan Kay came up with the model of “Dynabook”and a new computing language “smalltalk”, deeply impressed by “Mother of All Demo”. he even created a new term “matamedium” to show the speciality of “Dynabook”.

From the timeline we can see that the concept of HCI (Human-Computer Interaction) has been passed generation by generation with the main idea of helping human beings better improve themselves. Bush’s personal library Memex, ,Licklider’s “man computer symbiosi”, Sutherland’s Sketchpad, Engelbart’s graphic interface and mouse and Kay’s Dynabook and smalltalk are all attempts of putting computer to a cooperator position in the relationship of human-computer. In this way, computer is not the machine that was once named “calculator” to solve a set of complex mathematical problems. The concept of “computer-as-technology” has been shifted to “computer-as-medium”. By the term “metamedium”, Kay tended to show a new property of computer — “being simultaneously a set of different media and a system for generating new media tools and new types of media”. It reaches to other media (for example, a music recorder, a digital album) exchanging properties and borrowing their unique features.

The role change of computer is also reflected in its Chinese name. I remember that when I was a kid, people called the computer “jisuanji”, which is the same meaning to “calculator”. In recent years, the name “diannao” becomes popular. In contrast to the Chinese character “Rennao”, “Diannao” has a literal meaning of “electronic brain” while the former one refers to “brain of human beings”.

Unfulfilled Principle:

By the model of Dynabook and smalltalk, Kay tried to enable people without background in computing create their own tools. However, what I observed in my daily life is that people are using computers to do things that can also be done with “traditional” tools (but would be more time- or energy- consuming).

Also, the question is still waiting to be answered that Bush raised in the article “As we may think” about whether it would be possible in the future that the path for people creating or absorbing material of record could be established directly.


Vannevar, Bush. 1945. “As We May Think.” Atlantic, July.

Licklider, J. C. R. 1960. “Man-Computer Symbiosis.” IRE Transactions on Human Factors in Electronics HFE-1 (1): 4–11. doi:10.1109/THFE2.1960.4503259.

Engelbart. 2003. “Augmenting Human Intellect: A Conceptual Framework.” First published, 1962. As reprinted in The New Media Reader, edited by Noah Wardrip-Fruin and Nick Montfort, 93–108. Cambridge, MA: The MIT Press,

Manovich, Lev. 2013. “Software Takes Command”. International Texts in Critical Media Aesthetics, volume#5. New York ; London: Bloomsbury.

How to communicate with a computer

This is the first time for me to learn a computing language and I find python is charming. I’m going to talk about my understanding of computation based what I learned this week.

The core for a computer to function as expected is binary. In fact, before this week, I don’t know what is the language inside the head of a “computer”. Is it English? Does a Chinese computer “speaks” Chinese while the one from Korean “speaks” Korean? These questions once popped into my mind like a flash. But I just didn’t grasp them nor did I explore more about computing language.

From what I read this week, I found the answer: in a computer’s eye, the world is built up with numbers. A computer cannot understand the meaning of the word “red”, but can figure out what “fill (255,0,0)” means. For a computer, the world is a set of “yes or no” questions. The values for these binary questions are “1” and “0”.

As what I learned last week, bit is “a unit to measuring information”, we can use bit sequence to represent a set of things including text, pictures and movies. The procedure for us to do some programming things seems as if we were talking with the computer. The computer is an alien who can neither speak nor understand our language. This means that a translator would be a must if we want to get this “computer-alien” to do anything. This translator is computer languages like python, java script, c++ and so on. However, the translator is not that professional as he can only partly understand our language. The computing language shares something in common with English: words like “variable” and “print” are all what we use in daily life; “del” and “str” can also be recognized as abbreviations of “delete” and “string”. But Evans also cited in his article that natural languages were complex, ambiguous, irregular and uneconomic thus should not be used in programming directly. When we want the computer to print the value of 10, we cannot say, “Hey, print ‘10’.” Instead, we should say as follows:


print my_variable

And then, the interpreter or compiler will turn these high-level language into commands that can be executed directly by the computer. The CPU will record the value as 1 when there’s currency on the board. As said in her essay, “Computational thinking is using abstraction and decomposition when attacking a large complex task or designing a large complex system”. In this procedure, we break the task of typing out “10” into: set a variable and print a variable.


David Evans. (Oct 2011) Introduction to Computing: Explorations in Language, Logic, and Machines.

Jeannette Wing. (March 2006). Computational Thinking. Communications of the ACM 49, no.3. 33 – 35.

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

Algorithmic Music in the view of information theory

From studying English text, Shannon declared a new concept, “H”, i.e. the entropy of a message, or the information. This makes me think of music which could be regarded as another kind of language. In this short article, I’m going to talk about “algorithmic music”, an emerging field of producing music by algorithm on the computer.


The basic operating principle is easy to follow.

1.1 Deconstruction

Imaging we going to compose a piece of “Beethovenish” piano Concerto, the first thing we need to do is to broke the 32 pieces of Beethoven Concerto into mini pieces, tag them and let the computer “study” these works.

1.2 Recombinancy

Similar with digitized speech, the procedure for a computer to produce a new melody with its data base is stochastic and is neither deterministic nor random. The note in the melody will be determined not only by the genre of the work but also the note right before it. Just like the digram “th” can frequently be find in English text, in music language, notes that can form harmonic intervals often show up together while it is always expected to hear a perfect cadence in the end of a paragraph. In this way, the task of recombine the notes to produce a new melody is replaced by doing a series of “yes” or “no” questions. With the given note A, the computer will first check note B. If the answer is “yes”, it will move on to the third note; otherwise, it will successively check note E, F and G until the answer is “yes”. When note D is suitable for the second place but the answers for H and I are both negative, the computer will jump note D to check note D.

2.Listening to music from a CD player

There are two ways for us to listen to music: alive and recordings. The communication system of listening to music from a CD Player is more complex than from a concert: the laser diode sends out laser to the disc while the photo diode receive the reflected laser and record the result as either “0” or “1”; then the player decode these “0”s and “1”s and transmit these electronic signals into sounds; hearing the sound, we may have different feelings from each other. According to Paolo Rocchi, “information always has two parts – sign and referent. Meaning is the association between the two”. A common sign-referent model in music is works written in majors carry a motion of “bright / grand”. But as for the understanding of a whole piece of work, different people have different sign-referent system thus resulting in different feelings.

Like English language, music also contains redundancy. In his paper, Weaver mentioned that redundancy is determined not by the free choice of the sender, but by the accepted statistical rules governing the use of the symbols in question. Leaving out some of the unimportant notes in the work will not change the meaning of the whole piece.


When doing background searching, I found that scholars from different fields have different answers of “what is information”. This reminds me of what Saint Augustine said: “What then is time? If no one asks me, I know what it is. If I wish to explain it to him who asks, I do not know.” Is information the same as time that cannot be explained?



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

Peter Denning and Tim Bell(2012). The Information Paradox. American Scientist

Martin Irvine, Introduction to the Technical Theory of Information

Warren Weaver(1953). Recent contributions to the mathematical theory of communication. A Review of General Semantics


Discussing 2048 from the view of design

This week’s readings has a focus on “affordances, interfaces and designing interactions” while introducing basic concepts of design principles. I’m going to use 2048, a puzzle game I play on my mobile phone to kill time, as an example to show what I learned from the readings. I’ll discuss the app in following dimensions:

  • Affordances & Constrains
  • Design principles: choices vs necessary properties
  • Symbolic expression vs Attention controlling
  1. Affordances & Constrains

Before opening 2048: icon


I can easily found 2048 on my iPhone as its icon tells clearly what the app is. In his article, Norman noted that when designers put an icon on the screen, they were not adding affordances to the system but visual feedback. Without 2048’s icon, I can still click the bottom-right corner on the screen of my iPhone; I can also click other part of my screen. But with the icon, I realize that if I click this specific zone, I will enter the game “2048”. This is due to the convention shared by us human beings in the digital era, where people all agree to click the icons rather than the letters under the icon or its surroundings to open a software. And I believe that the social convention of “clicking icon” is wouldn’t change at least in the following decades just as Murray mentioned in her book that consumers of digital artifacts often cannot think past the familiar conventions of existing devices and applications.

Playing the game

In the article “Affordance, Conventions, and Design”, Norman said that “affordance” could be approached as “real affordance” and “perceived affordance” and divided “constrains” into three categories – physical, logical and cultural.

The first time I saw the interface of the game, I only clicked two bars in the color of orange on top of the screen, as it has words on the two gray bars saying that they are score bulletins. My experience told me that score bulletins were only boards showing scores thus couldn’t have a sub-level. This is the cultural constrain.

The grid frame indicates the range I can pull the tiles. Once the tile reached the frame, I couldn’t pull it any more and this is physical constrains. Physical constrains are closely related to real affordance, therefore, I say one of the real afffordances of the grid frame is to provide a space for users to pull the tile.

When I push the tiles horizontally causing two equal numbers bump into each other, the two numbers add up and melt into one tile. In fact, for people who do not know the rule, they may not know what it will happen when two equal numbers are in touch (ie. the real affordance) but they may presume that the number on the tile can change (ie. the  perceived affordance) as the game is called “2048”.

The fundamental tactics to produce “2048” tile is the formula of 2n, which means to array numbers in the sequence of 2n, 2n-1, 2n-2 … Therefore, this logical constrain prevents me from dragging tiles arbitrarily.

  1. Design principles: choices vs necessary properties
  • employed several design principles:
  • Visibility

The functions of bars on the top of the interface are clearly illustrated in words. Therefore, users can clearly predict the effect of their actions instead of make up their own conceptual models which are apt to be wrong.

  • Color

Color can make the design more visually aesthetic. The designer of 2048 used a series of adjacent colors on the color wheel and light gray in the background to set off the colors of tiles.

Also, as Vicotr mentioned in his article, visual recognition of verbal material can become direct in the sense of visual features being directly used to carry out appropriate actions without language recognition. In 2048, painting to tiles carrying the same numbers in same color provides convenience for users to distinguish numbers.

  • Alignment

The tiles are all aligned with each other, creating a sense of unity and cohesion and contributing to overall aesthetic and perceived stability.


These principles are choices rather than necessary properties of the app. The app can be designed with other principles which can also work on very well. For example, if the app was designed in a series of opposing colors on the color wheel, users might also find a visual comfort when playing the game.

  1. Symbolic expression vs Attention controlling

As far as what I learned from this week’s reading, for most of the time, every step in the procedure of designing a digital artifact should consider the affordances for human capacity for symbolic expression and controlling the attention of a user at the same time. As for 2048, when designing, designers need to solve the problem of seperating numbers from each other. As we all know, nowadays, shapes like squares, circles and triangles are commonly acting as carriers to differentiate one thing to another. Therefore, using squares as carriers to distinguish the numbers are easy for users to understand thus users don’t need to distract their attention to find out numbers.


[1]Norman, Donald A. “Affordance, conventions, and design.” interactions 6.3 (1999): 38-43.

[2]Norman, Donald A. “The design of everyday things.” Revised and expanded edition. Basic books, 2013.

[3]Murray, Janet H. Inventing the medium: principles of interaction design as a cultural practice. Mit Press, 2011.

[4]Kaptelinin, Victor. “Affordances.” The Encyclopedia of Human-Computer Interaction, 2nd Ed., 2013

[5]William Lidwell, Kritina Holden, and Jill Butler. “Universal Principles of Design.” Revised. Beverly, MA: Rockport Publishers, 2010.

What’s Behind KuGou Music

KuGou Music is a music software I used when I was in junior high school. First released in 2006 by China Music Corporation, KuGou was one of the most popular music players in China and delegates the first generation of Chinese music streaming and download service.

The “comment” function is a reason for users to download KuGou Music. My friends and I all enjoy reading or writing comments of a song while listening to it. Just as Debray mentioned in “What is Mediology” that technology and culture are not two separate things but are co-produced, this function is changing the music culture in China. In the comments, users write the composer’s story behind the song, their own story with the song and even number off across comments to see who is the 999th listener of the song. Sometimes, people can fall in love with a song not for its tune or lyrics but the story in the comments. Comments are becoming a new part of a song. In this case, technology changes the development of culture. The new culture of “song comments” in return encourages designer to make more technical improvement to the comment function to cater for users’ taste, like send notification to the user when his comment is liked by others.

Same as Debray, Latour also argued that “There exists no relation whatsoever between the ‘material’ and ‘the social world’, because it is this very division which is a complete artifact.” In the view of mediology, the reason why bees don’t have their own history but we human beings have is that human can transmit technical artifact and knowledge from generation to generation. To some degree, we can say that the current generation of bees are the copies of their ancestors. To move a step further, artifact transmission prompted human to invent new ways to preserve their cognition of the world, thus in this way, the human history are not only a history of human with human but a history of human with artifact.

Here, I’m trying to introduce the interface of KuGou Music (I have to admit that the readings this week seem a bit abstract to me) in the aspect of mediation including:

  • Development history
  • Digital technique
  • Copyright
  1. Development History

Similar with Apple, China Music Corporation releases a new version of KuGou Music. For better understandings, I chose KuGou 2009 and the latest version, KuGou 2017 as examples.

(KuGou 2009, from Google)

(KuGou 2017, from Google)

At the first glance, the user interface of KuGou Music 2017 is almost totally different with that of KuGou Music 2009: the progress bar goes to the bottom to have more space thus users can control the progress more precisely; the “recommendation” session helps users find songs they like; less words are shown in the interface and more spaces are left instead… By comparing the 9 versions of KuGou Music, I find that the designer keeps perfecting the algorithm of searching, enabling users find a song with a piece of lyrics or melody while in the original version of the software, users need to type out the exact name of the song.

  1. Digital technique

Digital techniques are employed by KuGou, like signal transformation, search engine technique (provided by Sougou Tech Corporation). Besides, more advanced techniques are used to support individualized settings. Take the “recommendation” function as an example. The designer need first lable the songs and collect data of a user’s listening history on the software. Then, with “Euclidean distance” and “Pearson product-moment correlation coefficient”, the designer can figure out the user’s preference and recommend songs to him.

  1. Copyright

For a music streaming and download service, music copyright can be vital. Without copyright of songs, the software just don’t have enough songs to build up a library to attract users. In July, 2017, the company announced a merge with Tencent Holdings Ltd, combing the business of KuGou Music, Kuwo Music and QQ Music under one company. After that, KuGou Music, together with Kuwo Music and QQ Music, have the largest music copyright share, 62%, in Chinese market.


Latour, Bruno. 1999. Pandora’s Hope: Essays on the Reality of Science Studies. Cambridge, Mass: Harvard University Press.

Irvine, Martin. n.d. “Working with Mediology and Actor Network Theory: How to De-Blackbox an iPhone.”

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

Sundial: a Cognitive Artifact

This week’s readings gave me more insight into the relationship between culture and technology. In his book, From Cultural Psychology: A Once and Future Discipline, Cole mentioned architects are the fundamental constituents of culture [I]. Wong also said that the invention of external storage of information was the watershed event in modern human behavioral evolution [II]. All of these statement point out the significance of symbols and symbolic cognition to us human beings. In this post, I’d like to talk about sundial.

What is a sundial

As Norman mentioned in his book that a cognitive artifact is an artificial device designed to maintain, display, or operate upon information in order to serve a representational function [III], sundial can be classified into cognitive artifact. It is a device designed to tell people time.

A sundial usually contains:

  • Rotating disc
  • Gnomon
  • Hour scale
  • Date scale
  • Index point
  • Latitude scale
  • Suspension ring
  • Index line

How does a sundial works

The working principle for a sundial is simple. Assuming that the sun goes around a stationary earth in a steady speed, we can say that the sun moves 360 degree everyday, i.e. 15 degree per hour. With the height of the gnomon and trigonometric functions, we can find the exact position of gnomon’s shadow on the dial at a given time. Therefore, we can tell the time from the numbers on the timeline.

Surface representations & internal representation of a sundial

According to Norman, a sundial only contains surface representations of their information, as symbols are maintained at the visible “surface” of the device. However, an icon shown in the computer screen can have more meanings instead of merely “an icon”. The icon of Recycle Bin, as an example, is in the shape of a trash bin, indicating that users can find the deleted files here. File recycling is the internal representation of this icon.

System view & personal view of a sundial

Imagine a man in ancient times who wants to know the time. He will take two steps for the answer. First, look at the dial. Second, read the number on the timeline aligned with the shadow.

In this procedure, the sundial expand the man’s capacity of telling out the time. But for the man, the sundial changed his original task of telling out the time.

According to Norman, artifacts can:

  • Distribute the actions across time;
  • Distribute the actions across people;
  • Change the actions required of the individuals doing the activity [IV].

In fact, using a sundial itself is a task for the man. He need to learn the meaning of the shadow ahead; and when he is using the sundial, he also need to remembering to find the position of the shadow, read and interpret the numbers. In this way, the original task is replaced by four different small tasks.


The solution of the problem also involves another function of cognitive artifacts, as this ancient man’s action is on the premise that he know the meaning of words and numbers on the dial. Norman once said, people are special for their ability to modify the environment in which they live through the creation of artifacts[V]. As for Russian cultural-historical scholars, they also hold the same idea:“Humans modified material objects as a means of regulating their interactions with the world and one another[VI]. In other words, these “tools” not only change human’s position from preys to conquers but their mental world. With the appearance of language, the development of human beings took a stride to an age of abstracting material into symbolic cognition. People reach a common sense of dividing the time of “one day” into 24 pieces and using “an hour” for one piece, transforming the abstract concept of time into something that is visible.



[I][VI] Michael Cole, From Cultural Psychology: A Once and Future Discipline. Cambridge, MA: Harvard University Press, 1996.

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

[III][IV][V] Donald A. Norman, Designing Interaction, edited by John M. Carroll, 17-38. New York, NY: Cambridge University Press, 1991.