Author Archives: Yi Zhuang

Nothing New: Deblackbox the New Oriental TOEFL-Preparation Website


In the background of economy boom, studying in the USA becomes more common. Therefore, more people need to take TOEFL tests. Many websites designed for TOEFL preparation appear and compete in the market. The New Oriental website is a major one among these websites. This paper deblackboxes the New Oriental website with ten Usability Heuristics proposed by Jakob Nielson to explain why this website’s interface is designed in that way, with multimedia and its HTML coding to demonstrate how it achieve these functions and contents, and with a sociotechnical background to illustrate how this website’s appearance is possible. After this deblackbox, it’s found that sociotechnical background is important and necessary for the New Oriental website’s development, and nothing innovative in these design principles and this website’s multimedia functions and contents. The only new thing in the New Oriental website is its way of integrating these principles, functions and contents. The pros and cons of “nothing new” characteristic in the New Oriental website, as well as other products will be analyzed. Considering both advantages and disadvantages of “nothing new”, how to integrate design principles and technologies within a certain sociotechnical background is the key to a product’s success in the short term.



With the development of technology, test preparation has already gone out of the classroom. Nowadays, students can prepare tests with online resources, including videos, audios, texts and images. Some will collect learning resources by themselves from sharing platforms, others will pay to receive them from professional test-preparation institutions.

Many English test-preparation websites have appeared and thrived in China, especially those for Test of English as a Foreign Language (TOEFL) preparation. That’s because in the recent ten years, more and more Chinese student studies in the United States. In 2018/19, there are 369,548 Chinese study in the USA (IIE, 2019). Most of these students need to take TOEFL tests, but Chinese English education is not specifically for preparing it. In this case, many private institutions offering TOEFL preparation services thrive in the market. Due to the fierce competition and high profit, these institutions invest lots of money in improving their services, including the website where students can learn English and prepare for the TOEFL. These websites are designed specifically for TOEFL, with abundant learning resources in the form of text, graphic and audio.

In this paper, one of the major TOEFL-preparation websites in China- New Oriental – will be deblackboxed. The design principles, functions, contents, and socio-technical background behind it will be analyzed to answer these questions: why they are designed in this way and why it could be possible.


2. Deblackbox

2.1 Implementation of Usability Heuristics

Back to 1994, Jakob Nielson proposed ten general design principles for interaction design to enhance product’s usability, which means that users can use this website with efficiency, effectiveness and satisfaction. (ISO, 2018) These ten design principles are called “Heuristics”. These ten Usability Heuristics serve as guideline for UX designers to design and test their websites and applications. The New Oriental website is also designed with these principles.

Visibility of system status

Figure 1 A loading icon in the red frame

Every time a user clicks to a new website page, a book with turning pages will appear in the area where is being loaded (Figure 1). This book is an appropriate feedback to tell its users what is going on in the system. In addition, this indication of loading lasts within reasonable time. The long-time waiting for loading also makes users confused. In the New Oriental website, if loading time is more than 10 seconds, the page will turn into a “No Internet” page (Figure 2) to tell users that their internet connection is problematic. Other causes of long-time loading also have their correspondent notification pages.

Figure 2 No Internet page

Match between system and the real world

The New Oriental website “speaks” the users’ language. The words, phrases and concepts it uses are familiar to its users- people who are preparing for TOEFL. No system-oriented terms are used in this website to cause confusion and misunderstanding among users.

Figure 3 Terms in the navigation bar 

User control and freedom

When its users click on a wrong term, they will enter a page where they don’t intend to read. In order to return to the former page, the users can simply click the backward button in their browser, or they can click on the icon “新东方在线TOEFL” (“New Oriental TOEFL” in English, as indicated in the red frame in Figure 4) in the top left to return to the home page. This icon is always on the top left of every page of this website, which means no matter in which page the users are, they can return to the home page conveniently by clicking on it.

Figure 4 The “New Oriental TOEFL” icon in the red frame

Consistency and standards

This website possesses both internal and external consistencies. In the part of internal consistency, every function and every content in this website only have one consistent title. Also, it uses the same typography for contents and titles, same color to highlight the page where a user is. For external consistency, this website uses the same or similar icon as what other websites use when their function is the same. For example, there is a shopping cart icon on the top right of the page (Figure 4). This shopping cart item is the same or similar as others in other websites (Figure 5).

Figure 5 Different kinds of shopping cart icon

Error prevention

Error prevention concept is implemented in many designs of the New Oriental’s website. For instance, the gap between different terms is large enough to avoid users clicking on a wrong one by mistake. Different functions are arranged in different blocks, which is logically clear so that it lowers the chance of entering into an incorrect page or missing in a mess of functions.

Figure 6 Different blocks of functions

Recognition rather than recall

This website offers users functions and contents to recognize whether they are the ones they need or not, rather than provides them with an input box to type in. This latter design increases users’ memory load because it requires them to recall their memory. The users can simply find the functions and resources they need in the website by browsing.

 Flexibility and Efficiency of Usage

Designers increase websites and applications’ flexibility and efficiency by adding accelerators, which could be hot keys or options in interface. In the New Oriental website, hot keys defined by computer systems could also be used. The users’ usage history recorded in cookie also increases the efficiency. For example, the next time the users can log in automatically with their information in cookie. 

