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.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 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.
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.
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>.
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 http://liuxue.koocdn.com/ue_affix/e301f711f6bb45db9a7678341038d97f.jpg. 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.
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 “https://liuxue.koolearn.com/toefl/” 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.
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 http://www.cac.gov.cn/cnnic35fzzktjbg.htm.
Code.org. (2015). The Internet: HTTP & HTML. Retrieved from https://www.youtube.com/watch?v=kBXQZMmiA4s&list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7&index=6&t=0s.
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 https://howdo.com/innovation-tools/research-and-development/research-and-development-leaders-google-amazon/.
IIE. (2019). Number of International Students in the United States Hits All-Time High. Retrieved from https://www.iie.org/en/Why-IIE/Announcements/2019/11/Number-of-International-Students-in-the-United-States-Hits-All-Time-High.
ISO 9241-11:2018. (2018). Retrieved from https://www.iso.org/standard/63500.html.
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 https://medium.com/@toddohanian/10-usability-heuristics-for-user-interfaces-in-web-design-c179aa39b54e.
Statista. (2018). Annual research and development expenditure of Alphabet from 2013 to 2018 (in million U.S. dollars). Retrieved from https://www.statista.com/statistics/507858/alphabet-google-rd-costs/.
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 https://www.nngroup.com/articles/ten-usability-heuristics/.
W3C. (n.d.). HTML5 Audio. Retrieved from https://www.w3schools.com/html/html5_audio.asp.