Difference between revisions of "Slicer3:TranslatingBrandIntoUIDesign"
From Slicer Wiki
| Line 34: | Line 34: | ||
* Verdana is the font of choice, if GUI toolkit permits (can compromise on this for usability issues). | * Verdana is the font of choice, if GUI toolkit permits (can compromise on this for usability issues). | ||
| − | '''Acknowledgement:''' | + | '''Appropriate Acknowledgement:''' |
| − | * Provide space for acknowledgement for any software module within the module. | + | * It's very important to acknowledge contributing projects, labs, and funding agencies. Provide 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 | + | * Preserve the footprint of space beside Slicer's logo, and do not include other logos in the main application GUI. |
'''Optimized readability:''' | '''Optimized readability:''' | ||
* Where possible, multiple pop-up interfaces should be avoided; this can lead to clutter. | * Where possible, multiple pop-up interfaces should be avoided; this can lead to clutter. | ||
* Functionality in module interfaces should be clearly and cleanly grouped | * Functionality in module interfaces should be clearly and cleanly grouped | ||
| − | * Where possible, group functionality in collapsible frames, so a user can hide unused elements | + | * 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 [http://www.slicer.org/slicerWiki/index.php/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. | ||
| + | * Arrange stacked or tabbed subpanels in an order representing workflow, up-to-down, or left-to-right respectively, where appropriate. | ||
* A secondary level of functionality grouping should be more subtle, and visually distinct from the highest level. | * A secondary level of functionality grouping should be more subtle, and visually distinct from the highest level. | ||
| − | * The density of widgets should be carefully considered. Widget packing should provide enough space to maintain readability, yet 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. | ||
Revision as of 17:40, 8 October 2009
Home < Slicer3:TranslatingBrandIntoUIDesignReturn to Slicer3 Interface Design and Usability
Contents
General Design Guidelines that Reinforce Slicer's Brand
Core values of the 3D Slicer software and development effort
Software associations:
- Clarity & usability
- Control & Precision
- Information richness
- Interactive & responsive
- Reliable & Trusted
- Easily extensible
- Open source & cross-platform
- Showcase for advanced research
Effort associations:
- Advancing scientific research
- Assisting treatment/therapy
- Established and long-term
Design concepts that reinforce the brand
GUI Appearance:
- 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.
- Either consistently use custom checkbuttons or radiobuttons (for cross-platform consistency), or do not use custom checkbuttons or radiobuttons anywhere. see:
- Verdana is the font of choice, if GUI toolkit permits (can compromise on this for usability issues).
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.
- Preserve the footprint of space beside Slicer's logo, and 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
- 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 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.
- Arrange stacked or tabbed subpanels in an order representing workflow, up-to-down, or left-to-right respectively, where appropriate.
- A secondary level of functionality grouping should be more subtle, and visually distinct from the highest level.
- 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.
