List of graphical user interface elements
   HOME

TheInfoList



OR:

Graphical user interface elements are those elements used by graphical user interfaces (GUIs) to offer a consistent visual language to represent information stored in computers. These make it easier for people with few 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, WIMP, or Wimps may refer to: Science and technology * Weakly interacting massive particle, a hypothetical particle of dark matter * WIMP (computing), the "window, icon, menu, pointer" paradigm * WIMP (software bundle), the web stack of Wind ...
("window, icon, menu, pointer") paradigm, although many are also used at other graphical post-WIMP interfaces. These elements are usually embodied in an interface using a widget toolkit or desktop environment.


Structural elements

Graphical 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" icon is clicked in the
Windows Operating System Windows is a group of several proprietary graphical operating system families developed and marketed by Microsoft. Each family caters to a certain sector of the computing industry. For example, Windows NT for consumers, Windows Server for ser ...
. It is easy for a user to manipulate a window: it can be shown and hidden by clicking on an icon or
application Application may refer to: Mathematics and computing * Application software, computer software designed to help the user to perform specific tasks ** Application layer, an abstraction layer that specifies protocols and interface methods used in a c ...
, 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 top – 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 number of windows that can be open at once. There are also many types of specialized windows. * A container window encloses other windows or controls. When it is moved or resized, the enclosed items move, resize, reorient, or are clipped by the container window. * A browser window allows the user to view and navigate through a collection of items, such as files or web pages. Web browsers are an example of these types of windows. * Text terminal windows present a character-based, command-driven text user interfaces within the overall graphical interface. MS-DOS and UNIX consoles are examples of these types of windows. Terminal windows often conform to the hotkey and display conventions of CRT-based terminals that predate GUIs, such as the VT-100. * A child window opens automatically or as a result of a user activity in a parent window. Pop-up windows on the Internet can be child windows. * A message window, or dialog box, 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 almost always have one or more buttons, which allow the user to dismiss the dialog with an affirmative, negative, or neutral response.


Menu

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 software. This limits the amount of documentation the user reads to understand the software. * A
menu bar A menu bar is a graphical control element which contains drop-down menus. 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 wi ...
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
menu In a restaurant, the menu is a list of food and beverages offered to customers and the prices. A menu may be à la carte – which presents a list of options from which customers choose – or table d'hôte, in which case a pre-established seque ...
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 menu 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 extras are individual items within or at the side of a menu.


Icons

An icon 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 elements known as
graphical control elements Graphics () are visual images or designs on some surface, such as a wall, canvas, screen, paper, or stone, to inform, illustrate, or entertain. In contemporary usage, it includes a pictorial representation of data, as in design and manufacture ...
, controls or widgets are software components that a computer user interacts with through direct manipulation to read or edit information about an application. Each widget facilitates a specific user-computer interaction. Structuring a user interface with Widget toolkits allow developers to reuse code for similar tasks, and provides users with a common language for interaction, maintaining consistency throughout the whole information system. Common uses for widgets involve the display of collections of related items (such as with various list and
canvas Canvas is an extremely durable plain-woven fabric used for making sails, tents, marquees, backpacks, shelters, as a support for oil painting and for other items for which sturdiness is required, as well as in such fashion objects as handbags ...
controls), initiation of actions and processes within the interface ( buttons and
menu In a restaurant, the menu is a list of food and beverages offered to customers and the prices. A menu may be à la carte – which presents a list of options from which customers choose – or table d'hôte, in which case a pre-established seque ...
s), navigation within the space of the information system ( links, tabs and
scrollbar A scrollbar is an interaction technique or widget in which continuous text, pictures, or any other content can be scrolled in a predetermined direction (up, down, left, or right) on a computer display, window, or viewport so that all of the con ...
s), and representing and manipulating data values (such as labels, check boxes,
radio button A radio button or option button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options. The singular property of a radio button makes it distinct from checkboxes, where the user ...
s,
sliders Slider or Sliders may refer to: Arts * K.K. Slider, a fictional character within the ''Animal Crossing'' franchise * ''The Slider'', a 1972 album by T. Rex * ''Sliders'' (TV series), an American science fiction and fantasy television series * S ...
, and spinners.)


Tabs

A tab 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 all modern web browsers. 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. Microsoft Windows, for example, uses tabs in most of its control panel dialogues.


Interaction elements

Some common
idiom An idiom is a phrase or expression that typically presents a figurative, non-literal meaning attached to the phrase; but some phrases become figurative idioms while retaining the literal meaning of the phrase. Categorized as formulaic language, ...
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 affordances 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

The pointer echoes movements of the pointing device, commonly a
mouse A mouse ( : mice) is a small rodent. Characteristically, mice are known to have a pointed snout, small rounded ears, a body-length scaly tail, and a high breeding rate. The best known mouse species is the common house mouse (''Mus musculus' ...
or touchpad. The pointer is the place where actions take place that are initiated through direct manipulation
gestures A gesture is a form of non-verbal communication or non-vocal communication in which visible bodily actions communicate particular messages, either in place of, or in conjunction with, speech. Gestures include movement of the hands, face, or ot ...
such as
click Click, Klick and Klik may refer to: Airlines * Click Airways, a UAE airline * Clickair, a Spanish airline * MexicanaClick, a Mexican airline Art, entertainment, and media Fictional characters * Klick (fictional species), an alien race in the g ...
, touch and
drag Drag or The Drag may refer to: Places * Drag, Norway, a village in Tysfjord municipality, Nordland, Norway * ''Drág'', the Hungarian name for Dragu Commune in Sălaj County, Romania * Drag (Austin, Texas), the portion of Guadalupe Street adj ...
.


Insertion point

The ''caret'',
text cursor In human–computer interaction, a cursor is an indicator used to show the current position on a computer monitor or other display device that will respond to input from a text input or pointing device. The mouse cursor is also called a Pointer ...
or ''insertion point'' represents the point of the user interface where the focus is located. It represents the object that will be used as the default subject of user-initiated
commands Command may refer to: Computing * Command (computing), a statement in a computer language * COMMAND.COM, the default operating system shell and command-line interpreter for DOS * Command key, a modifier key on Apple Macintosh computer keyboards * ...
such as writing text, starting a selection or a
copy-paste In human–computer interaction and user interface design, cut, copy, and paste are related commands that offer an interprocess communication technique for transferring data through a computer's user interface. The ''cut'' command removes the ...
operation through the keyboard.


Selection

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.


Adjustment handle

A handle 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

*
Interaction technique An 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 pa ...
* Geometric primitive


References

{{DEFAULTSORT:Graphical User Interface Elements