Previous Section

Level Up

Next Section

 

Visual Components

 

 

Contents

 

1 Icons
2 Menus
2.1 The Main Menu
2.1.1 Selecting Options from the Main Menu
2.1.2 Shortcut Keys in the Main Menu
2.2 Pull-Down Menus
2.2.1 Selecting Options from a Pull-Down Menu
2.2.2 Shortcut Keys in Pull-Down Menus
3 Cascading Menus
4 Disabled (grayed) Menu Options
5 Dialog Boxes
5.1 Basic Features and Navigation
5.1.1 Message Boxes
5.1.2 Navigating Inside Dialog Boxes
5.1.3 Using Ok and Cancel Push Buttons
5.1.4 Tab Sections
5.1.5 Disabled Dialog Elements
5.1.6 The Query Icon
5.2 Dialog Elements
5.2.1 Push Buttons
5.2.2 Check Boxes
5.2.3 Radio Buttons
5.2.4 Edit Fields
5.2.5 List Boxes
5.2.5.1 Single Item List Box
5.2.5.2 Drop-Down List Box
5.2.5.3 List View
5.2.5.4 Examples of List Boxes
5.2.6 Combo Boxes
5.2.7 Sliders
5.2.8 Spinners

 

Visual components are the elements or modules of the Graphical User Interface. They actually build all the contents of each window.

Use a mouse device or shortcut keys to navigate between elements, to choose them or to activate them.

 

1 Icons

 

An icon is a small picture that represents a particular task or operation, file or application. Icons are designed to be manipulated with the mouse, but almost every operation can also be executed with keyboard commands. Icons in some applications can be moved around the screen, and in some cases this means that you are moving or copying a file or a folder from one place to another. For example, using the Explorer program, dragging a file icon from one folder and dropping it in another folder on the same drive will move the file.

 

Most icons have names below them which make them easy to identify and for screen-readers to tell you what the icon is. The modern Screen Readers can automatically name icons which have the property of tool tips set.

A tool tip is a short explanatory text displayed on the Status Bar when the mouse pointer is moved over an icon.

To let ***sr automatically label all icons in an application window, press ***Automatic_Graphics_Labeler. This operation is normally somewhat time intensive so you have to wait some time and to test if ***sr is ready for your command input before you continue to work.

 

Some icons which appear on the toolbar in different programs are originally accessible only for mouse users. They are just small pictures visualizing a concrete operation and have no name and no tool tip.

If the option for displaying graphics is set to "All", ***sr displays some internal numbers for these icons. By pressing ***graphics_labeler you can switch to the Graphics Labeler and label them manually.

 

Fortunately the toolbar icons are often only shortcuts for options which appear in a menu.

There are 3 types of icons in Windows:

  1. File and Application Icons:
    These represent individual files or an individual application (such as Word for Windows). File and Application icons are seen in programs such as Windows Explorer and My Computer. Each of these icons has a textual label so is accessible. When you activate a file icon, you load the file and the application which is registered in the System Registry to process this type of files. When you activate an application icon you just load the application.
  2. Shortcut Icons:
    These are shortcuts to your favorite programs or individual files convenient for very quick access. These are very small files which are simply pointers to where the original program or file is stored on your hard disk.
    You should put shortcuts on the Desktop, and in the Start Menu and its sub-folders.
    Use My Computer application to create, rename, delete shortcuts or to assign them a shortcut key.
  3. Toolbar Icons:
    These represent a task on a toolbar in an application. For example, clicking on a picture of a printer in Microsoft Word toolbar activates the Print operation.

 

Back To Contents

 

2 Menus

The term menu comes from the simple example of a restaurant menu. You are presented with a list of items from which you can choose.

Most Windows applications have several menus which have different names, including a menu bar, a Control Menu, and pull-down menus, and some applications may also have further menus called cascading menus.

 

 

Back To Contents

 

2.1 The Main Menu

 

All Windows applications are driven from a menu bar, which is accessed in a standard way. The menu bar (sometimes called the main menu) is a line of high level command options in a row near the top of the application window, from which all operations are initiated. For example, the menu options of a word processor often include: File, Edit, View, Format, Help.

