Timeline of User Interface History


Lab Reports, Timelines

Image credit for Skystar Digital

Introduction:

Since the invention of computer, there is a long history of interaction experience between human beings and computers. In order to make the human-computer interaction process more direct, simple, accurate, smooth, enjoyable, we have invented entirely different types of user interface. From the rudimentary non-interactive batch interface to the modern highly interactive Natural User Interface, digital user interface from simply handles the batch of jobs without human intervention changed into the interface that requires instantly learning and adapting process from both human and computer. In this assignment, I summarized the six major historical breakthroughs in the journey of user interface development.

Materials:

  • TimelineJS for data and information visualization
  • Google Spreadsheet for data input and information collection
  • Wikipedia for historical materials research
  • Google Images for images and credit resources research

Method:

  1. Overall research for the potential topics in the history of visualization and analyzing the available information online. After the research, I decided to focus on the history of user interface theme because there are more than 5 major events during the UI development history.
  2. Collecting theme-related information from Wikipedia and online blog posts and picked up six representative types of user interface in the long history, and input the conclusion description in the Google spreadsheet. 
  3. Collecting appropriate media which can represent the quality of each user interface and give credit to the image creator.
  4. Using TimelineJS to visualize the data and verifying the accuracy of the timeline.
  5. Adding the background images to support the theme.

Results and Interpretation:

Timeline:

Screenshot for the Timeline (click image to see details)

Spreadsheet:

Screenshot for Google Spreadsheet (click image to see details)

References:

https://en.wikipedia.org/wiki/Batch_processing

https://en.wikipedia.org/wiki/Command-line_interface#History

https://en.wikipedia.org/wiki/3D_user_interaction

https://en.wikipedia.org/wiki/Text-based_user_interface

https://en.wikipedia.org/wiki/Graphical_user_interface

https://en.wikipedia.org/wiki/User_interface

https://en.wikipedia.org/wiki/Natural_user_interface#History

http://www.catb.org/esr/writings/taouu/html/ch02s02.html

https://www.cmo.com/features/articles/2017/7/20/a-brief-history-of-ui-and-whats-coming.html#gs.wgzA3YY

https://medium.theuxblog.com/a-short-history-of-computer-user-interface-design-29a916e5c2f5

Reflections and Future Directions:

From this assignment, I have improved my research skill and learned TimelineJS this useful data visualization tool, as well as WordPress this content management system.

During the process of the timeline creation, I found that user interface history is a very large and broad topic. It is difficult to decide the representative movement in such a long time period. At the same time, the time of many movements in this history are overlapping which needs deeper research to get the exact date period. In the meantime, I learned that the terminology of the different kinds of UI (such as GUI, TUI, NUI, etc.) is the conclusion term form the users that based on their interpretation of the interface character. Therefore it is easy to misunderstand the start and end date of the movement. 

In the future assignment, I will give it a look for the general history of one theme and pick one of the major movements to elaborate. For instance, I will pick GUI from the whole history and talk about the detailed events happened on this particular user interface type, instead of making the big conclusion for the whole UI development history.