Elements of graphical user interfaces

Graphical user interfaces, also known as GUIs, make it easier for people with little computer skills to work with and use computer software. It is a visual front to a piece of software that links the user to the internal workings of a computer, or piece of software. Another common way of defining a GUI is by its visual elements, which simplify the way the user interacts with the computer.

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. 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.

Pointing Devices

The pointer is a graphical representation of the movements made by a [http://www.computeruser.com/resources/dictionary/definition.html?lookup=5273 pointing device] . The most common pointing device is the mouse; other kinds include a tracker ball, touchpad, pointing stick, lightpen, and various other kinds of digitizing tablets.

*A mouse moves the graphical pointer by being slid across a smooth surface. The conventional roller-ball mouse uses a ball to create this action: the ball is in contact with two small shafts that are set at right angles to each other. As the ball moves these shafts rotate, and the rotation is measured by sensors within the mouse. The distance and direction information from the sensors is then transmitted to the computer, and the computer moves the graphical pointer on the screen by following the movements of the mouse. Another common mouse is the optical mouse. This device is very similar to the conventional mouse but uses visible or infrared light instead of a roller-ball to detect the changes in position. ["mouse.” FOLDOC.com. 19 September 2006..]

*A trackball is a pointing device consisting of a ball housed in a socket containing sensors to detect rotation of the ball about two axes, similar to an upside-down mouse: as the user rolls the ball with a thumb, fingers, or palm the mouse cursor on the screen will also move. Tracker balls are commonly used on CAD workstations for ease of use, where there may be no desk space on which to use a mouse. Some are able to clip onto the side of the keyboard and have buttons with the same functionality as mouse buttons. ["tracker ball.” FOLDOC.com. 19 September 2006..]

*A touchpad or trackpad is a stationary pointing device, commonly used on laptop computers. It is flat surface that you slide your finger over to make the graphical pointer move, in much the same way as you would with a mouse. It uses a two-layer grid of electrodes to measure finger movement: one layer has vertical electrode strips that handle vertical movement, and the other layer has horizontal electrode strips to handle horizontal movements. ["touchpad.” FOLDOC.com. 19 September 2006..]

*A pointing stick is a pointing device that is comparable to a touchpad, and is found on laptops embedded between the 'G', 'H', and 'B' keys. It operates by sensing the force applied by the user. The corresponding "mouse" buttons are commonly placed just below the spacebar. It is also found on mice and some desktop keyboards.

*A lightpen is a device similar to a touch screen, but uses a special light sensitive pen instead of the finger, which allows for more accurate screen input. As the tip of the light pen makes contact with the screen, it sends a signal back to the computer containing the coordinates of the pixels at that point. It can be used to draw on the computer screen or make menu selections, and does not require a special touch screen because it can work with any CRT-based monitor.

*A digitizing tablet is "An input device that enables you to enter drawings and sketches into a computer. A digitizing tablet consists of an electronic tablet and a cursor or pen. A cursor (also called a puck) is similar to a mouse, except that it has a window with cross hairs for pinpoint placement, and it can have as many as 16 buttons. A pen (also called a stylus) looks like a simple ballpoint pen but uses an electronic head instead of ink. The tablet contains electronics that enable it to detect movement of the cursor or pen and translate the movements into digital signals that it sends to the computer." [“digitizing tablet.” Webopedia.com. 19 September 2006..] This is different from a mouse because each point on the tablet represents a point on the screen.

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. 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. ["Window Definition.” linfo.org 9 August 2004. 19 September 2006..]

*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.

*Terminal windows are designed for embedding interaction with text user interfaces within the overall graphical interface. 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.

* 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.

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. ["menu.” FOLDOC.com. 19 September 2006..]

*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.

*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. ["pull-down menu.” FOLDOC.com. 19 September 2006..]

*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."How to Use Menus.” java.sun.com. 19 September 2006..] ["context-sensitive menu.” FOLDOC.com. 19 September 2006. .]

*A menu item is an individual item within a menu.

Icons

An icon is a graphical image, small picture or object that represents 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.

tandard Widgets

A widget is an interface element that a computer user interacts with, and is also known as a control. Programmers of GUIs use off-the-shelf libraries of common reusable widgets to build applications.

;Window: A paper-like rectangle that represents a "window" into a document, form, or design area.;Pointer: 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. ;Hyper-link: Text with some kind of indicator (usually color or underlining) 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.;Data grid: A spreadsheet-like grid that allows numbers or text to be entered in rows and columns.

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, Opera, Konqueror, and Internet Explorer (v.7+). With these browsers, you can have multiple web pages open at once 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.

ee also

Interaction technique

References