History of HCI Design

The Association for Computing Machinery provides the following definition: 

 
“Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.” 

 
The image above is of the Analytical Engine, this is regarded as the first computer.  It was built partly by the British inventor Charles Babbage in the 19^th century which he worked on until his death in 1871.  He had originally been working on a similar simpler calculating machine called the Difference engine funded by the government.  When the funding ran out, he had further ideas and designed the fully programmable and automated mechanical computer that would carry out any given calculation, and so the Analytical Engine was created. 

Originally punch cards or paper tape were used.  Following that, the command line was introduced in the 1970’s allowing user interaction with typed commands. 

In the 1980’s computers became easier to use and so the computer was not only for offices it was more accessible to use them in homes with the graphical user interface being introduced. 

This was where Human-Computer Interaction (HCI) focused on the study of human behaviour, the design of user interfaces, and improved usability from a combined effort of researchers and practitioners in computer science, psychology, and design. This was the foundation for understanding how people interacted with technology. It aided the improvement of the computer being easier to learn or provide more efficient interaction. 

The mouse and keyboard became normal, and the icon-based interface allowed the computer to be more user-friendly with the concepts of folders enabling users to understand how information was stored and a desktop. This made user interaction much easier making computers more widespread. 

In the 1980’s Software and System Useability testing became more common including psychology experimenting techniques. 

Personal devices became more mainstream providing self-expression whilst enriching the user experience providing play, exploration and pleasure.  The Graphical User Interface (GUI) has since become widely used in desktop applications, web browsers, handheld devices and computer kiosks. 

The dates of development of HCI are as follows: 

• 1623 Schickard makes “Calculating Clock”. 

This machine, with its six-digit design, had the capability to perform addition and subtraction operations.  Additionally, it featured a bell that would indicate an overflow condition. 

• 1674 Leibniz designs his “Stepped Reckoner” 

Had the ability to perform multiplication operations. Users could input operands of up to 5 and 12 digits. To initiate the multiplication process, the user would manually turn a crank for each unit in each digit. 

• 1820 de Colmar makes “Arithmometer” 

The first calculator to be mass-produced was capable of performing both multiplication and division operations. It was also considered the most dependable calculator of its time. This calculator remained on the market for approximately 90 years. 

• 1889 Felt invents the first printing desk calculator. 
  The Comptometer, a key-driven mechanical calculator, holds the distinction of being the first commercially successful calculator of its kind.  Patented in the United States by Dorr Felt in 1887, it revolutionised the calculation process. 

The key-driven mechanism of the Comptometer allowed for remarkable speed, as each key instantly added or subtracted its value to the accumulator when pressed. Skilled operators could enter all the digits of a number simultaneously, utilising as many fingers as needed. 

Early Beginnings (1940s-1950s): The origins of HCI can be traced back to the early days of computing when scientists and engineers were developing the first digital computers. Interaction occurred through punch cards and command-line interfaces. User interactions were highly technical and required specialised knowledge. 

• 1935 IBM introduces “IBM 601” 

A punch card machine was introduced that had the remarkable capability of performing one multiplication operation per second. This revolutionary machine gained great popularity, leading to the production of 1500 units. 

• 1945 Mauchly & Eckert “ENIAC for ballistics” 

This machine weighed 30 tons and occupied a floor space of 1000 square feet. It required 140 kilowatts of electricity to operate and was equipped with 17,468 vacuum tubes. 

• Enigma: German coding machine in WWII 

The Enigma machine was a cryptographic device created during the early- to mid-20th century, primarily employed to safeguard commercial, diplomatic, and military communications. Nazi Germany extensively utilised this machine during World War II across various branches of its military. The security of the Enigma machine was held in such high regard that it was trusted to encrypt the most classified and sensitive messages. 

(1970’s): The modern GUI (Graphical User Interface) we use today was first created at Xerox PARC by a team of researchers, including Alan Kay, Larry Tesler, Dan Ingalls, David Smith, Clarence Ellis, and others.  In the mid-1970s, they started working on Gypsy, the first bitmap WYSIWYG (What-You-See-Is-What-You-Get) cut and paste editor. By 1975, Xerox engineers showcased a Graphical User Interface with icons and the first pop-up menus. 
 

Graphical User Interfaces (1980s): The introduction of graphical user interfaces (GUIs) in the 1980s was a transformative period in HCI.  In 1981, Xerox launched a groundbreaking product called Star, which was a workstation featuring many of PARC’s innovations. While it wasn’t a commercial success, it had a significant impact on future developments, influencing companies like Apple, Microsoft, and Sun Microsystems. 
 
