User Interface Standards - Revision history

Sandhj2: /* Commands and Controls */

2009-11-23T20:37:47Z

Commands and Controls

← Older revision		Revision as of 20:37, 23 November 2009
Line 343:		Line 343:
	:*Make the first option the default option, since users often expect that—unless that order isn’t logical. To do this, you might need to change the option labels.		:*Make the first option the default option, since users often expect that—unless that order isn’t logical. To do this, you might need to change the option labels.
	:*Every radio button should have a label		:*Every radio button should have a label
		+
		+	====Links====
		+	:With a link, users can navigate to another page, window, or Help topic; display a definition; initiate a command or choose an option. A link is text or a graphic that indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter. Here are some generally used guidelines:
		+	:*A link that has been clicked must appear different than one that hasn't, usually this is done with bold and unbold
		+	:*Display a busy pointer if the result of clicking a link isn’t instantaneous. Without feedback, users might assume that the click didn’t happen and click again.
		+	:*Use the theme or link system colors for visited and unvisited links. The meaning of these colors is consistent across all programs. If for any reason users don’t like these colors (perhaps for accessibility reasons), they can change them themselves.
		+	:*Don’t use graphics-only links. Users have difficultly recognizing them as links and any text within the graphic (used to indicate their action when clicked) creates a localization problem.

	=Principles=		=Principles=

Sandhj2: /* Textboxs */

2009-11-23T18:48:05Z

Textboxs

← Older revision		Revision as of 18:48, 23 November 2009
Line 325:		Line 325:
	:*For the unlabeled icons toolbar pattern, remove entire toolbars if they don’t apply to the current context. Display them only in the applicable modes.		:*For the unlabeled icons toolbar pattern, remove entire toolbars if they don’t apply to the current context. Display them only in the applicable modes.

-	====~~Textboxs~~====	+	====Textboxes====
	[[Image:Textbox.jpg\|right\|thumbnail\|400px\|Textbox]]		[[Image:Textbox.jpg\|right\|thumbnail\|400px\|Textbox]]
	:Text boxes are a double edge sword, they are very versatile but also have very few constraints. Basically you can restrict the amount of space in a textbox and whether numeric or alphabetical characters are allowed within it. Labels are a necessary addition to textbox's to show what needs to be put in the text box. General guidelines are:		:Text boxes are a double edge sword, they are very versatile but also have very few constraints. Basically you can restrict the amount of space in a textbox and whether numeric or alphabetical characters are allowed within it. Labels are a necessary addition to textbox's to show what needs to be put in the text box. General guidelines are:

Sandhj2: /* Textbox */

2009-11-23T18:47:52Z

Textbox

← Older revision		Revision as of 18:47, 23 November 2009
Line 325:		Line 325:
	:*For the unlabeled icons toolbar pattern, remove entire toolbars if they don’t apply to the current context. Display them only in the applicable modes.		:*For the unlabeled icons toolbar pattern, remove entire toolbars if they don’t apply to the current context. Display them only in the applicable modes.

-	====~~Textbox~~====	+	====Textboxs====
	[[Image:Textbox.jpg\|right\|thumbnail\|400px\|Textbox]]		[[Image:Textbox.jpg\|right\|thumbnail\|400px\|Textbox]]
	:Text boxes are a double edge sword, they are very versatile but also have very few constraints. Basically you can restrict the amount of space in a textbox and whether numeric or alphabetical characters are allowed within it. Labels are a necessary addition to textbox's to show what needs to be put in the text box. General guidelines are:		:Text boxes are a double edge sword, they are very versatile but also have very few constraints. Basically you can restrict the amount of space in a textbox and whether numeric or alphabetical characters are allowed within it. Labels are a necessary addition to textbox's to show what needs to be put in the text box. General guidelines are:

Sandhj2: /* Standards */

2009-11-23T18:47:26Z

Standards

← Older revision		Revision as of 18:47, 23 November 2009
Line 270:		Line 270:
	:Although justifying continuous text provides a nice block of text, the extra spaces that appear between individual words often create continuous vertical spaces that can appear meaningful—like vertical rivers of white so it is standard to use ragged right to avoid this issue.		:Although justifying continuous text provides a nice block of text, the extra spaces that appear between individual words often create continuous vertical spaces that can appear meaningful—like vertical rivers of white so it is standard to use ragged right to avoid this issue.

-	===<span style="color:#191979">Commands</span>===	+	===<span style="color:#191979">Commands and Controls</span>===
	====Menus====		====Menus====
	[[Image:Menu.jpeg\|right\|thumbnail\|400px\| Menu]]		[[Image:Menu.jpeg\|right\|thumbnail\|400px\| Menu]]
