UI Design trends through the Years


Lab Reports, Timelines

Introduction

The aesthetics of our digital screens may seem to go through revolutionary design changes year after year. But many elements of the earliest graphic user interfaces survive to this day. Far from being unrecognizable, even the earliest and most rudimentary screen designs inform current visual design choices. From the first commercial desktop computer to the latest handheld mobile device, appealing user interfaces have been paramount in driving demand for tech products.

UI of computer in the 80s

Discussion/ critique

Most online resources outlining the evolution of UI design trends choose to do them in listicles. There are many advantages to this. Users prefer vertical continuous scroll to horizontal scrolling. Information is chunked, and sectional headlines are easily scannable. Listicles are also easy, fast, and cheap to churn out, which is really important for content producers. But they don’t give users a sense of time and how exponential the changes have become. Whereas previous design trends would hold for a decade, today’s best practices are only valid for two years. 

Materials

I used a web-based timeline tool called Timeline.js to display the evolution of UI trends. A free, easy to use, open-source JavaScript library, Timeline.js allows any user to create interactive timelines. 

An example of a timeline created with Timeline.js

I also perused a number of listicles from reputable web sources like careerfoundry.com and uxplanet.com to gather information on the subject. Choosing the most widely cited events in the history of UI in most of the articles, I aimed to create a timeline that would give users an overall sweeping understanding of the evolution of UI design trends without being encyclopedic and specific.

Methods

I researched the trends of UI design and selected articles with the most comprehensive content. I selected the major milestone events that change the direction of UI design and researched those specific events or design styles to get more insight and information. 

Data was placed in a Google Spreadsheet, which was provided by Timeline.js.

view excel here

I inputted the titles, dates, and descriptions into the excel and rendered the timeline. Everything worked well, so I selected images that would be representative of each of the topics.

Outcome

This is the final timeline. An interactive, simple, and easy-to-understand timeline about how UI design has changed over the decades since the invention and popularisation of the first GUI. As seen, changes occurred more slowly in the beginning, with technological changes focusing on the hardware and technological affordances of the software instead of the end-users’ experience. As we get closer to the present, changes occur more and more rapidly as user interface design is seen to be a major driving force of demand for tech products. 

view timeline here

Reflection

The history of UI is not long, but it has been fascinating to see how much has changed and how many things have stayed the same. The tech industry likes to advertise every change as a completely new, never before seen innovation. Many elements used by the first GUIs persist in the most modern cutting-edge designs. 

This timeline does not include every change and innovation in the UI design-sphere but certainly tries to include the most important ones. And in this case, where the subject matter is highly visual in nature, this timeline would have benefitted from having more images and more examples of different designs that fit into each trend.

Sources

Related posts:

  1. A Somewhat Brief History of Open-Source Software
  2. History of Infographics – An Interactive Timeline Of Most Iconic Infographics From 1630 to 1693
  3. History of Weather Map