A little history of the graphical user interface
By: Gema Gutiérrez Medina
Tags: Hci, UI, User Experience, Usability, Interaction Design

I’d like to start this article by talking about a documentary series about web design called “Abstract” on Netflix. In the second season there’s an episode on Digital Design that focuses not only the internal work of Instagram’s design team, led by Ian Spalter, but also references the beginnings of Interaction Design in general.

I myself totally recommend doing so. And you might find it helpful too, because in order for you to understand Interaction Design, you first need to become familiar with its beginnings.

Abstract Trailer

How did it all begin

Graphical User Interface (GUI) arose precisely due to research done by engineers from the Xerox company (Alan Kay, Larry Tesler, Dan Ingalls, David Smith, Clarence Ellis and a number of other researchers) with a background in Human Factors, and therefore expertise in human/machine behavior. In the early ’70s, these engineers created, in addition to laser printing and Ethernet, a small mobile box connected by cable to a computer.

Upon moving this little box, the user would subsequently see an arrow moving around the computer screen. Any idea what this little box was that they had invented? You guessed it… these brilliant minds had created one of the first-ever computer mouses, and in the process the computer/user interface.

“Command-line interface”

Some years after this creation was born in 1979, Steve Jobs visited the Xerox center to see firsthand this new invention. Although Xerox’s management didn’t recognize it’s true potential, in it Steve Jobs saw a revolutionary future in which users could to interact directly with a graphical user interface instead of a command-line interface. In fact, it’s said that Jobs made the following comment to one of the Xerox engineers:

“You guys are sitting on a gold mine! Why don’t you develop this technology? You guys could change the world with it!” — Steve Jobs

And so that was basically how Apple came to introduce this new concept into its operating system Lisa, thus managing to bring computer use to the masses. It was, of course, a revolution that would come about gradually, as not everyone could afford a computer initially due to how expensive they were during that era.

As for the people reading this who are not yet graphic designer experts, let me explain what the term ‘interaction design’ means. As you can imagine, every object designed needs a user to interact with it.

What interaction design aims to do, therefore, is reduce any negative aspect(s) experienced by the user during this interaction, thereby generating a pleasant user experience. A well-made interaction design should therefore be easy, effective, and pleasant to for the user to use.

Returning our attention to the documentary “Abstract,” one of the things which I most liked about it was that they mention interaction design various times throughout the film.

One example of this in the film is when Jeff Raskin’s son talks about how his father, an engineer for Apple who passed away in 2005, introduced an important contribution to the world of interaction design: the ability to click & drag objects with a mouse-controlled pointer as part of a graphic user interface.

For example, if you’ve ever used a Mac then you’d know that installing or uninstalling an application on its operating system is as easy as clicking on an application icon and dragging it to the trash. If you think about it, it’s actually quite similar to the real world, whereby if you want to throw something away you have to physically pick it up and carry it over to the trash can before dropping it.

It was a user interaction that nowadays might seem simplistic, but which in the late ’70s still didn’t exist. And it marked the beginning of a new era of human-machine interactions.

To understand user interaction, one must understand that interaction doesn’t begin with a mouse click. In reality, it starts with the user’s desire to complete an action and his/her understanding of the system; it is from there that he/she then begins to interact with the graphic interface. This you can learn more about by viewing my video on micro-interactions with Yolanda del Olmo, which can be found on Pildora UX’s official Youtube channel.

Here I’ll give you a basic example of this concept so that you can understand it better. Have you ever visited a web page which has elements that resemble buttons or links, but which in reality aren’t? From now on I recommend that, when using any graphic interface, you analyze whether the elements and components with which you are interacting have this same problem.

Keep this in mind because if you specialize in interaction design, it will be your responsibility to determine how a digital product or service behaves with its user.

Another common task that will befall upon you as a designer will be to make user flows, in which you will determine how your user navigates through your product in order to complete an objective or task. To complement these user flows, you will then need to create wireframes, which will illustrate the details of the user interaction(s) which you hope to achieve. One example of this would be detailing how you expect a drop-down menu on a webpage to behave with the user interacting with it.

In this article below you can find a reference guide for some of the most common user interactions. While surely you don’t know the names for all the different touch gesture commands, don’t worry because with time and practice you will.

In the meantime, however, it will probably be necessary to have at least some basic knowledge of them, so that you can adequately describe the nature of the user’s interactions with each element or component you design.

Conclusions

As you can see, understanding the basic concepts of interaction design is a total necessity for becoming a professional UX designer. Additionally, there are other rules and guidelines that will also help designers create a strong interaction design, such as the principles of design.

In addition to learning the basic principles of design, another thing which is essential to keep in mind is your end product’s users, something which companies too often forget. Before designing your initial user flows and wireframes, you should already have on hand the most important findings of the research phase involving real users.

This is important because if the company making the product doesn’t provide you with this, or allow you to conduct your own trial research, you will be unable to make data-based decisions on what the users’ needs will be. Making decisions based on assumptions and preconceived notions of what the user needs might be is a bad way to start your project.

Anyways, much thanks for taking the time to read it, and if you enjoyed it then feel free to share with others.

This article was originally published in Spanish, you can read here

References