Line 325:		Line 325:
	:*For the unlabeled icons toolbar pattern, remove entire toolbars if they don’t apply to the current context. Display them only in the applicable modes.		:*For the unlabeled icons toolbar pattern, remove entire toolbars if they don’t apply to the current context. Display them only in the applicable modes.

-
-
-	~~===<span style="color:#191979">Controls</span>===~~
	====Textbox====		====Textbox====
	[[Image:Textbox.jpg\|right\|thumbnail\|400px\|Textbox]]		[[Image:Textbox.jpg\|right\|thumbnail\|400px\|Textbox]]

Jesurar: /* Menus */

2009-11-23T18:44:13Z

Menus

← Older revision		Revision as of 18:44, 23 November 2009
Line 285:		Line 285:
	:*Icons are useful in menu's, but are not required for every command. You do not want to create clutter with hard to read icons for every command.		:*Icons are useful in menu's, but are not required for every command. You do not want to create clutter with hard to read icons for every command.
	:*Shortcut keys should be assigned to only the most common menu items, to speed up the process for advanced users. Remember to be consistant with shortcuts because changing them up can create confusion (ex. Cut is always ctrl-x)		:*Shortcut keys should be assigned to only the most common menu items, to speed up the process for advanced users. Remember to be consistant with shortcuts because changing them up can create confusion (ex. Cut is always ctrl-x)
		+
	:The following is a general menu structure for the most common menu, File:		:The following is a general menu structure for the most common menu, File:
	::File<br>		::File<br>

Jesurar: /* Radio Buttons */

2009-11-23T18:43:17Z

Radio Buttons

← Older revision		Revision as of 18:43, 23 November 2009
Line 344:		Line 344:
	:*Avoid nesting radio buttons with other radio buttons or check boxes. If possible, keep all the options at the same level.		:*Avoid nesting radio buttons with other radio buttons or check boxes. If possible, keep all the options at the same level.
	:*Make the first option the default option, since users often expect that—unless that order isn’t logical. To do this, you might need to change the option labels.		:*Make the first option the default option, since users often expect that—unless that order isn’t logical. To do this, you might need to change the option labels.
-	:Every radio button should have a label	+	:*Every radio button should have a label
-		+
-		+

	=Principles=		=Principles=

Jesurar: /* Textbox */

2009-11-23T18:43:01Z

Textbox

← Older revision		Revision as of 18:43, 23 November 2009
Line 335:		Line 335:
	:*For numeric input, you may use a spin control. For textual input, use a drop-down list or editable drop-down list instead.		:*For numeric input, you may use a spin control. For textual input, use a drop-down list or editable drop-down list instead.
	:*Limit the length of the input text when you can. For example, if the valid input is a number between 0 and 999, use a numeric text box that is limited to three characters. All parts of text boxes that use formatted data input must have a short, fixed length.		:*Limit the length of the input text when you can. For example, if the valid input is a number between 0 and 999, use a numeric text box that is limited to three characters. All parts of text boxes that use formatted data input must have a short, fixed length.
-	:*Be flexible with data formats. If users are likely to enter text using a wide variety of formats, try to handle all the most common ones. For	+	:*Be flexible with data formats. If users are likely to enter text using a wide variety of formats, try to handle all the most common ones. For example, many names, numbers, and identifiers can be entered with optional spaces and punctuation, and the capitalization often doesn’t matter.
-	example, many names, numbers, and identifiers can be entered with optional spaces and punctuation, and the capitalization often doesn’t	+
-	matter.	+
	====Radio Buttons====		====Radio Buttons====
	[[Image:Radio.jpg\|right\|thumbnail\|400px\|Radio]]		[[Image:Radio.jpg\|right\|thumbnail\|400px\|Radio]]

Sandhj2: /* Command Buttons */

2009-11-23T18:36:35Z

Command Buttons

← Older revision		Revision as of 18:36, 23 November 2009
Line 347:		Line 347:
	:Every radio button should have a label		:Every radio button should have a label

-	~~====Command Buttons====~~	+

	=Principles=		=Principles=

Sandhj2: /* Controls */

2009-11-23T18:36:13Z

Controls

← Older revision		Revision as of 18:36, 23 November 2009
Line 328:		Line 328:
	===<span style="color:#191979">Controls</span>===		===<span style="color:#191979">Controls</span>===
	====Textbox====		====Textbox====
