Author Archives: Yingxin Lyu

How Weibo Applies and Violates Interface Design Principles and How Can It Improve Its Interface Design

How Weibo Applies and Violates Interface Design Principles and How Can It Improve Its Interface Design

Yingxin Lyu

Abstract

nowadays the popularity of mobile social applications, these publishers of the most popular social applications are too confident that they will never lose their users. Thus, they gradually put user experience in the less important place than their business interests. Weibo is a typical example. Now, users are standing this application with illogical interface design. This paper is about the study of interface design of Weibo, a popular social media app. First, it applies modularity and the eight golden rules of interface design to analyze how Weibo design its interface. Then, the paper shows some cases of Weibo’s bad and unfriendly interface design. In the last part, it gives the reasons for formation of these violations in Weibo’s interface design and tries to give advices about how to solve them in the perspective of how to improve user experience.

Introduction of Weibo

Weibo is a broadcast social media that shares short, real-time information. It is one of the most popular social media platforms in China since its launch in August 2009. The English name of Weibo is microblog, and the earliest microblog website is Twitter. The working mechanism of Weibo and Twitter are much alike. Weibo has website and mobile app. With Weibo, people can share everything they like. They can post words, pictures, videos, music, and many other media. The microblog they post named “weibo”, the same as the application. A user can follow their friends and celebrities in order to receive their weibos. Other people can also follow the user in order to see his or her posts. Now, Weibo is very famous of its “Weibo Hot Search”. It is not only a chart showing the real-time most trending topics but also offering places for advertising. Moreover, Weibo creates many topic communities for users.

The Weibo mobile application has five main pages separated by the bottom menu with five buttons. It is a general ways of separating different main pages of applications. The design of these five buttons also applies the principle of affordances. The first page is the home page with all the weibo post by people a user follows will be present here. The user scrolls down the page in order to see more. It is an infinite scroll that the user can read all weibos posted by his or her following. There is a parallel page named “For You”. Weibo uses big data and recommendation algorithm to offer recommended weibos for the user. The second page is especially for video watching. Now because short videos are more and more popular, so Weibo creates a page for videos only. The third page includes searching bar, Weibo Hot Search, and hot weibo recommendation. The fourth page is for receiving and sending message. A user can chat with their friends and other following people. He or she will receive alert if receiving comments or likes from others, or being mentioned by others. The last page is for the user’s personal data. The user can check weibos he or she posted, all weibos that he or she liked before. Moreover, the page shows the user’s most visited people and community, which are shortcuts to the destination that the user’s preferences.

 

Application of interface design principles

  1. Modularity

The basic module of app is a single weibo that posted by a user. On the home page and “For You” page is the array of weibos posted by following people or recommend weibos. The video page shows only weibos with videos posted by other users that Weibo recommend to the user. Moreover, the hot search chart is also depended on every weibo. It calculated keywords’ frequency of appearance in weibos posted in real-time. Entering one of these hot searching keywords, the page is also composed of the array of weibos, which includes the keyword. Thus, Weibo uses three ways to distributed all kinds of contents in different pages, and the basic element is a single weibo.

  1. strive for consistency

First, the theme color of Weibo is orange, and the icon is a cartoon figure of an eye. In the operating interfaces, orange functional buttons are everywhere. The names of vip users are also orange. Secondly, Weibo creates its own identical terminology: “topic” and “super topic”. Words and short sentences can create their “topic” community, and fans can send posts with hash tags of the topic. The font design is the same as operating system. Normal literal contents are black. The “topic” contents with hash tags are blue, the same as the color of usual hyperlink. Weibo also keep the way of presenting contents in a same way: in a rectangular area, from the top to the bottom are name, literal content, pictures or a video, and “Repost”, “Reply” and “Like” buttons. Each rectangular area has a short interval. Users browse all the posts by sliding up and down.

  1. Seek universal usability

Weibo can learn from people’s preferences and recommend contents that the users may like. For a new user, who has not followed many celebrities and friends, Weibo will recommend many weibos for him or her, and quickly learn the preference in order to improve the recommendation’s accuracy. For intermittent users, Weibo knows them well, so they will receive many recommended weibos in “For You” and “Hot” pages, which offer them abundant contents. Weibo not only bring contents for users to read and watch, expert users will discover more communities and areas which lead them to make friends and have a chat group with other fans and even the celebrities.

  1. Offer informative feedback

Weibo offers feedback of users’ operations. Weibos on the home pages only show limited words and pictures, so if he or she wants to see the complete content, the user needs to tap the white background of the weibo. The feedback is that after tapping, the color of the background of posts will become deeper, and then it will transfer to the page of the full content of the weibo.

If the user taps the “Like” button, the color will also change from grey to red.

Moreover, every time after the user scrolling down the home page to refresh, at the top of the interface, it will present the informative hint saying how many new weibos are updated.  

The third example is that after a user tapped the button to download a picture, a hint message will appear in the middle of the screen telling the picture is already saved in the album of the smartphone.

  1. Design dialogs to yield closure.

When the user wants to post texts, pictures, or videos with the application, Weibo gives them a good series of guideline of how to operate step by step. To make it transparent, let’s suppose that a user wants to post a weibo with pictures and texts. First, he or she needs to tap the “add” button at the top right corner of the home page, and then there will appear a menu, so they can choose to upload a post, picture, or video. After choosing “picture”, it will jump to an interface that is connected to the photo album of the smartphone for the user to choose photos.

Then, he or she can tap the top right “next” button, the same as “add” button. Now the user coming into the editing interface, in which chosen pictures can be put on labels or stickers, cropped or adding some mosaic. The “next” button is still on that position. After completing editing pictures, the user can go to the next step.

In this new page, he or she can write descriptions of the pictures. Alternatively, if he or she wants to come back the edit pictures again, tapping the picture will guide the user back to the last step. The final step is to tap the “send” button, which is still at the top right. If the user wants to discard the post, the “cancel” button is just at the top left.

These key buttons that guiding users to move to the next step are all placed in the same position makes the processes of sending posts easy to follow.

  1. Prevent errors.

Weibo offers some interface design for users to prevent error. For example, a user can like a weibo by tapping the “Like” button. However, if he or she taps the button by mistake, they can click it again to cancel the “Like”. Moreover, when a user is editing the post, if he or she clicks “cancel”, then there will jump out an interface with three choices: “Save as a draft”, “Don’t Save”, and “Cancel”. These choices give the user the chance to save the content as draft or discard it. The more important is that “Cancel” gives him or her the chance to prevent the unintended error so that he or she can keep the content. If the user still makes some mistakes after publishing the post, he or she still has the chance to get rid of mistakes; however, Weibo only provides the function of editing a published weibo to vip users. It is not suitable for this function to be a rechargeable one. Since editing is such a general function for every user, and there is no other way for a non-vip user to edit a published weibo except deleting it and publish a corrected one. Otherwise, Weibo just wants to force as many users as they can to pay money to them.

  1. Permit easy reversal of actions.

Weibo offers many units of reversibility to users in order to improve their experience. Firstly, users can post or repost a weibo, and correspondingly they can easily delete them. They can follow other users and can unfollow them by easily tap the same button. Secondly, the main pages of the application are marshalling rectangular areas of weibos, and each area has many buttons. For users browsing them with a finger scrolling down continuously, unconsciously tapping buttons is a common phenomenon. However, whatever buttons users tapped by mistake, the actions are reversible. Maybe it will jump into the comment page, but the user can quit the page although it will cause abundant operations than expected. Maybe the user will click “Like” button by mistake, but he or she can tap it again to reverse it.

 

  1. Keep users in control.

Since Weibo created its mobile application, the arrangement of “Repost”, “Comment”, “Like”, these three buttons have never changed. It provides users of familiar convention of how to use the app’s most basic functions. The interface of editing a new weibo is also almost the same. Whatever the user needs to insert pictures or not, there is always a large area of blank area to type content. People are used to such interface, so weibo does give them the strong “sense that they are in charge of the interface and that interface responds to their actions.”

  1. Reduce short-term memory load.

As mentioned before, each weibo possesses a rectangular area, but both literal contents are summarized and only nine pictures can be presented, if there are more than nine pictures with the weibo, the remaining ones will be hidden. Thus, if the user wants to see the complete content, he or she needs to tap the white background, and it bring them go to the page of complete content of the weibo and its comments. In order to avoid short-term memory load, in the summarized version of the weibo, the nine present pictures will be loaded at first. Then on the page of complete content, these pictures do not need more time to load. The same information is used on one display and then on the other display.

Violations

  1. Unfriendly arrangement of advertisements

First, on the main page where should be full of weibos posted by following people of the user, but there are too many advertisements which have already prevented the user to normally enjoy the contents. Every seven normal weibos there will appear one advertisement weibo inserting in the array. These high frequency advertisements are disturbing for users who want immersive and continuous reading experience. On the “For You” page, which is full of recommended weibos, there are still insert advertisements. Format of these ads is quite like a normal weibo, the only difference is that under the name of the posting account, there will be a small icon saying “AD”. If the user does not read carefully, at the first sight he or she will take it as a normal weibo because they look so similar. It is a crafty way to push advertisements. Probably, the user will be interested in one picture of the advertisement weibo, so he or she taps it. However, it takes the user to another page, a page for advertisement. Then he or she finds out that it is a cheat. It is hard to say that such an advertisement can be defined as content that the user is interested. It is harder to say that using such a way to push advertisement is smart or annoying. The point is that, these advertisement weibos may cause unintended and unnecessary operations in order to come back to normal browsing page. “Time is precious,” everyone wants to complete their task smoothly, without externally imposed delays, even if the task is entertainment.

Second, Weibo designs the position of banners of ads easily to be tapped by users’ finger so advertisers can achieve more clicks. The page of complete weibo content should be composed of literal contents, pictures or videos, and comments. However, now Weibo inserts a banner of ads in the gap of media content and comments. The exact position of each ads banner is depending on the length of the content of the weibo. If the banner is coincidently placed at the position that the user usually swipes the screen to exit the page, then he or she will easily tap the ads out of expectation, which is quite annoying. This design violated the principle of “preventing errors”. Moreover, it caused unprecedentedly numerous errors to tap these advertisements by mistakes.

Third, advertisements will bounce out and cover more than half of the page, which frequently leads users tap it unconsciously. On the page for watching the video, the page is separated into three parts: the upper one is the window for video watching, the banner of advertisement is in the middle, and the lower one is a part for several elements including the literal content introducing the video, comments and recommended related videos.

After a user watching the video on this page over two minutes, there will bounce out an ads from the bottom and fill in the whole page except the area of the video. If at that time the user is just browsing the comments or recommendations, the suddenly appeared advertisement will be tapped by mistake. Moreover, if he or she watches the video in full screen, when going back to the original page, the advertisement will suddenly bounce out as well. Since in the video watching area the swiping right gesture is for video speeding, so people tend not to swipe on that area. However, all the other area is filled out by the advertisement, if the user is not careful enough, the way he or she swiping out will be identified as a tap. This will lead the application go to a new website. More seriously, it sometimes allows opening another application without the need of inquiry. It is so annoying that the user has to close several things in order to go back to the original page.

  1. Confusing partision