Other Usability Heuristics- including aesthetic and minimalist design, assistance for users to recognize, diagnose, and recover from errors, and help and documentation- are also implemented in the New Oriental website. All these ten heuristics together ensure the New Oriental website’s usability of this website.


2.2 Multimedia

The deblackbox of ten Usability Heuristics’ implementation in the New Oriental website explains to us why this website’s interface is designed in that way. However, the website has other characteristics besides the usability of interface: it also affords different components to enable “semiotic interactions with software and transformable representations for anyone taking up the role of the cognitive interpreting agent”. (Irvine, 2018, p5) Therefore, a deeper deblackbox is needed to give an insight for the website’s contents and functions. The New Oriental website not only has exercise sections where users can do tests, but also have sections that serve other goals, such as advertising board to sell test-preparation courses, message board for user online communication, and personal information section for users register their information or trace their study outcome. Multimedia plays an important role in the semiotic interactions between these sections and users. Each media used in this website will be analyzed in the following paragraphs.

2.2.1 Text

As pointed out by Ron White, “the Web page itself consists of an HTML text file. HTML is a collection of codes enclosed in angle brackets- < >- that control the formatting of text in the file.” (2008, p370) Like other websites, the New Oriental website is also developed by HTML codes. This section will illustrate how HTML codes present text in the New Oriental website.

Figure 7 A sentence in the web page

Figure 8 The codes of the sentence module

 In the Figure 7, there is a sentence in the text. The Figure 8’s blue area indicates its correspondent HTML codes. As indicated in Figure 8, there are 11 lines of HTML codes to present the one sentence in the Figure 2.2.1, from <p style> to </p>.

Figure 9 The area of the sentence

The first 5 lines are for defining the area in which  the sentence locates (the blue area in Figure 9) and the characteristics of this area. The next two lines define the typography, font size and color of the sentence. The string of the sentence is in the 8th and 9th lines, between <strong style= “max-width: 100%;”> and </strong>.

2.2.2      Graphic

Figure 10 A picture in the web page

Figure 11 The codes of the picture module

The Figure 10 is a picture in the website page. The second image indicates its correspondent HTML codes. As indicated in the figure 11, there are 6 lines of HTML codes to present the one picture in the first image, from <p style> to </p>. Compared with codes of text, the codes of picture look shorter and simpler. However, they are more complex in fact. Because picture can’t be written in codes directly. If a designer wants to put a picture in a website, the picture should be transformed into a universal resource locator (URL) and then the URL can be written in codes as text (White, 2008, p370). Graphics don’t exist in a website’s HTML codes but in the website’s graphics server. For example, the Figure 10’s URL is The title of the picture should be typed before the picture’s URL, although the title will not appear in the website interface unless the user moves the cursor on the picture. When a user opens this website page, the browser will send a request to the New Oriental website’s server to ask for that page’s document. Then, the server will send the document back to the internet provider address of the user’s browser via internet. At the same time, the website server sends an instruction to the sites that contain the picture identified in that website page’s HTML coding, telling the site to send this picture to the user’s browser.

2.2.3      audio


Figure 12 The audio player in the New Oriental website

Figure 13 The codes of the audio module

The codes of audio playing module looks quite complicated but most of the codes in Figure 13 are used to define the user interface design of this module, including the button, the progress bar, and the color. Only three lines of codes (as indicated in the blue area of the Figure 13) are for audio’s URL. The HTML5 <audio> element specifies a standard way to embed audio in a web page, so that

audio files no longer have to be played in a browser with a plug-in (like flash). Similar to graphics, when a user opens this website page, the browser will send a request to the New Oriental website’s server to ask for that page’s document. Then, the server will send the HTML code document back to the internet provider address of the user’s browser. Also, the website server sends an instruction to the sites that contain the audio identified in that website page’s HTML coding to tell the site to send this audio to the user’s browser.

2.3 Sociotechnical Background

After deblackboxing the New Oriental website’s GUI and its contents and functions, this website’s interface design and the technical foundation become clearer. However, as a public website that is built on internet, its sociotechnical background should also be analyzed. The third step of deblackbox is to analyze the technological and social background that make this website’s development possible.

Figure 14 Sociotechnical background of the New Oriental’s website

2.3.1 Social Background

The economy boom of China increases the number of middle-class and high-class family, which have money to support their children’s education out of public schools in China. With the trend of higher education internationalization, the number of Chinese students studying in the United States has been increasing rapidly. According to statistics from the Menhukaifang Report, from 2006 to 2016, the total number of overseas students sent by Chinese universities rose from 67,723 to 328,547 (Lu, 2018). Most of students who want to study in the United States have to take TOEFL tests, so this surge increases the demand for TOEFL preparation institutions that can offer professional test-preparation service for students. Also, the number of Internet users in China reached 649 million in December of 2014, and the proportion of Internet access through desktop computers and laptop computers was 70.8% and 43.2% respectively (CNNIC, 2015). In sum, the demand for professional TOEFL preparation services and popularization of computer lay a foundation for the New Oriental website’s development. Moreover, the New Oriental website cooperates with Educational Testing Service (ETS) to offer official exercise to its users. This international cooperation could improve their test preparation’s quality and effectiveness.

 2.3.2 Technical Background

