Computer Age: Early personal computers & games — intro lecture 9

Finally we are going to talk about early personal computing and computer games. This is the beginning of what we are more familiar with compared to what we have talked about up to this point.

Early graphical user interfaces —Xerox Start 1981, Apple Lisa 1983, VisiCalc-IBM 1984

Early in the days — the 1970’s and 1980’s — of computers and computer programming, lots and lots of people were writing programs and playing games with networked systems in universities. Read more about this in the People’s History of Computing which tries to give another perspective of the growth and spread of computing that isn’t Silicon Valley centric.

Around this same time the folks at Xerox were creating early graphical user interfaces (1982) in a system called the Xerox Star. It’s the first time we are seeing real world physical metaphors being used in a visual interface. We are seeing overlapping windows like paper on a desk, icon triggered actions, and other interactions and symbols we take for granted now.

Steve Jobs saw a demo of this system and used it as inspiration (if not outright copying elements — depending on who you ask) for the Apple Macintosh which was released 2 years later. The Xerox star never took off — mostly because the price was unattainable by individuals.

The early computers — Apple, Commodore, Amiga, Windows—were all trying to break into the home computer market. They also start showing up in schools and a generation learned about history by playing the computer game Oregon Trail as part of their course work.

Early screen operating systems for Mac 1.0, Amiga 1.0 and Windows 1.0

Take a look at these old UIs from the early 1980’s up to today. Early Apple UI iconography and elements were designed by Susan Kare. In interviews she talks about trying to design using 24 pixels and creating understood metaphors for the interactions. She created the Lasso, the grabber, paint bucket, Chicago and Geneva typefaces, the first three generations of Apple iPod interfaces, The happy mac (a smiling computer welcoming users), the command symbol, and Clarus the dog, which was designed to indicate pages printing horizontal or vertical. trash can (for discarding files), the Mona Lisa face (letting people know the computer is working), and the clock (letting someone know the computer is busy and cannot be used)

Macintosh icons designed by Susan Kare

You can see how the early companies were borrowing and stealing GUI elements and metaphors in the race to create the easiest or most affordable home computer. As you look at these screens — what did Susan Kare do right, what did others not quite get and what has changed in the last 35 years?

Mac OSX 10.14 and Mac 1.0–2018–1984

You can see just from the elements shown that most of the interactions haven’t changed at all. We still use folders, there are still windows that mimic paper and files on a desk. But the graphics and the visual style has changed a lot.

This week I had my students check out the demo videos about the Xerox Star, Apple’s demo about the Mac and the conceptual video about the Knowledge Navigator — which Apple never built at the time but had influences over the direction of the Newton and then the iPad.

UI elements from the Xerox 6085 Workstation

Then they watched the short video with Jane Fulton Suri about the power of observation. Suri comes from IDEO but before she was there, she was pioneering the process of design research observation and ethnography relative to products and human factors—the video would have been better if it included her slides, but her lecture is interesting. Once she came to California, she met Bill Moggridge and after showing him her work she asked him to offer her a job. It was a little while later they linked up with David Kelley and IDEO was born. Suri has driven the design research process and innovation in research that has spread into all facets of UX Design Research, not just in IDEO.

The other half of this week we touched on early video games. First let’s learn a little about Jerry Lawson — who is considered the first black game designer. As a child, Lawson was inspired by inventor George Washington Carver and in the 1970’s was the only member of the Silicon Valley’s Homebrew Computer Club. In the mid 1970’s he was working at Fairchild Camera and Instrument Corporation as an engineer and designer. In 1976, he oversaw the creation of the Channel F, the first video game console with interchangeable game cartridges — released a year before Atari and other systems adopted this idea. When Atari released their cartridge game console, their name recognition overwhelmed the Channel F and pushed it into oblivion. Lawson helped create this industry but until recently he was not recognized for this achievement.

Screens from Oregon Trail

After watching the videos, I asked my students to follow the links to the Internet Archive and spend some time playing Oregon Trail 1990 version | 1992 version.

Pace layers, Stewart Brand

Some of the other reading for the week included reading about Pace Layers by Stewart Brand. Important concepts when we look at the rate of change across the evolution of the computer graphic interfaces and interaction changes.

The writing assignments given to my students for the week asked: How have the modern interaction design principles and designs seen today in 2020 evolved from the first glimmers of graphical user interfaces in the Xerox Star (1981) and the UI designed by Susan Kare for the Macintosh that became available in 1984. What layers have changed? Which have stayed essentially the same (or changed very little)? Which continue to change as we envision future ways to interact with technology?

The second assignment was to play the Oregon Trail game and then pull together some thoughts about why this game was so popular with kids for years.

Xerox Star part 1 — 1982 — (YouTube)
Xerox Star part 2—1982 —(YouTube)
Apple Knowledge Navigator—1987 (YouTube)
Jane Fulton Suri — Finding Inspiration Through Observation (YouTube)

Note: All these lectures were delivered via video with related slide decks of images. Following the intro, students had a series of readings and videos to watch related to the topics covered in the lecture or the overall time frame. They were then given a set of prompts to stimulate their thinking and writings which ended up in a class blog.

Computer Age
Computer Age: Christopher Alexander, Muriel Cooper and Architecting Space, intro lecture 8

Silicon Age
Silicon Age: Visioning the Future, intro lecture 7
Silicon Age: The Mother of All Demos, intro lecture 6

Industrial Age
Industrial Age: Mid-Century Designers, Designing For People, intro lecture 5
Industrial Age: Between the Wars, intro lecture 4
Industrial Revolution & Manifestos, intro lecture3

In the Beginning
Read intro lecture 2 — In the Beginning Part 2
Read intro lecture 1 — In the Beginning Part 1

Setting the Stage
See the visual syllabus and how I approached putting this class together