First, the home page includes two main subpages: one is for weibos posted by following people, the other is “For You” recommended weibos for the each user. However, on another main page, under the area of hot search, there are the hot weibos also recommended by Weibo for each user. These two kinds of pages have something in common, and it is hard for a user to tell the difference between their functions. Thus, Weibo should make it more clearly for users to browse recommendations, instead of giving users two similar things in different pages.

Second, two different video watching interfaces bring novice users a lot of confusion. The first kind is what mentioned before with three parts in the whole page. The other one is much alike the Tik Tok video watching interface. The whole background is black, and a landscape video is in the middle, or a portrait video filling out the whole screen.The introduction is at the bottom of the page, and the buttons of “Like”, “Reply”, and “Repost” is on the side.

It is well known that for watching a video on a portrait device, most apps share the same pattern of gestures to pause, start, and fast forward. However, in these two concurrently existing video watching interfaces, they do not share the same pattern of gestures. It is so confusing and annoying that the user should realize and learn to use different gestures to operate two kinds of video watching interfaces, or it will mess up the enjoyable mood of surfing a social media app. This is the violation of the first golden rule of interface design: strive for consistency.

  1. Illogical placement of buttons

First, Weibo changed the placement of “add” button, which leads users to post a new weibo. The change first made old users very hard to get used to it, and make mistakes frequently. The “add” button was in the middle of the bottom menu, the banner including five buttons guiding to five main pages. The placement is quite like instagram, and instagram is still using such a design.

Now the middle button is for “Discover” page, and “add” button is moved to the top right side of the banner of the home page. Moreover, it became much smaller than before. Thus, using the new version of Weibo, users always found out that when they want to post a new weibo, they made mistakes to tap the “Discover” page. However, on the “Discover” page, there is nowhere to find the “add” button, so they have to go back to the home page. After ensured that there is no button for adding a new weibo in the lowest banner, they will find out that what they want is on the top right corner.

This change of the placement of the button that users are so accustomed for year is such a bad decision. It violated the principle of “Keeping users in control”. Even expert users in such a situation will also find that the app is almost out of their control feel disappointed and annoying.

Second, placement of buttons on the right side of the interface causes many unintended tap. One example is the “Like” button, which is arranged with “Repost”, “Reply” under the content of a weibo, and “Like” is on the most right side. Most people are used to holding their smartphones with right hands and use their right thumbs to swipe the screen. The problem is that the “Like” button is just in the area that users mostly swiping the screen, so it is so often for them to tap a “Like” out of their expectations.

Sometimes they will quickly find out that they liked a wrong weibo, but sometimes they cannot realize it in time. It may not have some serious results in most cases. However, on one’s personal home page, there not only shows weibos you posted but also weibos you liked. Thus, if the user unconsciously liked a weibo that is not suitable to be presented to his or her followers, it is embarrassing.

Reasons for violations and how to revise them

The core problem of all these unfriendly interface design is that Weibo put more emphasis on something other than users’ experience. If Weibo wants to revise all these bad designs, put user experience in the first place is the most crucial thing that it needs to realize now. Whatever the app is for profit or non-profit, the user is so important that if nobody uses the app anymore, the app have to declare the death.

First, the placement of advertisements that guide users to tap them is for their commercial interests. Moreover, the high frequency of advertisements weibos is for achieving more advertisement and making more profits. It is understandable that an app needs advertisements to make money, but it need to present the advertisements in ways that are more acceptable. Now it is taking advantage of schemes to achieve more clicks, which is a consumption of users’ enthusiasm.

There are several ways to solve this problem. Weibo provides rechargeable vip services. Now, vip users are standing these annoying ads as other normal users. Actually, if reducing and hiding all ads should be one of the vip services, at least it will improve the experience of vip users. For other users who still need to be exposed to advertisements, Weibo should change their ways to present. Considering principles of interface designs, even if there should be some advertisement, they still need to be under the control of users. The first thing it needs to revise is every possibility that may lead unintended tap of an advertisement. Second, clearly telling user that it is an advertisement is important. An advertisement pretends to be a weibo is crafty and will arouse discontentment. Then, normal users have the possibility and chance to ignore these advertisements. Moreover, if it can make effort to the make advertisements more creative and interactive, that can reduce some detestation.For example, interactive ads in WeChat Moments are quite interesting. Some of them make users feel like they are interacting with the celebrities. These advertisements do not play a video automatically, only after users’ swiping the finger as the arrows present, it will jump to another page and show the whole video.

The logic is same to the design of “Like” button that is easy to be tapped when swiping the screen. It is a guess that Weibo wants user to be more active, so it hopes that there will be some unintended tapped “Like”, which can increase to data of numbers of active users. However, users do not want so many unintended operations. If Weibo really wants users to be more active, it should make the interface more user-friendly.

It is easy to solve the problem, taking Instagram and Facebook as examples, both of them do not place “Like” on such an embarrassing position. Instagram put “Like” and “Comment” on the left side. “Like” and “Comment” of Facebook are more close to be in the middle, and “Like ” is on the left side, so it will less be tapped by mistake. Whatever the placement of the banner of “Repost”, “Reply”, and “Like”, leaving the space for finger to swipe the screen is the essence of this interface design.

Second, repeated pages of recommended weibos is to provide more channels for those publishers to achieve more exposure and reading, so they can further achieve more followers, and more exposure. However, for users who read these recommended content, they cannot feel distinct differences between “For You” page and “Hot” page. These two pages need to be classified into one page, instead of being separated. It can remove the “For you” page to “Discover” page, and parallel it with “Hot” page. It will make the function of each page more clear.