Apple Macintosh promoted GUI’s who laid the foundation for modern UI design.  By 1988, Apple sold a million Macintosh computers.  Microsoft Windows, replaced text-based interfaces with visual elements like icons, windows and a mouse pointer.  In addition, companies like IBM and Compaq began making their own computer mouse pointer.  This made computers more accessible to non-technical users. 
 

Usability and Cognitive Psychology (1980s-1990s): During this era, HCI began to draw from cognitive psychology to better understand how users interacted with technology. Usability testing and user-centred design methodologies gained prominence. Researchers like Donald Norman, a cognitive scientist who joined Apple as their User Experience Architect, emphasised the importance of designing for user psychology, leading to the concept of “user-friendly” interfaces.  He was one of the first to have UX in his job title and came up with the term ‘User Experience Design’. 

• 1990 – Adobe Systems launched Photoshop 1.0, a raster graphics editor. This program was exclusively for the Macintosh platform (Mac System 6.0.3) and demanded a minimum of 2 MB of RAM and an 8 MHz processor to run.  

• 1990 – Three university students, Alan Emtage, Peter Deutsch, and Bill Heelen, introduced a search engine named Archie. This search engine allowed users to locate and download particular files on the Internet by cataloging files on public FTP servers. Its name was derived from “archive,” with the letter “v” dropped, making it “Archie.” Archie is widely regarded as the world’s earliest Internet search engine. However, by the late 1990s, the search engine gradually faded from existence. 
   
• 1990 – At CERN, a research centre in Switzerland, a physicist named Tim Berners-Lee, who played a key role in creating the internet, made the world’s first web browser. It was called WorldWideWeb and could also edit web pages. But it could only be used with the NeXTStep operating system. Later, they changed its name to Nexus to avoid confusion with the World Wide Web (WWW). 
   
• 1991 – The Gopher system was made at the University of Minnesota. It used menus to help people navigate and find information. It worked using a client-server approach. Gopher combined the services of FTP, Usenet, Veronica, Archie, and WAIS. 
   
• 1991 – Tim Berners-Lee, Henrik Frystyk Nielsen, and Nicola Pellow created a basic web browser called the Line Mode Browser (also known as The Libwww Line Mode Browser). It was the second web browser ever made for the World Wide Web. 
   
• 1991 – Tim Berners-Lee, who made HTML and the WWW, put together the first list of websites called the WWW Virtual Library. It was organised into a tree with different categories and subcategories based on different fields of human activity or interest. 
   
• 1991 – Tim Berners-Lee, the creator of the World Wide Web (WWW), introduced the world’s first website at http://info.cern.ch/hypertext/WWW/TheProject.html. Regrettably, the original website has not been saved, and the link now displays only a copy from 1992.   
   
• 1991 – Tim published a document entitled HTML Tags. The document contained a description of the first 18 HTML tags: <title>, <nextid>, <a>, <isindex>, <plaintext>, <listing>, <p>, <h1>…<h6>, <address>, <hp1>, <hp2>…, <dl>, <dt>, <dd>, <ul>, <li>,<menu> and <dir>. The design of the first version of HTML language was influenced by the SGML universal markup language. 
   
• 1993 – Two students, Marc Andreessen and Eric Bina from the University of Illinois, made one of the earliest web browsers with pictures.  This browser, called Mosaic (full name NCSA Mosaic), could be used on different computers like Windows, and it was free. Because of this, lots of people all over the world started using it soon after it was released. They stopped working on it on January 7, 1997. 
   
• 1993 – A Dutch software engineer named Martijn Koster made the first Aliweb search engine (Archie-Like Indexing in the Web) just for the World Wide Web. In May 1994, he showed it to people at a conference in Switzerland.  Aliweb didn’t have a robot to find and list web pages. Instead, users had to tell it about websites by giving specific information and where to find them. 
   
• 1994 – Two Ph.D. students from Stanford University, Jerry Yang and David Filo, put together a list of websites initially called “Jerry and David’s Guide to the World Wide Web.” They later changed its name to Yahoo! in March 1994 and got the yahoo.com web address on January 18, 1995. Yahoo stands for “Yet Another Hierarchical Officious Oracle.” In March 1995, they added the Yahoo! search engine as part of the portal. 
   
• 1994 – Martijn Koster introduced the robots.txt standard (also known as Robots exclusion standard or Robots exclusion protocol) through the W3C www-talk mailing list. These rules in the robots.txt file are used to stop or limit search engines from visiting a website. 
   