The usage of the New Oriental website is inseparable from many internet technologies. Its URL can direct users’ browser to its site. A user can type “” into the address space on the browser’s toolbar, or search “New Oriental” in any search engine to enter this website. Each part of the URL has its meaning (White, 2008). For example, “http” means that this website uses HTML codes; “liuxue.koolearn” is the domain name and this name is unique.

The data (texts, graphics and audio) is transmitted in the form of packet via internet between different servers and browsers. Transmission Control Protocol (TCP) and Internet Protocol (IP) guarantee the packet’s correct and efficient transmission. Those packets are made up of sequences of 1 and 0 binary codes, which can be sent through electric wires, fiber optic cables, and wireless network.

All these technologies come together not only serve the New Oriental website, but also other websites.  


3. Conclusion

With this deblackbox, we know that the New Oriental website is not simply a website built with HTML, rather an interface that connects users to a complex dynamic internet world, where servers, browsers, packets, and codes work continuously and cooperate mutually in order to present the interface. In the New Oriental website, ten Usability Heuristics are used in its interface design to improve its usability; multimedia, such as text, graphic and audio, enriches the website’s contents and functions; sociotechnical background makes the website’s emergence and development possible. 

Although the New Oriental website offers a unique experience for users, there is nothing innovative in its design and technology. These design principles could also be found in other well-designed website; HTML is a common coding language amongst most of the websites in the internet; multimedia has appeared and been used in online education for a long time. These existing constructive elements reduce the time and fund used in research and development of new products. However, they also make products easily replaceable. There are many websites that have similar functions with the New Oriental’s, such as KMF, Xiaozhan TOEFL and New Channel. The little innovation in the technology and design of these websites intensify their competition.

Making innovation is not easy. Designing a new format of a website which is different from the one suggested by design principles is dangerous to some extent. If the new design is not more understandable and learnable than the one designed with the principles, the users will be confused and even stop using it, which could be highly possible for the reason that the competitions for users’ time between applications and websites are cruel nowadays. Inventing a new function or even technology is also dangerous and difficult. Billions of dollars are invested in research and development (R&D) by tech-companies around the world, especially the giant tech-companies, like Google, Facebook and Amazon. For example, in 2017, Google’s parent company spent 21.4 billion U.S. dollars on R&D. (Statista, 2018) However, R&D is a long-term strategy that may not bring an instant lucrative breakthrough, and whether the new technology will be invented successfully and bring benefit to its investors or not remind unknown. (HowDo, n.d.)

Therefore, in the short term, the creative way to integrate existing design principles and technologies within a specific social and technological background becomes the key point to a product’s success. This is the most important suggestion provided by the deblackbox of the New Oriental website.



Blake, R. J., & Guillén Gabriel A. (2008). Brave new digital classroom: technology and foreign language learning. Washington, DC: Georgetown University Press.

China Internet Network Information Center (CNNIC). (2015). “35th Statistical Report on Internet Development in China”. Retrieved from (2015). The Internet: HTTP & HTML. Retrieved from

Hang Lu. (2018). Chinese universities in the last ten years (2006-2016): Development Status, Characteristics and Prospects of Students Studying in the United States —— the Analysis based on the “Open Report”. Modern Education Management. 2018(2).

HowDo. (n.d.). Learning from R&D leaders. Retrieved from

IIE. (2019). Number of International Students in the United States Hits All-Time High. Retrieved from

ISO 9241-11:2018. (2018). Retrieved from

Martin Irvine. (2018). Computing with Symbolic-Cognitive Interfaces for All Media Systems: The Design Concepts that Enabled Modern “Interactive” “Metamedia” Computers.

Martin Irvine. (2018). The Internet: Design Principles and Extensible Futures.

Ohanian, T. (2017). 10 Usability Heuristics for User Interfaces in Web Design. Retrieved from

Statista. (2018). Annual research and development expenditure of Alphabet from 2013 to 2018 (in million U.S. dollars). Retrieved from

White, R. (2008). How computers work. Indianapolis, IN: Que Pub.

World Leaders in Research-Based User Experience. (n.d.). 10 Heuristics for User Interface Design: Article by Jakob Nielsen. Retrieved from

W3C. (n.d.). HTML5 Audio. Retrieved from

Deblackboxing YouTube in IOS system

There are three types of mobile applications: native app, hybrid app and web app. The applications with an icon on mobile phone screen are native app, which are programmed by language requested by a certain system. Applications on iOS system are constructed by Objective-C or Swift language. Although the native apps on phones use different language with that of websites, both use same protocols to communicate with servers, including HTTP, IP and TCP. In this article, I will deblackbox YouTube native application in iOS system.

Media function is the major function of YouTube app. People around the world, with the assistance of internet and phone, can watch or upload videos with this app. When a user wants to watch a specific video, the first step is to search it. The user can use keywords to search for this video by the search engine of YouTube. The search engine will match the keywords separately in different videos’ titles and return the videos at an order- from more matches to less matches. Other secret algorithm also decides this order, considering the popularities of a video and other elements that the users don’t know- the secrets for better search results. In this process, different servers are involved: YouTube server, its index servers and its video servers. After getting these results, the user can choose one to watch by “touching” the thumbnail image or the title of that video. When the user touches the top glass layer of a capacitive screen, the capacitance of that area increases so that the grids of wires and eletrodes can detect this change and translate this location to a certain request to servers. No matter the user touches the area of the image or the title, he will send a request to YouTube video server and it sends a signal to a computer acting as a multicast server, and then this server sends the video signal to the user by UDP. After watching this video, the user can log out the app or just close it.

The next time the user log in YouTube, he will find that the videos in recommendation pages are those related to what he watched these days. This is because the cookie stores the information every time the user searches and watches a video and use this information to recommend videos. The information in cookie can be shared by other applications and websites, which provides users with convenience because these applications can also use them to recommend the products or services users prefer. However, it also causes some security and privacy issue. The YouTube server itself also stores user information, including email address, password, payment method and some other personal information. In this way, the user can log in and make a purchase with convenience, although it also brings about privacy and security problems. In order to deal with these issue, Hypertext Transfer Protocol Secure (HTTPS) comes. In HTTPS, the communication protocol is encrypted using Transport Layer Security (TLS) or Secure Sockets Layer (SSL). The Apple company also has a range of APIs on its platforms to enable apps to employ secure network connections and to benefit from OS-level security policies.



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.

“What are the popular types and categories of apps,”

Be on the Internet: Our Socio-technical System

From this week’s reading, I found that internet is everywhere and in our everyday life, it’s almost unavoidable to interwind with internet, since our work and study are inseparable from communication, transportation, animation and a most basic one-food and all these now could be semi-achieved or achieved by Internet, by means of different kinds of applications, websites, and some hardware. Behind the applications, websites and the hardware, there are multiple social components- different entities, such as institutions, organizations and the rules and protocols set by them. Any action we take, even though we don’t interact with any digital interface, the interaction between the whole socio-technical system and us will happen, no matter in a direct way or an indirect way.

Examples for internet in our life are everywhere. For example, when you walk down M street, you see colorful advertising boards, many different restaurants and clothes stores. You may feel you escape from internet at that moment. However, the monitors in the street will screen you and the time you walk and what you do will be recorded in monitor network. When you make a payment by a credit card, your payment information will be uploaded to that store’s computing systems and the bank system depending on what kind of credit cards you use. In this process, you “interact” with monitor system, store computing system and the bank system indirectly. From this scene, we can imagine that a huge quantity of social systems with which we interact every day. Technology’s development connects us to different social components closely by LAN, MAN and WAN. A unimaginable huge quantity of packets of information is transmitted within these different kinds of network and these networks compose the environment we live in today.

The interaction between us and these social institutions and organizations is only a fraction of the whole socio-technical system. There are complicated relations between these components, systems and their subcomponents, subsystems: some of them interact with each other and some of them overlap with each other, etc. For instance, the mobile phone industry, mobile applications companies and the communication technology are close related mutually. 4G’s appearance sets higher requirement for mobile phone’s functions and features. Due to 4G’s high speed and efficiency, people can watch videos everywhere instead of having to find to WIFI hotpot to download them. In this way, many video applications appear and become popular, like YouTube, TikTok and Snapchat.  Larger capacity battery, better baseband technology and bigger screens come to adapt to these applications. In addition, we know that TikTok is an application from China. Why it could be imported to USA? It’s because the cooperation between international internet service companies and the cooperation standard set by governments.

All these mutual interaction between systems, components and our interaction with computers and phones start with human’s desire to communication. Information theory offers a theoretical base of information transmission. The telephone circuit system at first is for live chatting but later it is used for internet. With the ever-developing communication technology, we now don’t use circuit system for surfing online, but rather optical fiber transmission system and WIFI system.

Based on what I have talked above, we can’t never set internet independent from other systems, components, institutions. It’s better for us to treat them as a whole and try to figure our position in this complicated system. In my opinion, the way to achieve it  is by deblackboxing the technology you use, knowing some basic principles about product design and system design and asking more questions about the internet and than trying to answer them, like why the YouTube can always give me the advertising of products in which I am interested?



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

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

Denning and Martell, Great Principles of Computing, Chap. 11, “Networking.”

Design Guidelines and Principles in App Lifesum

Lifesum is a weight control App, which serves to record daily food intake and quantity of exercise. Users can know their eaten and burned calories, intake of carbohydrates, fat and protein with it. They can also set a goal of weight and Lifesum will help them control intake and trace the change of weight. Weight control is always boring and even painful, but this well-design App eases users’ pain and resistance to weight control by its design.

Some principles in Lifesum:

There are 5 buttons(icons) in the bottom of the App and each of them represents a different page. When you in the page Diary, the button Diary is green and others in gray (except the “Plus” button which is always green). This is an indication of location. This design illustrates principle Conceptual Model. The long-term application and website using gives users a conceptual model that if a tag on a website or a button in an App has a different color from others, it indicates the place the user is. Every time the user switches pages, the button of the page where the user is will turn green and others become gray. This gives a feedback to user: you have switched the page successfully. All functions in this App is visible and every function maps to a button or a link. Nothing will be out of expectation in Lifesum.

Some guidelines in Lifesum:

Record function is located in two different pages, however, there is only one record subpage for users recording their weight, daily intake and exercise. This design not only makes sure that users can find the functions they need easily, but also makes sure the consistency in data entry. If users find that they record in different pages, it will cause confusion. In addition, the designers of this App design it with consistent color, layout, terminology and font.