As for the two different interfaces for videos, there are two interfaces because videos are uploaded on two different platforms. In Weibo, there are areas for short videos and original videos (longer than one minute). Thus, short videos will be present in the interface that like Tic Tok, with a black background, and original videos have a more specific interface to present detailed introduction, comments and similar videos. Because their interfaces and operating gestures are so different, they caused so many confusion and failure.

According to the principle of striving for consistency, these two kinds of videos should be presented in the similar interface. Whatever it is a short video or longer video, users only want to watch and enjoy it. If they can keep in the same interface, the experience will be much better. The interface with three partition of the page is better for all kinds of videos. Now Weibo wants to establish its own original video platform. It must keep the interface that can clearly show the introduction of the video. Moreover, the gesture operation of this version of interface is the same as other video watching app. The most important thing is that Weibo should remove the advertisements that will suddenly bounce out and fill out almost the whole screen. The advertisements that will fill the window of the video after finish playing the video is more friendly because at least, users have some safe space to quit the page.

Third, the “add” button loses its place in the lower banner is because of the appearance of “Video” button. Now browsing short videos is a very trendy way for people to socialize, and Weibo wants to join the market, so it especially created a page for video watching. There is no more space for a button in the lowest banner, so it moved “add” button away. However, the problem is that the distance between the original and new placements is too far away. Even for an expert user, it cost some time to find. Now users are getting used to this new placement of these buttons. The lesson that Weibo need to learn is that it should avoid such a big change on core interface design.

All these suggestions about how to improve the Weibo’s interface design is based on the consideration of user experience. There may be better ways to solve these problems. Solutions mentioned in the paper just work as possible ways. Hoping that Weibo can try to become better in interface design and offer better experience to users.

Conclusion

For any mobile application, focusing on its interface design and making it more friendly for users is an important step to success. However,Weibo, as one of the most popular social media application in China, with a strong and solid foundation of users, seems to gradually lose its core competition. The interface design becomes more friendly to their business interests. It is necessary for Weibo to go back to the right way to persist longer in the competitive market. That is, its users’ trust and pleasant. The paper first introduces how Weibo applies interface design principles to build a good application for users to enjoy their modern and smart social life. Then it shows how currently Weibo violated these rules and principles and cause more and more dissatisfaction of users. It needs to take them as an alarm. Now users are bearing these confusing and annoying designs, it doesn’t means they will bear them forever. Thus, it is significant for Weibo to win back users’ heart. They need to revise most of these bad designs. The last part of the paper is about some suggestions of how to solve and better them. These suggestions may not be the best answer, but it provide some thoughts that may bring better experience to users. Designing a perfect interface is impossible, but every application should try best and make progress with the changing trends of the time and generations.

 

References:

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

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

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

 

Design Thinking and Web

Design Thinking and Web

Yingxin Lyu

“The design for the Internet and the Web as an integrative platform are extensible and scalable as new developments and hybrid technologies emerge for the Internet/Web system.”1 Web is a modular complex system and it has many subsystem technologies. Like the example of civil aviation system, Web has many different parts of subsystems work together.

The first layer is various protocols, like HTTP, IP, TCP, UCP. “A protocol is the rules governing how two computers connect to each other – how they break up data into packets and synchronize sending them back and forth.”2 Thus, it is like a gatekeeper, or a guaranteed mail service, sending and receiving data packets in the first place. They are the components of Internet, so in this layer we can see the intersection of Web and Internet. Second, there are some programs invented for Webs in order to achieve some goals. For example, Google uses software called Googlebot to browse and download pages of other websites. Then Googlebot will send pages to another software, Google’s indexing program. Websites create different software to let them function better, or it will be like an normal interface, a page of book, presenting some informtion. The third layer maybe some special algorithms working for different websites. The Google PagRank is the search engine’s ranking algorithm, which is very famous for ranking the most relevant websites according to keywords.3 The fourth one are severs and databases that the websites have. They are important architecture of these websites. The databases center collect user’s information in order to understand them better and improve their experience. However, now it may lead to privacy issues. The fifth layer includes all hardware of computers and portable devices, like RAM, speakers, cameras. Web takes advantage of this hardware that computers and portable devices have and construct multimedia environment for users to enjoy various functions. Sixth, coding languages, like Java, are also an important layer because they create the interfaces of websites, and are the basis of websites. Moreover, learning these languages means that people can set up their own websites and create new world for users. Seventh, there are software in computers or other devices, like web browsers and media players. They are also necessary media for websites to achieve more functions. All these different technologies work in different departments, layers, and the summation of their work is the websites that normal users are using now.

However, not all these subsystems technologies appeared in one day. They are gradually invented, step by step, and finally develop into what Web now looks like. All of these technologies can be seen as artifacts that are invented on the base of other older technologies or ideas. For instance, the idea of a search engine comes from Archie, a tool for indexing FTP archives, allowing people to find specific files.4 Moreover, although it is a huge and complex system, users only interact with the interface, entering orders, pressing buttons, and achieving answers. Thus, the Web also applies abstraction in this point of view. It hides all the complicated things and let every user freely enjoy the benefits, like surfing websites, searching for information, shopping online, or watching videos. And that is the value of the Web: “it enables human communication, commerce, and opportunities to share knowledge.”5 It is a black box for most of users but not everyone because people still can learn the coding language and create their work in Web world, which may lead to further development of the society. The Web is open to change and creation. Now, Web with streaming and clouds construct a binger system. These subsystems connected with each other, make the virtual world more and more attracting, and bring a lot more benefits to people.

 

References:

  1. Martin Irvine, Intro to the Web: Extensible Design Principles and “Appification”
  2. Ron White, “How the World Wide Web Works.” From: How Computers Work. 9th ed. Que Publishing, 2007. P. 361.
  3. Ibid,
  4. “The First Search Engine,Archive.” n.d. Accessed November 11, 2020. https://web.archive.org/web/20070621141150/http://isrl.uiuc.edu/~chip/projects/timeline/1990archie.htm.
  5. “W3C Mission.” Accessed November 11, 2020. https://www.w3.org/Consortium/mission.