-	[[Image:Textbox.jpg\|right\|thumbnail\|400px\|~~Toolbar~~]]	+	[[Image:Textbox.jpg\|right\|thumbnail\|400px\|Textbox]]
	:Text boxes are a double edge sword, they are very versatile but also have very few constraints. Basically you can restrict the amount of space in a textbox and whether numeric or alphabetical characters are allowed within it. Labels are a necessary addition to textbox's to show what needs to be put in the text box. General guidelines are:		:Text boxes are a double edge sword, they are very versatile but also have very few constraints. Basically you can restrict the amount of space in a textbox and whether numeric or alphabetical characters are allowed within it. Labels are a necessary addition to textbox's to show what needs to be put in the text box. General guidelines are:
	:*When disabling a text box, also disable any associated labels, instruction labels, spin controls, and command buttons.		:*When disabling a text box, also disable any associated labels, instruction labels, spin controls, and command buttons.
Line 339:		Line 339:
	matter.		matter.
	====Radio Buttons====		====Radio Buttons====
-	[[Image:Radio.jpg\|right\|thumbnail\|400px\|~~Toolbar~~]]	+	[[Image:Radio.jpg\|right\|thumbnail\|400px\|Radio]]
	:With a radio button, users make a choice among a set of mutually exclusive, related options. Users can choose one and only one option. Radio buttons are so called because they function like the channel presets on radios. There are a few guidelines for the use of these:		:With a radio button, users make a choice among a set of mutually exclusive, related options. Users can choose one and only one option. Radio buttons are so called because they function like the channel presets on radios. There are a few guidelines for the use of these:
	:*List the options in a logical order, such as most likely to be selected to least, simplest operation to most complex, or least risk to most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable.		:*List the options in a logical order, such as most likely to be selected to least, simplest operation to most complex, or least risk to most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable.

Sandhj2: /* Controls */

2009-11-23T18:35:06Z

Controls

← Older revision		Revision as of 18:35, 23 November 2009
Line 328:		Line 328:
	===<span style="color:#191979">Controls</span>===		===<span style="color:#191979">Controls</span>===
	====Textbox====		====Textbox====
		+	[[Image:Textbox.jpg\|right\|thumbnail\|400px\|Toolbar]]
	:Text boxes are a double edge sword, they are very versatile but also have very few constraints. Basically you can restrict the amount of space in a textbox and whether numeric or alphabetical characters are allowed within it. Labels are a necessary addition to textbox's to show what needs to be put in the text box. General guidelines are:		:Text boxes are a double edge sword, they are very versatile but also have very few constraints. Basically you can restrict the amount of space in a textbox and whether numeric or alphabetical characters are allowed within it. Labels are a necessary addition to textbox's to show what needs to be put in the text box. General guidelines are:
	:*When disabling a text box, also disable any associated labels, instruction labels, spin controls, and command buttons.		:*When disabling a text box, also disable any associated labels, instruction labels, spin controls, and command buttons.
	:*Only use auto complete to help the user fill in common information faster, do not use it for sensitive information such as passwords or PIN numbers		:*Only use auto complete to help the user fill in common information faster, do not use it for sensitive information such as passwords or PIN numbers
-	:*If you expect data to be larger than the text box and you can readily make the text box larger without	+	:*If you expect data to be larger than the text box and you can readily make the text box larger without harming the layout, size the box to eliminate the need for scrolling.
-	harming the layout, size the box to eliminate the need for scrolling.	+
	:*For numeric input, you may use a spin control. For textual input, use a drop-down list or editable drop-down list instead.		:*For numeric input, you may use a spin control. For textual input, use a drop-down list or editable drop-down list instead.
	:*Limit the length of the input text when you can. For example, if the valid input is a number between 0 and 999, use a numeric text box that is limited to three characters. All parts of text boxes that use formatted data input must have a short, fixed length.		:*Limit the length of the input text when you can. For example, if the valid input is a number between 0 and 999, use a numeric text box that is limited to three characters. All parts of text boxes that use formatted data input must have a short, fixed length.
Line 339:		Line 339:
	matter.		matter.
	====Radio Buttons====		====Radio Buttons====
		+	[[Image:Radio.jpg\|right\|thumbnail\|400px\|Toolbar]]
	:With a radio button, users make a choice among a set of mutually exclusive, related options. Users can choose one and only one option. Radio buttons are so called because they function like the channel presets on radios. There are a few guidelines for the use of these:		:With a radio button, users make a choice among a set of mutually exclusive, related options. Users can choose one and only one option. Radio buttons are so called because they function like the channel presets on radios. There are a few guidelines for the use of these:
	:*List the options in a logical order, such as most likely to be selected to least, simplest operation to most complex, or least risk to most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable.		:*List the options in a logical order, such as most likely to be selected to least, simplest operation to most complex, or least risk to most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable.