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 you want to view the content of a folder named docs in a Unix-based CLI, for instance, you might use cd docs to navigate into a folder and ls to list the folder contents. 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 Users Interact With GUIs
How we interact with GUIs has developed rapidly as technology advances. In recent decades, GUI input methods have expanded from mouse and keyboard to include touch screens, voice recognition and gesture-based controls.
GUIs are built from components such as buttons, icons, menus, and windows — each programmed to respond to user interactions. These components 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.
How Developers Build GUIs
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 Graphical User Interface
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 offer immediate visual feedback, which can feel faster and more intuitive for many users, especially those unfamiliar with command-line tools.
What Makes a Good Graphical User Interface?
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.
History of the Graphical User Interface
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.
Frequently Asked Questions
What is a graphical user interface (GUI)?
A graphical user interface (GUI) is the visual interface that lets users interact with electronic devices using icons, buttons and graphical elements instead of text-based commands.
How does a GUI differ from a command-line interface (CLI)?
A graphical user interface (GUI) allows users to interact with systems through visuals and clicks, while a command-line interface (CLI) requires users to type text-based commands to perform tasks.
What are common examples of GUIs?
Examples of graphical user interfaces (GUIs) include Microsoft Windows, macOS, Android, iOS, web browsers like Chrome and Firefox, ATMs and in-car touchscreens.