Understanding of “Internet”

Understanding of “Internet”

Yingxin Lyu

Now, people can say they are “on the Internet” at any time. It is hard to find one thing that people do in daily life does not need connecting to Internet. However, what does it means to be “on the Internet”? It may look like a huge spider web with thousands of nodes, and people are on those nodes. With the thread between nodes, they are connected and they can share information. A person with his or her devices that can connect to the Internet, as an entity faces with the device, and behind the device, there is a huge network. The entity chats with friends, so they send messages to each other, then communicate and socialize. In this case, he or she is on the Internet means the person can send his information through the network to friends who are physically separated from him or her, or receive friends’ information. The information runs through local area network (LAN), a router, and a wide-area network (WAN), and it goes through a set of protocols, and finally arrive at the destination1. Moreover, the person logs in Google, types the keyword, and search for desired information. He or she first sends order to the Domain Name Service (DNS), than the website address is translated to the Ip address of Google2, so the finally the interface of Google shows on the screen. Then the person’s keyword is transferred to Google’s server and it filters information related and sends to the user. The entity is “on the Internet” if he can go through these processes. No matter what interaction people implement through Internet, like chatting, searching, browsing, or watching videos, the essence of these things is receiving and sending information. Thus, People are “on the Internet” means they can go through a lot of processes to send and receive information with devices.

However, most people tend to consider “the Internet” as a totalized, reified, or uniform “technology”. It is hard to teach everyone to understand the huge network processes and technologies, and protocols behind Internet, but we can use metaphor to enlighten people, leading them to consider Internet as a network with subsystems, subcomponents, and social institutions orchestrated to work together. In Code.org Video Lessons, they metaphors the process of downloading a music as sending packages, and TCP is compared to a guaranteed mail service. Similarly, we can compare the Internet logistics process. That is, whenever you type a sentence or key word in a search box and press the “enter”, it is like you prepare a gift and put it in the package, then give it to the carrier. The keyword is not just show up in the screen, you keyword, or order, is translated in to binary language and go through protocols, servers. Like the package is transported first by the carrier to the small warehouse that keeps all packages of the nearby district, and then by tracks or planes to the other city, arriving at a big warehouse, next it will  be distributed to smaller warehouse, and finally the carrier will sent the package to the receiver. This example is transparent if we try to compare the process of chatting to it. People sending a message to their friends just like sending a package, and they receive them as the same way. There is also a big network of logistics management, and it is more familiar to people, using such a metaphor will let the Internet with its whole big system easy to understand and acceptable.

It is crucial for more people to understand that “Internet” is not a uniform “technology”. Knowing that Internet is a big system designed elaborately will inspire people to apply the similar design idea to create new network design.

 

References:

  1. Ron White, How Computers Work. 10th ed. Que Publishing, 2015.
  2. Denning, Peter J., and Craig H. Martell. Great principles of computing. MIT Press, 2015.

Golden Rules of Interface Design

Golden Rules of Interface Design

Yingxin Lyu

First of all , I want to apply some key concepts1 to WeChat application. WeChat application has done a good job in sticking to the eight golden rules of interface design. The first rule is to strive for consistency. WeChat has its theme colors green and white, which are the two color of its icon. Thus, these two colors become important elements to construct the main user interfaces of the app. The background of the user interface is white, and icons at the bottom are green when being chosen and white otherwise. In the chat user interface, the colors of text bubbles of two sides are green and white. Moreover, font design and size are identical according to different functions, and menu style keeps the same in the app.

Secondly, the app is friendly to novice, intermittent users, and experts. The four main interfaces are guided four patent icons at the bottom and they are sequenced by frequency. The most frequently used is chat user interface with a “add” icon at the top of the interface, so a novice can easily find it, add friends, and chat, even if he or she does not discover any other functions. In addition, the chat interface is the same as text interface of smartphones, so users can learn how to use it very quickly. For expert users, the place of each function is fixed and the classification is reasonable and learnable. They can use most of the frequent functions within about three steps.

Thirdly, in the recent year, WeChat offered a new function, that is, users can retract their messages in two minutes. It is the proof that the app tried to permit easy reversal of actions. The new function is very surprising and user-friendly. Sending a text to a wrong person or sending the message with mistakes really make people annoyed anxious, but now WeChat offer users to correct their errors, to retract their mistaken messages, which may be a strong wishes for many people for many years.

The last rule that WeChat sticks to is to reduce short-term memory load. Every picture and video received through WeChat will be downloaded and saved in the phone, so the user only need to download them once, and then they will become long-tem memories. Moreover, pictures and videos shared by friends in Moments will also be download and saved, so it also reduces short-term memory. Thus, the app will occupy a quite big part of smartphone storage after using for years. The prerequisite of saving all these kinds of materials is to click the materials and let the app to down load them, or these materials will be deleted automatically in about three days.

For the second part of the question, I think nowadays touchscreens become a large part among all kind of technologies that carries software and networks because they shortened the translational distances, providing people with chances to have a closer interaction with devices. In the future, the distance will become shorter and lead people to stronger direct manipulation2. People prefer to interact with touchsreens, so designers transfer software controlled by mouse and keyboard to finger controlled one. With various technologies, like pixel map, transparent conductive layers, designers let users’ fingers to take the job of the mouse, causing the situation more and more simulated.

