#Edit this page Wikipedia (en) copyright Wikipedia RSS Feed Wikipedia Atom Feed Elements of graphical user interfaces From Wikipedia, the free encyclopedia Jump to: navigation, search Graphical user interfaces, 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 the visual language interfaces. Contents * 1 Structural elements + 1.1 Window + 1.2 Menus + 1.3 Icons + 1.4 Controls (or Widgets) + 1.5 Tabs * 2 Interaction elements + 2.1 Cursor o 2.1.1 Pointer + 2.2 Selection + 2.3 Adjustment handle * 3 See also * 4 References [edit] 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. [edit] Window Main article: Window (computing) 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. It is easy for a user to manipulate a window: it can be opened and closed 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.^[1] * 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 window allows the user to move forward and backwards through a sequence of documents or web pages. Web browsers are an example of these types of windows. * Text terminal windows are designed for embedding interaction with text user interfaces within the overall graphical interface. MS-DOS and UNIX 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 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 usually have a button that must be pushed before the program can be resumed. [edit] 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 software. This limits the amount of documentation the user reads to understand the software.^[2] * A menu bar 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.^[3]^[4] * A menu 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.^[5] * 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.^[3] * Menu extras are individual items within or at the side of a menu. [edit] 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. [edit] Controls (or Widgets) Interface element that a computer user interacts with, and is also known as a control or Widget. 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. Check box A box which indicates an "on" or "off" state via a check-mark or an "×". 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. Datagrid A spreadsheet-like grid that allows numbers or text to be entered in rows and columns. [edit] 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 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. [edit] Interaction elements Some common idioms 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. [edit] Cursor Main article: Cursor (computers) 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. [edit] Pointer One of the most common components of a GUI on the personal computer 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 systems. 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 browsers 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. [edit] 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. [edit] 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. [edit] See also * Interaction technique [edit] References 1. ^ "Window Definition." Linfo.org. 9 August 2004. 19 September 2006. 2. ^ "menu." FOLDOC. 19 September 2006. 3. ^ ^a ^b "How to Use Menus." Sun Microsystems. 19 September 2006. 4. ^ "context-sensitive menu." FOLDOC. 19 September 2006. 5. ^ "pull-down menu." FOLDOC. 19 September 2006. v • d • e GUI widgets Command input Button · Context menu · Menu · Pie menu Data input-output Check box · Combo box · Drop-down list · Grid view · List box · Radio button · Scrollbar · Slider · Spinner · Text box Informational Balloon help · Heads-up display · Icon · Infobar · Label · Loading screen · Progress bar · Splash screen · Status bar · Throbber · Toast · Tooltip Containers Accordion · Disclosure widget · Menu bar · Panel · Ribbon · Tab · Toolbar · Window Navigational Address bar · Breadcrumb · Hyperlink · Tree view Special windows About box · Alert dialog box · Dialog box · File dialog · Inspector window · Modal window · Palette window Related concepts Layout manager · Look and feel · Metawidget · Widget toolkit Retrieved from "http://en.wikipedia.org/wiki/Elements_of_graphical_user_interfaces" Categories: User interface | Graphical user interface Views * Article * Discussion * Edit this page * History Personal tools * Try Beta * Log in / create account Navigation * Main page * Contents * Featured content * Current events * Random article Search ____________________ Go Search Interaction * About Wikipedia * Community portal * Recent changes * Contact Wikipedia * Donate to Wikipedia * Help Toolbox * What links here * Related changes * Upload file * Special pages * Printable version * Permanent link * Cite this page Powered by MediaWiki Wikimedia Foundation * This page was last modified on 28 November 2009 at 04:31. * Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. See Terms of Use for details. Wikipedia® is a registered trademark of the Wikimedia Foundation, Inc., a non-profit organization. * Contact us * Privacy policy * About Wikipedia * Disclaimers