What Is a GUI?

Key takeaways

A graphical user interface (GUI) enables user interaction with a computer or website through visual elements, such as windows, icons, and menus. 

• GUIs differ from command-line interfaces (CLI), which require users to type commands.

• Microsoft Windows is a typical example of a GUI.

• You can enhance your front-end developer skills by deepening your understanding of GUIs.

Get insights into what a GUI is and how it works. Afterward, enroll in Meta’s Front-End Developer Professional Certificate to learn how to create professional page layouts using industry-standard tools such as Bootstrap, React, and Figma.

What is GUI in a computer system? 

A graphical user interface (GUI) is an interface between a user and a computer or website that employs a series of visual elements, such as windows, icons, menus, cursors, and buttons, to make computing commands. GUIs are intuitive, allowing users to navigate an operating system (OS) or software without extensive technical knowledge. 

GUIs differ from command-line interfaces (CLI), which require users to type commands. A GUI allows users to interact with a computer without the programming knowledge that CLI requires. This makes GUIs accessible to a wide range of users, allowing users to easily navigate a program or website and customize certain elements like font size and color. An example of a CLI is MS-DOS, and an example of a GUI is Microsoft Windows. Let’s take a closer look at what makes up a GUI.

What elements make up a GUI?

When using a GUI to make commands, users rely on windows, icons, menus, pointers, and scroll bars (WIMPS). This is the user interface toolkit and allows for the creation of the GUI. GUIs have various elements, including input controls, navigational components, informational components, and containers. Here is a list of some elements that make up a GUI:

• Button: A button shows an action that can occur when pressed through an icon or text.

• Dropdown list: A dropdown list gives a user a series of mutually exclusive options that drop down from one button.

• Window: A window is a rectangular display of the current program being used.

• Icon: An icon is a hyperlinked, intuitive symbol to allow easy user navigation through programs, videos, files, and more.

• Search field: A search field gives users a place to type in a word or phrase that will give back useful results.

• Toolbar: A toolbar contains buttons, widgets, icons, search fields, and more in a row, often found at the bottom or top of a GUI.

• Date and time pickers: Date and time pickers give users a pop-up or drop-down menu to select a specific date and time, which they can then input into the program or software they are using.

• Breadcrumbs: Breadcrumbs show a user where they are in a system by showing a series of folders or pages they have navigated at the top of a page. 

• Pop-up window: A pop-up or modal window forces a user to input information into the window’s text box before it allows them to access the rest of the GUI.

• Accordion: An accordion is a container that vertically stacks items in a manner so that, when clicked on, they display more information underneath. Items become visible or hidden when the user clicks on the label of the stack. 

What is the difference between GUI and UI?

A GUI is a specific type of user interface (UI) where you use a keyboard and mouse or touch screen to interact with a computer through graphical elements. However, a UI can extend beyond graphical representation and include speakers, microphones, fingerprint scanners, cameras, electronic pens, and printers.

Read more: What Does a User Interface (UI) Designer Do? Role Explained

Related terms

• UI design

• Command line interface

• Usability

• UI vs. UX

Explore our free web development career resources

Keep up with the latest trends in web development with Career Chat, Coursera’s weekly LinkedIn newsletter featuring in-demand skills, tools, and certifications. Continue building your expertise by subscribing to our other free digital resources: 

• Bookmark for quick access: Web Development Terms: A to Z Glossary

• Hear from an insider: How This Self-Taught Web Developer Went Straight to a Master's Degree

• Watch on YouTube: Why Every Web Developer NEEDS to Understand AI (and how you can start today!)

Accelerate your career growth with a Coursera Plus subscription. When you enroll in either the monthly or annual option, you’ll get access to over 10,000 courses.

Build job-ready skills with Coursera Plus

Start 7-day free trial

• 
• 
• 
• 

Start 7-day free trial