In order to design an interface for users, designers must anticipate users’ behaviors and psychology when communicating with the interface. However, it is impossible to anticipate every possible situation, so designers will make the interface familiar, understandable, and learnable. I still remember my first time using an iPhone, because there were only four buttons, I tried to press tese one until on the screen there showed “slide to unlock the iPhone.” This is a good instruction that guides users to the right way. Now, Apple removed home button, and invented new gestures to use “full screen” iPhones. This time it will be hard for me to try to press the buttons to activate the iPhone, so Apple provides an instruction for new users after their just completing setting up new iPhones. Anyfeature matches interface design rules will make the interface learnable and user-friendly. So I think they are important and practical things that are necessary to learn and keep in mind.

 

References

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

Conceptual Design Steps

Conceptual Design Steps

Yingxin Lyu

In Lev Manovich ‘s article1, the author describes Kay’s design principles. Alan Kay first defined computers as “remediation machines,” which means that software functions of computers can continuously be remediated by people and become more and more powerful. After trying to transfer various media into software and let them function on computers, computers become “personal dynamic media.” The reason why Kay wanted to turn computers, which were calculation machines, into metamedia functional machines was that he hoped that people could use them for learning, discovery, and artisan creation. It is a huge step from a calculation machine to a “personal dynamic media.” People always found it hard to leap out the established fact, but many Kay and his team created new ideas and ways to remediated computers, which transferred a computer as a tool used by people when inputting orders into an involver that involved in a two-way conversation between the user and computer.

With the remediation of media software in the computer, people become more and more creative and productive, and only people who are specified in some media field, but ordinary people can use these media software to create and produce. Before, people can only view paintings, listening to music, watching videos on computers. Now, they can use Photoshop to create their works or with a pencil and graphics tablet, they can draw in digital way, use Audition and other software to produce their music work, and use Premiere to create their videos. In the nearly future, different media system will combine and generate new media tools and new types of media2. Now, virtual reality technology is an example of combination of video, music, game and so on, and there will be more.

The second design step is Kay’s “simulation” in media3. In order to let media easy to be learned and controlled by people, simulation is an important step, and it bring more possibilities to more media to be invented and developed and made them more universal. That is, making an e-book looks much alike a real book, and let people feel accustomed when seeing it. It makes me recall the design principle affordance, or signifier. Until now, making the functions of how a new designed artifact works transparent to users is still so important. Notability, an application in apple store worked as note-taking software, is still working hard in order to design the interface more and more look like a real notebook paper, discover more functions, and make them more user-friendly. For example, it has a good classification system, so now users can put different kinds of notes, pdfs, or word documents into different folders. When users need to draw or take notes on certain document, they can set your own favorite pens with certain color, size of the brush, and stroke style.

Moreover, Kay did not just imitate paper but also create “magical paper”3. Kay did not forget take advantage of dynamic media in computers, combing simulation, made computers more and more multifunctional. The example mentioned in the article “text becomes a graph”4 is what we are doing in our daily digital life. People text with their friends and the content are not limited to words and sentences but also including photos, videos, music and so on. Since more and more new kinds of media come out these days, people can also add those things on the “graph”. For example, when people chatting with friends through instant chatting applications, they not only text, but also share a lot of other media on the “graph”, the interface of chatting, like music, voice message, photos, videos, and links from other applications. Maybe in the future, the graph will develop into a new media, and more other media can be shared and presented on the graph.

 

References:

  1. Manovich, Lev. Software Takes Command. New York: Bloomsbury, 2013.
  2. Kay, Alan. “User interface: A personal view.” The art of human-computer interface design (1990): 191-207.
  3. Manovich, Lev., 64.
  4. Manovich, Lev., 71.

Computational Thinking and Problem Solving

Computational Thinking and Problem Solving

Yingxin Lyu

When I learned the Basics of Programming courses on Code Academy website, I found out that many practical problems are transferred into a mathematical or logical problem, which made many troublesome problems become clear to understand and solve. For example, the course uses a hamburger-making process to explain the concept of function. It is easy to understand that making a hamburger is step by step, but for many other problems, usually it is not clear about how to carry it out in such a way. However, if people can decompose a complicated problem into clear smaller and easier problems that can be solved in sequence, like a computing way of problem solving which translates solutions into instructions easy enough for computers to understand and execute, and that is as what Evans writes in the book: “computer scientists think about a problem as a mapping between its inputs and desired outputs, develop a systematic sequence of steps for solving the problem,”1 the problem solving process of practical problems will be far more efficient.

Another example is the concept of conditional structure. If applying the concept in the problem solving process in reality, the problem will be processed in a quite logical way. It is just like a reminder for people to always have a plan b, but actually they need to take as many conditions as possible in order to prepare for any probable situation that may appear when coming across a problem. Let’s suppose that a company is going to publish a new application, but before that, they plan to invite some users to experience the beta version of the app and give their feedback in order to ensure the app will be a success. Thus it is important for a manager to predict what kind of situations may happen after the test. First, there may be no severe problems and the app runs well at most of the time, so the company can publish the app as scheduled. Second, if there come some severe problems that lead the system to break down often, the schedule must be delayed, so how to resolve the delaying time? Third, if the users gave a lot of advice, which ones should the company take and make a change, and which ones should it omit and ignore? Should they accept and resolve all the advice? The manager should take all possible situations and outcomes in advance like a programmer inputs instructions including all possible situations may happen in a program. Computer science is invented to transfer practical problems into a way that computers can understand and solve them. Now, people take advantage of it to solve the problem by themselves, and that’s the circulation which leads human society keep stepping forward.

