|
|
| (12 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | =Slicer Human Interface Design and Style Guidelines=
| + | <big>'''Note:''' We are migrating this content to the slicer.org domain - <font color="orange">The newer page is [https://www.slicer.org/wiki/Slicer3:Human_Interface_and_Style_Guide_for_Developers#Providing_Help here]</font></big>a |
| − | | |
| − | ==Introduction==
| |
| − | | |
| − | 3D Slicer (or Slicer) is a large and continuously developing application. Its base is designed to offer substantial core functionality, and its modules extend that functionality to include specialized and cutting-edge research tools and interoperability with other open source softwares. The development effort seeks to simultaneously ensure that:
| |
| − | | |
| − | * Slicer meets the needs of a broad user community,
| |
| − | * developers can easily contribute to and extend the application,
| |
| − | * the software remains easy to test and maintain, and
| |
| − | * the appearance and behavior of Slicer's interface are easy to learn & use, and aesthetically pleasing.
| |
| − | | |
| − | These human interface design and style guidelines are a resource to help Slicer developers to create module interfaces that are easy to learn, understandable and usable, and that conform to Slicer’s general appearance and behavior conventions. The recommendations in this document are designed to be easy for developers to apply and their adoption is strongly encouraged. However, a developer’s interface design can depart from convention when these guidelines appear inappropriate for a particular application.
| |
| − | | |
| − | The guidelines are intended for software developers, interface designers, and graphic artists who will be creating core functionality or software modules for 3D Slicer. Included design recommendations are based broadly on cognitive science, human perception, human factors and HCI. Included is information on basic interface components, choosing and using them effectively and in a manner consistent with Slicer conventions.
| |
| − | | |
| − | ==Organization==
| |
| − | | |
| − | This document is organized into the following two sections:
| |
| − | | |
| − | 1. Slicer Design Principles
| |
| − | | |
| − | 2. Slicer Widget and Interface Style Specifics
| |
| − | | |
| − | Within these sections, developers will find recommendations that promote usable and consistent Slicer module interfaces, and link to technical resources where appropriate.
| |
| − | | |
| − | | |
| − | == Slicer Design Principles ==
| |
| − | | |
| − | === Design for scientists and engineers ===
| |
| − | | |
| − | '''Remember that design is not just about appearance and style; it's about communicating ideas and solving problems.''' | |
| − | | |
| − | Most users of the software you develop for Slicer will be from one (or more) of these communities:
| |
| − | | |
| − | | |
| − | * Algorithm researchers (who work within Slicer's development environment and with associated toolkits)
| |
| − | * Biomedical engineers (who rely on Slicer's interactive enironment and scripting capabilities)
| |
| − | * Application scientists (who use Slicer as a desktop application and turnkey system)
| |
| − | | |
| − | | |
| − | In general, these categories of users will not want appearance and style to get in the way of the task they want to accomplish. Interfaces should have a [[#Use_clarifying_layout | well-organized]], [[ #Accessibility_&_appropriateness | accessible]], [[#Keep_it_simple | simple and clean ]] design that:
| |
| − | | |
| − | | |
| − | * exposes essential features,
| |
| − | * provides access to essential information,
| |
| − | * permits tasks to be accomplished efficiently and reliably,
| |
| − | * provides adequate feedback, and
| |
| − | * is forgiving of mistakes.
| |
| − | | |
| − | | |
| − | | |
| − | === Accessibility & appropriateness ===
| |
| − | | |
| − | Currently, Slicer has neither an accessibility component in the design & engineering effort, nor a program to internationalize or localize its interface. However, because keeping Slicer usable and appropriate for a large and diverse user base is important, developers are encouraged to design interfaces that are appropriate for users with disabilities and for users from multicultural, multinational, or multilingual backgrounds.
| |
| − | | |
| − | In the absence of formal engineering infrastructure to support a principled approach, Slicer is not yet compatible with sensory assistive technologies. In addition, Slicer relies on the English-language keyboard character set, uses hard-coded strings and concatenated strings (which Tcl makes particularly easy), a left-to-right convention for reading/writing that manifests in layout, no number and date formatting, and so on. Until formal approaches to both accessibility and internationalization are implemented, the following informal design recommendations are offered:
| |
| − | | |
| − | * Make sure your language (what you name things and how you phrase things) is appropriate,
| |
| − | * Try to make sure your graphics aren't overloaded with meaning you don't intend
| |
| − | * Make sure all widgets (especially icons) have explanatory labels or pop-up balloon help text,
| |
| − | * Provide [[ Event_Bindings | keyboard access ]] for important functionality in a manner consistent with Slicer's conventions,
| |
| − | * Try not to override the font specification in Slicer's theme, which users can adjust (somewhat) to fit their preference,
| |
| − | * Use the Application Settings infrastructure to save user preferences wherever it makes sense to do so,
| |
| − | * Minimize the physical and mental stress of performing repetitive actions,
| |
| − | * Provide appropriate prompting and feedback for all actions.
| |
| − | | |
| − | Following these general suggestions will improve the usability of your interface for all users.
| |
| − | | |
| − | === Design for varying levels of expertise ===
| |
| − | | |
| − | Slicer users can be classified into three broad bins: novice, intermediate and expert users. Each type of users will desire a different user experience, and would like to use the interface to your module's functionality in a different way. Ideally, an interface will support the needs of all three types alike.
| |
| − | | |
| − | * '''Novice users:''' Novice users will likely rely heavily on the GUI widgets, their pop-up balloon help (which should include any available keyboard hot-keys), and external sources of information like tutorials or documentation. Novice users may work at a relatively slow pace, since they are both exploring the scope of functionality provided, and learning how to use it.
| |
| − | | |
| − | * '''Intermediate users:'''
| |
| − | | |
| − | * '''Expert users:'''
| |
| − | | |
| − | === Keep it simple ===
| |
| − | | |
| − | | |
| − | === Use clarifying layouts ===
| |
| − | | |
| − | === Keep it stable ===
| |
| − | | |
| − | === Keep users informed ===
| |
| − | | |
| − | === Allow users to correct mistakes ===
| |
| − | | |
| − | === Respect users' wishes (application settings) ===
| |
| − | | |
| − | | |
| − | | |
| − | === Maintain consistency with Slicer's appearance and behavior ===
| |
| − | | |
| − | === Make principled design decisions ===
| |
| − | | |
| − | | |
| − | === Follow Slicer's User-Centered Design Practice ===
| |
| − | | |
| − | Slicer's light-weight [[Slicer3:Usability | User-Centered Design Practice]] document is a resource to help developers take a human-centered approach in an open source development effort (in which interface & information designers and usability experts are not often part of the team.) Using this design approach offers the following benefits:
| |
| − | | |
| − | | |
| − | * Users will learn to use your module faster, because its interface will be understandable and interface elements will look and behave in an expected manner.
| |
| − | * Users will be able to accomplish their tasks by following an appropriate and satisfying workflow, or a curiosity-driven exploration, at an appropriate pace.
| |
| − | * Your module will be accessible to users at all levels of expertise (novice, intermediate and advanced).
| |
| − | * Your module will have a nice look & feel that fits within the 3D Slicer environment.
| |
| − | | |
| − | | |
| − | Modules that hit these marks should maximize the reach of a developer’s research, design, and programming effort, offer contributing agencies, institutions, and individuals the maximum impact for their investment, and provide the user community with cutting-edge functionality that they find satisfying to use. The Slicer community ultimately leaves the choice about design and implementation process to contributing developers, and the recommendations in this document are not enforced. Since we believe that incorporating user-centered design will improve Slicer overall, developers are strongly encouraged to adopt this light-weight and flexible practice, and adapt it to fit their environment and project timeline.
| |
| − | | |
| − | == Slicer Interface Design & Style Information ==
| |
| − | | |
| − | === Overall Look and Feel ===
| |
| − | | |
| − | '''GUI Style:''' Try not to add style elements (like foreground and background color, font, relief, etc.) to the interface you create; let the options database (as set up by the vtkSlicerTheme class) specify the style for the widgets in your module so that all modules appear consistent within the Slicer3 application.
| |
| − | | |
| − | === Module style ===
| |
| − | | |
| − | ==== Collapsing and Tabbed frame styles ====
| |
| − | | |
| − | [[Image:S3ModuleStyles.png ]]
| |
| − | | |
| − | === Application windows ===
| |
| − | | |
| − | ==== Types of windows ====
| |
| − | | |
| − | ==== Window appearance ====
| |
| − | | |
| − | ==== Message windows & dialogs ====
| |
| − | | |
| − | ==== Other pop-up windows ====
| |
| − | | |
| − | === Menu bar and its menus ===
| |
| − | | |
| − | ==== What goes in the File Menu ====
| |
| − | | |
| − | ==== What goes in the Edit Menu ====
| |
| − | | |
| − | ==== What goes in the View Menu ====
| |
| − | | |
| − | ==== What goes in the Help Menu ====
| |
| − | | |
| − | === Application settings ===
| |
| − | | |
| − | ==== Confirm on delete ====
| |
| − | Check vtkSlicerApplication::ConfirmDelete setting; if a user has requested to be presented with a confirm on delete, then give them that option.
| |
| − | | |
| − | ==== Adding your own application setting options ====
| |
| − | | |
| − | === Mouse modes ===
| |
| − | | |
| − | Mouse modes are currently in transition in Slicer3 Beta. Mode-free design is ideal. Modes are required to disambiguate what a mouse click means in Slicer's 3D Viewer and Slice Viewers.
| |
| − | | |
| − | ==== Basic mouse modes ====
| |
| − | | |
| − | ==== Adding new mouse modes ====
| |
| − | | |
| − | === Mouse cursors ===
| |
| − | | |
| − | ==== Basic mouse cursors ====
| |
| − | | |
| − | ==== Defining your own mouse cursors ====
| |
| − | | |
| − | === Keyboard shortcuts ===
| |
| − | | |
| − | ==== Keyboard shortcut paradigm ====
| |
| − | | |
| − | ==== Basic keyboard shortcuts ====
| |
| − | | |
| − | ==== Defining your own keyboard shortcuts ====
| |
| − | | |
| − | === Event Bindings ===
| |
| − | | |
| − | With respect to the specification of keyboard accelerators, please follow these three recommendations;
| |
| − | | |
| − | * Before assigning "hot-keys" to functionality, either in the main Slicer application or in a new module, please consult the [[Event_Bindings | Slicer3 event bindings table (and design plan) ]] to make sure the key is not already assigned.
| |
| − | * Across Slicer modules, try to use similar "hot-key" assignments for similar functionality; this consistency makes Slicer easier to learn.
| |
| − | * Once you assign "hot-keys" in your module, please add those mappings to the Slicer3 event binings table for others to reference.
| |
| − | | |
| − | === Application Font ===
| |
| − | Verdana is the font chosen for the 3DSlicer brand.
| |
| − | | |
| − | Maintaining consistency of type is an important component of maintaining a coherent look and feel for 3DSlicer and any related or derived visual communications. Verdana was designed specifically to be read on a digital display; it is recommended that we use Verdana (or Geneva) wherever possible in 3DSlicer's web presence and online tutorial materials, and wherever reasonable and appropriate in formal printed materials.
| |
| − | | |
| − | Within the software, since it can't be guaranteed that these fonts will be widely available on all platforms, Helvetica or Arial should be used as a substitute. Slicer's theme sets the application font to be Helvetica 8 normal. Please avoid typefaces with serifs.
| |
| − | | |
| − | === Icons ===
| |
| − | | |
| − | Icons can be a powerful way to represent complicated information within a small footprint on the GUI panel. They associate a visual image with data, state, or a particular operation. The purpose of an icon is to use pictorial information to represent objects, actions or concepts in a compact form that's easy to comprehend, find and remember. Slicer has a particular icon style which should be respected to keep the application look and feel consistent; a description of that style is given below, and icon "blanks" are provided as starting points for icon designers. A few rules of thumb for designing Slicer icons:
| |
| − | | |
| − | * They should be easy to parse, convey a strong metaphor, and not require significant time for a user to interpret.
| |
| − | * They should be memorable so that a user can recognize them quickly in future sessions with your module.
| |
| − | * If an icon already exists within 3DSlicer to represent the data, state or operation you want to indicate, then re-use that icon (indicate visibility with the open/shutting eye, for example.)
| |
| − | * And they should always display an accompanying descriptive balloon help message on mouse-over.
| |
| − | * Try to avoid elaborate photo-real and 3D-looking representations -- Slicer icons' visual style is 2D and graphic.
| |
| − | * Note: if the concept is too difficult to represent with a picture, then a text label can always be used instead!
| |
| − | | |
| − | When designing icons, do bear in mind that it's possible to offend users with images that have cultural or polictal connotations. Even colors can have connotations for users in different parts of the world that may be surprising and unintended by the designer and developer. Generally speaking, it's useful to avoid images that contain:
| |
| − | | |
| − | * icons that depict only hands or feet
| |
| − | * images of animals
| |
| − | * maps containing disputed boundaries or region names.
| |
| − | * lists of countries that are not in alphabetical order.
| |
| − | * pictures of flags
| |
| − | * pictures of money
| |
| − | | |
| − | ====Slicer icon conventions & developer resources====
| |
| − | | |
| − | 3D Slicer icons should all be of dimension 21x21 pixels.
| |
| − | | |
| − | '''Enabled''' icons should have:
| |
| − | | |
| − | * a white background (r=255, g=255, b=255, or #FF FF FF)
| |
| − | * a black hairline along the perimeter (r=0,g=0,b=0, or #00 00 00)
| |
| − | * or (for radiobuttons) a grey dashed hairline along the perimeter (r=178, g=178, b=178, hex value #B2 B2 B2).
| |
| − | | |
| − | '''Disabled''' icons should have:
| |
| − | * a grey background, value (r=230, g=230, b=230, or hex value #E6 E6 E6)
| |
| − | * a grey hairline perimeter of value (r=178, g=178, b=178, hex value #B2 B2 B2)
| |
| − | * or (for radiobuttons) a grey dashed hairline along the perimeter (r=178, g=178, b=178, hex value #B2 B2 B2).
| |
| − | | |
| − | | |
| − | ===== Icons as PushButtons, MenuButtons RadioButtons and CheckButtons =====
| |
| − | | |
| − | These icon blanks are provided for download and use:
| |
| − | | |
| − | '''PushButtons'''
| |
| − | * Enabled Pushbutton: [[image:IconBlank.png | downloadable "blank" for conventional Slicer pushbutton icon ]]
| |
| − | * Disabled Pushbutton: [[image:IconBlankLow.png | downloadable "blank" for "deselected" Slicer pushbutton icon]]
| |
| − | | |
| − | '''MenuButtons'''
| |
| − | * Enabled Menubutton: [[image:MenuButtonIconBlank.png | downloadable "blank" for conventional Slicer menubutton icon]]
| |
| − | * Disabled Menubutton: [[image:MenuButtonIconBlankDisabled.png | downloadable "blank" for "disabled" Slicer menubutton icon]]
| |
| − | | |
| − | For CheckButtons and RadioButtons represented with icons, it's preferred to reflect the button's state with the icons themselves, rather than using the indicator as well (redundantly). Blanks for the Selected, Deselected and Disabled CheckButton are as follows:
| |
| − | | |
| − | '''CheckButtons and RadioButtons without Indicators (preferred)'''
| |
| − | * Enabled, selected Radiobutton icon: [[image:IconBlank.png | downloadable "blank" for "selected" Slicer radiobutton icon ]]
| |
| − | * Enabled, deselected Radiobutton icon: [[image:DeselectedRadioCheckButtonIconBlank.png | downloadable "blank" for "deselected" Slicer radiobutton icon]]
| |
| − | * Disabled Radiobutton icon: [[image:DisabledRadioCheckButtonIconBlank.png | downloadable "blank" for "disabled" Slicer radiobutton icon ]]
| |
| − | | |
| − | Since custom icons are already used application-wide in Slicer to display the CheckButton indicators in a consistent way across all development platforms, using an icon and an indicator together require a custom icon that incorporates both. Below are blanks that can be downloaded and used to generate your own icons for the "Selected" "Deselected" and Disabled states of your checkbutton.
| |
| − | | |
| − | '''(non-preferred) CheckButton Icons with Indicators at the Bottom'''
| |
| − | | |
| − | If you intend to use text as part of the widget too (not recommended), the following method to configure the widget should be made:
| |
| − | mybutton->SetCompoundModeToBottom();
| |
| − | | |
| − | * Bottom Selected CheckButton: [[image:BottomSelectedCheckIndicatorAndIconBlank.png | downloadable "blank" for combined checkbutton and indicator ]]
| |
| − | * Bottom Deselected CheckButton: [[image:BottomDeselectedIndicatorAndIconBlank.png | downloadable "blank" for combined checkbutton and indicator]]
| |
| − | * Bottom Disabled CheckButton: [[image:BottomDisabledIndicatorAndIconBlank.png | downloadable "blank" for combined checkbutton and indicator]]
| |
| − | | |
| − | '''(non-preferred) CheckButton Icons with Indicators at the Top'''
| |
| − | | |
| − | If you intend to use text as part of the widget too (not recommended), the following method to configure the widget should be made:
| |
| − | mybutton->SetCompoundModeToTop();
| |
| − | | |
| − | * Top Selected CheckButton: [[image:TopSelectedCheckIndicatorAndIconBlank.png | downloadable "blank" for combined checkbutton and indicator]]
| |
| − | * Top Deselected CheckButton: [[image:TopDeselectedIndicatorAndIconBlank.png | downloadable "blank" for combined checkbutton and indicator]]
| |
| − | * Top Disabled CheckButton: [[image:TopDisabledIndicatorAndIconBlank.png | downloadable "blank" for combined checkbutton and indicator]]
| |
| − | | |
| − | '''(non-preferred) CheckButton Icons with Indicators at the Left'''
| |
| − | | |
| − | If you intend to use text as part of the widget too (not recommended), the following method to configure the widget should be made:
| |
| − | mybutton->SetCompoundModeToLeft();
| |
| − | | |
| − | * Left Selected CheckButton: [[image:LeftSelectedCheckIndicatorAndIconBlank.png | downloadable "blank" for combined checkbutton and indicator]]
| |
| − | * Left Deselected CheckButton: [[image:LeftDeselectedIndicatorAndIconBlank.png | downloadable "blank" for combined checkbutton and indicator]]
| |
| − | * Left Disabled CheckButton:[[image:LeftDisabledIndicatorAndIconBlank.png | downloadable "blank" for combined checkbutton and indicator]]
| |
| − | | |
| − | '''(non-preferred) CheckButton Icons with Indicators at the Right'''
| |
| − | | |
| − | If you intend to use text as part of the widget too (not recommended), the following method to configure the widget should be made:
| |
| − | mybutton->SetCompoundModeToRight();
| |
| − | | |
| − | * Right Selected CheckButton: [[image:RightSelectedCheckIndicatorAndIconBlank.png | downloadable "blank" for combined checkbutton and indicator]]
| |
| − | * Right Deselected CheckButton: [[image:RightDeselectedIndicatorAndIconBlank.png | downloadable "blank" for combined checkbutton and indicator]]
| |
| − | * Right Disabled CheckButton: [[image:RightDisabledIndicatorAndIconBlank.png | downloadable "blank" for combined checkbutton and indicator]]
| |
| − | | |
| − | | |
| − | Like the Slicer CheckButtons, custom icons are already used application-wide in Slicer to display the RadioButton indicators in a consistent way across all development platforms. Using an icon and an indicator together require a custom icon that incorporates both. Below are blanks that can be downloaded and used to generate your own icons for the "Selected" "Deselected" and Disabled states of your checkbutton.
| |
| − | | |
| − | '''(non-preferred) RadioButton Icons with Indicators at the Bottom'''
| |
| − | | |
| − | If you intend to use text as part of the widget too (not recommended), the following method to configure the widget should be made:
| |
| − | mybutton->SetCompoundModeToBottom();
| |
| − | | |
| − | * Bottom Selected RadioButton: [[image:BottomSelectedRadioIndicatorAndIconBlank.png | downloadable "blank" for combined radiobutton and indicator]]
| |
| − | * Bottom Deselected RadioButton: [[image:BottomDeselectedIndicatorAndIconBlank.png | downloadable "blank" for combined radiobutton and indicator]]
| |
| − | * Bottom Disabled RadioButton: [[image:BottomDisabledIndicatorAndIconBlank.png | downloadable "blank" for combined radiobutton and indicator]]
| |
| − | | |
| − | '''(non-preferred) RadioButton Icons with Indicators at the Top'''
| |
| − | | |
| − | If you intend to use text as part of the widget too (not recommended), the following method to configure the widget should be made:
| |
| − | mybutton->SetCompoundModeToTop();
| |
| − | | |
| − | * Top Selected RadioButton: [[image:TopSelectedRadioIndicatorAndIconBlank.png | downloadable "blank" for combined radiobutton and indicator]]
| |
| − | * Top Deselected RadioButton: [[image:TopDeselectedIndicatorAndIconBlank.png | downloadable "blank" for combined radiobutton and indicator]]
| |
| − | * Top Disabled RadioButton: [[image:TopDisabledIndicatorAndIconBlank.png | downloadable "blank" for combined radiobutton and indicator]]
| |
| − | | |
| − | '''(non-preferred) RadioButton Icons with Indicators at the Left'''
| |
| − | | |
| − | If you intend to use text as part of the widget too (not recommended), the following method to configure the widget should be made:
| |
| − | mybutton->SetCompoundModeToLeft();
| |
| − | | |
| − | * Left Selected RadioButton: [[image:LeftSelectedRadioIndicatorAndIconBlank.png | downloadable "blank" for combined radiobutton and indicator]]
| |
| − | * Left Deselected RadioButton: [[image:LeftDeselectedIndicatorAndIconBlank.png | downloadable "blank" for combined radiobutton and indicator]]
| |
| − | * Left Disabled RadioButton: [[image:LeftDisabledIndicatorAndIconBlank.png | downloadable "blank" for combined radiobutton and indicator]]
| |
| − | | |
| − | '''(non-preferred) RadioButton Icons with Indicators at the Right'''
| |
| − | | |
| − | If you intend to use text as part of the widget too (not recommended), the following method to configure the widget should be made:
| |
| − | mybutton->SetCompoundModeToRight();
| |
| − | | |
| − | * Right Selected RadioButton: [[image:RightSelectedRadioIndicatorAndIconBlank.png | downloadable "blank" for combined radiobutton and indicator]]
| |
| − | * Right Deselected RadioButton:[[image:RightDeselectedIndicatorAndIconBlank.png | downloadable "blank" for combined radiobutton and indicator]]
| |
| − | * Right Disabled RadioButton: [[image:RightDisabledIndicatorAndIconBlank.png | downloadable "blank" for combined radiobutton and indicator]]
| |
| − | | |
| − | '''Indicators for CheckButtons and RadioButtons'''
| |
| − | | |
| − | Developers may want to implement a specialized selection widget for which the above icon blanks are not useful, but would still like to rely on the same visual language and selection behavior the check/radio buttons offer. For this purpose, the icons for Selected Check Indicator, Selected Radio Indicator, Deselected Indicator, and Disabled Indicator are given below:
| |
| − | | |
| − | * Selected Check Indicator: [[image:CheckIndicatorOn.png | downloadable checkbutton indicator ]]
| |
| − | * Selected Radio Indicator: [[image:RadioIndicatorOn.png | downloadable radiobutton indicator ]]
| |
| − | * Deselected Indicator: [[image:IndicatorOff.png | downloadable deselected check/radio indicator ]]
| |
| − | * Disabled Indicator: [[image:IndicatorDisabled.png | downloadable disabled check/radio indicator ]]
| |
| − | | |
| − | , you can use indicator image data can be downloaded and incorporated into custom check/radio widgets.
| |
| − | | |
| − | ====Other Icons currently used in Slicer's Base====
| |
| − | Below is a figure of icons currently in use in 3D Slicer. If the icon you need is already used in Slicer, we encourage its re-use in your own module (the visibility icon is a good example). However, if an icon is re-used, make sure you are using it to convey the same meaning/function -- icons shouldn't have different meanings in different places. Finally, make sure any new icons designed for a module don't duplicate ones already in use elsewhere in Slicer.
| |
| − | | |
| − | [[Image:SlicerToolbarIcons2.png | Slicer icons ]]
| |
| − | | |
| − | === Widget-specific conventions ===
| |
| − | | |
| − | ==== Buttons & Pop-up Buttons ====
| |
| − | | |
| − | ===== PushButtons =====
| |
| − | | |
| − | ===== PushButtons with icons =====
| |
| − | | |
| − | ===== Representing state with toggling icons =====
| |
| − | | |
| − | ===== ChangeColorButtons & Color Selector Widgets =====
| |
| − | | |
| − | ===== HelpButtons =====
| |
| − | | |
| − | ==== Widgets for Selecting things ====
| |
| − | | |
| − | ===== Using selection widgets effectively =====
| |
| − | | |
| − | ===== MenuButtons =====
| |
| − | | |
| − | ===== MenuButtons with icons =====
| |
| − | | |
| − | ===== Menus & menu behavior =====
| |
| − | | |
| − | ====== Menuitems ======
| |
| − | | |
| − | ====== Cascades ======
| |
| − | | |
| − | ====== Context menus ======
| |
| − | | |
| − | ===== Checkbuttons and Radiobuttons =====
| |
| − | | |
| − | ===== Checkbuttons and Radiobuttons with icons =====
| |
| − | | |
| − | ===== Entry Widgets =====
| |
| − | | |
| − | ===== Listboxes =====
| |
| − | | |
| − | ===== Multi-column Lists =====
| |
| − | | |
| − | ===== SpinBoxes and SpinButtons =====
| |
| − | | |
| − | ==== Widgets for Adjusting things ====
| |
| − | | |
| − | ===== Choosing the best widget for the task =====
| |
| − | | |
| − | ===== Sliders =====
| |
| − | | |
| − | ===== Range Widgets =====
| |
| − | | |
| − | ==== Widgets for Displaying things ====
| |
| − | | |
| − | ===== Choosing the widgets for the task =====
| |
| − | | |
| − | ===== Labels =====
| |
| − | | |
| − | ===== Tree Widgets =====
| |
| − | | |
| − | ===== Text Widgets =====
| |
| − | | |
| − | ===== Toolbars & Toolbar Sets =====
| |
| − | | |
| − | ===== Progress Feedback =====
| |
| − | | |
| − | ==== Widgets for Editing things ====
| |
| − | | |
| − | ===== When to use an editor widget =====
| |
| − | | |
| − | ===== Color Transfer Function Editor =====
| |
| − | | |
| − | ===== Parameter Value Function Editor =====
| |
| − | | |
| − | ===== Piecewise Function Editor =====
| |
| − | | |
| − | ===== Text Property Editor =====
| |
| − | | |
| − | ==== Widgets for Containing things ====
| |
| − | | |
| − | ===== Organizing your GUI panel =====
| |
| − | | |
| − | ===== Frames and SplitFrames =====
| |
| − | | |
| − | ===== Pop-up Frames =====
| |
| − | | |
| − | ===== Notebooks =====
| |
| − | | |
| − | ===== FileBrowsers and FileBrowserDialogs =====
| |
| − | | |
| − | ===== Canvas Widgets =====
| |
| − | | |
| − | === Groups of Widgets ===
| |
| − | | |
| − | === Slicer Widgets ===
| |
| − | | |
| − | ==== Available Slicer widgets ====
| |
| − | | |
| − | ==== Designing your own widgets ====
| |
| − | | |
| − | === Layout Examples ===
| |
| − | | |
| − | === Providing Help ===
| |
| − | | |
| − | === Language ===
| |
| − | | |
| − | === Credit and Logos ===
| |
| − | | |
| − | | |
| − | | |
| − | | |
| − | | |
| − | === Progress Feedback ===
| |
| − | | |
| − | === Colors: application palettes ===
| |
| − | | |
| − | '''Currently being modified...''' The Slicer3 color palettes are shown below. Developers of code, web content and training materials are encouraged to make color choices for GUI components according to this palette, bearing in mind that some of the colors are linked with special meaning, such as error (errorRed), warning (warningYellow), and system (systemBlue) messages.
| |
| − | | |
| − | [[Image:Slicer3Palette.png|[[Image:Slicer3Palette.png| Slicer GUI color palettes (not applicable to visualization)]]]]
| |
| − | | |
| − | <br /> | |
| − | | |
| − | main palette
| |
| − | | |
| − | {| border="1"
| |
| − | |- bgcolor="#ffffff"
| |
| − | ! name
| |
| − | ! show me
| |
| − | ! R
| |
| − | ! G
| |
| − | ! B
| |
| − | ! hex
| |
| − | ! use in slicer
| |
| − | |-
| |
| − | | Black
| |
| − | | bgcolor="#000000" |
| |
| − | | align="center" | 0
| |
| − | | align="center" | 0
| |
| − | | align="center" | 0
| |
| − | | #000000
| |
| − | | official text on enabled widgets
| |
| − | |-
| |
| − | | White
| |
| − | | bgcolor="#ffffff" |
| |
| − | | align="center" | 255
| |
| − | | align="center" | 255
| |
| − | | align="center" | 255
| |
| − | | #ffffff
| |
| − | | official GUI background
| |
| − | |-
| |
| − | | LightestGrey
| |
| − | | bgcolor="#e5e5ff" |
| |
| − | | align="center" | 229
| |
| − | | align="center" | 229
| |
| − | | align="center" | 255
| |
| − | | #e5e5ff
| |
| − | | theme uses this for mock 'drop shadow' around GUI panels
| |
| − | |-
| |
| − | | LighterGrey
| |
| − | | bgcolor="#dfdde2" |
| |
| − | | align="center" | 223
| |
| − | | align="center" | 221
| |
| − | | align="center" | 226
| |
| − | | #dfdde2
| |
| − | | module collapsing frame title background
| |
| − | |-
| |
| − | | LightGrey
| |
| − | | bgcolor="#aeaeae" |
| |
| − | | align="center" | 174
| |
| − | | align="center" | 174
| |
| − | | align="center" | 174
| |
| − | | #aeaeae
| |
| − | | slices controller & slice viewer icon background; outlines around deselected Slicer checkbuttons and radiobuttons (and indicators)
| |
| − | |-
| |
| − | | MediumGrey
| |
| − | | bgcolor="#999999" |
| |
| − | | align="center" | 153
| |
| − | | align="center" | 153
| |
| − | | align="center" | 153
| |
| − | | #999999
| |
| − | | widget groove color, disabled widget text color
| |
| − | |-
| |
| − | | DarkGrey
| |
| − | | bgcolor="#525252" |
| |
| − | | align="center" | 82
| |
| − | | align="center" | 82
| |
| − | | align="center" | 82
| |
| − | | #525252
| |
| − | | low value grey for use in icons
| |
| − | |-
| |
| − | | DarkOchre
| |
| − | | bgcolor="#b56415" |
| |
| − | | align="center" | 181
| |
| − | | align="center" | 100
| |
| − | | align="center" | 21
| |
| − | | #b56415
| |
| − | |
| |
| − | |-
| |
| − | | MediumOchre
| |
| − | | bgcolor="#e4a620" |
| |
| − | | align="center" | 228
| |
| − | | align="center" | 166
| |
| − | | align="center" | 32
| |
| − | | #e4a620
| |
| − | |
| |
| − | |-
| |
| − | | BrightOchre
| |
| − | | bgcolor="#f3ac22" |
| |
| − | | align="center" | 243
| |
| − | | align="center" | 172
| |
| − | | align="center" | 34
| |
| − | | #f3ac22
| |
| − | |
| |
| − | |-
| |
| − | | SliceYellow
| |
| − | | bgcolor="#edd54c" |
| |
| − | | align="center" | 237
| |
| − | | align="center" | 213
| |
| − | | align="center" | 76
| |
| − | | #edd54c"
| |
| − | | yellow slice viewer color-code
| |
| − | |-
| |
| − | | LightOchre
| |
| − | | bgcolor="#f4e97f" |
| |
| − | | align="center" | 244
| |
| − | | align="center" | 233
| |
| − | | align="center" | 127
| |
| − | | #f4e97f
| |
| − | |
| |
| − | |-
| |
| − | | DarkOrange
| |
| − | | bgcolor="#c24a18" |
| |
| − | | align="center" | 194
| |
| − | | align="center" | 74
| |
| − | | align="center" | 24
| |
| − | | #c24a18
| |
| − | |
| |
| − | |-
| |
| − | | MediumOrange
| |
| − | | bgcolor="#e17012" |
| |
| − | | align="center" | 225
| |
| − | | align="center" | 112
| |
| − | | align="center" | 18
| |
| − | | #e17012
| |
| − | |
| |
| − | |-
| |
| − | | BrightOrange
| |
| − | | bgcolor="#f48214" |
| |
| − | | align="center" | 244
| |
| − | | align="center" | 130
| |
| − | | align="center" | 20
| |
| − | | #f48214
| |
| − | |
| |
| − | |-
| |
| − | | LightOrange
| |
| − | | bgcolor="#f3b846" |
| |
| − | | align="center" | 243
| |
| − | | align="center" | 184
| |
| − | | align="center" | 70
| |
| − | | #f3b846
| |
| − | |
| |
| − | |-
| |
| − | | LightestOrange
| |
| − | | bgcolor="#efd580" |
| |
| − | | align="center" | 239
| |
| − | | align="center" | 213
| |
| − | | align="center" | 128
| |
| − | | #efd580
| |
| − | |
| |
| − | |-
| |
| − | | DarkBrown
| |
| − | | bgcolor="#836648" |
| |
| − | | align="center" | 131
| |
| − | | align="center" | 102
| |
| − | | align="center" | 72
| |
| − | | #836648
| |
| − | |
| |
| − | |-
| |
| − | | MediumBrown
| |
| − | | bgcolor="#c1734f" |
| |
| − | | align="center" | 193
| |
| − | | align="center" | 115
| |
| − | | align="center" | 79
| |
| − | | #c1734f
| |
| − | |
| |
| − | |-
| |
| − | | Brown
| |
| − | | bgcolor="#be9462" |
| |
| − | | align="center" | 190
| |
| − | | align="center" | 148
| |
| − | | align="center" | 98
| |
| − | | #be9462
| |
| − | |
| |
| − | |-
| |
| − | | LightBrown
| |
| − | | bgcolor="#e0c29e" |
| |
| − | | align="center" | 224
| |
| − | | align="center" | 194
| |
| − | | align="center" | 158
| |
| − | | #e0c29e
| |
| − | |
| |
| − | |-
| |
| − | | LightestBrown
| |
| − | | bgcolor="#f1e0d0" |
| |
| − | | align="center" | 241
| |
| − | | align="center" | 224
| |
| − | | align="center" | 208
| |
| − | | #f1e0d0
| |
| − | |
| |
| − | |-
| |
| − | | DarkRed
| |
| − | | bgcolor="#c32e10" |
| |
| − | | align="center" | 195
| |
| − | | align="center" | 46
| |
| − | | align="center" | 16
| |
| − | | #c32e10
| |
| − | |
| |
| − | |-
| |
| − | | MediumRed
| |
| − | | bgcolor="#d92512" |
| |
| − | | align="center" | 217
| |
| − | | align="center" | 37
| |
| − | | align="center" | 18
| |
| − | | #d92512
| |
| − | | fiducial symbol color in icons
| |
| − | |-
| |
| − | | SliceRed
| |
| − | | bgcolor="#f34a33" |
| |
| − | | align="center" | 243
| |
| − | | align="center" | 74
| |
| − | | align="center" | 51
| |
| − | | #f34a33
| |
| − | | red slice viewer color-code
| |
| − | |-
| |
| − | | LightRed
| |
| − | | bgcolor="#e46a44" |
| |
| − | | align="center" | 228
| |
| − | | align="center" | 106
| |
| − | | align="center" | 68
| |
| − | | #e46a44
| |
| − | |
| |
| − | |-
| |
| − | | LightestRed
| |
| − | | bgcolor="#e68464" |
| |
| − | | align="center" | 230
| |
| − | | align="center" | 132
| |
| − | | align="center" | 100
| |
| − | | #e68464
| |
| − | |
| |
| − | |-
| |
| − | | DarkGreyGreen
| |
| − | | bgcolor="#465430" |
| |
| − | | align="center" | 70
| |
| − | | align="center" | 84
| |
| − | | align="center" | 48
| |
| − | | #465430
| |
| − | |
| |
| − | |-
| |
| − | | MediumGreyGreen
| |
| − | | bgcolor="#678e3f" |
| |
| − | | align="center" | 103
| |
| − | | align="center" | 142
| |
| − | | align="center" | 63
| |
| − | | #678e3f
| |
| − | |
| |
| − | |-
| |
| − | | SliceGreen
| |
| − | | bgcolor="#6eb04b" |
| |
| − | | align="center" | 110
| |
| − | | align="center" | 176
| |
| − | | align="center" | 75
| |
| − | | #6eb04b
| |
| − | | green slice viewer color-code
| |
| − | |-
| |
| − | | LightGreyGreen
| |
| − | | bgcolor="#8aa570" |
| |
| − | | align="center" | 138
| |
| − | | align="center" | 165
| |
| − | | align="center" | 112
| |
| − | | #8aa570
| |
| − | |
| |
| − | |-
| |
| − | | LightestGreyGreen
| |
| − | | bgcolor="#cae6b5" |
| |
| − | | align="center" | 202
| |
| − | | align="center" | 230
| |
| − | | align="center" | 181
| |
| − | | #cae6b5
| |
| − | |
| |
| − | |-
| |
| − | | DarkGreen
| |
| − | | bgcolor="#255639" |
| |
| − | | align="center" | 37
| |
| − | | align="center" | 86
| |
| − | | align="center" | 57
| |
| − | | #255639
| |
| − | |
| |
| − | |-
| |
| − | | MediumGreen
| |
| − | | bgcolor="#007f09" |
| |
| − | | align="center" | 0
| |
| − | | align="center" | 127
| |
| − | | align="center" | 9
| |
| − | | #007f09
| |
| − | |
| |
| − | |-
| |
| − | | Green
| |
| − | | bgcolor="#2fa42f" |
| |
| − | | align="center" | 47
| |
| − | | align="center" | 164
| |
| − | | align="center" | 47
| |
| − | | #2fa42f
| |
| − | |
| |
| − | |-
| |
| − | | LightGreen
| |
| − | | bgcolor="#59c67a" |
| |
| − | | align="center" | 89
| |
| − | | align="center" | 198
| |
| − | | align="center" | 122
| |
| − | | #59c67a
| |
| − | |
| |
| − | |-
| |
| − | | LightestGreen
| |
| − | | bgcolor="#ceeed8" |
| |
| − | | align="center" | 206
| |
| − | | align="center" | 238
| |
| − | | align="center" | 216
| |
| − | | #ceeed8
| |
| − | |
| |
| − | |-
| |
| − | | DarkGreyBlue
| |
| − | | bgcolor="#484065" |
| |
| − | | align="center" | 72
| |
| − | | align="center" | 64
| |
| − | | align="center" | 101
| |
| − | | #484065
| |
| − | |
| |
| − | |-
| |
| − | | MediumGreyBlue
| |
| − | | bgcolor="#635c85" |
| |
| − | | align="center" | 99
| |
| − | | align="center" | 92
| |
| − | | align="center" | 133
| |
| − | | #635c85
| |
| − | |
| |
| − | |-
| |
| − | | GreyBlue
| |
| − | | bgcolor="#748fad" |
| |
| − | | align="center" | 116
| |
| − | | align="center" | 143
| |
| − | | align="center" | 173
| |
| − | | #748fad
| |
| − | |
| |
| − | |-
| |
| − | | SlicerBlue
| |
| − | | bgcolor="#b3b3e7" |
| |
| − | | align="center" | 179
| |
| − | | align="center" | 179
| |
| − | | align="center" | 231
| |
| − | | #b3b387
| |
| − | | classic slicer 3D viewer background
| |
| − | |-
| |
| − | | LightGreyBlue
| |
| − | | bgcolor="#d0d0f1" |
| |
| − | | align="center" | 208
| |
| − | | align="center" | 208
| |
| − | | align="center" | 241
| |
| − | | #d0d0f1
| |
| − | | 3D viewer icon background
| |
| − | |-
| |
| − | | DarkBlue
| |
| − | | bgcolor="#263b8b" |
| |
| − | | align="center" | 38
| |
| − | | align="center" | 59
| |
| − | | align="center" | 139
| |
| − | | #263b8b
| |
| − | |
| |
| − | |-
| |
| − | | MediumBlue
| |
| − | | bgcolor="#385fb1" |
| |
| − | | align="center" | 56
| |
| − | | align="center" | 95
| |
| − | | align="center" | 177
| |
| − | | #385fb1
| |
| − | | mouse mode icon arrow color
| |
| − | |-
| |
| − | | Blue
| |
| − | | bgcolor="#2a71bb" |
| |
| − | | align="center" | 42
| |
| − | | align="center" | 113
| |
| − | | align="center" | 187
| |
| − | | #2a71bb
| |
| − | |
| |
| − | |-
| |
| − | | LightBlue
| |
| − | | bgcolor="#7a9dc2" |
| |
| − | | align="center" | 122
| |
| − | | align="center" | 157
| |
| − | | align="center" | 194
| |
| − | | #7a9dc2
| |
| − | |
| |
| − | |-
| |
| − | | LightestBlue
| |
| − | | bgcolor="#98d4d5" |
| |
| − | | align="center" | 152
| |
| − | | align="center" | 212
| |
| − | | align="center" | 213
| |
| − | | #98d4d5
| |
| − | |
| |
| − | |}
| |
| − | | |
| − | <br /> | |
| − | | |
| − | message palette:
| |
| − | | |
| − | {| border="1"
| |
| − | |- bgcolor="#ffffff"
| |
| − | ! name
| |
| − | ! show me
| |
| − | ! R
| |
| − | ! G
| |
| − | ! B
| |
| − | ! hex
| |
| − | ! use in slicer
| |
| − | |-
| |
| − | | ErrorRed
| |
| − | | bgcolor="#ff0000" |
| |
| − | | align="center" | 255
| |
| − | | align="center" | 0
| |
| − | | align="center" | 0
| |
| − | | #ff0000
| |
| − | | error message/dialog accent
| |
| − | |-
| |
| − | | SystemBlue
| |
| − | | bgcolor="#0f66c0" |
| |
| − | | align="center" | 15
| |
| − | | align="center" | 102
| |
| − | | align="center" | 192
| |
| − | | #0f66c0
| |
| − | | message/dialog accent
| |
| − | |-
| |
| − | | WarningYellow
| |
| − | | bgcolor="#ffe21e" |
| |
| − | | align="center" | 255
| |
| − | | align="center" | 226
| |
| − | | align="center" | 30
| |
| − | | #ffe21e
| |
| − | | warning message/dialog accent
| |
| − | |}
| |
| − | | |
| − | | |
| − | accent palette:
| |
| − | | |
| − | {| border="1"
| |
| − | |- bgcolor="#ffffff"
| |
| − | ! name
| |
| − | ! show me
| |
| − | ! R
| |
| − | ! G
| |
| − | ! B
| |
| − | ! hex
| |
| − | ! use in slicer
| |
| − | |-
| |
| − | | Magenta
| |
| − | | bgcolor="#ff00ff" |
| |
| − | | align="center" | 255
| |
| − | | align="center" | 0
| |
| − | | align="center" | 255
| |
| − | | #ff00ff
| |
| − | | 3D viewer cube & icon accent
| |
| − | |-
| |
| − | | Purple
| |
| − | | bgcolor="#bf49be" |
| |
| − | | align="center" | 191
| |
| − | | align="center" | 73
| |
| − | | align="center" | 190
| |
| − | | #bf49be
| |
| − | | icon accent
| |
| − | |-
| |
| − | | DarkPurple
| |
| − | | bgcolor="#8b2785" |
| |
| − | | align="center" | 139
| |
| − | | align="center" | 39
| |
| − | | align="center" | 133
| |
| − | | #8b2785
| |
| − | | icon accent
| |
| − | |-
| |
| − | | LogoGreyBlue
| |
| − | | bgcolor="#717f98" |
| |
| − | | align="center" | 113
| |
| − | | align="center" | 127
| |
| − | | align="center" | 152
| |
| − | | #717f98
| |
| − | | logo color & icon accent
| |
| − | |-
| |
| − | | IGTGrey
| |
| − | | bgcolor="#44455b" |
| |
| − | | align="center" | 68
| |
| − | | align="center" | 69
| |
| − | | align="center" | 91
| |
| − | | #44455b
| |
| − | | logo color & icon accent
| |
| − | |-
| |
| − | | LogoDarkGrey
| |
| − | | bgcolor="#30383c" |
| |
| − | | align="center" | 48
| |
| − | | align="center" | 56
| |
| − | | align="center" | 60
| |
| − | | #30383c
| |
| − | | logo color & icon accent
| |
| − | |-
| |
| − | | LogoLightYellow
| |
| − | | bgcolor="#f0d98a" |
| |
| − | | align="center" | 240
| |
| − | | align="center" | 217
| |
| − | | align="center" | 138
| |
| − | | #f0d98a
| |
| − | | logo color & icon accent
| |
| − | |-
| |
| − | | LogoMediumYellow
| |
| − | | bgcolor="#f8bf25" |
| |
| − | | align="center" | 248
| |
| − | | align="center" | 191
| |
| − | | align="center" | 37
| |
| − | | #f8bf25
| |
| − | | logo color & icon accent
| |
| − | |-
| |
| − | | LogoOrange
| |
| − | | bgcolor="#f06c2e" |
| |
| − | | align="center" | 240
| |
| − | | align="center" | 108
| |
| − | | align="center" | 46
| |
| − | | #f06c2e
| |
| − | | logo color & icon accent
| |
| − | |-
| |
| − | | LogoRed
| |
| − | | bgcolor="#f72d1e" |
| |
| − | | align="center" | 247
| |
| − | | align="center" | 45
| |
| − | | align="center" | 30
| |
| − | | #f72d1e
| |
| − | | logo color & icon accent
| |
| − | |-
| |
| − | | NAMICBlue
| |
| − | | bgcolor="#0063b5" |
| |
| − | | align="center" | 0
| |
| − | | align="center" | 99
| |
| − | | align="center" | 181
| |
| − | | #0063b5
| |
| − | | logo color & icon accent
| |
| − | |-
| |
| − | | SPLGreen
| |
| − | | bgcolor="#009966" |
| |
| − | | align="center" | 0
| |
| − | | align="center" | 153
| |
| − | | align="center" | 102
| |
| − | | #009966
| |
| − | | logo color & icon accent
| |
| − | |}
| |
| − | | |
| − | === Document and Code Well ===
| |
