What is a graphical user interface (GUI)?

The times when only sci­en­tists and software de­vel­op­ers could use computers are long gone. Nowadays, almost anyone can use a PC or tablet – even without any sig­nif­i­cant tech­no­log­i­cal knowledge. That is due to the de­vel­op­ment of graphical user in­ter­faces – a type of user interface.

The first concepts of graphical user in­ter­faces emerged in the 1970s at the company Xerox. Initial attempts focused on enabling the con­trol­ling of PCs with a mouse and keyboard – instead of ex­clu­sive­ly text-based commands. Xerox Alto was the first PC with a GUI. Apple then followed in the 1980s with the Macintosh. Since the de­vel­op­ment of smart­phones and tablets, the prin­ci­ples of graphical in­ter­faces have pro­gressed con­sid­er­ably. Today, displays can even be con­trolled with finger movements and gestures.

The GUI is an interface between people and machines. The graphical interface aims to reproduce the code in the backend of a system in as user-friendly a manner as possible, sim­pli­fy­ing its everyday ap­pli­ca­tion. Symbols and images are par­tic­u­lar­ly important, since they are what enable universal ap­pli­ca­tions in­de­pen­dent of text. For instance, almost everyone knows what the Wi-Fi symbol looks like, even though the word itself is quite different in various languages.

The GUI is a user interface that enables users to com­mu­ni­cate with computers. This typically occurs using a mouse and keyboard, although control by touch and gestures is becoming more and more prevalent. When you move a computer mouse, the cursor displayed on your screen also moves. The signal of the device is sent to the computer, which trans­lates it into a similar motion on the screen. If a user clicks on a certain program symbol in the menu, the cor­re­spond­ing command is issued and the program is launched.

Es­sen­tial­ly, the GUI is a type of trans­la­tor that com­mu­ni­cates between people and machines. Without GUIs, you would need to control programs and ap­pli­ca­tions by typing in­struc­tions into the command line. This would look as follows (the example opens the explorer):

A graphical user interface combines visual design with pro­gram­ming functions. It, therefore, offers buttons, drop-down menus, nav­i­ga­tion fields, search fields, symbols, and widgets. GUI de­vel­op­ers pri­or­i­tize user-friend­li­ness. Typical GUI com­po­nents include:

• Entry fields
• Windows
• Canvases
• Frames
• Buttons
• Write fields
• Text fields

The recycling bin is a good example of an element found in most operating systems. It’s rep­re­sent­ed by a trash can on both Windows and Mac operating systems. This allows the user to im­me­di­ate­ly recognize what the recycling bin is for: deleting documents and files.

When writing GUIs, de­vel­op­ers utilize event-based pro­gram­ming since they’re unable to predict which actions the user will perform. For this reason, GUIs cannot be pro­grammed linearly. They have to be written so that a command is only executed once the user provides the right signal.

Above all, an effective graphical user interface should simplify the controls for the user. When designing such an interface, it’s important to ensure that the GUI fa­cil­i­tates intuitive use. However, this requires a good un­der­stand­ing of the needs and pref­er­ences of users. User ex­pe­ri­ence-based design aims to offer the user with what they expect from the ap­pli­ca­tion. The following aspects should be kept in mind when de­vel­op­ing a GUI:

• Simple in­ter­faces: It’s advisable to get rid of any un­nec­es­sary design elements and choose simple and easy-to-un­der­stand labels.
• Purpose-based layout: Each page should be well-struc­tured and each element should perform a clear function.
• Con­sis­ten­cy: When using multiple elements and graphics, it’s important that all the in­di­vid­ual elements are co­or­di­nat­ed with each other.
• Design and ty­pog­ra­phy: Design elements, colors, and text should be placed in the fore­ground or back­ground depending on their re­spec­tive purpose. Using suitable, easily legible font styles and sizes is also vital.
• User updates: A GUI should also provide in­for­ma­tion about errors and status changes.

Graphical user in­ter­faces have caught on because they offer users many ad­van­tages. But they do have some dis­ad­van­tages. We point out the strengths and weak­ness­es of GUIs in the table below.