What is a graphical user interface (GUI)?

The times when only sci­ent­ists and software de­velopers could use computers are long gone. Nowadays, almost anyone can use a PC or tablet – even without any sig­ni­fic­ant tech­no­lo­gic­al 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­trolling of PCs with a mouse and keyboard – instead of ex­clus­ively 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­ciples 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­plic­a­tion. Symbols and images are par­tic­u­larly important, since they are what enable universal ap­plic­a­tions in­de­pend­ent 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­nic­ate 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­res­pond­ing command is issued and the program is launched.

Es­sen­tially, the GUI is a type of trans­lat­or that com­mu­nic­ates between people and machines. Without GUIs, you would need to control programs and ap­plic­a­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­ig­a­tion fields, search fields, symbols, and widgets. GUI de­velopers pri­or­it­ise user-friend­li­ness. Typical GUI com­pon­ents 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­res­en­ted by a trash can on both Windows and Mac operating systems. This allows the user to im­me­di­ately recognise what the recycling bin is for: deleting documents and files.

When writing GUIs, de­velopers utilise 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­it­ates intuitive use. However, this requires a good un­der­stand­ing of the needs and pref­er­ences of users. User ex­per­i­ence-based design aims to offer the user with what they expect from the ap­plic­a­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­ne­ces­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­sist­ency: When using multiple elements and graphics, it’s important that all the in­di­vidu­al elements are co­ordin­ated with each other.
• Design and ty­po­graphy: Design elements, colours, and text should be placed in the fore­ground or back­ground depending on their re­spect­ive purpose. Using suitable, easily legible font styles and sizes is also vital.
• User updates: A GUI should also provide in­form­a­tion about errors and status changes.

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