Slicer3:TranslatingBrandIntoUIDesign - Revision history

Grundlett: Text replacement - "\[http:\/\/www\.slicer\.org\/slicerWiki\/index\.php\/([^ ]+) ([^]]+)]" to "$2"

2019-11-27T02:29:13Z

Text replacement - "\[http:\/\/www\.slicer\.org\/slicerWiki\/index\.php\/([^ ]+) ([^]]+)]" to "$2"

Wjp: /* Design concepts that reinforce the brand */

2009-10-08T18:12:29Z

Design concepts that reinforce the brand

Wjp: /* Design concepts that reinforce the brand */

2009-10-08T18:12:13Z

Design concepts that reinforce the brand

Wjp: /* Design concepts that reinforce the brand */

2009-10-08T17:52:42Z

Design concepts that reinforce the brand

Wjp: /* Design concepts that reinforce the brand */

2009-10-08T17:51:36Z

Design concepts that reinforce the brand

Wjp: /* Design concepts that reinforce the brand */

2009-10-08T17:49:51Z

Design concepts that reinforce the brand

Wjp: /* Design concepts that reinforce the brand */

2009-10-08T17:49:10Z

Design concepts that reinforce the brand

Wjp: /* Design concepts that reinforce the brand */

2009-10-08T17:48:04Z

Design concepts that reinforce the brand

Wjp: /* Design concepts that reinforce the brand */

2009-10-08T17:46:30Z

Design concepts that reinforce the brand

Wjp: /* Design concepts that reinforce the brand */

2009-10-08T17:43:46Z

Design concepts that reinforce the brand

@@ Line 31: / Line 31: @@
 * Black text labels where reasonable.
 * Verdana is the font of choice, if GUI toolkit permits (can compromise on this for usability issues).
