UI Style Guide Gadgets - Revision history

Steven Solie at 18:51, 21 April 2014

2014-04-21T18:51:41Z

← Older revision		Revision as of 18:51, 21 April 2014
Line 150:		Line 150:
	The display area should be updated immediately as the scroll bar is dragged.		The display area should be updated immediately as the scroll bar is dragged.

	When the user clicks in the scroll box (the rectangle containing the scroll bar) but not directly on the scroll bar, the display should move in ~~viewfuls~~. For instance, if the user clicks in the scroll box above the scroll bar, the user's view of the list should move up so that the line which was first is now at the bottom of the view. The inverse applies where the user clicks below the scroll bar. This lets the user walk through the list in steps without missing anything on the list. Leaving one line from the previous view assures the user that he hasn't missed anything.		When the user clicks in the scroll box (the rectangle containing the scroll bar) but not directly on the scroll bar, the display should move in view fulls. For instance, if the user clicks in the scroll box above the scroll bar, the user's view of the list should move up so that the line which was first is now at the bottom of the view. The inverse applies where the user clicks below the scroll bar. This lets the user walk through the list in steps without missing anything on the list. Leaving one line from the previous view assures the user that he hasn't missed anything.

	=== Scrolling List ===		=== Scrolling List ===

2013-05-24T22:40:45Z

Radio Buttons

← Older revision		Revision as of 22:40, 24 May 2013
Line 174:		Line 174:
	Radio buttons are a group of mutually exclusive gadgets - one and no more than one is always selected. Use this when the user must choose one option from a short list of possibilities.		Radio buttons are a group of mutually exclusive gadgets - one and no more than one is always selected. Use this when the user must choose one option from a short list of possibilities.

	~~Fig 5~~.~~11:~~ Radio buttons.		[[File:SG5-11.png\|center\|Radio buttons]]


	Radio buttons are similar to cycle gadgets in functionality. Each has its benefits and drawbacks. See later for a discussion on this subject.		Radio buttons are similar to cycle gadgets in functionality. Each has its benefits and drawbacks. See later for a discussion on this subject.

2013-05-24T22:06:34Z

Slider

← Older revision		Revision as of 22:06, 24 May 2013
Line 217:		Line 217:

	Sliders are used to choose a value in a given range. Usually, this value represents a level or an intensity such as volume or color.		Sliders are used to choose a value in a given range. Usually, this value represents a level or an intensity such as volume or color.

			[[File:SG5-14.png\|right\|Two slider gadgets]]

	Sliders look similar to scrollers without arrows, but when the user clicks in the slider box above or below the slider bar, the slider value should change in single increments rather than entire views.		Sliders look similar to scrollers without arrows, but when the user clicks in the slider box above or below the slider bar, the slider value should change in single increments rather than entire views.

			The developer can decide to display the current value if needed.
	Fig 5.14: Slider gadgets.


	==== Keystroke Activation ====		==== Keystroke Activation ====

2013-05-24T21:55:36Z

Ghosting: removed the reference to the "Fig" as it is shown in the "Ghosting" section which the text directs to

← Older revision		Revision as of 21:55, 24 May 2013
Line 51:		Line 51:

	As with other elements of the GUI, a gadget that is temporarily unavailable for selection should be obviously disabled. Don't allow the user to select something that does nothing in response. Follow the ghosting standard shown in [[UI_Style_Guide_Basics#Ghosting\|Ghosting]].		As with other elements of the GUI, a gadget that is temporarily unavailable for selection should be obviously disabled. Don't allow the user to select something that does nothing in response. Follow the ghosting standard shown in [[UI_Style_Guide_Basics#Ghosting\|Ghosting]].

	Fig 5.2: A ghosted text gadget.

	=== Keyboard Equivalents ===		=== Keyboard Equivalents ===

2013-04-26T09:27:37Z

Categorized into User Interface Style Guide

← Older revision		Revision as of 09:27, 26 April 2013
Line 1:		Line 1:
			[[Category:User Interface Style Guide]]
	== Gadgets ==		== Gadgets ==

2013-04-24T21:24:41Z

Display Box

← Older revision		Revision as of 21:24, 24 April 2013
Line 263:		Line 263:
	Display boxes look similar to text gadgets, but since they are read-only, they appear recessed.		Display boxes look similar to text gadgets, but since they are read-only, they appear recessed.

	[[File:SG5-16.png\|frame\|center\|~~Fig 5.16:~~ A display gadget]]		[[File:SG5-16.png\|frame\|center\|A display gadget]]

	=== Icon Drop Box ===		=== Icon Drop Box ===

2013-04-24T21:24:28Z

Text Gadget

← Older revision		Revision as of 21:24, 24 April 2013
Line 231:		Line 231:
	Text gadgets (sometimes referred to as string gadgets) are rectangular boxes used to accept keyboard input for alphanumeric fields.		Text gadgets (sometimes referred to as string gadgets) are rectangular boxes used to accept keyboard input for alphanumeric fields.

	[[File:SG5-15.png\|frame\|center\|~~Fig 5.15:~~ A text gadget]]		[[File:SG5-15.png\|frame\|center\|A text gadget]]

	==== Activating Text Gadgets ====		==== Activating Text Gadgets ====

2013-04-24T21:24:12Z

Color Selection Gadget

← Older revision		Revision as of 21:24, 24 April 2013
Line 209:		Line 209:
	The color selection gadget (sometimes referred to as the palette gadget) allows the user to pick a color from a set palette.		The color selection gadget (sometimes referred to as the palette gadget) allows the user to pick a color from a set palette.

	[[File:SG5-13.png\|frame\|center\|~~Fig. 5.13:~~ A color selection gadget]]		[[File:SG5-13.png\|frame\|center\|A color selection gadget]]

	==== Keystroke Activation ====		==== Keystroke Activation ====

2013-04-24T21:23:59Z

Cycle Gadgets

← Older revision		Revision as of 21:23, 24 April 2013
Line 187:		Line 187:
	Like radio buttons, cycle gadgets allow the user to choose one option from several but only the selected option is visible.		Like radio buttons, cycle gadgets allow the user to choose one option from several but only the selected option is visible.

	[[File:SG5-12.png\|frame\|center\|~~Fig 5.12:~~ A cycle gadget]]		[[File:SG5-12.png\|frame\|center\|A cycle gadget]]

	Cycle gadgets should be used to set attributes, not trigger actions. Never use a cycle gadget for an on/off choice - use a check box instead.		Cycle gadgets should be used to set attributes, not trigger actions. Never use a cycle gadget for an on/off choice - use a check box instead.

2013-04-24T21:23:42Z

Scrolling List

← Older revision		Revision as of 21:23, 24 April 2013
Line 159:		Line 159:
	A scrolling list should be used whenever you need to present the user with a variable list of objects. Probably the most common example is found in the requester presented when a user chooses to open or save a file.		A scrolling list should be used whenever you need to present the user with a variable list of objects. Probably the most common example is found in the requester presented when a user chooses to open or save a file.

	[[File:SG5-10.png\|frame\|center\|~~Fig 5.10:~~ A scrolling list]]		[[File:SG5-10.png\|frame\|center\|A scrolling list]]

	==== Custom Scrolling Gadgets ====		==== Custom Scrolling Gadgets ====