In the world of user experience design, there are some concepts that form the foundation of everything you learn afterward. The graphical user interface, or GUI for short, is one of these concepts.
Most modern devices and applications leverage a graphical user interface in their builds 鈥� they鈥檝e been a staple for decades, and that鈥檚 likely not going to change any time soon. So, it鈥檚 definitely worth understanding GUIs before diving deeper into UX.
In this post, you鈥檒l learn:
A graphical user interface (GUI) is a digital interface in which a user interacts with graphical components such as icons, buttons, and menus. In a GUI, the visuals displayed in the user interface convey information relevant to the user, as well as actions that they can take.
Today, it鈥檚 hard to imagine computers without GUIs. But, there was a time when we didn鈥檛 even have a mouse cursor. Let鈥檚 look at how GUIs came to be.
Before graphical user interfaces, users interacted with computers using character user interfaces, or CUIs. In a CUI, users type text commands on their keyboard to execute actions on the device.
While useful for programmers, CUIs were only really accessible to IT professionals and advanced users. The interface was confusing to novices, as well as inefficient since commands had to be memorized and typed correctly each time 鈥� not something that would appeal to a mass market.
Then, in 1981, Xerox released the first GUI in a consumer product, the Xerox Star. It鈥檚 a far cry from the interfaces used today, but marked a shift away from the text-based interfaces prior. It featured images, buttons, and colors that lay-users recognized.
A few years later, Apple released its first GUI operating system, Macintosh, in . Microsoft debuted its first GUI the following year in Windows 1.0. These two groundbreaking operating systems introduced icons to represent things like files, folders, applications, and buttons. Here鈥檚 what the Macintosh GUI looked like on start-up:
Xerox Star, Macintosh, and Windows marked one of the most significant advances in personal computing: Their interfaces were accessible to the general public. Now, the average user could do things like manipulate files and run scripts without knowing any commands or specialized programming languages.
Needless to say, GUIs are now the default for nearly every commercial digital product, from PCs and mobile devices to TVs, gaming consoles, and refrigerators 鈥� thanks to GUIs, you can press the 鈥渃rushed ice鈥� button on the screen instead of typing in your request every time.
In a GUI, visual elements represent actions users can take, objects that users can manipulate, and other information relevant to the user. Some common visual elements are:
Sometimes, GUI graphics are tied to real-world objects to represent their purpose and help users understand the functions available to them. For example, a directory (i.e., a group of files and/or directories) is represented by a folder icon, and the trash is represented by a trash can.
Users can interact with elements in a GUI in several ways. Most commonly, we click and scroll using a mouse on desktop computers, and tap a touch screen on mobile devices. All popular GUI operating systems and many software applications also allow interaction via keyboard commands (a key accessibility feature), and some also accept voice commands.
When the user initiates an interaction, the GUI typically responds with some signal like a color or size change in the clicked element, a sound, or another effect, and then the system carries out the requested action.
You likely use multiple GUIs every day, to the point where it seems obvious how they鈥檙e designed to work. However, decades of meticulous thought and research have gone into crafting interfaces that users enjoy, and designs continue to advance every year. For example, when new software versions are released, they often include updates to the interface for a better user experience. Most recently, VR and voice commands have gained traction.
The ultimate purpose of GUIs is to allow humans to interact with a device鈥檚 underlying code by separating us from the technical details and presenting a simplified interface to the user. This process is called abstraction, and is a key concept when designing and building interfaces.
To better understand what abstraction is, we can liken it to driving a car. In order to drive your car, you don鈥檛 need to know the specific details of how exactly your car鈥檚 engine and steering column work 鈥� that would be a long driving class.
Instead, these advanced concepts are abstracted away behind the car鈥檚 user interface: the pedals and the steering wheel. All a driver has to know is that pressing the gas pedal makes the car move forward and that turning the steering wheel makes the car move left and right.
The same is true for GUIs: Folder icons aren鈥檛 real folders on your screen, and when you drag a file into your trash can, you鈥檙e obviously not putting something in a real trash bin. These are merely abstractions of the underlying software code.
And, plot twist, abstraction goes even deeper than that: Software code is an abstraction of the computer鈥檚 assembly language and machine code, which itself is an abstraction of the computer鈥檚 hardware.
The key takeaway here is that these layers of abstraction allow virtually anyone to use computers, which are quite complex under the hood, in their daily lives.
You don鈥檛 have to look far for examples of graphical user interfaces 鈥� you鈥檙e using one right now. Most websites, web apps, software programs (e.g., Microsoft Word and Apple Music), web browsers (e.g., Chrome and Internet Explorer), and operating systems (e.g., Windows, macOS, iOS, and Android) have GUIs.
Airtable and other are prime examples of modern GUIs, seamlessly blending the functionality of a database with the ease of a spreadsheet. Data organization tools allow users to interact with visual elements like tables, forms, and kanban boards, which are intuitive and easy to navigate. Instead of typing intricate SQL commands, users can effortlessly drag and drop fields, create links between records, and customize views using simple clicks and selections.
Often, different GUIs are layered inside each other. For example, if streaming music using Spotify in my web browser, I鈥檓 working with the Spotify web app GUI (in orange below), which is inside the Google Chrome browser GUI (in green), which is inside my Mac鈥檚 operating system GUI (in blue).
Zooming in on Spotify鈥檚 interface, we see some instances of common GUI components, like buttons, menus, and sliders:
You probably use a smartphone too, which has its own GUI for its operating system and different GUIs for each of its apps. All popular websites adapt their GUIs to fit the size of the screen they鈥檙e on. This is called responsive design and is an essential consideration in GUI design today.
Today, every product with a screen has a GUI. Here鈥檚 why:
Graphical user interfaces are ubiquitous in personal computing, but they鈥檙e not universal. Some users prefer text-based interfaces, like executing actions via the . Here are some minor drawbacks to GUIs when compared to other interfaces:
Graphical user interfaces are so widespread today that we take them for granted. However, there was a time before GUIs when a lot fewer people used computers. The advent of the GUI marked a shift from a niche hobby by tech geeks to the new technological revolution we鈥檝e seen unfold over the last 30 years.
That鈥檚 why it鈥檚 important to take a step back and appreciate how much work has been put into making computers so usable. As a designer yourself, it鈥檚 on you to discover where we鈥檙e going next.
Editor's note: This post was originally published in August 2022 and has been updated for comprehensiveness.