Difference between revisions of "Slicer3:TranslatingBrandIntoUIDesign"

From Slicer Wiki
Jump to: navigation, search
Line 29: Line 29:
 
* Precise hairline around buttons, icons, menubuttons, and white background
 
* Precise hairline around buttons, icons, menubuttons, and white background
 
* Black text labels where reasonable.
 
* Black text labels where reasonable.
* Verdana is the font of choice  
+
* 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).
 +
 
 +
Acknowledgement:
 +
* 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 here.
 +
 
 +
Optimize 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
 +
* The highest level of functionality grouping should be visually dominant (e.g. "Input", "Parameters", "Display", "Results")
 +
* 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.
 
* All widgets have balloon help on mouse-over for clarity.
 
* All widgets have balloon help on mouse-over for clarity.
 
*
 

Revision as of 15:53, 8 October 2009

Home < Slicer3:TranslatingBrandIntoUIDesign

Return to Slicer3 Interface Design and Usability


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

  • Clean white background
  • Precise hairline around buttons, icons, menubuttons, and white background
  • 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).

Acknowledgement:

  • 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 here.

Optimize 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
  • The highest level of functionality grouping should be visually dominant (e.g. "Input", "Parameters", "Display", "Results")
  • 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.
  • All widgets have balloon help on mouse-over for clarity.