• 1994 – Tim Berners-Lee started a global group called the World Wide Web Consortium (W3C). The group’s main goal is to create standards for the World Wide Web (WWW). For instance, W3C makes rules for languages like HTML, XHTML, XML, and CSS. Another thing they do is teach and create rules for making the web accessible (WCAG). 
   
• 1994 – The Mosaic Communications Corporation, later renamed Netscape Communications Corporation on November 14, 1994, introduced the first browser in a series known as Mosaic Netscape 0.9. Later versions were called Netscape Navigator. These browsers, especially Mosaic Netscape 0.9 and Netscape Navigator 1.0 (released on December 15, 1994), quickly gained immense popularity and became dominant in the market within just a few months. 
   
• 1995 – Opera Software, a Norwegian company, unveiled a new web browser known as MultiTorg Opera 1.0 to the public. It was unique because it used MDI (Multiple Document Interface) technology, allowing users to open multiple web page windows within the browser at the same time. Starting with version 2.0, the browser’s name was shortened to Opera. 
   
• 1995 – Michael Loren Mauldin, a researcher at Carnegie Mellon University, created one of Lycos’s earliest search engines. The search engine got its name from “Lycosidae,” which is a Latin term for a family of wolf spiders. 
   
• 1995 – The Danish-Canadian programmer Rasmus Lerdorf created the initial version of the widely used PHP 1.0 scripting language. Initially, PHP stood for Personal Home Page. In 1997, Israeli developers Andi Gutmans and Zeev Suraski revamped the parser, laying the foundation for PHP 3. They also altered the language’s name to PHP: Hypertext Preprocessor, forming a recursive acronym. 
   
• 1995 – As part of its bonus package, Microsoft introduced the Microsoft Plus! Internet Jumpstart Kit (later called the Internet Connection Wizard) for Windows 95. This kit included Internet Explorer 1.0. Initially, the original Windows 95 didn’t come with a web browser because Microsoft didn’t fully grasp the internet’s rapid growth potential. 
   
• 1995 – The source code for Internet Explorer 1.0 was derived from the older Spyglass Mosaic browser, which Microsoft had licensed. Internet Explorer 1.0 was quite compact, taking up only 1 MB of disk space, and its features were relatively limited compared to other browsers available at that time. 
   
• 1995 – Pierre Omidyar, an Iranian-American programmer, created a basic auction website known as AuctionWeb. It’s said that the first item he sold on the site was his own broken laser pointer, which fetched $14.83. Then, in September 1997, the website’s name was officially changed to eBay. In October 2002, eBay adopted the PayPal online payment system, and in 2005, it acquired Skype VoIP. 
   
• 1995 – Brendan Eich, working at Netscape, developed the initial version of an object-oriented JavaScript, which gained widespread popularity for building interactive websites. JavaScript subsequently served as the foundation for other programming languages, including ActionScript, used in Macromedia Flash. In 1998, JavaScript received standardisation by ISO. 
   
• 1995 – At the Digital Equipment Corporation research labs, a group of researchers, led by Louise Monier and Michael Burrows, developed the AltaVista search engine. AltaVista was known for its fast full-text search capability across a vast array of websites, thanks to high-performance hardware. In 1997, the first free online translator, Babel Fish, became integrated with AltaVista. However, in 2003, Yahoo! acquired AltaVista, and due to Google’s dominant position in the search engine market, the AltaVista project was discontinued on July 8, 2013. 
   
• 1997 – Search Engine Optimization (SEO) refers to a collection of methods and guidelines used to improve the rankings of websites in search results for specific keywords. The precise origin of the term is not well-documented. According to Danny Sullivan, the founder of Search Engine Watch, the term “Search Engine Optimization” was first mentioned in May 1997. 
   
• 1997 – During the peak of the initial browser competition, Netscape launched Netscape Communicator 4.0, a web application package. It encompassed various components, including the Netscape Navigator 4.0 web browser with CSS1 support, Netscape Messenger email client, Netscape Composer HTML editor, and Netscape Calendar. In January 1998, Netscape revealed plans to develop future versions of the software as open-source projects under Mozilla, making them freely accessible to users. 
   
• 1997 – Microsoft introduced Internet Explorer 4.0, which was incorporated into the Windows 95 and Windows 98 operating systems. It was also offered for free on Mac OS, Solaris, and HP-UX platforms. The way Internet Explorer was distributed and integrated into Windows later became a topic of legal disputes between the US government and Microsoft regarding potential abuse of their dominant market position. By early 1999, Internet Explorer 4.0 had achieved a market share of over 60%, playing a significant role in Microsoft’s victory over Netscape in the initial browser competition often referred to as the first browser war.  
   
