A graphical user interface (GUI) is the medium through which the user interacts with a computer or any electronic device. You’re very likely reading this article through a GUI. Users can interact with a GUI using a mouse, keyboard, touch screen or even through voice commands depending on their device.
Before GUI, we interacted with computers using written commands, or what we call CLI (command-line interface). If I want to view the content of a folder named docs in a CLI, I would open the command prompt and type something like cd docs, which will open the folder, and then ls to show me the content of this folder. On the other hand, a GUI allows me to just double-click on the folder’s icon, and I can view its content right away.
Converting to GUIs made technology more user-centric and widely accessible. GUIs have enabled technology to become part of our daily lives, regardless of whether or not you know how to program.
Examples of Graphical User Interfaces
We interact with GUIs every day. From the graphics incorporated into ATMs, to video game animations, to smartphones’ operating systems, GUIs are everywhere. Popular GUIs we use daily are Microsoft Windows, macOS, Android and Apple’s iOS. GUIs are also how we interact with the internet through web browsers like Google Chrome, Microsoft Edge and Firefox.
How Does a Graphical User Interface Work?
How we interact with GUIs has developed rapidly as technology advances. We went from a mouse and keyboard to touch screens and voice commands in a matter of years.
Every GUI has a collection of images, shapes and colors programmed to perform specific tasks. These images are often chosen to be something simple for users to understand. For example, the icon for your email inbox is in the shape of an envelope because an email is an electronic letter.
When developers build a GUI, they write a series of commands to be performed once the user clicks on that specific icon. Without a GUI, the user would have to write commands directly in the command prompt themselves, thereby limiting how accessible any given piece of technology can become. So, the GUI is just a way for us to communicate with the computer more efficiently.
A UX designer will optimize the GUI’s design depending on its required functions. UX designers decide on colors, sizes, shapes, content and user flows for a GUI, then a UI engineer or programmer codes the GUI’s functionality.
Programmers use various programming languages to build GUIs including Python, HTML5/JavaScript and C/C++. The choice of programming language depends on the target platform. For example, when building a website GUI, which concerns the site’s appearance and navigation, programmers will use JavaScript and HTML. Alternatively, when a programmer builds an application for computers (like a game), they’re more likely to use C/C++, Python or some other programming language that supports building applications for the target platform.
Components of a GUI
A GUI is the interface with which a user engages when interacting with electronic devices. We can categorize a GUI’s components into three different categories.
- Input Controls: We use input controls to get information from the user on what tasks they want to perform. Input controls include buttons, text fields, checkboxes, dropdown lists and list boxes.
- Navigational Components: Navigational components include items that control the movement from one GUI to another. For example if you’re on LinkedIn, you can click on “My Feed” to see the posts your network shared or “My Profile” to view your profile. These pieces of clickable text are examples of navigational components because they allow you to navigate through the different web pages of the website. Navigational components can also include items like sliders and search fields.
- Informational Components: Informational components are those that deliver a piece of information for the user about the status of a task or other system information. For example, a progress bar, notification icon or message box are all considered informational components.
Advantages of Graphical User Interfaces
GUIs have transformed how we view and interact with technology and they have many advantages.
- GUIs are simple to use and understand.
- GUIs are convenient.
- GUIs don’t require prior computer knowledge to operate.
- GUIs allow for multitasking operations on the system.
- GUIs have instant results. In other words, you move to the next page or task right away when you click a button rather than writing lines of commands to achieve the same outcome.
What Makes a Good GUI?
Since almost everyone interacts with GUIs as a part of their daily lives, an important question to ask is: What makes a good, effective GUI? Generally, there are a few design choices that make a good GUI.
- Simplicity. The simpler the design, the easier it will be for the users to handle and adapt the GUI for daily use.
- Consistent use of elements. When we design a website, for example, it’s important to keep the colors and overall theme consistent throughout the website, which makes the platform easier to navigate.
- Incorporating color theory. The choice of colors can tremendously change how the user perceives an icon or an element on the screen, so making the correct choice is critical. For example, we often use the color green to mean “proceed,” while red is used to convey “stop.” So, if I build a GUI and make the OK button red and the cancel green, it may confuse users.
- Clear transitions between the different parts of the GUI. For example, if we consider Google search, the transition from the page where you type your query to the results page is subtle and fast. The user can intuit how to move between pages. The buttons are strategically placed and movement between the pages is smooth.
The design choices that can make the difference between a good GUI and a bad one are the job of the UX designer. Ultimately, what makes a good GUI can differ significantly based on the purpose of the application and the target audience.
A Brief History of the GUI
Xerox’s Palo Alto research labs first introduced GUIs in the 1970s. Following that, companies such as Apple (1983) and Microsoft (1985) released their own operating system GUIs for personal computing, not just computer science research. Today we have highly advanced GUIs on laptops, smartphones — even in our cars and on our appliances. These GUIs make interacting with technology easier and more accessible for all of us, not just programmers, technology experts and scientists.