All terms in this App are easy to understand: they are as same as our everyday words. Button “Diary” is for your record; “Plans” is for weight control plan; “Me” represents personal information. Anyone can use it with intuition. This intuitive design style guarantees usability. In the Recipes page, thumbnail pictures serve as a button and preview for users. This is a very effective way for navigation and interaction. Just liking shopping in a supermarket: finding what is needed or what looks great for you and picking it up directly. Every action is reversible in this App, which means that every time you record a mistake number or choose a recipe, but you don’t like it soon, you have unlimited numbers of chances to correct and change them. Lifesum is a memory offloading application for people who use it to record. Moreover, its design also helps us offload short-term memory. It’s safe to say, you don’t need to memory anything in this app. All the design in the App ensures users use it fluently without memorizing. There are no complicated functions that need explanation and no terms unfamiliar for users.

Designing principles and guidelines are useful for UX designers and product designers to elaborate their design. However, a satisfactory design also needs users’ personas, iterative usability test and so on. In a word, designing principles and guidelines are important, but they could not guarantee a satisfactory design.



Ben Shneiderman, Catherine Plaisant, et al. Designing the User Interface: Strategies for Effective Human-Computer Interaction. 6th ed. Boston: Pearson, 2016. Excerpts.

Ben Shneiderman’s Eight Golden Rules for Interface Design (on one page)

Apple Developer: Human Interface Design Guidelines

What Makes It Simple?

Simplicity is a commonly recognized characteristic for a user-friendly product. if a product is with useful functions and an elegant exterior design but it could not be used without thinking, it would not be a product designed by User Centered Design concept since it ensures usability in products by lots of developed process and principles. The design process includes: 1. Observation; 2. Ideation; 3. Prototype; 4. Test. A good product’s interaction with user should be clear and easy enough to lower the threshold for using it and further make it possible for this product to achieve business success.

However, simplicity for business’s goal is only a small fraction of its huge positive effects on human society and culture. Simplicity is also a prerequisite for digital products that serve as substrates for human abstract semiotic and cognitive system. The abstract meaning in our mind needs to be reflected in some substantial physical structures in order to preserve it so that we can pass our knowledge from generation to generation. Also, these physical structures help human ease our “memory job” so that we can get more space to explore new ideas, although it’s possible for us become more and more rely on these substrates for our meaning system, which conversely limits our creativity. What if digital books, like Kindle or books in websites, is complex and users need to read an instruction in order to read books on it? Many users will choose to use paper book and the remediation of book will not as influential as it is nowadays.

For designers, engineers and computer scientists, simplicity is not simple at all. There are tons of principles, patterns and hints to make sure its realization and there is a long history of development of them. Why making a product simple is so difficult? From my perspective, one of reasons is that the product itself is not simple. In some people’s opinion, the simple objects are with simple design. Although it might be true in some traditional artifacts, even the most “simplest” digital products are developed by sophisticated design, receiving help from antecessor products. From a “simple” and small audio memo application, we can find encoding and decoding process which are elaborated in Information Theory. There is transducer to transform human voice into binary code to be stored in the virtual memo.

In my opinion, the design concept enabled “computers” to become more than big calculators is abstraction. The calculation of numbers in an original computer is concrete, but the operation for our cognitive representation in today’s computers is abstract. It’ quite counterintuitive in the beginning since we always think that the thing more precise and concrete will be easily implementable and abstraction will mess things up. As mentioned in the book The Great Principles of Computing, “abstraction is one of the most fundamental powers of the human brain. By bringing out the essence and suppressing detail, an abstraction offers a simple set of operations that apply to all the cases.” Abstraction is a tool helping us transcend physical limitation and stimulate our imagination. How can our voice and face appear in a cell phone thousand miles away? It is because the abstraction. The phone abstract (encode) our voice and face and quantize them to be proper to be presented in pixel screen in another cell phone.

Simplicity sometimes stems from difficulties and this is the history of the development of digital products.



Martin Irvine, Introduction to Symbolic-Cognitive Interfaces: History of Design Principles (essay). Read Parts 1-2.

Bill Moggridge, ed., Designing Interactions. Cambridge, MA: The MIT Press, 2007. Excepts from Chapters 1 and 2: The Designs for the “Desktop Computer” and the first PCs.

Peter J. Denning and Craig H. Martell. Great Principles of Computing. Cambridge, MA: The MIT Press, 2015, chapters 7 (Memory) and 9 (Design). [Concluding background on computer system design.]


From Computing to Ubiquitous Computing

In the beginning of computing, it is almost equal to calculating. The first “computers”
were people who would tediously compute sums by hand to fill in artillery tables. However, the human computing was definitely not able to fulfill the dramatically increasing need of calculation required by wars. So, computing evolved and real computer appeared. Mathematics, physics and chemistry set foundation for the development of computer and this foundation also suggests the interdisciplinary nature of computing and its future wide implementation. Nowadays, computing already becomes important and necessary not only in our work, but also in our life.

Bread, which is so different from computing, could be an example to illustrate the influence of computing in our work and life. Humans have been eating bread for thousands of years. This habit remains but the way of producing and eating bread have been changing a lot. In a modern bread factory, bread is made by machine. The operation of machine is regulated by program, which roots in the control systems. With this program, machine can operate itself automatically and precisely. As consumers, we also benefit from computing because the computing lower the cost and we can buy cheaper products. Also, we can use some applications to buy bread. It is no doubt that applications’ development is not separable from computing.

Human now lives in a society of ubiquitous computing. As illustrated in Wikipedia, ubiquitous computing is a concept in software engineering and computer science. In contrast to desktop computing, it can occur using any device, in any location, and in any format. Computing already surpasses the boundary of computers and penetrates into other products, including phone, television, car and refrigerator. It’s safe to say that all aspects in our life- eating, drinking, living and transporting- are closely related to computing. Even the unfamiliar phrases like data mining, machine learning and artificial intelligence are not so far from us: data mining can detect spam emails that we receive and machine learning can improve advertising.

Since it’s obvious that our life has deeply interconnected with computing and it seems that this trend will not stop in a short term, it’s better for us to know about computational thinking in order to fit ourselves in this computing society and find our position. Just as Jeannette M. Wing emphasizes in the Computational Thinking, “Computational thinking is a fundamental skill for everyone, not just for computer scientists.” Computational thinking doesn’t mean that we should think as a computer, which is impossible also unreasonable. It rather requires us stand in a higher position to evaluate and use computing: not only knowing the principles of computing, but also know how to imply these principles to continuously develop computing or use them as logic tool -a way of thinking- to solve problems and finish tasks. Not everyone is able to code or needs to code, but everyone has the ability to think computationally, an easy way to improve life quality and work efficiency.



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

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

Peter J. Denning and Craig H. Martell. Great Principles of Computing. Cambridge, MA: The MIT Press, 2015, chapters 4, 5, 6.

Understanding about the Information Theory

From Wikipedia, we know that in signal processing, a signal is a function that conveys information about a phenomenon. In the transmission of information, a signal can be audio, video, image and other human cognitive representations. In the information theory, these representations could be encoded into signals and then these signals can be transmitted through channel. During the transmission in the channel, there is some noises which could lower the quality of transmission. A certain level of redundancy helps in ensuring that most of codes could reach decoder. The next step is that the decoder of the receiver will decode the codes. The “original” information will be rebuilt after decode process.

Why the signal-code-transmission model is not a description of meaning? In my opinion, the first reason is that humans don’t interact with this transmission process directly. It’s our cognitive representations that are encoded, transmitted and decoded in this process. With the codes only, we can’t understand its meaning, which is different from any other agencies in society and culture.  Second, this model’s function is achieved by machines and machines’ work even plays a more important role than the meaning they carry. If the encoder, channel and decoder don’t work well, the information will be distorted.

The reason why the information theory is essential for everything electronic and digital is that they rely on information theory to achieve their meaning. The electronic and digital devices need to receive signal to perform some functions, especially the smarter electronic digital devices, like computer and mobile phone. Different devices’ cooperation depends on the information theory. Code is a common language in these devices. By the encode-decode process, code could be transported in channels to different devices. It’s safe to say that the information theory makes electronic and digital devices more powerful.

In my perspective, the information theory serves as an auxiliary in human social meaning system. It surely enhances our ability in transmission and representation of the cognitive issues. However, does it improve our meaning in the these signals? No. Even worse, the noise might damage codes during the transmission in channel. Another reason is that humans don’t use code to communicate with each other directly. Therefore, this theory actually helps a lot in transmission, but it could not be used to expand our sign and symbol systems.



Martin Irvine, Introduction to the Technical Theory of Information (read first)

Luciano Floridi, Information: A Very Short Introduction. Oxford, UK: Oxford University Press, 2010. Read Chapters 1-4. Excerpts.

Affordance in Paper Books, Digital Books and Audible Books

As indicated in Wikipedia, book, a physical object, is a stack of usually rectangular pages oriented with one edge tied, sewn, or otherwise fixed together and then bound to the flexible spine of a protective cover of heavier, relatively inflexible material. This kind of book is relatively modern compared with stone books, bone books created by our ancestors. All kinds of book can pass on information from generation to generation and this information is one of the reasons why we live the society today, with lots of rules, code, conventions, which in turn influence book’s content and functions.

Let’s first take a look at a traditional paper book, whose affordance is reading. However, reading is a general idea and in be more specific, with a book, we can search information, gain knowledge, explore ideas, etc. However, different people may have different perceived affordance for books, since “under the distributed cognition framework, affordances are distributed representations extended across external and internal representations”, as mentioned in Distributed Cognition, Representation, and Affordance. For example, from a blind man’s perspective, a paper book may be the same as a brick. In this case, the book doesn’t afford reading, but constructing.

The interface of a book is every page with information. Generally, we interact with books by turning the pages with hands. In this case, the book affords the action “turn”. In order to achieve this function, a book should have a reasonable size and weight, which are compatible to form factors to make sure that we can carry a book by hands and turn pages easily.

With the development of technology, now we have audible books and digital books. These new types of books have new affordance which set lots of challenges for designers because they not only have affordance inherited from paper books, but also develop their own affordance in a new interactive system. Take the most widely used digital book Kindle as an example. We can read it and carry it as a traditional book for that the design of Kindle tries to imitate a real book: the interface and the size. Different from the past that we can only buy books in a bookstore, we can shop in Kindle directly and the books will be downloaded in it within seconds. In this way, Kindle affords shopping and downloading.