As most Windows applications are written to follow design recommendations, menu bars will tend to look fairly similar in terms of the sorts of options on them, and their order, but the specific options will obviously depend on the application.

 

 

Back To Contents

 

2.1.1 Selecting Options from the Main Menu

 

Most Windows applications are written following design recommendations, so in principle most applications should behave similarly in terms of executing commands. The menu bar itself is always activated with the ALT key or F10, which puts a highlight on the first menu item.

In some applications which cannot open more than one document window at a time, this first item might be the Control Menu icon for the application, or the first menu bar item, such as File. If the application has more than one document window open, pressing ALT or F10 will put a highlight on the Control Menu icon for the active document window.

The highlight is moved along the menu bar options using the LEFT and RIGHT ARROW keys, which cycles through the menu items. As you move the highlight along the menu bar and in pull-down menus, the status bar of some applications may give you a short description of what each option does.

 

 

Back To Contents

 

2.1.2 Shortcut Keys in the Main Menu

 

Options in the menu bar have shortcut keys, also called accelerators, which allow you to choose an option from a menu quickly by pressing the ALT key plus the accelerator letter. For example, ALT+H for Help, and ALT+F for File. These shortcut keys are indicated visually by underlined characters, so H on the option Help is underlined, and opens the help pull-down menu, and ALT+F opens the pull-down menu for the File option.

In addition some commands can be accessed with single key-presses called hotkeys - for example in most applications ALT+F4 will close the active application directly bypassing the File menu (as if you had chosen File, then Exit).

 

 

Back To Contents

 

2.2 Pull-Down Menus

 

Most options on the menu bar of applications have pull-down menus which give a vertical list of further choices specific to the main menu bar option chosen. Pull-down menus quite literally are pulled down from the menu bar option, so appear on the screen directly under the menu bar option you selected. For example, File on the menu bar usually leads to a pull-down menu containing at least: Open, Save, Print, Exit.

Execution of an option from a pull-down menu option usually leads to one of three things:

  1. Immediate execution of the selected option, e.g. Exit (the program) or Print (a file)
  2. a dialog box opens requesting more information or confirmation, e.g. Open or Save option from the File Menu.
    This is indicated by three dots after the menu item.
  3. a sub-menu opens called a Cascading Menu which is indicated by a right-pointing arrow-head after the pull-down menu item.

If you are in a pull-down menu, and you press the LEFT or RIGHT ARROW keys, you will either

 

 

Back To Contents

 

2.2.1 Selecting Options from a Pull-Down Menu

 

By default, when the pull-down menu is opened the first item on it is highlighted. One way of choosing an item from a pull-down menu is to use the UP and DOWN ARROW keys to move the highlight up and down the list of options, and then pressing ENTER to execute the highlighted item.

The other way is to use the shortcut keys.

 

 

Back To Contents

 

2.2.2 Shortcut Keys in Pull-Down Menus

 

Many options in pull-down menus have shortcut keys (accelerators) which allow you to choose an item from the pull-down menu quickly with a single key press, for example, P for Print. These shortcut keys are indicated by underlined characters, so the letter P on the option Print is underlined and opens the Print dialog box.

In contrast to menu bars, in pull-down menus the shortcut keys are used without the ALT key. This difference is important to remember, since if you press ALT while the pull-down menu is open, you will cancel all menus.

 

Check Boxes as Options in Pull-Down Menus

 

Sometimes an item on a pull-down menu can simply be on or off. For example the option View Toolbar displays the toolbar if it is on (has a tick or dot next to it) and if it is off does not display the toolbar (no mark next to the option).

Each time you select the option the item will toggle between on and off. The shortcut key can be used to turn this option on and off. This is how you choose to see or to hide the bar of icon commands in an application, or for viewing or hiding the status bar which displays information like the file size or page number for example.

 

 

Back To Contents

 

3 Cascading Menus

 

Sub-menus that are invoked from pull-down menus are known as cascading or nested menus. The existence of a cascading menu is indicated with a right pointing arrow-head next to the parent menu item. The most examples of nested menus you can find in the Start Menu.