Combining what Wing2 describes as one of characteristics of computational thinking, it is “a way that humans, not computers, think.” Thus people can take full advantage of using it, whether to control computers, or solve any other kinds of problems in reality. To explain more about the point, coding language is a good example to prove it. In primitive society, people invented language because they want to communicate with others to solve problems. Now, people want to communicate with computers in order to solve some bigger problems, thus they invented a new kind of languages. These languages are simple, clear, and understandable to both humans and computers. Moreover, if a person can apply the computational thinking in his or her professional field to solve problems with efficiency, he or she must be very outstanding. This can explain that “one can major in computer science and do anything.”3 Having a good command of computational thinking is important for anyone.

 

References:

  1. David Evans, Introduction to Computing: Explorations in Language, Logic, and Machines. 2011 edition. 16.
  2. Jeannette Wing, “Computational Thinking.” Communications of the ACM 49, no. 3 (March 2006): 35.
  3. ibid.

Shannon’s Transmission Model

Shannon’s Transmission Model

Yingxin Lyu

In Shannon1’s original diagram for the transmission model, there are five main elements: information source, transmitter, noise source, receiver, and destination. In addition, when inputting information source into the transmitter, it should be first encoded into binary language to protect the integrity of the source information. It should be decoded before it arrives at destination. Noise may appear in every part, which will lead to misunderstanding or lack of understanding of the information source.

Taking social network as an example, if a person wants to post some information on his or her facebook page, first, he or she need to what kind of information he want to post, photos, videos, or words, and that is information source. Then, the person will input the information with keyboard, or use camera to take photos or videos. In the process these information being stored in the smartphone, they have been encoded in binary language. Then, this coded information will be transmitted through Internet, and decoded into original format, words, photos, or videos, to be present on the screen of receivers. Moreover, the noise can exist in any part of the process. For example, the person who uploads the information may input some wrong information, or the internet doesn’t work well which leads to the incompletion of information uploading.

However, the signal-code-transmission model is not a description of meaning, because it only presents how a medium transmits information, and the function of understanding is only owned by human beings. According to The Information Paradox2, “Information always has two parts, sign and referent. Meaning is the association between the two.” Now the model only provide a way about how signs, as a part of meaning, being transmitted by media. As posts on Facebook, what people input words that they want to say, but the real meaning of these words still need other people to understand. Smartphones cannot replace humans’ brains to understand the meaning; they only present and transmit. The referent of a sign can be understood by human, and now it may also be received and processed by AI system, but only a medium worked as transmitting tool cannot describe and understand the meaning.

Even in the current society, the model can be applied in many digital products, like smartphones, interactive applications, computers, and so on. It is a very broad description of how information transmitting tools work. For these tools, they are actually machines, so they need to follow some rules to work, and the binary system provide them a rule to encode and decode information input. When they are working as the model, they are following the rule, translating each word or signal into the combination of 1 and 0, or performing the adverse process. The process is computational and mathematical. However, symbol system can never be simplified as such a mathematical process. Letters, Words, and sentences can be translated into binary language in a constant way, but translation from one language to another is a very demanding process. Even now, we got AI technology, virtual reality, and many other very advanced technology, but a human translator is still cannot be replaced by a kind of machine. The reason is that human’s symbol system is a great and complicated work that cannot be understood completely by machines which can only follow the rules.

References:

  1. Shannon, Claude E. “A mathematical theory of communication.” The Bell system technical journal 27, no. 3 (1948): 379-423.
  2. Denning, Peter J., and Tim Bell. “The information paradox.” American Scientist 100, no. 6 (2012): 470-477.

Affordances and Interfaces of Book and E-Book

Affordances and Interfaces of Book and E-Book
Yingxin Lyu
Books have many affordances. As mentioned in Introduction to Affordances, Constraints, and Interfaces1, they provide paper as surfaces for people to write, read, and print, their shapes are for users to hold while reading, they are portable, and they can be stored in bookshelves. Besides these ones, I tried to find other different affordances.
First, because more people are right handed, they tend to write from left side to the right. Similarly, they read from left to right, thus the book is designed to open from left to right, which allow people to read in the way they are accustomed to. In addition, the affordance is more like a perceived affordance worked with cultural conventions, as Noram’s2 saying. Second affordance is related to what Norman defined as “physical constraint”. He uses a good example: “it is not possible to move the cursor outside the screen.”3For a book, at the end of every page, the reader will know the sentence, or the story is not end although on the present right side of the paper, there is no more content. He or she will turning  the page and start to read one new page from the left side instead of trying to discover more content in the original right or left side pages. The reader knows the constraints, and the “physical constraint is closely related to real affordances”.4
Moreover, about the concept “interface”, Herbert Simon proposes that “An artifact can be thought of as a meeting point – an “interface” in today’s terms – between an “inner” environment, the substance and organization of the artifact itself, and an “outer” environment, the surroundings in which it operates.”5 Thus, a book can be considered as an interface, and its inner and outer environment can be various. First of all, the substance and organization of the book itself is the words or pictures printed in it, or the content; and the surroundings in which it operates is anywhere the reader is, a study, a classroom, or an underground train, but more specific, it must be near the reader to read. Then, it can be summarized as the interaction between the content and the reader. The book shows something readable and understandable, and the reader tries to learn and understand something shown in the book. Now, trying to apply the definition of “interface” as a technical term, that is, “an interface is anything that connects two (or more) different systems across the boundaries of those system”6, to the interaction between the content and the reader, the content actually refers to the knowledge world created by writer, or the editor, and the reader refers to anyone who receive the knowledge through the book. Thus the book, as an interface, helps the knowledge system created by the writer cross the physical boundaries to interact with readers, because the reader can hardly meet the writer or learn from him or her in reality.
Finally, when considering the transformation from the book to the e-book (or the e-book app in smartphones), the function of the book as an interface does not change a lot, but its affordances change in many aspects. First, it becomes far more portable. A physical book is not only larger but heavier; however, an e-book is very light with thousands of book stored in it, and its shape is better to hold with one hand. Second, the e-book imitates the function of how people turn a page with the physical book. This imitation is for a user to understand how an e-book page-turning function more quickly. Third, the constraint of the screen area (and is also the area for reading) let the user understand the end of a page.