In the case of audible book, from my perspective, depending on its function, the audible book is a book, because it imports us information and this information are structured in a more regular way in order to express the ideas or illustrate plots better. However, if we treat audible book from a different angle, it could be a radio program because of its format and the way it interacts with people. This kind of book exists in broadcast applications and affords pronouncing and “reading”.  In order to offer better user experience for us, for instance, the designers of Amazon audible book application Audible add an affordance to it: changing the speed of radio so that people with difficulty in listening can adjust the speed based on their preference.

Books keep evolving and their new affordances might appear. This outcome can be illustrated in a distributed cognitive system which consists of internal and external representations. The development of external representation drives us develop our internal representation and more affordance are required in order to bridge across them.

In sum, affordance will change along time and space with inner motivation of human and the characteristic of outside world.


Donald A. Norman, “Affordance, Conventions, and Design.” Interactions 6, no. 3 (May 1999): 38-43.

Jiajie Zhang and Vimla L. Patel. “Distributed Cognition, Representation, and Affordance.” Pragmatics & Cognition 14, no. 2 (July 2006): 333-341.

Martin Irvine, “Introduction to Affordances and Interfaces.”

Systems in Our Life and How Systems Matter in Design?

No matter as a user or an operator, a designer or an engineer, understanding the things we interact in a systematic view is important, since nearly no object is absolutely isolated from a system, even a person self is also in a system.

Simply imagine that, one day you want to read a book so that you open your computer to search for a digital version in Amazon or some online library, or you want to read a paper book, so you could buy one from the internet or go to a library with public transportation or by your car. From the idea that you want to read a book to the stage you get the book, so many sociotechnical systems are involved, including the Internet system that connects different computers and servers to transmit information and help users find the one they need, the Cloud system which offers a virtual space to store data so that a great number of books could be “piled up” there and users in different places can access with the permission of a certain library website, public transportation systems that combine passengers, drivers, vehicles, route plan and integrated within traffic systems. If you drive a car to the library, you would participate a traffic system which means that you, traffic lights, roads, vehicles, traffic rules come out as a system. It’s safe to say that we are always a part of a system or part of multi systems at the same time.

If we only see the products we use a technical artifact, not part of a system and treat ourselves as simply a user, we will have difficulty in understanding the principle before them and always be blinded by them. Every time you use a computer, you will be amazed by its functions and think they are magic. Furthermore, we will become followers of products around us and lose the ability to optimize them by ourselves. Most importantly, understanding every object and ourselves as a part of systems can help us adapt to new products since in a sociotechnical system, every new product would not come from blue-they will more or less overlap or use the concept or organism of other systems.

Although designing a product in a systems view is more difficult because we must consider not only the technology used in it, but also a broad social situation with institutions, organizations and regulations, the designers should keep it while taking its benefits into account. In the very beginning of ideation, a team gathering experts in different areas is necessary. A team should include engineers who can build a technical object, consultants, or professors who can provide opinions and suggestions about the social system and further how to integrate the product into the system, and consumers who will possibly use this product so that they can help designers find a way to make their product more useful and understandable. In this sense, the systems view help us avoid making a product out of tune. This kind of process is for some simple products, like an App. For the more complicated products, designers and even the society as a whole should constitute a new system for them. Only in this way, new products could actually be useful and valuable. Can you imagine airplanes flying without a civic airplane system mentioned in A Philosophy of Technology: From Technical Artefacts to Sociotechnical Systems, it will definitely have a severe effect and airplane would never have today’s important position in our transportation system and daily life. 



Martin Irvine, “Understanding Sociotechnical Systems with Mediology and Actor Network Theory.

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.

Understand Our Technologies from a New Angle

After this week’s reading, I know that cognitive technologies are those that connect human’s mind with outside world and construct a loop between our body and task, within interaction in environment. Cognitive-symbolic artifacts are embodiment of cognitive technology, symbols and humans’ mind. By using these technologies and artifacts, humans sacrifice parts of their brain’s function, however, in my opinion, the gain outweigh the pay. They further help us address tasks in an easier and more understandable way.

Symbolic-cognitive artifacts appear hundreds of thousands of years ago, and nowadays they exist everywhere in our daily life. They already become parts of our culture and our mind. Computational and media technologies brought by informational and technological revolution constitute important and even necessary part of our work, study and life. Can you imagine your life without any media? Take television as an example. From this “black box”, we can watch soap operas, talk shows, sports event and etc. These television shows happen across time and there are many kinds of technology behind these shows to product them, including video shooting and edition, voice recording and computer processing. These technologies help human store their voice and image, making these symbols not restrict to our mind and body, and coming out to be stored in artifacts so that they can exist beyond time and reach to different people-beyond environment.  In this sense, we understand the artifact television better because we not just see it as a machine- a mechanically, electrically, or electronically operated device for performing a task as described in Merriam Webster Dictionary-but also see the deeper meaning inside it: it represents our mind, our voice, our image and our memory and further keeps them without threat of time and disseminates them without limitation of distance.