Pressing ENTER or RIGHT ARROW at this point opens a cascading menu which appears to the right of the selected option, offering a vertical list of further options which works like a normal pull-down menu.

To close a cascading menu and return to its parent option use LEFT ARROW or ESCAPE.

 

 

Back To Contents

 

4 Disabled (grayed) Menu Options

 

Sometimes items in pull-down menus are not available at the current time. These items are disabled and are in gray color. Enabled or active options are in black. Executing an disabled item will cause no action.

This feature prevents us from trying to execute meaningless operations. For example, in an Edit menu, the option Paste may be disabled until you have executed a Copy or Cut command to put some data on the Clipboard. If the Clipboard is empty there is no data to Paste so the option is disabled. It is re-enabled as soon as there is data to be pasted from the Clipboard.

 

Canceling Menus

 

To cancel activation of the current level of menu press ESCAPE.
If you are in a cascading menu ESCAPE will close the cascading menu and return to its parent option. You can also use LEFT ARROW to close a cascading menu.

ESCAPE always returns you to the previous level of menu, or will cancel the menu bar activation, if no other menus are currently open.

Pressing ALT at any level of menu activation closes all menus.

 

 

Back To Contents

 

5 Dialog Boxes

 

 

Back To Contents

 

5.1 Basic Features and Navigation

Note: To feel a Dialog box, see the tactile foil A10.

 

A dialog box is a window that appears temporarily on top of your application window which requests a variety of information in one place, specific to your pull-down menu command. Many dialog boxes have options you can choose before Windows carry out a command and therefore dialog boxes are used to complete interactive tasks.

Dialog boxes are designed to reduce memory load and make executing a task more user friendly since all information specific to your current task is presented to you in one place, and they are easy to navigate around using TAB or shortcut keys.

A dialog box generally presents you with a range of options to help you to complete your task. You move around the dialog box using TAB and make changes to or selections from these options using special keys depending on the type of option. You can also move to and change an option immediately using shortcut keys for each option or clicking it with the mouse which makes it very quick to work in common dialog boxes.

The various options in a dialog box are presented using combinations of the 8 standard visual components described in the following sections. Each component represents a different type of option and is executed in a different way. These 8 elements are:

  1. Push buttons
  2. Check boxes
  3. Radio buttons
  4. Edit fields
  5. List boxes
  6. Combo boxes
  7. Sliders and
  8. Spinners.

 

Once you know how to navigate inside dialog boxes and how to operate these 8 elements you should be able to work inside any novel dialog box without any trouble.

 

Dialog boxes are simple windows which do not have a menu bar or a Control Menu . There are two types of dialog boxes:

  1. modal: which means that you can not continue working in your application until you close it - for example a Print dialog box requires you either to execute the Print command or to cancel the print command before you can continue working
  2. modeless: is the less common type of dialog boxes which means that you can continue working in your application while it is open. Examples of modeless dialog boxes are the Spell Check dialog box and the Find dialog box in Microsoft Word. This allows you to swap between a dialog box and the document you are working in using the command CONTROL+TAB. This command may also work for modeless dialog boxes in other applications.

Dialog boxes usually contain an option called "OK" which tells the application to close the dialog box and execute everything you specified in it. There is also usually an option called "Cancel" which closes the dialog box ignoring all the changes you may have made. There may also be an option called "Apply" which gives you the chance to test changes you have made in the dialog box without closing it. All of these options are so-called Push buttons.

 

 

Back To Contents

 

5.1.1 Message Boxes

 

Message boxes are simple dialog boxes which do not require much dialog. They appear containing messages or warnings which usually need to be acknowledged by choosing OK, in order to finish executing a particular task you tried to perform, or to resolve a particular problem before you can continue working.

Some of very often appearing messages are:

 

Back To Contents

 

5.1.2 Navigating Inside Dialog Boxes

 

As with all windows only one window at a time can have the system focus. This means that when a dialog box is open it becomes the active window, not the application window, and the dialog box has a blue title bar. As soon as the dialog box opens the focus inside the dialog box generally goes to the first element or control in the dialog box. The focus is indicated visually by a dotted line around the element.