References:
1. Martin Irvine, “Introduction to Affordances and Interfaces.” 4.
2. Donald A. Norman, “Affordance, Conventions, and Design.” Interactions 6, no. 3 (May 1999): 39.
3. Donald A. Norman, “Affordance, Conventions, and Design.”40.
4. Donald A. Norman, “Affordance, Conventions, and Design.”40.
5. Simon, H.A., “The Sciences of the Artificial. 3rd.” (1996).
6. Ibid., 4.

Canceling the Thought of “Technology VS. Society/Culture” Dualism

Canceling the Thought of “Technology VS. Society/Culture” Dualism

Yingxin Lyu

Artifacts have both technology or society/culture natures, but people should not treat these natures as two independent aspects; since modern technology artifacts can be seen as complex systems, people should also view them as sociotechnical ones. This writing will explain the point from two aspects: historical (or cultural) one and societal one.

First, modern “technological artifacts” are developed from ancient times and achieved cumulated advantages from the past, these cultural natures cannot be ignored. “Humans modified material objects”1, or artificial tool, were created in ancient times. These objects and tools were changed and evolved with the development of human society and culture. For example, houses evolved from caves, glasses bowls evolved from pottery ones, and smart watches evolved from bell houses. These artifacts evolved in such ways because people discovered finer materials and better techniques, invented more useful auxiliary machines, and created more specific and higher levels of needs. All these discoveries, inventions and needs are part of human history, culture and society. Thus the evolution and change of those objects and tools, or artifacts, to some extent, is the result of the development of human culture and society. Embracing the characteristic, a smart watch is not only a technology artifact, but an artifact which technological and cultural natures are intertwined with each other because the technology which lead people finally created it was developed with the progress of history and culture.

In addition, in modern society, these artifacts are called sociotechnical artifacts because they do not work independently with their users, but also the whole society. In Vermaas’s2 example, the world civil aviation system, with many components, is a sociotechnical system. The system not only embraces many modern technologies like airplane, X-ray, elevator and so on, but also many human involved parts like service staff as operators, customers as users, and rules and laws enacted by people, or society. Civil aviation is a big system which owns patent sociotechnical nature. If trying to apply this idea into a single “technological artifacts”, it will be surprising to find out that there is also a sociotechnial system in it. For example, the smart watch is not just a watch but has a lot of apps which are connected with a smartphone. For the user, he or she may only realize the interaction among the watch, smartphone and himself/herself. However, both the smart phone and watch are the tools for the user to socialize with others, thus they are endowed with social characteristics. Moreover, in the invisible processes of creating, producing, and legitimizing them, many people and societal things are involved. To be specific, there are companies which designed and created the product, factories which produced the product in large quantities, and rules and laws that are necessary for these products to enter the market legally and for those apps to operate legally. As a result, although it may only be a technological artifact for a user, actually, it is a sociotechnical one because it hides such a complex system.

References:

  1. Michael Cole, On Cognitive Artifacts, From Cultural Psychology: A Once and Future Discipline.Cambridge, MA: Harvard University Press, 1996.
  2. 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.

Cognitive Artifacts:Watches and Audio Players

I will describe two kinds of cognitive artifacts in the article, watches and audio players.

As an artifact to tell time, a watch is an evolving product of a clock. A clock is also a kind of cognitive artifact. Time is expressed by symbols (numbers) on the surface of a clock. With a clock, people can read the current time, document the length of time, or calculate the length of time. As the development of time, people invented portable clocks, and made them more and more convenient to use for everyday life. Thus, there came clock watches, pocketwatches, and wristwatches (mechanical watch). Then, people can not only read time by staring at the bell tower or listening to the bell, but also know the time when they were working in the factory and calculate how much time is left if they didin’t want to be late. The first half of the watch development history shows that people have more chances to interact with “time”. Later, electronic watches hit the market. With more functions and more precisely expression of time which applies millisecond as the minimum unit to calculate time, now people can communicate with “time” in more ways. For example, anyone can use it to record running performance, or use it as a alarm, or read time in late midnight without light. Now, the latest version of watch is smart watches, which expand the scope of functions of a watch in a surprising way. The smart watches can corporate with smart phones, so users can not only interact with “time”, but other apps in the smart phones. As Norman says “When the informational and processing structure of the artifact is combined with task and the informational and processing structure of the human, the result is to expand and enhance cognitive capabilities of the total system of human, task, and artifact.”

An audio player has a language or system to process (input and output) the audio signal. With such a player, people can record, review, and play sound. Its supporting symbolic system is sound and music. In earlier times, sound was recorded in different kinds of media, thus there appeared different audio players, like LP players, cassette players, and CD players. The portability and capacity become better and better with the development. Latter, digital audio players came into reality with better portability, larger capacity, higher audio quality, and more extra functions. Thus, people can pleasantly enjoy music and sound in more situations. Now, audio player has become a function of a smart phone. The audio player’s symbolic system has become a small part of the smart phone’s integrated symbolic system. Wherever a user go, wherever the smart phone goes, and wherever the audio player goes, the interaction between the user and audio player is expanded to the largest extend.

References:
Donald A. Norman, “Cognitive Artifacts.” In Designing Interaction, edited by John M. Carroll, 17-38. New York, NY: Cambridge University Press, 1991.
Zölzer Udo, “Digital Audio Signal Processing.” John Wiley and Sons, 1997.