• 1997 – The term Dynamic HTML (DHTML) was initially introduced alongside the launch of Internet Explorer 4.0. It wasn’t a new standalone language; instead, it represented the fusion of HTML, CSS, and JavaScript technologies to elevate interactivity and website dynamics. 
   
• 1997 – Macromedia unveiled the initial release of the widely used Dreamweaver 1.0 website editor. This editor enabled users to toggle between text and WYSIWYG (What You See Is What You Get) modes. Initially, the first version of Dreamweaver was designed exclusively for Mac OS, and it wasn’t until March 1998 that a Windows version became available. 
   
• 1998 – Two Stanford University Ph.D. students, Larry Page and Sergey Brin, developed the Google search engine. Google began as a research project with the goal of delivering accurate search results through a mathematical algorithm. This algorithm, later known as PageRank, evaluated the significance of webpages by examining how they were linked to one another. The name “Google” intentionally misspells the word “googol,” which signifies an extraordinarily large number – 1 followed by a hundred zeros (10^100). 
   

The World Wide Web (1990s-2000s): The explosion of the internet and the World Wide Web in the 1990s introduced new challenges, brought the first creation of web pages and opportunities for HCI. Web design became a critical aspect of HCI, with a focus on navigation, information architecture, and user experience on websites.   
 

Interactivity and connections (2001-2010): Web pages became more interactive. 

• 2004 – Facebook was founded, initially launched as TheFacebook before changing to Facebook in 2005.  

• 2005 – Google Maps provided a solution for users to get from A to B following step by step navigation and Google Maps API was shared enabling the maps to be embedded on websites.  Later that year trip planner, schedules and public transit options were available and then in 2007 real-time traffic news, interactive panoramas street view and mobile device compatibility was available.  YouTube was launched for publishing and sharing video files by three former PayPal employees, Chad Hurley, Steve Chen and Jawed Karim to be sold to Google in 2006 for $1.65 billion. 

• 2006 – JQuery Javascript library was created by Software Engineer, John Resig emphasising interaction between Javascript and HTML providing more ease for developers to recreate recurring events, animations or manipulate cascading style sheets.  Twitter was launched in 2006 allowing users to read and send short posts referred to as Tweets. 

• 2007 – Steve Jobs introduced the first iPhone allowing users to browse the web using Safari web browser.  Google launched the beta version of Google Chrome freeware browser in 2008.  

• 2009 – Facebook introduced its ‘Like button’ for users to interact and give a positive reaction to the content. 

Further advances (2010 – 2020):  

• 2010 – UX job roles were created and Pinterest launched their social network of sharing photos and creating image collections by topic.   

• 2020 – The Instagram app was published to share photos and short video’s later to by bought by Facebook in 2012.   

• 2013 – The creation of React Javascript library took place making it easier to create user interfaces and UI components for web applications and mobile applications.   

• 2014 – HTML5 version was adopted in 2014 for improved browser support.  In 2015 Microsoft Edge web browser was released.   

• 2016 – Figma was released as a design tool combining a native application functionality and browser-based accessibility. 
   

Mobile and Touchscreen Devices (2000s-Present): The rise of smartphones and touchscreen devices brought about a new era in HCI. Designers had to adapt to smaller screens and touch-based interactions. Mobile app design became a specialised field within HCI. 

• 2007 – During the Macworld Conference & Expo, Steve Jobs unveiled the inaugural iPhone smartphone model. This phone featured the Safari web browser, providing users with seamless web browsing capabilities. 
   

Social Media, Online Communities and further technology (2000s-Present): The growth of social media platforms and online communities transformed how people interacted with each other and technology. HCI design expanded to consider the social aspects of technology use, including issues related to privacy, security, and online behaviour. 
 

• 2002 – Netscape Communications Corporation made the source code of the Netscape Communicator 5.0 web browser publicly available, marking the start of a community-driven open-source initiative known as Mozilla. In 2003, the Mozilla Foundation, a nonprofit organisation, was established, building upon the foundation of the original project. 
   
• 2003 – Web developers Matt Mullenweg and Mike Little jointly crafted the inaugural iteration of the open-source content management system known as WordPress 0.7. This publishing system relies on PHP and MySQL technologies and is developed under the GNU GPL free software license. WordPress succeeded the b2/cafelog blogging platform. 
   