The focus is moved either by using TAB and SHIFT+TAB to move forward or backward between single elements or by using shortcut keys for single controls if any. The items in a dialog box can have shortcut keys similar to those used in the menu bar of the application, and can therefore be selected with ALT key together with the underlined letter.

Some elements are actually operated with these shortcut keys (an option may be turned on or off, for example), but others require additional stages of operation once the shortcut keys have taken the system focus to that element (for example, going to a list of files, and then having to move through the items in the list using the ARROW keys).

When the element you require has the focus you can then make changes to it.

Generally, the system focus moves through the elements in the dialog box by using the TAB key in a systematic top-left to bottom-right order but the programmers are free to define their own tab order.

 

 

Back To Contents

 

5.1.3 Using Ok and Cancel Push Buttons

 

It is important to note that any changes or selections you make from individual elements within the dialog box remain until you choose OK, Cancel or Apply. You rarely need to press ENTER inside dialog boxes, with a few exceptions. These are indicated where relevant in the following sections.

 

 

Back To Contents

 

5.1.4 Tab Sections

 

Dialog boxes can break up huge amount of coherent dialog material into smaller sections, which are presented like index cards in a box, and each section is on a separate card.

Each Tab section or properties sheet has a section divider on its top edge showing the title of the section.

To switch between different Section Tabs in a dialog box use CONTROL+TAB which brings the next section to the front, with the focus on the first element in the new section. Alternatively, when the focus is on the current Section Tab use the LEFT and RIGHT ARROW keys to change to a new Section Tab.

Sometimes there is more than one row of Section Tabs and to change to a new row of Section Tabs use the UP and DOWN ARROW keys. Then use the LEFT and RIGHT ARROW keys to move along that row. The TAB key is then used to move the focus from the current Section Tab to the elements in that section as described above.

 

 

Back To Contents

 

5.1.5 Disabled Dialog Elements

 

Sometimes elements in a dialog box are disabled (unavailable) and are shown on the screen in gray instead of the usual black color. These options are disabled at some times to stop us from trying to perform meaningless actions. Disabled options may become enabled when you have made changes to other options in the dialog box relevant to the current task.
For example, in the Save As dialog box the OK pushbutton is disabled until you have entered the name of the file to save in the edit field. Therefore if you want to use a particular option which is currently disabled you have to make specific changes to other options in order to re-enable it.

 

 

Back To Contents

 

5.1.6 The Query Icon

 

In some dialog boxes there is a small help command available, shown on the title bar as a box containing a question mark. This is a Query Icon which offers you a short description of what an element in a dialog box does. You can try this facility using the keyboard by bringing the focus to the item you need help on, and pressing F1. This opens a pop-up definition of that dialog box item. For example, on the Cancel pushbutton the query description is:

"Closes this dialog box, without saving any changes you have made."

 

To close the query box, press ESCAPE.

This is equivalent to opening the item's Context Menu (SHIFT+F10 or APPLICATION key) and choosing the menu item "What's This?".

 

 

Back To Contents

 

5.2 Dialog Elements

 

 

Back To Contents

 

5.2.1 Push Buttons

Note: To feel a Push button, see the tactile foil A2.

 

On the screen push buttons are rectangular buttons which look like you should push them. They are used to initiate an immediate action such as carrying out or canceling a command.

Push buttons can be activated with ENTER or SPACE once they have the system focus. To move the system focus use TAB or SHIFT+TAB and when on the desired push button, press ENTER or SPACE to activate the it. This is also how you use the application buttons on the Taskbar.

In every dialog box there is usually an OK button, which closes the dialog box and executes the command applying the choices you made in the dialog box.

 

In addition, you usually have the option to cancel any command with the Cancel button. The shortcut for the Cancel push button is ESCAPE.

 

Sometimes there is also a Help push button (shortcut is usually ALT+H), which brings up the dialog box's Help information box. There might also be an Apply button (shortcut ALT+A), which executes everything you have requested, but does not close the dialog box. This might be useful if you want to check the results of a particular option before continuing to make selections in the dialog box, and without having to keep closing and opening the dialog box. For example you might want to keep testing the effects of particular settings which affect the keyboard input.

