Introduction
Since the invention of the first digital computer in the 1940’s, how humans and computers ‘talk’ and interact with each other has evolved from physically navigating a computer the size of a room to cradling one in the palm of our hands. In our 2021 reality of working remotely, attending school online, and navigating socially distant interactions–our screens have become the main conduit through which we touch to connect to the world around us. I wanted to explore how developments in technology (also referred to as input devices) shaped the haptic exchange between users and the computer screen. Did the introduction of the computer mouse or a continuous scroll ball change the way we communicate? This timeline aims to visually map the evolution of devices that transformed human-computer interactions and consider how that shaped the way we communicate with each other.
Process
In this visualization exercise, I wanted to select a topic that utilized the interactive potential of TimelineJS, an open-source tool developed by the Knight Lab. The theme of my topic explores the history of devices that shaped the way we ‘talk’ with and through our computers. I thought this idea would be fun to convey through a visualization tool that prompts viewers to scroll, click, and explore on their own.
TimelineJS uses a Google Sheet template to input and format data for each component (slide) of the timeline. In addition to adding the date, title, a description, users can upload multimedia and format the background image and color. The Sheet is then published to the web and the timeline is generated by pasting the Sheet URL through the TimlineJS website hosted by Knight Lab.
Inspiration
The topic for this timeline was partially inspired by A Scrolling Lecture on the Computer Mouse, a performative web browser lecture by Emma Rae Norton. The lecture is presented on a web page that requires the user or attendee to alternate scrolling through two columns to advance to the next ‘slide’. The interactive presentation impactfully conveyed Norton’s presentation pondering the impact and development of the computer mouse on gender and computing.
In my research, I came across Some Milestones in Computer Input Devices: An Informal Timeline created by Bill Buxton that focused more on historical information and content than visuals. I also referenced and drew inspiration from the online exhibition Input & Output by the Computer History Museum (CHM). The CHM exhibition plays with a linear format but also breaks from conventional chronological order in favor of categorizations.
The history of input devices is incredibly vast, so I decided to select devices based on familiarity for commercial and everyday users with some slightly absurd designs to highlight the creative patents along the way. Between the sources and inspirations listed above, I selected eight timeline components. I drew additional descriptive text from both Buxton and the CHM exhibitions in addition to Wikipedia pages to corroborate details such as date and inventor.
I debated about starting the timeline with the QWERTY typewriter but decided because of its analog conception I wanted to start with a device designed to communicate with a computer. So I started with the DATAR Trackball because it highlights the first iteration of a familiar mechanism we still use today in computer mice while using a repurposed bowling ball in the first prototype!
The timeline is not meant to be a comprehensive portrait of the full history of input devices. Instead, it aims to visually explore a range of devices that have shaped the way humans interact and communicate through and with computers. I decided to end the timeline with the iconic first-generation iPhone, which has since shaped the trajectory of smartphone technology, input devices, and computer interfaces.
The Visualization
After collecting my timeline material, I input representations of the eight devices I selected with accompanying descriptive text and metadata in the Google Sheet template. I then used TimelineJS’s timeline generator to preview the results. This initial step informed my decision to include thumbnails of the devices in the timeline icons to provide users another visual clue if they wanted to select specific slides.
Title Slide:
In the TimelineJS settings, I left the landing page setting to always start with the title slide to ensure that any user would land on this page first to gain some subject context. For the design, I selected a patent drawing by Doug Engelbart for the background image to invoke an abstraction of the computer and a sense of the design process.
Background:
I experimented with repeating the device image as the background image, similar to some of the example timelines on our Info Vis website. After navigating through my timeline and discussing with my peer reviewer, I decided it made the timeline too visually busy. So I decided to set the background to grey. This also enabled me to distinguish between the title slide and the rest of the timeline.
Reflection
I appreciate how intuitive it was to learn and create a TimelineJS interactive visualization. Being able to preview visual changes I made in the Google Sheet with the visualization was extremely important to the efficiency of my design process. As I became more familiar with both the Google Sheet template and the resulting visualization, I did feel constrained by the limited font combinations and the layout of the media, title, and descriptive text for each slide. For example, on the Light Pen slide, I couldn’t find a larger image so there is an awkward gap between the image and the text. After reviewing with my lab peer, I decided to modify the slide texts to use wording to better contextualize each device.
In future iterations, I would like to explore linking out to other resources that would continue the dialog about the development of a certain type of technology or explore questions such as did the Rollkugel Steuerung Mouse give rise to continuous scrolling? Or compare multiple timelines to highlight where technology diverges from say the keyboard vs the mouse.
References
Slide Images:
Title Slide
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Research & Inspiration:
Buxton, Bill. (2021, January 15). Some Milestones in Computer Input Devices:
An Informal Timeline. http://billbuxton.com/inputTimeline.html
Computer History Museum. (N.A.). Input & Output
https://www.computerhistory.org/revolution/input-output/14/356
Hall, Mark. “Douglas Engelbart”. Encyclopedia Britannica, 26 Jan. 2021, https://www.britannica.com/biography/Douglas-Engelbart
Norton, E.R. (2019). A Scrolling Lecture on the Computer Mouse.
https://upbeat-kare-352ad4.netlify.app/
Norton, E.R. (2019, October 15). Close to the Metal. Real Life.
https://reallifemag.com/bad-metaphors-close-to-the-metal/
Wikipedia contributors. (2021, January 28). iPhone (1st generation). In Wikipedia, The Free Encyclopedia. https://en.wikipedia.org/w/index.php?title=IPhone_(1st_generation)&oldid=1003334928
Wikipedia contributors. (2020, December 10). PalmPilot. In Wikipedia, The Free Encyclopedia. https://en.wikipedia.org/w/index.php?title=PalmPilot&oldid=993392773