Elements of Graphical User Interface

Graphical User Interface:

With the rapid evolution of software technology, human-computer interaction has become so natural and intuitive nowadays that it hardly needs any training or instructions on how to use a particular software.

Graphical User Interface or GUI developed using computer graphics technique is one of the revolutionized modes of communication between the user and the computer. Graphics-based user interfaces with objects and dialogues that closely correspond to the user’s normal perception and their mental model of the system make life easier for the user.

Elements of GUI:

1. Dialog Box and Window: The term ‘Window‘ refers to any rectangular screen area that provides application-specific workspace or presents information or objects. It can be moved about, resized and make active or inactive. Every window contains menus and icons for the selection of processing options and parameter values. A dialogue box is a type of window and it is invoked by an application when multiple inputs are required to specify the desired action. A dialogue box may contain different controls like a radio button, command button, list box, check box, spin box, slider etc.

2. Multiple Windowing: In a multi-window environment like that of WINDOWS, we frequently work through a window interface while keeping other windows open – one over the other in different positions on the screen. Only the active window and the one where the user interacts remain at the top. Thus overlapping and obscuring the content of the other windows just behind it. This overlapping occurs amongst the windows depending on the display priorities or other appearances.

3. Icon: Icons are symbolic representation of some object or process. The process triggers when corresponding icons are clicked with a mouse or activated through the keyboard. Icons are primarily used to speed up the interaction with the user. Icons enhance the visual attractiveness of an application since the user is cognitively tuned to pictures. In a text-oriented application, icons may be less effective. Generally, icons have less screen space than equivalent text.

Icon Guideline:

  • Represent the object familiarly and recognisably.
  • Limit the number of different icons.
  • Make the icon stand out from its background.
  • Ensure that a single selected icon is visible when surrounded by unselected icons.
  • Make each icon distinct and easy to discriminate from every other icon.
  • Ensure the harmony of each icon in a family.
  • Design the movement animation when an icon is dragged and dropped.

4. Pull-Down and Cascaded Menus: A menu displays a list of commands. When menus are located on the menu bar at the top of an application window, these are known as Pull-Down menus. The name is derived from the fact that each of these menus is like rolled screen and when clicked with the mouse the roll unfolds downward showing all the commands or submenus within it. The sub-menus that have multiple options under them are denoted by an arrowhead symbol beside them and are known as Cascaded Menu.

5. Command Button: Command Button is used

  • To trigger a process.
  • To accept or cancel input.
  • To set a button as default if it triggers the most frequent action.

    • 6. Option Button: Option Button is used:

  • To select a single choice from a list of options.
  • If the operation is primarily mouse driven.
  • If one choice is always required.
  • To set a default option

    • 7. Check Boxes: Check Boxed is used:

  • To select more than one choice from a list of options.
  • To set a binary choice

    • 8. Text Fields: Text Field is used:

  • To enter text data.
  • To set fields to length of corresponding data.

    • 9. List Boxes: List Boxes have the following applications:

  • To make a single or multiple choice from a long list.
  • To make a single choice from a drop-down list box when space is limited.
  • To scroll a list with an associated accumulator box for multiple choices from a long list.
  • Combo box is used for selecting from the list or entering items, not on the list.

    • 10. Spin Boxes: Spin Boxes are used:

  • To select limited choices of predictable values (days of week, months of year).
  • In combination with text edit field to allow data entry if the keyboard is primarily used.

    • 11. Slider: Slider is used:

  • To set a data value by viewing dynamically the entire data range by dragging the slider along a channel.