In general, the OK button is what is called the Default Push button in dialog boxes, and will be pushed immediately if you press ENTER if you are anywhere in the dialog box, with the following 2 exceptions:

  1. ENTER will not choose OK if the system focus is on another push button
  2. ENTER will not choose OK if the focus is in a list box for changing folder or drives and one folder/drive in the list is selected. Pressing ENTER here changes to the selected folder/drive and does not choose the OK button.

On some occasions, the OK button might be disabled, (shown in gray), indicating that you must make some selection before executing the OK command.

 

 

Back To Contents

 

5.2.2 Check Boxes

Note: To feel a Check box, see the tactile foil A3.

 

Check Boxes allow you to select an option which can be on or off. Check Boxes can be grouped together for related options (like text formatting) but they are independent of each other. You can select as many or as few as you like - they are optional and do not affect each other.

Check boxes toggle on and off, that is, they are checked or unchecked (some say selected and deselected).

Visually a check box is a little square which is empty if unchecked, and has a tick in it when it is checked.

The check boxes can be checked and unchecked immediately using their shortcut keys, or by the longer method of moving the system focus to the desired check box, and then pressing SPACE.

Examples of checkboxes are:

 

 

Back To Contents

 

5.2.3 Radio Buttons

Note: To feel a Radio button, see the tactile foil A4.

 

Radio buttons are a group of options relating to one particular parameter. They are a mutually exclusive group of options from which one and only one must always be selected. On the screen a radio button is a little circle with a black dot inside if it has the selection, and empty if not.

There are two ways of selecting a radio button in a dialog box. Using its shortcut key you move the selection immediately from the current radio button to the new one. The second way is to move the system focus to the group with TAB or SHIFT+TAB and then to change the selected radio button from one to the other in the group with the UP and/or DOWN ARROW keys.

Once you have changed the selected radio button you can move away from the group with TAB.

Some examples of Radio buttons are:

According to the art of selecting elements, there are two types of radio button groups:

  1. In a traditional radio button group the selection automatically follows the cursor. That means, using the ARROW keys moves the selection from button to button like in a list view.
  2. In a modern radio button group, moving from a button to another with the ARROW keys doesn't remove the selection from the previously selected option. To select one of them, press SPACE when pointing to it.

 

 

Back To Contents

 

5.2.4 Edit Fields

 

Note: To feel an Edit field, see the tactile foil A5.

 

Edit fields refer to any field in which you can enter text. This could mean your entire word processing page, but in a dialog box it is usually a restricted text entry field with limited number of text lines or with only one text line limited to a maximum number of characters.

When the system focus is on an empty edit field your insertion point - the place at which any input from the keyboard appears in the text - is at the start of the line in the edit field. This is shown on the screen as a single vertical bar or in other applications as a little black rectangle.

To move the insertion point there are standard Windows word-processing keyboard commands which move it through the text.

If the edit field already contains text when the focus comes on the edit field, the text is highlighted (selected) and the insertion point is at the end of the selected text. This selected text is fragile and any key press will overwrite this selection, unless it is a command like Copy, Cut etc.
Thus, pressing DELETE will delete the entire selection and pressing any letter will replace the highlighted selection.

To edit the selected text without deleting or overwriting it you have first to remove the highlighting. One press of an  ARROW, HOME or END will de-select the text. This leaves the insertion point at the end of the text. Then you can move the insertion point to the wanted location.

To select (highlight) text, hold SHIFT down while using the ARROW keys, HOME or END to move the insertion point highlighting over the text. Release SHIFT when you reach the end of the text which has to be selected. Now it is ready to be copied, cut, deleted etc.

In a word processing edit field you can use combinations of keys like CONTROL+END to jump to the end of the document. If used with SHIFT this will select all text from the insertion point to the end of the document - shortcut CONTROL+SHIFT+END.

Clicking with the mouse somewhere in an edit field, sets the insertion point to that location.

 

 

Back To Contents

 

5.2.5 List Boxes

 

Note: To feel a List box, see the tactile foil A6.

 

