A Graphical User Interface -
What is an interface?
What is a user interface?
Well?! What is it?
The space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine from the human end, whilst the machine simultaneously feeds back information that aids the operators' decision-making process. Examples of this broad concept of user interfaces include the interactive aspects of computer operating systems, hand tools, heavy machinery operator controls, and process controls. The design considerations applicable when creating user interfaces are related to or involve such disciplines as ergonomics and psychology. Generally, the goal of user interface design is to produce a user interface which makes it easy, efficient, and enjoyable (user-friendly) to operate a machine in the way which produces the desired result. This generally means that the operator needs to provide minimal input to achieve the desired output, and also that the machine minimizes undesired outputs to the human. --Wikipedia, User Interface
A Graphical User Interface -
census worker with punch card machine, 1940s, U.S. National Archives and Records Administration
The earliest era of computer / machine interfaces centered on the batch interface. Punch cards were the primary method to input data. Special key punch card were manually punched and batch-processed when fed into a machine. The result could be a printout or mechanical operation. Errors were common, and could be hard to understand, and in addition to syntax errors (erros from typing the code incorrectly) there could also be mechanical errors. Running these batches of punchcards could take a very long time: hours or days until a result was produced.
aka Command Line Interface
Teletype Model 33 ASR
Batch interfaces evolved over time into command line interfaces, which are input as text queries to a main system console. The system responds with output, usually text.
Early command line interfaces used a typewriter keyboard for input and teleprinters for output. Teleprinters evolved out of technology used for the telegraph since 1902, and later used in newsrooms to transmit information. In the 1970s video monitors became more common. Text output could be seen quicker. And simple pictures constructed out of text started to be seen.
Rogue, screenshot January 2020
The text user interface is still very relevant in the modern era, though mostly of use to expert users and fellow programmers. It can provide more comprehensive options, configurability and can be automated in ways that graphical interfaces cannot.
Pizza Party, Cory Arcangel and Michael Frumin, 2004
Doug Engelbart was a pioneering inventor and engineer working in human-computer interaction. At SRI International he led the Augmentation Research Center Lab and was responsible for developing the mouse, versions of hypertext, networking between computers, and early graphic user interfaces.
There is a clear mission embedded in the title Aumentation Research Center. Computers then, as now, were seen as devices to augment the capacity of humans. They were tools created and intended to extend our own innate abilities.
Doug Engelbart's first computer mouse, 1964
Xerox Alto opearting system
Xerox Alto
Notice how the screen was set vertically. Why do you think that was?
Clue: what was their metaphor?
The GUI was developed at Xerox PARC by Engelbart, Alan Kay, and other researchers in 1981.
Alto icons
Xerox Star Desktop GUI
Apple unveiled the Lisa computer with a GUI on January 19, 1983.
Macintosh Finder, 1985
Apple Lisa icons, 1983
Apple Macintosh computers were a huge success. They demonstrated that a GUI could help sell computers to a more general audience of consumers than the experts they were previously attracting.
Mac system icons 1.0, 1984
These icons were all created by designer Susan Kare.
Graphical User Interfaces quickly became the standard of every computer operating system.
Windows 1.0
Sun Workstation, OpenLook desktop, 1989
In the 80s and 90s graphical user interfaces evolved.
NextSTEP operating system
Steve Jobs was kicked out of Apple, and went on to found NextSTEP, later rejoining Apple and leading it to success.
Apple System 7
Windows cribbed elements from the Macintosh operating system.
Windows 95
Windows 98
Windows NT
Atari icons, 1985
Amiga icons, 1985
Windows 1.0 color icons, designed by Susan Kare
Mac OS X, 2001
Windows XP, 2001
Note: the "Start" button was created by Microsoft in 1995 for Windows95.
iOS
Microsoft Bob, 1995
In 1995, Microsoft attempted a radical reimagining of the desktop metaphor (also known as WIMP - Windows, Icons, Mice, Pointer) pioneered by Xerox Parc and adapted by Apple, Windows and others. They created a virtual 3D room scene populated by cartoon creatures and objects as an overlaid interface to the operating system. It was widely criticized and was quickly dropped by Microsoft. Users found it clunky, ugly, confusing. Microsoft Word's Clippy was a continuation of Microsoft Bob, also disliked by users, and was also eventually removed from the software.
Windows 1.0 from 1985
Click in the window to activate mouse. It's recommended to try this fullscreen (button in top right of window). Hit escape to exit fullscreen.
Try doubleclicking on applications. You can get back to the application selection by doubleclicking on the floppy disk icon.
What happens when you have two applications open? Can you figure out how to quit? To close an application, go to the 3lines hamburger menu icon on the top left, click and drag down to close.
Apple Mac System 7 from 1991
To test out: - Click on the Apple menu and drag down and release on the various applications listed there. Try the calculator. - Open the Control Panel and try the various system services there. Open sound, turn up the volume and try the alert sounds.
This is one of the most influential desktops and GUI systems ever. What do you find similar to your computer today? What do you find different? Are there things that confuse you?
We will be using 1990s Apple software Hypercard! You can access a web-based emulator here: HypercardAdventures.
Hypercard Stacks on Internet Archive
Generally you double click on the disk and then doubleclick on the name of the Stack.
Note: These are non-professional programs made in the 90s, generally for personal use or small communities. They may contain inappropriate or strange content! Use at your own risk. You can also flag content on Archive.org.
These run slow! Your own mouse does not necessarily align exactly where the mouse is on the emulator. Try running these fullscreen.
Recommendations:
Music recommendations as background while trying these: The Cranberries, Nirvana, Nine Inch Nails, Weezer, or anything listed in the Chaos Control Music Magazine #4
You cannot save your work.
Due: next Wednesday
Perhaps, looking at them now, it is the loneliness of early desktop interfaces that is their most alien aspect. Especially compared with the constant connection of the contemporary computing experience, early desktops feel distinctly apart. Each system was modeled after a clean desk, an undisturbed office, a focused workbench, an empty house.
Open up drawing software. You can use Photoshop, MS-Paint, Keynote, drawing software on your tablet, etc. You are also welcome to modify your physical desk. (Again, this might actually be your couch, bed, kitchen table) and you can also move physical objects into your desk area and re-photograph.
Now once you've finished arranging your desk and photographed again, import the image of your desk into your drawing software.
Draw, collage, use "clip art", write on, or otherwise modify the photo of your desk. You are making an alternative desktop. It could be your ideal desktop, a deconstructed desktop, a speculative desktop or something else. It doesn't have to look realistic. It should have at least 4 "icons". These icons are activities or applications or tools (sleep, writing, painting...). This is a virtual plan of a speculative desktop. What are the "icons" on your desktop? What activities and/or applications do each of your icons represent?
Submit your 3 images (original desk, computer desktop, phone screenshot) and your final image of your speculative desktop and description. Your description should describe what you made and each of the activities and icons and how they relate.
Sources: