Actions

Difference between revisions of "Graphical User Interface (GUI)"

 
Line 1: Line 1:
A '''graphical user interface (GUI)''' is an interface through which a user interacts with electronic devices such as computers, hand-held devices and other appliances. This interface uses icons, menus and other visual indicator (graphics) representations to display information and related user controls, unlike text-based interfaces, where data and commands are in text. GUIl representations are manipulated by a pointing device such as a mouse, trackball, stylus, or a finger on a touch screen.
+
A '''graphical user interface (GUI)''' is an interface through which a user interacts with electronic devices such as [[Computer|computers]], hand-held devices and other appliances. This interface uses icons, menus and other visual indicator (graphics) representations to display information and related user controls, unlike text-based interfaces, where [[Data|dat]]a and commands are in text. GUIl representations are manipulated by a pointing device such as a mouse, trackball, stylus, or a finger on a touch screen.
  
The need for GUI became apparent because the first human/computer text interface was through keyboard text creation by what is called a prompt (or DOS prompt). Commands were typed on a keyboard at the DOS prompt to initiate responses from a computer. The use of these commands and the need for exact spelling created a cumbersome and inefficient interface.<ref>Definition - What Does raphical User Interface (GUI)? [https://www.techopedia.com/definition/5435/graphical-user-interface-gui Techopedia]</ref>
+
The need for GUI became apparent because the first [[Human Computer Interaction (HCI)|human/computer text interface]] was through keyboard text creation by what is called a prompt (or DOS prompt). Commands were typed on a keyboard at the DOS prompt to initiate responses from a computer. The use of these commands and the need for exact spelling created a cumbersome and inefficient interface.<ref>Definition - What Does raphical User Interface (GUI)? [https://www.techopedia.com/definition/5435/graphical-user-interface-gui Techopedia]</ref>
  
  
 
'''GUI: A Visual Revolution<ref>GUI: A Visual Revolution [https://www.lifewire.com/what-is-gui-graphical-user-interface-4682595 Lifewire]</ref>'''<br />
 
'''GUI: A Visual Revolution<ref>GUI: A Visual Revolution [https://www.lifewire.com/what-is-gui-graphical-user-interface-4682595 Lifewire]</ref>'''<br />
A GUI is very different. Rather than being text-based, it's visually based, making the computer much easier to use. When operating systems and applications incorporate a GUI, commands and actions are performed through direct manipulation of the graphical elements on the screen. Within GUIs, the following types of interface elements are commonly used:  
+
A GUI is very different. Rather than being text-based, it's visually based, making the computer much easier to use. When [[Operating System (OS)|operating systems]] and [[Application|applications]] incorporate a GUI, commands and actions are performed through direct manipulation of the graphical elements on the screen. Within GUIs, the following types of interface elements are commonly used:  
 
*Windows display information on the screen. Applications, web pages, and documents all open in windows. Windows can be moved, resized, and placed in front of each other.
 
*Windows display information on the screen. Applications, web pages, and documents all open in windows. Windows can be moved, resized, and placed in front of each other.
 
*Menus offer lists of actions to choose from. They arrange the commands available in an application into logical groups.
 
*Menus offer lists of actions to choose from. They arrange the commands available in an application into logical groups.
Line 15: Line 15:
 
'''Structural Elements of Graphical User Interface (GUI)<ref>Structural Elements of Graphical User Interface (GUI) [https://www.minitool.com/lib/graphical-user-interface.html Minitool]</ref>'''<br />
 
'''Structural Elements of Graphical User Interface (GUI)<ref>Structural Elements of Graphical User Interface (GUI) [https://www.minitool.com/lib/graphical-user-interface.html Minitool]</ref>'''<br />
 
The graphical user interface uses visual conventions to display the general information. Some conventions are used to construct the structure of static elements on which users can interact.
 
The graphical user interface uses visual conventions to display the general information. Some conventions are used to construct the structure of static elements on which users can interact.
*Desktop: A desktop is displayed after start-up, sometimes referred to as the "desktop environment" including windows and file browsers. In the general interface, icons for various applications and data are placed on the desktop, so users can start working in the desktop. In general, the user’s desktop contents are actually saved in the system disk (C drive). Wallpaper, the desktop background which can be set to a variety of pictures and a variety of accessories, becoming one of the important factors of visual beauty.
+
*Desktop: A [[Desktop|desktop]] is displayed after start-up, sometimes referred to as the "desktop environment" including windows and file browsers. In the general interface, icons for various applications and data are placed on the desktop, so users can start working in the desktop. In general, the user’s desktop contents are actually saved in the system disk (C drive). Wallpaper, the desktop background which can be set to a variety of pictures and a variety of accessories, becoming one of the important factors of visual beauty.
*Window: Windows are the basic units that the application sets in the graphical user interface for using data. A window is an area on the screen where information is displayed. In the window, the user can manipulate the application in the window to manage, generate and edit the data. Usually, there are menus and icons around the window, and the data is placed in the center. The user can easily manipulate a window: in the window, there are function keys according to the contents of various data/applications, with which the user can display and hide the window, and can move it to any area by dragging the window and so on. Multiple windows can also be opened at the same time, in which case each window can display a different application or file - which is very useful when working in a multitasking environment. RAM is the only limit to the number of windows that can be opened at one time.
+
*Window: Windows are the basic units that the application sets in the graphical user interface for using data. A window is an area on the screen where information is displayed. In the window, the user can manipulate the application in the window to manage, generate and edit the data. Usually, there are menus and icons around the window, and the data is placed in the center. The user can easily manipulate a window: in the window, there are function keys according to the contents of various data/applications, with which the user can display and hide the window, and can move it to any area by dragging the window and so on. Multiple windows can also be opened at the same time, in which case each window can display a different application or file - which is very useful when working in a multitasking environment. [[Random Access Memory (RAM)|RAM]] is the only limit to the number of windows that can be opened at one time.
 
*Menu: Menus allow users to execute commands by selecting from a list of options. Users use the mouse or other pointing devices (including the keyboard) in the GUI to select an option. Menus are usually placed at the top or bottom of the screen, all the commands that operating an application needed are grouped together. Menus are convenient because they show the commands available in the software, so all the users need are just selecting and clicking.
 
*Menu: Menus allow users to execute commands by selecting from a list of options. Users use the mouse or other pointing devices (including the keyboard) in the GUI to select an option. Menus are usually placed at the top or bottom of the screen, all the commands that operating an application needed are grouped together. Menus are convenient because they show the commands available in the software, so all the users need are just selecting and clicking.
 
*Icons: An icon is a small picture that represents objects such as a file, program, or application. Icons are shortcuts to executing commands, opening documents and running programs. It is a quick way for you to do all these operations.
 
*Icons: An icon is a small picture that represents objects such as a file, program, or application. Icons are shortcuts to executing commands, opening documents and running programs. It is a quick way for you to do all these operations.
Line 24: Line 24:
  
 
'''User Interface and Interaction Design<ref>User Interface and Interaction Design [https://en.wikipedia.org/wiki/Graphical_user_interface Wikipedia]</ref>'''<br />
 
'''User Interface and Interaction Design<ref>User Interface and Interaction Design [https://en.wikipedia.org/wiki/Graphical_user_interface Wikipedia]</ref>'''<br />
Designing the visual composition and temporal behavior of a GUI is an important part of software application programming in the area of human–computer interaction. Its goal is to enhance the efficiency and ease of use for the underlying logical design of a stored program, a design discipline named usability. Methods of user-centered design are used to ensure that the visual language introduced in the design is well-tailored to the tasks.
+
Designing the visual composition and temporal behavior of a GUI is an important part of [[Software Program|software application programming]] in the area of [[Human Computer Interaction (HCI)|human–computer interaction]]. Its goal is to enhance the efficiency and ease of use for the underlying logical design of a stored program, a design discipline named usability. Methods of [[User-Centered Design (UCD)|user-centered design]] are used to ensure that the visual language introduced in the design is well-tailored to the tasks.
  
The visible graphical interface features of an application are sometimes referred to as chrome or GUI (pronounced gooey). Typically, users interact with information by manipulating visual widgets that allow for interactions appropriate to the kind of data they hold. The widgets of a well-designed interface are selected to support the actions necessary to achieve the goals of users. A model–view–controller allows flexible structures in which the interface is independent from and indirectly linked to application functions, so the GUI can be customized easily. This allows users to select or design a different skin at will, and eases the designer's work to change the interface as user needs evolve. Good user interface design relates to users more, and to system architecture less. Large widgets, such as windows, usually provide a frame or container for the main presentation content such as a web page, email message or drawing. Smaller ones usually act as a user-input tool.
+
The visible graphical interface features of an application are sometimes referred to as chrome or GUI (pronounced gooey). Typically, users interact with information by manipulating visual widgets that allow for interactions appropriate to the kind of data they hold. The widgets of a well-designed interface are selected to support the actions necessary to achieve the goals of users. A [[Model View Controller (MVC)|model–view–controller]] allows flexible structures in which the interface is independent from and indirectly linked to application functions, so the GUI can be customized easily. This allows users to select or design a different skin at will, and eases the designer's work to change the interface as user needs evolve. Good user interface design relates to users more, and to [[Systems Architecture|system architecture]] less. Large widgets, such as windows, usually provide a frame or container for the main presentation content such as a web page, email message or drawing. Smaller ones usually act as a user-input tool.
  
A GUI may be designed for the requirements of a vertical market as application-specific graphical user interfaces. Examples include automated teller machines (ATM), point of sale (POS) touchscreens at restaurants, self-service checkouts used in a retail store, airline self-ticketing and check-in, information kiosks in a public space, like a train station or a museum, and monitors or control screens in an embedded industrial application which employ a real-time operating system (RTOS).
+
A GUI may be designed for the requirements of a vertical market as application-specific graphical user interfaces. Examples include automated teller machines (ATM), [[Point of Sale (POS)|point of sale (POS)]] touchscreens at restaurants, self-service checkouts used in a retail store, airline self-ticketing and check-in, information kiosks in a public space, like a train station or a museum, and monitors or control screens in an embedded industrial application which employ a [[Real Time Operating System (RTOS)|real-time operating system (RTOS)]].
  
 
By the 1980s, cell phones and handheld game systems also employed application specific touchscreen GUIs. Newer automobiles use GUIs in their navigation systems and multimedia centers, or navigation multimedia center combinations.
 
By the 1980s, cell phones and handheld game systems also employed application specific touchscreen GUIs. Newer automobiles use GUIs in their navigation systems and multimedia centers, or navigation multimedia center combinations.

Latest revision as of 11:52, 9 January 2020

A graphical user interface (GUI) is an interface through which a user interacts with electronic devices such as computers, hand-held devices and other appliances. This interface uses icons, menus and other visual indicator (graphics) representations to display information and related user controls, unlike text-based interfaces, where data and commands are in text. GUIl representations are manipulated by a pointing device such as a mouse, trackball, stylus, or a finger on a touch screen.

The need for GUI became apparent because the first human/computer text interface was through keyboard text creation by what is called a prompt (or DOS prompt). Commands were typed on a keyboard at the DOS prompt to initiate responses from a computer. The use of these commands and the need for exact spelling created a cumbersome and inefficient interface.[1]


GUI: A Visual Revolution[2]
A GUI is very different. Rather than being text-based, it's visually based, making the computer much easier to use. When operating systems and applications incorporate a GUI, commands and actions are performed through direct manipulation of the graphical elements on the screen. Within GUIs, the following types of interface elements are commonly used:

  • Windows display information on the screen. Applications, web pages, and documents all open in windows. Windows can be moved, resized, and placed in front of each other.
  • Menus offer lists of actions to choose from. They arrange the commands available in an application into logical groups.
  • Input controls enable users to select one or more options from a list. Input controls include checkboxes, option buttons, dropdown lists, toggles, text fields, and date and time pickers.
  • Navigational components enable users to move from place to place within the interface. Examples include breadcrumbs, sliders, search boxes, pagination, and tags.
  • Informational components inform users of the status of a task. Examples include notifications of incoming messages, progress bars, tooltips, and pop-up windows.


Structural Elements of Graphical User Interface (GUI)[3]
The graphical user interface uses visual conventions to display the general information. Some conventions are used to construct the structure of static elements on which users can interact.

  • Desktop: A desktop is displayed after start-up, sometimes referred to as the "desktop environment" including windows and file browsers. In the general interface, icons for various applications and data are placed on the desktop, so users can start working in the desktop. In general, the user’s desktop contents are actually saved in the system disk (C drive). Wallpaper, the desktop background which can be set to a variety of pictures and a variety of accessories, becoming one of the important factors of visual beauty.
  • Window: Windows are the basic units that the application sets in the graphical user interface for using data. A window is an area on the screen where information is displayed. In the window, the user can manipulate the application in the window to manage, generate and edit the data. Usually, there are menus and icons around the window, and the data is placed in the center. The user can easily manipulate a window: in the window, there are function keys according to the contents of various data/applications, with which the user can display and hide the window, and can move it to any area by dragging the window and so on. Multiple windows can also be opened at the same time, in which case each window can display a different application or file - which is very useful when working in a multitasking environment. RAM is the only limit to the number of windows that can be opened at one time.
  • Menu: Menus allow users to execute commands by selecting from a list of options. Users use the mouse or other pointing devices (including the keyboard) in the GUI to select an option. Menus are usually placed at the top or bottom of the screen, all the commands that operating an application needed are grouped together. Menus are convenient because they show the commands available in the software, so all the users need are just selecting and clicking.
  • Icons: An icon is a small picture that represents objects such as a file, program, or application. Icons are shortcuts to executing commands, opening documents and running programs. It is a quick way for you to do all these operations.
  • Tabs: A tab is a rectangular box, usually containing text label or graphical icon associated with a view pane. For example, with a browser, you can open multiple pages simultaneously in a window and navigate quickly between them by clicking the tab associated with the page. Tabs are usually grouped at the top of the window. Tabs also exist in the settings pane of many applications.

The graphical user interface brings great convenience to computer users. Its appearance allows users to avoid having to face interfaces with text only, which makes the operation simple and less boring.


User Interface and Interaction Design[4]
Designing the visual composition and temporal behavior of a GUI is an important part of software application programming in the area of human–computer interaction. Its goal is to enhance the efficiency and ease of use for the underlying logical design of a stored program, a design discipline named usability. Methods of user-centered design are used to ensure that the visual language introduced in the design is well-tailored to the tasks.

The visible graphical interface features of an application are sometimes referred to as chrome or GUI (pronounced gooey). Typically, users interact with information by manipulating visual widgets that allow for interactions appropriate to the kind of data they hold. The widgets of a well-designed interface are selected to support the actions necessary to achieve the goals of users. A model–view–controller allows flexible structures in which the interface is independent from and indirectly linked to application functions, so the GUI can be customized easily. This allows users to select or design a different skin at will, and eases the designer's work to change the interface as user needs evolve. Good user interface design relates to users more, and to system architecture less. Large widgets, such as windows, usually provide a frame or container for the main presentation content such as a web page, email message or drawing. Smaller ones usually act as a user-input tool.

A GUI may be designed for the requirements of a vertical market as application-specific graphical user interfaces. Examples include automated teller machines (ATM), point of sale (POS) touchscreens at restaurants, self-service checkouts used in a retail store, airline self-ticketing and check-in, information kiosks in a public space, like a train station or a museum, and monitors or control screens in an embedded industrial application which employ a real-time operating system (RTOS).

By the 1980s, cell phones and handheld game systems also employed application specific touchscreen GUIs. Newer automobiles use GUIs in their navigation systems and multimedia centers, or navigation multimedia center combinations.


See Also

Computer
Computer Networking
Computer Program
Desktop
Desktop Operating System
Desktop as a Service (DaaS)
Virtual Desktop Infrastructure (VDI)
Software
Internet
Website
World Wide Web (WWW)


References

  1. Definition - What Does raphical User Interface (GUI)? Techopedia
  2. GUI: A Visual Revolution Lifewire
  3. Structural Elements of Graphical User Interface (GUI) Minitool
  4. User Interface and Interaction Design Wikipedia