Introducing Graphical User Interface

A graphical user interface is a part of a program that allows an individual to interact with a device or system using graphical windows, icons, menus, and cursors. Good examples of GUIs are operating systems such as Microsoft Windows, Mac OSX, and Linux distributions. By the way, GUIs are not limited to computer operating systems only. GUIs can be found in your phone, ATM machine, POS (Point of Sale) programs on store cashiers, and even information kiosks that you can find in a train station and museum.

To interact with GUIs a user needs to use input devices such as keyboards, keypads, mice, track pads, joysticks, and touch pads.

Brief History

During the early days of the computer, many users relied on CLIs (Command Line Interfaces) to perform tasks on computers. However, CLIs are not that user friendly. And when the computer was commercialized for the masses, most people without technical knowledge about the command line, its commands, and on how it works in the computer were unable to utilize and make full use of their computers that ran command lines. Because of that, programmers focused upon the development of the graphical user interface.

GUI Elements

Every graphical user interface contains elements that are consistent to make it easier for its user to understand and use it. If a GUI deviates from the standards and makes use of unfamiliar widgets or elements, its user may find it difficult to navigate and use it. The graphical user interface’s elements can be categorized into two.

Structural Elements

These elements usually house the other functions and elements that the GUI offers. And they are:

• Windows

• Menus

• Icons

• Controls - Slider - Datagrid - Cycle Button: - Radio Button - Check Box - Combo Box - List Box - Drop-down List - Hyperlink - Button - Text Box - Window

• Tabs

Interaction Elements

On the other hand, interaction elements provide the user the ability to interact with the graphical user interface. And these elements usually represents them and convey the action the user wants to do in the graphical user interface. And they are:

• Cursors

• Selection

• Adjustment Handle

GUI versus CLI

As you can see, graphical user interface eliminates the need of learning the command line, typing commands, and handling errors. Also, it reduces the chances of errors caused by mistyping commands and switches. For you to grasp the difference between a GUI and a CLI, below is an example scenario.

If you want to run a program in Microsoft Windows, all you need is find the icon for the program’s shortcut or its executable file, double click it, and it will run. On a command line interface such as MS-DOS, you will need to access the directory of the executable file or shortcut by typing a change directory command, and type the name of the executable file for the program to run. Not to mention that you might need to display the contents of the directories you will access if you do not know the name or location of the file or folder you will need to open and type multiple change directory commands to access the folder or file. Though it is possible to access the file anywhere in case you know the exact location of the file.

In the scenario, it can be clearly seen that with the usage of graphical user interface, you do not need to undergo many steps just to do something. Also, it does not require the user to type. In a command line interface, mistyping one letter will cause the computer not to recognize the operation you want to happen.

Types of GUIs

Depending on the needs of the user, a different type of graphical user interface might be suitable for them. Most of the types only differ in their design and layout.

Desktop User Interface

The Desktop User Interface is the GUI type most people are familiar. The goal of the DUI is to imitate a desktop feel, and provide ease of access of the computer or machine’s file and basic functions for users. Just like a desktop, a Desktop User Interface contains files and folders. If you want to open those items, all you need is to point on those files or folders and click it – just like when you grab on a folder in real life, and open it to see its contents.

Tool User Interface

Tool user interface is the most common type of graphical user interface. If you have used the latest Microsoft Office programs, you have already seen a good example of the Tool User Interface type. Unlike the Desktop User Interface, it focuses on providing the user with access to the tools and features of a program. For example, the newest Microsoft Word interface has larger icons now for its tools. Also, all of the tools are prearranged into categories. If you want to change the margin and printable size of your document, you will need to access the Page Layout tab on the program.

Process User Interface

To provide more ease of access and the ability to perform complex tasks easier, the Process User Interface was introduced. This type of graphical user interface is usually implemented on installation files and configuration setups. The Process User Interface is always in a form of step by step wizard (though it is not restricted on that form only). It provides users with options and functions that are scattered and properly organized in multiple screens.

GUI and CLI Combination

There are times that the CLI can be more useful to use than the GUI. On the other hand, some users prefer using the CLI using the graphical user interface instead. To cater to this audience, some GUIs integrate a command prompt in them. An excellent example of this type is AutoDesk’s CAD (Computer Aided Design) program. Aside from giving the user a GUI for creating models, it also offers a command prompt (placed in the bottom of the screen by default).

Its command prompt allows a user to perform accurate and precise actions in the program. For example, if a user is going to create a line, he can use the command prompt to input the line command, indicate the desired line width and exact coordinates where the line should appear instead of drawing using a mouse, which can be challenging if he is aiming for precision.

Principles of GUI Designing

Certain guidelines and principles must be followed to make sure that the GUI will be effective. If they are not followed, it can become difficult for the users to use it, and it can defeat its purpose. For example, using unorthodox elements in the graphical user interface can make it confusing.

If you were a gamer, you would know the feeling of being introduced to a new HUD or GUI that is different from the ones you have saw before. For example, if you are used to game where you can see a health bar and then introduced to a game wherein your character’s health is represented by a reddish tint on the screen, playing that game can become difficult or easy depending on how fast you will be able adjust to it. The same goes for GUI. If you deviate from the principles or guidelines, the usability and functionality of your GUI can be a hit or miss.

Anyway, here are some of the things you need to mind when you are designing a GUI:

Aesthetic Value and Efficiency

GUI must be pleasing to the eyes of the users. You must prevent grouping and placing your elements in random order, and you must use your color theme or palette effectively. If your background color is light, use a dark color for your text.

On the other hand, some of the important functions that your graphical user interface offer should not be nested deeply. All important functions and elements should be always a click away from your user.

Conciseness and Compatibility

The visual appearance and the text that comes along with your GUI must be precise and accurate. For example, using a scissor icon for your paste function or placing the word cut instead of delete can confuse your users.

The GUI must be compatible for your product, task, and user. Giving an English graphical user interface to a user who is not a native English speaker is obviously a no-no.

Comprehensible and Familiarity

Even without tutorials, the user should be able to understand on how to use your GUI. A good technique to use is to imitate the layout of popular GUIs. For example, if you are going to create a GUI for a word process, it is best that you imitate how Microsoft’s GUI is laid out. Of course, be careful in doing this.

Configurability and Flexibility

You can skip this one since it is not essential to the graphical user interface. However, this aspect can make your GUI look and feel better. Allowing the users to change the layout and appearance of your GUI can make them set it to their preferences. Also, your GUI must be flexible for your user. If your GUI uses many fancy effects and your user base’s computers are slow, then allow them to disable those to prevent your GUI from slowing their computers down.


The appearance of the elements that has similar functions should look the same. For example, if you are going to use sliders to allow users to manipulate numbers, then use sliders on every instance that does the same action.

computer science

QR Code
QR Code computer_graphical_user_interface (generated for current page)