Graphical+User+Interface

toc =Graphical User Interfaces=



Introduction
A [|Graphical user interface] refers to the objects that can be interacted with on a computer screen, such as with a mouse or touchscreen. Graphical User Interfaces were designed to make it easier for the user and computer to communicate with each other. Users can communicate with their electronic devices through [|input devices] such as the mouse, webcam, keyboard, and game controllers. The interfaces communicates with the user through an [|output device] such as a monitor, projector, or speakers. The Graphical User Interface has replaced other ways of user and computer communication, most notably the command line interface, a signature of the DOS operating system of the 80s. Instead of typing command lines and codes, users can easily access the files and programs they want by clicking on graphical representations of physical objects. The first web browser that included GUI is MOSAIC (later known as Netscape), and was developed by Marc Andressen and Eric Bina and it can be traced back in 1993, the first GUI was a logo that had the word "MOSAIC"(CCT 260 Lecture Notes).

GUIs vs Command Prompt
GUIs tend to be more user friendly than command prompts, making use of recognition, perceived physical properties and direct manipulation. While users of the old Command Prompt interface had to remember an exact series of commands to reach certain files and programs, GUIs make all the available files visible for selection. This better assists the user in figuring out 'what to do next'. GUIs also mimic physical properties; folders are opened, trash cans are filled, buttons are pressed, windows are moved. This direct manipulation is similar to how we work and move about in the real world. In contrast, the Command Prompt interface only accepted textual commands.


 * [[image:commandprompt.JPG width="259" height="175" align="center"]] || [[image:widgets.JPG align="center"]] ||

Though mostly depreciated by GUIs, command prompts are still found in the command prompt in windows XP, ssh and telnet communications, and especially core unix interactions. Command line interfaces remain favorable in several contexts between users who know the proper command interface and computers in several contexts.

=Standard Components=

A common set of GUI components has risen, standardised mostly through the prevelance of the Windows operating system, which comes with a standard set for programmers to use (the API). Most of these standard components can be seen in the picture to the left, taken from Borland's Visual Studio 2006®. Several of these major components are especially prevelent: windows, edit boxes, menus, radio buttons, check boxes, tool bars, list boxes, and the slider. Though Most known for their inclusion in Windows, these objects can be found in most (if not all) GUIs, including linux, MacOS (which is currently based on the *nix kernel), Solaris, RISC (Reduced Instruction Set Computing) OS, and BSD systems.

Windows
Windows is another major component of a Graphical Interfaces. They "allow a workstation's screen to be divided into rectanglar areas which act like separate input and output channels that can be placed under the control of different applications" **(Benyon, Turner, and Turner, Pg140).** This can allow users the illusion of interactive multitasking as they work; they can interact and have the impression of several programs occuring at the same time in an environment which actually processes data in a linear fashion.



Menu
One of the major component of a Graphical User Interfaces is the "[|menu]". It "a list of command or options from which one can choose" **(Benyon, Turner, and Turner, Pg139)**. Some of the common options inculdes open, close, minimize, print, print preview, save, save as, copy, paste, undo, etc.


 * [[image:netstatruncmd.JPG align="center"]] || [[image:eudora1.gif width="218" height="195" align="center"]] ||

Edit Boxes
Edit boxes allow the user to type in text and see it visually on the screen in the position of the active box. The user can usually interact with the text in the edit box in several ways. In windows this includes the activation of the box with the click of a mouse, which displays a mouse-click or arrow movable carat (a flashing line) to show the user where they are currently inputting, and context menus allowing the copying and pasting of text. Edit boxes can be one line, such as those for inputting user names and passwords, or larger, such as the one used in the interface of the wikispaces "edit this page" section or that used in notepad (which consists of only a menu and a large edit box) or wordpad.

Radio Button
The purpose of [|radio button] is to allow users to make a specific choices or options. The idea of radio button came from the use of an actual radio to set a specific station. For example, all radio has fm and am stations where only one can be selected, just like a radio button in graphic user interface. Radio buttons usually come in the shape of a circle and many users use adobe photoshop to create them. One interesting fact about radio buttons is that when people create radio buttons of a form using HTML and no button was selected, then the outcome would be no value assigned because the user did not pick a choice. For example, for a radio button that has a group name burger with options hamburger or double hamburger, the value of burger would not be sumbit in the form because the user did not click on any radio button. **(Benyon, Turner, and Turner, Pg144).**


 * [[image:radio_button.png width="250" height="197" align="center"]] || [[image:RadioButtonDemo.gif width="241" height="196" align="center"]] ||

**Checkboxes**
Checkboxes allow the user to select multiple options in a setting. It appears in a square shape and with check mark symbol to represent "yes" or leave it blank to represent "no". The checkboxes elements is often used in different types of form or application such as job application, survey, and software. **(Benyon, Turner, and Turner, Pg145).**


 * [[image:checkbx2.png width="258" height="200" align="center"]] || [[image:checkbox.png width="358" height="232" align="center"]] ||

Sliders are usually implimented to allow the user to control aspects such as volume, intensity and transparency. These qualities are usually aspects that are more difficult to quantify into separate option buttons. For example, in terms of volume, "loud", "medium" and "quiet" can mean different things to different people. Therefore, instead of having three option buttons for these somewhat arbitrary choices, a slider can allow the user to set the volume exactly the way they want it. This is synonymous with the volume dial found on most stereos. Sliders take advantage of Norman's principle of Mapping. Users inheritantly know that moving the slider to the right will intensify the quality being adjusted while moving the slider to the left will do the opposite.
 * Sliders**

Individual elements of user interfaces

 * Elements of graphical user interfaces
 * About box
 * Dialog box
 * Icon

Related Links

 * [|Graphical User Interfaces]
 * [|Graphical User Interface Gallery], screenshots of various Graphical User Interfaces
 * [|Marcin Wichary's GUIdebook], Graphical User Interface gallery: over 5500 screenshots of UI, application and icon history
 * [|The Real History of the GUI], a very interesting article by Mike Tuck
 * [|A History of the GUI], by Jeremy Reimer of Ars Technica
 * [|Example of a 3D GUI]
 * User interface engineering
 * GUI Testing
 * Human-Machine Interface
 * WIMP (computing)

=References= > > >
 * Benyon, David, and Phil Turner. __Designing Interactive Systems__. Mateu Cromo: Pearson Education, 2005. 135-153.
 * "Graphical User Interface." __Graphical User Interface- Wikipedia, the Free Encyclopedia__. Wikipedia. 1 Dec. 2006 <[|http://en.wikipedia.org/wiki/GUI>.]
 * CCT260 Lecture Notes
 * Images**
 * Digital image. [Menu with Run options]. 20 Nov. 2006 <[|http://www.rrsecurity-abuse.com/images/netstatruncmd.JPG>.]
 * Digital image. [Menu with filters options]. 20 Nov. 2006 <[|http://csmp.ucop.edu/tcap/images/eudora1.gif>.]
 * Digital image. [Left Radio Button]. 20 Nov. 2006 <[|http://www.satimage.fr/software/images/radio_button.png>.]
 * Digital image. [Window Shut Down. 20 Nov. 2006 <[|http://www.functionx.com/visualc/images/dlgshutdown1.gif>.]
 * Digital image. [Pizza Check Box]. 20 Nov. 2006 <[|http://enchantia.com/software/graphapp/doc/tutorial/checkbx2.png>.]
 * Digital image. [First Check Box]. 20 Nov. 2006 <[|http://www.csse.monash.edu.au/~clm/csvg/checkbox.png]>.
 * Digital image. [Lindows Main Picture]. 20 Nov. 2006 <[|http://images.linspire.com/info/screenshots/Desktop9-17-02/Browser_on_LindowsOS.jpg>.]
 * command prompt taken from screen shot within windows XP proffessional ed. Courtesy Microsoft Corp. All rights reserved.
 * Standard components image and window image taken as screenshots from [|Borland Delphi 2006]. All rights reserved.