“Cognitive technologies” and “symbolic-cognitive artifacts” also help us understand the design principle of computational and media technologies. From the definition of cognitive technology mentioned above, we know that once we look something as an artifact, we can analyze it with the whole system which includes human’s body and mind, outside environment and the interaction between them. The design principle, for example, “constraints” limits interaction between us and artifact. In this way, it decreases the rate of error. In contrast, the design principle “visibility” amplifies the interaction between them. Designers should design products based on conceptual model because it will help human build an interaction with products. They should also design products with consideration of their surrounding environment to make sure that user could interact with the product in a proper way. Kindle can be a good example to illustrate these principles and show us why understanding media and computational technologies from cognitive an artifact’s angle is better. Kindle’s design is quite simple, with only one button, one interface and one black-white screen. This simple hardware design helps users avoid mistakes since there are no more choices for us to insert or touch. Besides, the screen is of reasonable size so that we could read it with more comfort. Kindle is also very light and we can hold it on hand for an hour without feeling our wrist painful, which provides us better user experience than reading paper books. There is no certain environment where we use Kindle because we don’t read books in a certain place in most situations. That’s way Kindle is designed to be portable in order to meet our habit. If kindle is analyzed merely as a machine, it will be difficult for us to understand its relationship with us and the design principle behind it.

In sum, understanding media and technologies as cognitive technologies and symbol artifacts will give us a new angle to analyze the technologies around us and reconsider not only our interaction and relationship between them, but also step forward to another level about design principle.



Donald A. Norman, “Cognitive Artifacts.” Designing Interaction, edited by John M. Carroll. 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.

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

Modularity’s Importance in Functions and Innovation

After these weeks’ reading, I begin to look the devices around from a new angle. I focus on the design, their components and pay attention to how these devices interact with us. Only from a small smart phone, I could find many design principals behind it, such as affordance, feedback, conceptual model, hierarchy and modularity, which could also be applied to PC. All of these principals are important, however, in my opinion, the modularity is the most important one for the reason that it lay a foundation to help designers and engineers arrange a product’s various functions, apply modules developed by others and further save time in research and development and also express different functions in an understandable way. More importantly, products could be designed in a more flexible way.

Modular design principals cooperate with the design principals to offer us better user experience. Take one of the design principal feedback as an example. No matter what kind of smart phone you use, you will find that every time you use a function in a right way, you will get an immediate feedback and different functions have different feedbacks that achieved by different modules. For instance, when I lock my iPhone, it would utter a sound similar to that made when we close a door. When you turn up or turn down the volume, it would not make any sound but rather to show the change of volume by an image appearing in the center of screen. It’s reasonable to conclude that it’s the modularity help designers sort things out and give users feedback in different way.

From the example of iPhone mentioned above, we could imagine that behind these visible interface and buttons, there are multiple modules. Behind the volume control, it involves several different modules: touch control module, volume control module and obviously, a circuit board to transfer information and electricity. The thing surprises me more is that the complicated face recognition technology is added to iPhone X with a small chip. This small chip does not influence other functions and the size and weight of a phone. However, it improves our user experience dramatically. This small chip also reminds me a fact that the digital devices become more powerful, useful and smaller at the same time, which I always ignore before and I think modularity is the one of the reasons for it. The modularity lets every module develops independently so that the designers and engineers could control their size and functions in a more effective way, and also, they can collaborate better, although different module will work together finally. In this way, innovation could be achieved. This is exactly what mentions in Universal Principles of Design– modular design encourages innovation of modules.


The chip STB600B0 is an Iris Recognition module, which uses for facial recognition.



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

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

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

Lidwell, William, Kritina Holden, and Jill ButlerUniversal Principles of Design. Revised. Beverly, MA: Rockport Publishers, 2010.

Design Principal in iPhone XS and challenges for designers

Nowadays, we live in a society with highly developed technology, where we can apply technology to ease our life and work. Many people already take this convenience as granted and never think further about how these everyday products operate and don’t want to spend much time to figure out how to use it. At the same time, today’s fierce marketing competition push companies to provide us countless choices of products with similar functions-both virtual and physical-so that once we encounter difficulty or become confused while using a product, we would turn to another product. Designers face more challenges than before.

Apple company’s products are good examples to illustrate how good design can benefit us and conquer the market. It’s safe to say that their products abide by the design principle suggested in The Design of Everyday Things by Donald A. Norman. Take iPhone XS that I use every day as an example.  Few buttons on the artifact set a constraint for us to avoid mistake. Plus, the buttons’ design and location give us a natural mapping. For example, the two buttons to adjust volume are arranged vertically in the left side of the phone. The button below is for turning down the volume and the other is for turning up the volume. This is also in accordance with our conceptual model since nearly all brands of mobile phone adjust the volume in this way and we already get used to it. The design of adjustment of volume also serves as a great example of feedback. An indication of volume would appear in the screen as we adjust it. The visibility and affordance principals reflect in the phone’s desktop. The applications’ icons arrange one by one in phone’s desktop and every application icon have their own design and their names are right under the icon. All these improve visibility for consumers. In order to switch between different apps, the users just need to slide from button vertically and the apps’ interfaces would appear as papers in folders and you can slide horizontally to choose the one you want to use. There are still a lot of designs found in iPhone XS which perfectly accord with the design principal.

The technology keeps developing and many new products are based on the technology before.  Users build their conceptual model by their experience from the products they have used. Although technologies share some similar structures, which are consistent to some extent and people could use them to analyze different products, the developing technology and users’ conceptual models would still be a challenging for designers for that it limits their creativity and request them have knowledge of past products’ design and past technology.

In sum, not only the market competition and consumer’s impatience but also the ever-developing technology and human’s stability of psychology make design more difficult. Fortunately, there is basic design principal can help designers’ work. However, how design principle could be developed in the future to guide the design that amazes us instead of just making products understandable and usable?



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

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