• 2003 – Apple unveiled its proprietary web browser, Safari 1.0. This browser employs the WebKit rendering engine to present website content. Initially, Safari 1.0 was offered as a standalone download, but in October 2003, it became the default web browser for the Mac OS X 10.3 operating system. 
   
• 2005 – Google Maps for desktop was created to offer an easy way to navigate from one place to another, simplifying the process of getting from “point A to point B.” Users could either click and drag the map or follow step-by-step navigation instructions to explore various locations, whether nearby or distant. Several months after its launch, Google introduced the Google Maps API, enabling maps to be embedded on websites. In December 2005, Portland, Oregon became the first city to adopt the Google Transit Trip Planner, which integrated public transit options and schedules into Google Maps. By the end of 2007, Google Maps had incorporated real-time traffic updates, interactive panoramas through Street View, and compatibility with mobile devices. 
   
• 2005 – Three ex-PayPal employees, namely Chad Hurley, Steve Chen, and Jawed Karim, introduced the YouTube platform for uploading and sharing video content. The very first video, titled “Me at the zoo,” was posted on YouTube on April 23, 2005, by one of its co-founders, Jawed Karim. This brief video featured a visit to the San Diego Zoo. In November 2006, Google acquired YouTube for a substantial sum of $1.65 billion. 
   
• 2005 – In April 2005, Google acquired the Urchin Software Corporation, a company working on a tool to gather statistical data about website users. In November 2005, Google introduced an improved version of this tool named Google Analytics. Since 2006, the basic version of this service has been offered for free. It allows website owners to monitor traffic, study user interactions, and track conversions. Google Analytics presently stands as the most used web analytics tool. 
   
• 2006 – Software engineer John Resig unveiled the jQuery JavaScript library during BarCamp NYC. jQuery places a strong emphasis on facilitating interaction between JavaScript and HTML. It simplifies the process for web developers to generate repetitive events, animations, or manipulate cascading style sheets. 
   
• 2006 – Jack Dorsey, Noah Glass, Evan Williams, and Biz Stone officially introduced Twitter, the social networking and microblogging platform. Twitter enables users to both read and post short messages known as “tweets.” Initially, the character limit for tweets was set at 140 characters. However, in November 2017, this limit was extended to 280 characters. 
   
• 2007 – On August 23, Twitter saw the first appearance of a hashtag (#) in a tweet by user Chris Messina, used in reference to the #barcamp conference. Six years after its launch, in March 2012, Twitter, the microblogging service, had amassed more than 140 million active users who collectively generated 340 million tweets daily. 
   
• 2008 – Google launched the beta version of its free Chrome web browser for Windows. In December 2008, the initial stable release of Google Chrome 1.0 became available. Starting from January 2009, Chrome became accessible for MacOS, and by February 2012, its first beta version for Android 4 was introduced. In April and May 2012, Chrome overtook Internet Explorer in popularity, becoming the most commonly used web browser. By 2018, Google Chrome had captured more than 66% of the global market share. 
   

Accessibility and Inclusion (2000s-Present): HCI increasingly focused on accessibility and inclusion, ensuring that technology could be used by individuals with disabilities. Guidelines and standards, such as the Web Content Accessibility Guidelines (WCAG), were developed to promote accessible design. 
 

Augmented and Virtual Reality (2010s-Present): Augmented reality (AR) emerged and virtual reality (VR) technologies introduced new challenges and opportunities for HCI. Designers explored immersive and spatial interactions. 
 

AI and Voice Interfaces (2010s-Present): The integration of artificial intelligence (AI) and voice recognition technology, portrayed by virtual assistants like Siri and Alexa, raised questions about natural language interaction and privacy. 
 

Ethics and Responsible Design (2010s-Present): HCI has increasingly focused on ethical considerations, addressing issues related to data privacy, algorithmic bias, and the responsible design of technology. 

Customer Experience: Is how customers feel about a brand or company based on their interactions. It covers everything from first hearing about a product to getting help after buying it. CX tries to make these interactions smooth, enjoyable, and reliable to keep customers happy and loyal. 
 

User Experience:  Is all about making products that work well for users. It means understanding what users like and dislike to create easy and satisfying interactions. UX designers make sure websites, apps, and software are user-friendly and enjoyable to use. 
 

Service design:  Is about improving the whole customer service experience, both online and offline. It looks at everything from how customers are treated to the technology and places involved. The goal is to create better, more customer-friendly services that keep people happy and coming back.