-* Icon conventions are [http://www.slicer.org/slicerWiki/index.php/Slicer3:Human_Interface_and_Style_Guide_for_Developers#Slicer_icon_conventions_.26_developer_resources here]
+* Icon conventions are [[Slicer3:Human_Interface_and_Style_Guide_for_Developers#Slicer_icon_conventions_.26_developer_resources|here]]
 * All icon image data for application GUI can be found in '''Slicer3/Base/GUI/ImageData'''. Individual modules may use these icons too, as well as define their own.
-* Conventions for icons as menubuttons, radiobuttons and checkbuttons, see [http://www.slicer.org/slicerWiki/index.php/Slicer3:Human_Interface_and_Style_Guide_for_Developers#Icons_as_PushButtons.2C_MenuButtons__RadioButtons_and_CheckButtons here]
+* Conventions for icons as menubuttons, radiobuttons and checkbuttons, see [[Slicer3:Human_Interface_and_Style_Guide_for_Developers#Icons_as_PushButtons.2C_MenuButtons__RadioButtons_and_CheckButtons|here]]
 * Application should have a consistent presentation of checkbuttons and radiobuttons. So either use the custom icons provided in above reference, or use default presentation consistently, application-wide.
 * It's very important to acknowledge contributing projects, labs, and funding agencies. Provide a standard space for acknowledgement for any software module within the module.
@@ Line 43: / Line 43: @@
 * Functionality in module interfaces should be clearly and cleanly grouped
 * Where possible, group functionality in collapsible frames, so a user can hide unused elements and simplify Slicer's face.
-* The highest level of functionality grouping should be visually dominant (e.g. "Input", "Parameters", "Display", "Results"). See [http://www.slicer.org/slicerWiki/index.php/Slicer3:Human_Interface_and_Style_Guide_for_Developers#Collapsing_and_Tabbed_frame_styles Stacked or Tabbed groups.]
+* The highest level of functionality grouping should be visually dominant (e.g. "Input", "Parameters", "Display", "Results"). See [[Slicer3:Human_Interface_and_Style_Guide_for_Developers#Collapsing_and_Tabbed_frame_styles|Stacked or Tabbed groups.]]
 * All modules should reinforce the same organization.
 * Choose a tabbed panel if each subpanel will require scrolling; choose a stacked panel if there would be too many tabs arrayed horizontally.

@@ Line 35: / Line 35: @@
 * Conventions for icons as menubuttons, radiobuttons and checkbuttons, see [http://www.slicer.org/slicerWiki/index.php/Slicer3:Human_Interface_and_Style_Guide_for_Developers#Icons_as_PushButtons.2C_MenuButtons__RadioButtons_and_CheckButtons here]
 * Application should have a consistent presentation of checkbuttons and radiobuttons. So either use the custom icons provided in above reference, or use default presentation consistently, application-wide.
 * It's very important to acknowledge contributing projects, labs, and funding agencies. Provide a standard space for acknowledgement for any software module within the module.
 * Preserve the footprint of space beside Slicer's logo; do not include other logos in the main application GUI.

← Older revision		Revision as of 18:12, 8 October 2009
Line 54:		Line 54:
	* All widgets have balloon help on mouse-over for clarity.		* All widgets have balloon help on mouse-over for clarity.
	* Maintain keyboard shortcuts if possible. Please keep a consolidated list of all keyboard shortcuts as they are defined.		* Maintain keyboard shortcuts if possible. Please keep a consolidated list of all keyboard shortcuts as they are defined.
		+
		+
		+	'''Behavior:'''
		+	* In general, users should have to CLICK the mouse to trigger a UI event. Try to avoid UI behaviors that trigger on mouse-over, except for balloon help.
		+	* Any pop-up widgets that are designed to withdraw on a MouseLeave event should have a footprint big enough so the user doesn't accidentally exit the widget.
		+	* Good to have message dialogs that have "Message" "Warning" "Error" icon on them (this isn't currently consistently presented).
		+	* All collapsing panels should contain an indicator that communicates that they can be opened/closed.
		+	* The option to minimize/hide chrome and GUI around Slice Viewers is required, so a very minimal data viewer can be presented.
		+	* Commonly implemented mouse-control of window/level/threshold would be ideal, or some variation on this that doesn't interfere with pan & zoom.

← Older revision		Revision as of 17:52, 8 October 2009
Line 53:		Line 53:
	* The density of widgets should be carefully considered. Widget packing should provide enough space to maintain readability, yet be compact enough to minimize the need for scrolling.		* The density of widgets should be carefully considered. Widget packing should provide enough space to maintain readability, yet be compact enough to minimize the need for scrolling.
	* All widgets have balloon help on mouse-over for clarity.		* All widgets have balloon help on mouse-over for clarity.
		+	* Maintain keyboard shortcuts if possible. Please keep a consolidated list of all keyboard shortcuts as they are defined.

@@ Line 34: / Line 34: @@
 * All icon image data for application GUI can be found in '''Slicer3/Base/GUI/ImageData'''. Individual modules may use these icons too, as well as define their own.
 * Conventions for icons as menubuttons, radiobuttons and checkbuttons, see [http://www.slicer.org/slicerWiki/index.php/Slicer3:Human_Interface_and_Style_Guide_for_Developers#Icons_as_PushButtons.2C_MenuButtons__RadioButtons_and_CheckButtons here]
-* Checkbuttons & Radiobuttons: either consistently use custom icon checkbuttons or radiobuttons (for cross-platform consistency), or do not use custom icon checkbuttons or radiobuttons anywhere.
+* Application should have a consistent presentation of checkbuttons and radiobuttons. So either use the custom icons provided in above reference, or use default presentation consistently, application-wide.

@@ Line 38: / Line 38: @@
 '''Appropriate Acknowledgement:'''
-* It's very important to acknowledge contributing projects, labs, and funding agencies. Provide space for acknowledgement for any software module within the module.
+* It's very important to acknowledge contributing projects, labs, and funding agencies. Provide a standard space for acknowledgement for any software module within the module.
-* Preserve the footprint of space beside Slicer's logo, and do not include other logos in the main application GUI.
+* Preserve the footprint of space beside Slicer's logo; do not include other logos in the main application GUI.
-'''Optimized readability:'''
 * Where possible, multiple pop-up interfaces should be avoided; this can lead to clutter.
 * Functionality in module interfaces should be clearly and cleanly grouped

@@ Line 29: / Line 29: @@
 * Clean white background
 * Precise hairline around buttons, icons, menubuttons, and white background.
 * All icon image data for application GUI can be found in '''Slicer3/Base/GUI/ImageData'''
 * Black text labels where reasonable.