A list box is a list of items grouped under a particular heading, surrounded by a thin rectangular border and can be used to display for example

 

There are several slightly different types of list boxes depending on their purpose.

 

 

Back To Contents

 

5.2.5.1 Single Item List Box

 

A single item list box is a list box where you can choose only one item at a time. Used for example for specifying the style of text.

To make selections from single item list boxes,

 

 

Back To Contents

 

5.2.5.2 Drop-Down List Box

 

A drop-down list box (indicated with a little downwards pointing arrow-head to the right of the displayed selection) is used when there is not enough place to display the whole list. The current selection is shown in the box. It is used in the same way as a simple list box:

 

 

Back To Contents

 

5.2.5.3 List View

 

A list view is an extended list box allowing you to choose for example one file or a block of files from a presented list e.g. if you are converting whole batches of files from one format to another.

If you will select only a single item from the list,

If you will select more adjacent items (in this case files),

If you will select more separate items from a list (rather than blocks of items),

  1. With the ARROW keys move the selection to the first item that should be selected.
  2. Hold down the CONTROL key
  3. Move with the ARROW keys to the next item that should be selected
  4. Press SPACE to toggle the selection of this item on or off
  5. Repeat steps 3 and 4 until all items you want are selected
  6. Release the CONTROL key
  7. Now tab away from the list or press a shortcut key to execute a command related to the selected items.

IMPORTANT: When working in list views for drives or folders, you must press ENTER to change the selected folder or drive. Navigation Keys - SPACE or ARROW Keys - will not be sufficient. This is the only case when pressing ENTER in a dialog box will not press the default push button (in most cases OK).

 

 

Back To Contents

 

5.2.5.4 Examples of List Boxes

 

 

Back To Contents

 

5.2.6 Combo Boxes

 

Note: To feel a Combo box, see the tactile foil A7.

 

As their name suggests, Combo boxes are a combination of Edit fields and List boxes. 

In a Combo box a list box and an Edit field are highly related and may have separate shortcut keys. They can also be accessed separately with the TAB key. Changes or selections you make in one will immediately affect the other. You can type your choice directly into the edit field or you can choose an item from the list using normal list box commands.

TAB and SHIFT+TAB keys are used to move between the edit field and the list box, whereas UP and DOWN ARROW are used to move the highlight within the list box.

Combo boxes can be used in File Open dialogs for example to specify that only the .TXT files of a folder should be listed in the files list box. This means that it is quicker and easier to find a certain .TXT file, instead of having to move through all types of files in a folder.

 

 

Back To Contents

 

5.2.7 Sliders

 

Note: To feel a Slider, see the tactile foil A9.

 

Windows uses a large number of sliders for choosing a value or position on a continuous scale of values. Once you focused on the slider element using the TAB key or the slider's shortcut key, use the LEFT and RIGHT ARROW keys to move a horizontal slider position along the bar, and the UP and DOWN ARROW keys on a vertical slider. Simply stop pressing when you reach the position you want to choose.

Sliders offer various levels of differentiation. Some of them have only a small number of scales, whereas the other use continuous scaling and so you may have to press the ARROW keys many times before you notice a difference. To move faster use also the other navigation keys like HOME - for the very first item; END for the last one; PAGE UP and PAGE DOWN - higher or lower value in discrete jumps on the scale.

Examples of Sliders

 

 

 

Back To Contents

 

5.2.8 Spinners

 

Note: To feel a Spinner, see the tactile foil A8.

 

To change some settings, like time or date, Windows uses controls called spinners. These are nothing more than boxes displaying the current setting with up and down arrow-heads which must be pressed to increase or decrease the value.
The Time control uses a set of spinners (Hour/Minute, Year/Day/Month) to change the settings of the Clock. The focus is moved from one part of the time spinner to the other using the TAB and SHIFT+TAB keys. Use the UP and DOWN ARROW keys to change the values or simply type in the desired figures.

Comments

 

If you have comments, suggestions or a bug report for the supporting team concerning this Tutorial section, please fill in the following form:

 

Sender's Name:

E-mail address:

Type of the Comment: 

Comment:

   

 


Previous Section

Level Up

Next Section