Elements of graphical user interfaces
Encyclopedia
Graphical user interface
s, also known as GUIs, offer a consistent visual language
to represent information stored in computers. This makes it easier for people with little computer skills to work with and use computer software.
This article explains the most common elements of visual language interfaces found in the WIMP
("window, icon, menu, pointing device") paradigm. These elements are usually embodied in an interface using a widget toolkit
.
is clicked in the Windows Operating System
. It is easy for a user to manipulate a window: it can be shown and hidden by clicking on an icon or application
, and it can be moved to any area by dragging it (that is, by clicking in a certain area of the window – usually the title bar along the tops – and keeping the pointing device's button pressed, then moving the pointing device). A window can be placed in front or behind another window, its size can be adjusted, and scrollbars can be used to navigate the sections within it. Multiple windows can also be open at one time, in which case each window can display a different application or file – this is very useful when working in a multitasking environment. The system memory is the only limitation to the amount of windows that can be open at once. There are also many types of specialized windows.
. This limits the amount of documentation the user reads to understand the software.
is a small picture that represents objects such as a file, program, web page, or command. They are a quick way to execute commands, open documents, and run programs. Icons are also very useful when searching for an object in a browser list, because in many operating systems all documents using the same extension will have the same icon.
Window
: A paper-like rectangle that represents a "window" into a document, form, or design area.
Pointer (or mouse cursor): The spot where the mouse "cursor" is currently referencing.
Text box
: A box in which to enter text or numbers.
Button
: An equivalent to a push-button as found on mechanical or electronic instruments.
Hyperlink
: Text with some kind of indicator (usually underlining and/or color) that indicates that clicking it will take one to another screen or page.
Drop-down list
: A list of items from which to select. The list normally only displays items when a special button or indicator is clicked.
List box: A GUI widget that allows the user to select one or more items from a list contained within a static, multiple line text box.
Combo box
: A combination of a drop-down list or list box and a single-line textbox, allowing the user to either type a value directly into the control or choose from the list of existing options.
Check box
: A box which indicates an "on" or "off" state via a check mark ☑ or a cross ☒. Sometimes can appear in an intermediate state (shaded or with a dash) to indicate mixed status of multiple objects.
Radio button
: A button, similar to a check-box, except that only one item in a group can be selected. Its name comes from the mechanical push-button group on a car radio receiver. Selecting a new item from the group's buttons also deselects the previously selected button.
Cycle button
: A button that cycles its content through two or more values, thus enabling selection of one from a group of items.
Datagrid
: A spreadsheet
-like grid that allows numbers or text to be entered in rows and columns.
is typically a rectangular small box which usually contains a text label or graphical icon associated with a view pane. When activated the view pane, or window, displays widgets associated with that tab; groups of tabs allow the user to switch quickly between different widgets. This is used in the web browsers Firefox
, Internet Explorer
, Konqueror
, Opera
, and Safari
. With these browsers, you can have multiple web pages open at once in one window, and quickly navigate between them by clicking on the tabs associated with the pages. Tabs are usually placed in groups at the top of a window, but may also be grouped on the side or bottom of a window.
Tabs are also present in the settings panes of many applications. Windows for example uses tabs in most of its control panel dialogues.
s for interaction have evolved in the visual language used in GUIs. Interaction elements are interface objects that represent the state of an ongoing operation or transformation, either as visual remainders of the user intent (such as the pointer), or as affordance
s showing places where the user may interact.
is a pointer: a graphical image on a screen that indicates the location of a pointing device, and can be used to select and move objects or commands on the screen. A pointer commonly appears as an angled arrow, but it can vary within different programs or operating system
s. Example of this can be found within text-processing applications, which uses an I-beam pointer that is shaped like a capital I, or in web browser
s which often indicate that the pointer is over a hyperlink
by turning the pointer in the shape of a gloved hand with outstretched index finger.
The use of a pointer is employed when the input method, or pointing device, is a device that can move fluidly across a screen and select or highlight objects on the screen. Pointer trails can be used to enhance its visibility during movement. In GUIs where the input method relies on hard keys, such as the five-way key on many mobile phones, there is no pointer employed, and instead the GUI relies on a clear focus
state.
is a list of items on which user operations will take place. The user typically adds items to the list manually, although the computer may create a selection automatically.
is an indicator of a starting point for a drag and drop operation. Usually the pointer shape changes when placed on the handle, showing an icon that represents the supported drag operation.
Graphical user interface
In computing, a graphical user interface is a type of user interface that allows users to interact with electronic devices with images rather than text commands. GUIs can be used in computers, hand-held devices such as MP3 players, portable media players or gaming devices, household appliances and...
s, also known as GUIs, offer a consistent visual language
Visual language
A visual language is a system of communication using visual elements. Speech as a means of communication cannot strictly be separated from the whole of human communicative activity which includes the visual and the term 'language' in relation to vision is an extension of its use to describe the...
to represent information stored in computers. This makes it easier for people with little computer skills to work with and use computer software.
This article explains the most common elements of visual language interfaces found in the WIMP
WIMP (computing)
In human–computer interaction, WIMP stands for "windows, icons, menus and pointers", denoting a style of interaction using these elements. It was coined by Merzouga Wilberts in 1980...
("window, icon, menu, pointing device") paradigm. These elements are usually embodied in an interface using a widget toolkit
Widget toolkit
In computing, a widget toolkit, widget library, or GUI toolkit is a set of widgets for use in designing applications with graphical user interfaces...
.
Structural elements
User interfaces use visual conventions to represent the generic information shown. Some conventions are used to build the structure of the static elements on which the user can interact, and define the appearance of the interface.Window
A window is an area on the screen that displays information, with its contents being displayed independently from the rest of the screen. An example of a window is what appears on the screen when the "My Documents" iconIcon (computing)
A computer icon is a pictogram displayed on a computer screen and used to navigate a computer system or mobile device. The icon itself is a small picture or symbol serving as a quick, intuitive representation of a software tool, function or a data file accessible on the system. It functions as an...
is clicked in the Windows Operating System
Microsoft Windows
Microsoft Windows is a series of operating systems produced by Microsoft.Microsoft introduced an operating environment named Windows on November 20, 1985 as an add-on to MS-DOS in response to the growing interest in graphical user interfaces . Microsoft Windows came to dominate the world's personal...
. It is easy for a user to manipulate a window: it can be shown and hidden by clicking on an icon or application
Application software
Application software, also known as an application or an "app", is computer software designed to help the user to perform specific tasks. Examples include enterprise software, accounting software, office suites, graphics software and media players. Many application programs deal principally with...
, and it can be moved to any area by dragging it (that is, by clicking in a certain area of the window – usually the title bar along the tops – and keeping the pointing device's button pressed, then moving the pointing device). A window can be placed in front or behind another window, its size can be adjusted, and scrollbars can be used to navigate the sections within it. Multiple windows can also be open at one time, in which case each window can display a different application or file – this is very useful when working in a multitasking environment. The system memory is the only limitation to the amount of windows that can be open at once. There are also many types of specialized windows.
- A Container Window a window that is opened while invoking the icon of a mass storage device, or directory or folder and which is presenting an ordered list of other icons that could be again some other directories, or data files or maybe even executable programs. All modern container windows could present their content on screen either acting as browser windows or text windows. Their behaviour can automatically change according to the choices of the single users and their preferred approach to the graphical user interface.
- A browser windowWeb browserA web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier and may be a web page, image, video, or other piece of content...
allows the user to move forward and backwards through a sequence of documents or web pageWeb pageA web page or webpage is a document or information resource that is suitable for the World Wide Web and can be accessed through a web browser and displayed on a monitor or mobile device. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext...
s. Web browserWeb browserA web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier and may be a web page, image, video, or other piece of content...
s are an example of these types of windows.
- Text terminal windows are designed for embedding interaction with text user interfaceText user interfaceTUI short for: Text User Interface or Textual User Interface , is a retronym that was coined sometime after the invention of graphical user interfaces, to distinguish them from text-based user interfaces...
s within the overall graphical interface. MS-DOSMS-DOSMS-DOS is an operating system for x86-based personal computers. It was the most commonly used member of the DOS family of operating systems, and was the main operating system for IBM PC compatible personal computers during the 1980s to the mid 1990s, until it was gradually superseded by operating...
and UNIXUnixUnix is a multitasking, multi-user computer operating system originally developed in 1969 by a group of AT&T employees at Bell Labs, including Ken Thompson, Dennis Ritchie, Brian Kernighan, Douglas McIlroy, and Joe Ossanna...
consoles are examples of these types of windows.
- A child window opens automatically or as a result of a user activity in a parent window. Pop-up windowsPop-up adPop-up ads or pop-ups are a form of online advertising on the World Wide Web intended to attract web traffic or capture email addresses. Pop-ups are generally new web browser windows to display advertisements...
on the InternetInternetThe Internet is a global system of interconnected computer networks that use the standard Internet protocol suite to serve billions of users worldwide...
can be child windows.
- A message window, or dialog boxDialog boxIn a graphical user interface of computers, a dialog box is a type of window used to enable reciprocal communication or "dialog" between a computer and its user. It may communicate information to the user, prompt the user for a response, or both...
, is a type of child window. These are usually small and basic windows that are opened by a program to display information to the user and/or get information from the user. They usually have a button that must be pushed before the program can be resumed.
Menus
Menus allow the user to execute commands by selecting from a list of choices. Options are selected with a mouse or other pointing device within a GUI. A keyboard may also be used. Menus are convenient because they show what commands are available within the softwareComputer software
Computer software, or just software, is a collection of computer programs and related data that provide the instructions for telling a computer what to do and how to do it....
. This limits the amount of documentation the user reads to understand the software.
- A menu barMenu barA menu bar is a region of a screen or application interface where drop down menus are displayed. The menu bar's purpose is to supply a common housing for window- or application-specific menus which provide access to such functions as opening files, interacting with an application, or displaying...
is displayed horizontally across the top of the screen and/or along the tops of some or all windows. A pull-down menu is commonly associated with this menu type. When a user clicks on a menu option the pull-down menu will appear.
- A menuMenu (computing)In computing and telecommunications, a menu is a list of commands presented to an operator by a computer or communications system. A menu is used in contrast to a command-line interface, where instructions to the computer are given in the form of commands .Choices given from a menu may be selected...
has a visible title within the menu bar. Its contents are only revealed when the user selects it with a pointer. The user is then able to select the items within the pull-down menu. When the user clicks elsewhere the content of the menu will disappear.
- A context menuContext menuA context menu is a menu in a graphical user interface that appears upon user interaction, such as a right mouse click or middle click mouse operation...
is invisible until the user performs a specific mouse action, like pressing the right mouse button. When the software-specific mouse action occurs the menu will appear under the cursor.
- Menu extraMenu extraA menu extra, menu item, menulet, or status item in Mac OS X is a small icon or sometimes a word that appears at the right of the menu bar. They often provide quick ways to use applications or display information , or control system-level variables...
s are individual items within or at the side of a menu.
Icons
An iconIcon (computing)
A computer icon is a pictogram displayed on a computer screen and used to navigate a computer system or mobile device. The icon itself is a small picture or symbol serving as a quick, intuitive representation of a software tool, function or a data file accessible on the system. It functions as an...
is a small picture that represents objects such as a file, program, web page, or command. They are a quick way to execute commands, open documents, and run programs. Icons are also very useful when searching for an object in a browser list, because in many operating systems all documents using the same extension will have the same icon.
Controls (or Widgets)
Interface element that a computer user interacts with, and is also known as a control or Widget.Window
Window (computing)
In computing, a window is a visual area containing some kind of user interface. It usually has a rectangular shape that can overlap with the area of other windows...
: A paper-like rectangle that represents a "window" into a document, form, or design area.
Pointer (or mouse cursor): The spot where the mouse "cursor" is currently referencing.
Text box
Text box
A text box, text field or text entry box is a kind of widget used when building a graphical user interface . A text box's purpose is to allow the user to input text information to be used by the program...
: A box in which to enter text or numbers.
Button
Button (computing)
In computing, a button is a user interface element that provides the user a simple way to trigger an event, like searching for a query at a search engine, or to interact with dialog boxes, like confirming an action.-Description:A typical button is a rectangle or rounded rectangle, wider than it is...
: An equivalent to a push-button as found on mechanical or electronic instruments.
Hyperlink
Hyperlink
In computing, a hyperlink is a reference to data that the reader can directly follow, or that is followed automatically. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks...
: Text with some kind of indicator (usually underlining and/or color) that indicates that clicking it will take one to another screen or page.
Drop-down list
Drop-down list
In computing with graphical user interfaces, a drop-down list is a user interface control GUI element , similar to a list box, which allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. When activated, it displays a list of values, from...
: A list of items from which to select. The list normally only displays items when a special button or indicator is clicked.
List box: A GUI widget that allows the user to select one or more items from a list contained within a static, multiple line text box.
Combo box
Combo box
A combo box is a commonly used graphical user interface widget . It is a combination of a drop-down list or list box and a single-line textbox, allowing the user to either type a value directly into the control or choose from a list of existing options.Combo boxes are typically applied to provide...
: A combination of a drop-down list or list box and a single-line textbox, allowing the user to either type a value directly into the control or choose from the list of existing options.
Check box
Check box
In computing, a checkbox is a graphical user interface element that permits the user to make multiple selections from a number of options or to have the user answer yes or no on a simple yes/no question.Normally, checkboxes are shown on...
: A box which indicates an "on" or "off" state via a check mark ☑ or a cross ☒. Sometimes can appear in an intermediate state (shaded or with a dash) to indicate mixed status of multiple objects.
Radio button
Radio button
A radio button or option button is a type of graphical user interface element that allows the user to choose only one of a predefined set of options....
: A button, similar to a check-box, except that only one item in a group can be selected. Its name comes from the mechanical push-button group on a car radio receiver. Selecting a new item from the group's buttons also deselects the previously selected button.
Cycle button
Cycle button
A cycle button is a graphical user interface element that allows the user to choose one from a predefined set of options. It is used as a button the content of which changes with each click and cycles between two or more values; the currently displayed value is the user's choice.A cycle button's...
: A button that cycles its content through two or more values, thus enabling selection of one from a group of items.
Datagrid
Grid view
A grid view or a datagrid is a graphical user interface element that presents a tabular view of data. A typical grid view also supports some or all of the following:* Clicking a column header to change the sort order of the grid...
: A spreadsheet
Spreadsheet
A spreadsheet is a computer application that simulates a paper accounting worksheet. It displays multiple cells usually in a two-dimensional matrix or grid consisting of rows and columns. Each cell contains alphanumeric text, numeric values or formulas...
-like grid that allows numbers or text to be entered in rows and columns.
Tabs
A tabTab (GUI)
In the area of graphical user interfaces , a tabbed document interface is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents...
is typically a rectangular small box which usually contains a text label or graphical icon associated with a view pane. When activated the view pane, or window, displays widgets associated with that tab; groups of tabs allow the user to switch quickly between different widgets. This is used in the web browsers Firefox
Mozilla Firefox
Mozilla Firefox is a free and open source web browser descended from the Mozilla Application Suite and managed by Mozilla Corporation. , Firefox is the second most widely used browser, with approximately 25% of worldwide usage share of web browsers...
, Internet Explorer
Internet Explorer
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...
, Konqueror
Konqueror
Not to be confused with the Conqueror web browser.Konqueror is a web browser and file manager that provides file-viewer functionality for file systems such as local files, files on a remote ftp server and files in a disk image. It is a core part of the KDE desktop environment...
, Opera
Opera (web browser)
Opera is a web browser and Internet suite developed by Opera Software with over 200 million users worldwide. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent,...
, and Safari
Safari (web browser)
Safari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the...
. With these browsers, you can have multiple web pages open at once in one window, and quickly navigate between them by clicking on the tabs associated with the pages. Tabs are usually placed in groups at the top of a window, but may also be grouped on the side or bottom of a window.
Tabs are also present in the settings panes of many applications. Windows for example uses tabs in most of its control panel dialogues.
Interaction elements
Some common idiomIdiom
Idiom is an expression, word, or phrase that has a figurative meaning that is comprehended in regard to a common use of that expression that is separate from the literal meaning or definition of the words of which it is made...
s for interaction have evolved in the visual language used in GUIs. Interaction elements are interface objects that represent the state of an ongoing operation or transformation, either as visual remainders of the user intent (such as the pointer), or as affordance
Affordance
An affordance is a quality of an object, or an environment, which allows an individual to perform an action. For example, a knob affords twisting, and perhaps pushing, while a cord affords pulling...
s showing places where the user may interact.
Cursor
A cursor is an indicator used to show the position on a computer monitor or other display device that will respond to input from a text input or pointing device.Pointer
One of the most common components of a GUI on the personal computerPersonal computer
A personal computer is any general-purpose computer whose size, capabilities, and original sales price make it useful for individuals, and which is intended to be operated directly by an end-user with no intervening computer operator...
is a pointer: a graphical image on a screen that indicates the location of a pointing device, and can be used to select and move objects or commands on the screen. A pointer commonly appears as an angled arrow, but it can vary within different programs or operating system
Operating system
An operating system is a set of programs that manage computer hardware resources and provide common services for application software. The operating system is the most important type of system software in a computer system...
s. Example of this can be found within text-processing applications, which uses an I-beam pointer that is shaped like a capital I, or in web browser
Web browser
A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier and may be a web page, image, video, or other piece of content...
s which often indicate that the pointer is over a hyperlink
Hyperlink
In computing, a hyperlink is a reference to data that the reader can directly follow, or that is followed automatically. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks...
by turning the pointer in the shape of a gloved hand with outstretched index finger.
The use of a pointer is employed when the input method, or pointing device, is a device that can move fluidly across a screen and select or highlight objects on the screen. Pointer trails can be used to enhance its visibility during movement. In GUIs where the input method relies on hard keys, such as the five-way key on many mobile phones, there is no pointer employed, and instead the GUI relies on a clear focus
Focus (computing)
In computing, the focus indicates the component of the graphical user interface which is currently selected to receive input. Text entered at the keyboard or pasted from a clipboard is sent to the component which currently has the focus. Moving the focus away from a specific user interface element...
state.
Selection
A selectionSelection (user interface)
In computing and user interface engineering, a selection is a list of items on which user operations will take place. The user typically adds items to the list manually, although the computer may create a selection automatically. A precision pointing device or by hand on a touchscreen device is...
is a list of items on which user operations will take place. The user typically adds items to the list manually, although the computer may create a selection automatically.
Adjustment handle
A handleAdjustment handles
Adjustment handles are the small boxes appearing on the corners and edges of a "selected control" that let you change the size and shape of the control....
is an indicator of a starting point for a drag and drop operation. Usually the pointer shape changes when placed on the handle, showing an icon that represents the supported drag operation.
See also
- Components of a graphical user interface
- Interaction techniqueInteraction techniqueAn interaction technique, user interface technique or input technique is a combination of hardware and software elements that provides a way for computer users to accomplish a single task. For example, one can go back to the previously visited page on a Web browser by either clicking a button,...