|
|
| (219 intermediate revisions by 5 users not shown) |
| Line 1: |
Line 1: |
| − | [[Slicer3:Interface_Design|Return to Slicer3 Interface Design and Usability ]]
| + | <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:UIDesign here]</font></big> |
| − | | |
| − | = Slicer3 design & usability goals =
| |
| − | | |
| − | 1. Enable a user to understand and effectively use the content and tools being presented;
| |
| − | | |
| − | 2. Enable a user to accomplish a principle task by following an appropriate and satisfying workflow or a curiosity-driven exploration, at an appropriate pace;
| |
| − | | |
| − | 3. Enhance and support the developer’s experience with GUI infrastructure and guidelines that simplify and clarify their work.
| |
| − | | |
| − | = Core values =
| |
| − | | |
| − | These are the established 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
| |
| − | | |
| − | = Embodiment =
| |
| − | | |
| − | * Current schematic of the main application GUI: [[Media:GUIMap.png ]]
| |
| − | * Current schematic of a Slice Viewer and Controller: [[ Media:SliceGUI.png ]]
| |
| − | * Design sketch for the 3D navigation & Slice magnifier widget [[ Media:NavZoomWidgetSketch.png]]
| |
| − | * Early look and feel draft [[Media:SlicerLookFeelDraftSmall.jpg]]
| |
| − | * First sketch of the GUI layout design [[Media:LayoutSketch.gif]]
| |
| − | * Link to a running [[Slicer3:VisualBlog|visual blog ]] highlighting progress in the Slicer3 embodiment.
| |
| − | | |
| − | === Current status and TO-DO ===
| |
| − | | |
| − | The existing base classes form a basic framework for the UI. For the Alpha deadline, we provided a main application window with the general layout described in our current design. For the Beta deadline, we are focusing on:
| |
| − | | |
| − | * clean up vtkDebug Leaks
| |
| − | * copyright existing icons and logo
| |
| − | * working on improving the Theme to enhance module GUI appearance and readability,
| |
| − | * implementing functionality for view control widgets,
| |
| − | * implementing lightbox viewer
| |
| − | | |
| − | | |
| − | === Working problem: controlling mouse mode in Slicer's Viewers ===
| |
| − | | |
| − | We are currently deciding a good paradigm for controlling mouse modes in Slicer's
| |
| − | 3D viewer and 2D slice windows. We rely on mouse interaction to transform the view, and to perform explicit actions like placing a fiducial, selecting and moving a fiducial, collecting voxel-value samples, and so on. The challenge is to give a user a simple way to make their precise intention explicit. We'd like the interaction paradigm to have the following features:
| |
| − | | |
| − | * Consistent in all slice windows and 3D viewer
| |
| − | * Intuitive and easy for beginners
| |
| − | * Fast for intermediate and expert users
| |
| − | * Rely on only one mouse button (since some mice have only two, and some laptops give us less to work with)
| |
| − | * Support direct manipulation
| |
| − | * Provide clear visual feedback
| |
| − | * Support both '''view transformation''' (rotate, pan, zoom) and '''mouse actions''' (pick, manipulate, place, etc...).
| |
| − | | |
| − | --- | |
| − | | |
| − | ====Current problems in existing Slicer3 implementation:==== | |
| − | | |
| − | * Mouse motion always in "view transform" mode
| |
| − | * Relies on three mouse buttons (for rotate, pan, zoom, slice scroll) which aren't always present
| |
| − | * Relies on hot-keys for non-transform mouse actions (tough for novice users, or forgetful intermediate users)
| |
| − | * 3D viewer mouse event bindings and Slice viewer mouse event bindings not entirely consistent
| |
| − | * Would like to free up right mouse button (and/or space bar) to invoke the display of a 'context menu'.
| |
| − | * Would like intuitive one-handed mouse-only interaction to be possible AND hot-key assisted shortcuts to be available.
| |
| − | | |
| − | In addition, in Slicer2, special keys were used in place of application-wide paradigms for actions. For instance, Fiducials used 'p' to place a fiducial, 'q' to select it. Other modules might redefine these key-bindings. By default, Slicer3 will adopt this interaction paradigm too, unless a application-wide strategy is designed.
| |
| − | | |
| − | | |
| − | =====Current bindings (not entirely consistent across 3D Viewer and Slice Viewers):=====
| |
| − | | |
| − | * 3D viewer: left mouse button >> rotate
| |
| − | * 3D viewer: middle mouse button >> pan
| |
| − | * 3D viewer: mouse wheel button >> zoom in/out
| |
| − | * 3D viewer: right mouse button, pull drag >> zoom in
| |
| − | * 3D viewer: right mouse button, push drag >> zoom out
| |
| − | | |
| − | * Slice viewer: left mouse button >> select/move a fiducial point
| |
| − | * Slice viewer: middle mouse button >> pan
| |
| − | * Slice viewer: mouse wheel button >> scroll slices
| |
| − | * Slice viewer: right mouse button, pull drag >> zoom in
| |
| − | * Slice viewer: right mouse button, push drag >> zoom out
| |
| − | * special key-bindings enable placing of fiducials
| |
| − | | |
| − | ---
| |
| − | | |
| − | =====How Actions and View Transformations are done in Maya=====
| |
| − | | |
| − | Maya is a very heavily used professional 3D animation package. Basic mouse bindings are:
| |
| − | | |
| − | * Rotate: alt-left mouse button
| |
| − | * Pan: alt-middle mouse button
| |
| − | * Zoom: alt-right or alt-right-and-middle mouse button
| |
| − | * Actions: always left mouse button, specific action depends on current mode
| |
| − | * Context menu: space bar
| |
| − | | |
| − | The advantage of this approach is that the left mouse button is freed up for many possible tasks such as selection, grabbing widget handles, etc. Disadvantage is that it requires two hands to operate. (A free copy of an almost-fully functional version of Maya is [http://www.autodesk.com/maya-trial available] for testing ). | |
| − | | |
| − | =====How Actions and View Transformations are done in Blender=====
| |
| − | | |
| − | [http://www.blender.org Blender] is an Open Source modeling and animation package similar in many ways to Maya (almost like GIMP is to Photoshop). Basic mouse bindings are:
| |
| − | | |
| − | * Rotate: alt-left mouse button OR middle mouse button
| |
| − | * Pan: shift-middle mouse button
| |
| − | * Zoom: control-middle mouse button
| |
| − | * Actions: mostly left mouse button
| |
| − | * Context menu: space bar
| |
| − | | |
| − | ---
| |
| − | | |
| − | ====Proposed approach:====
| |
| − | | |
| − | We are looking for user feedback on a proposed approach to solving the problems listed above, in a manner that echos what other 3D modeling packages do: providing explicit '''mouse modes''' which clearly differentiate whether a user is transforming a view, or performing some "action" by clicking or dragging the mouse. Please have a look at the interaction paradigm we're proposing and the description of the workflow it would generate for novice users and for expert users. This way of interacting is a little different from Slicer2's paradigm. Also see the analogous interfaces from Maya (a popular 3D modeling and rendering software package) and also SketchUp (which does some simple but powerful 3D modeling). Then, have a look at the 3D Slicer interface with the mouse-mode buttons -- with the workflow in mind -- and contribute any feedback you have in the bottom section. Thanks for your help!
| |
| − | | |
| − | Below are shown the icons for mouse-mode selection (their appearance when selected and unselected), along with (undecided) hot-keys. (In this example, other mouse-buttons can also be bound to events, but a user without those mouse buttons will still be able to perform all functions.)
| |
| − | | |
| − | ---
| |
| − | | |
| − | [[image:mouseModeMockup.png | 3D Slicer Mouse modeA ]]
| |
| − | | |
| − | ---
| |
| − | | |
| − | '''Features of One-Mouse-Button interaction paradigm:'''
| |
| − | | |
| − | * Interface indicates a persistent mouse mode: pick (selecting a fiducial, picking a value, etc.), pick+manipulate (pick and move a fiducial), pick-in-region (rubber band box), deselect all, put (for placing fiducials, seed points, etc.), view rotate, view pan, view zoom.
| |
| − | * Novice user can select mouse modes by clicking icons above 3D viewer, and current mode is clearly displayed.
| |
| − | * Intermediate or Expert user selects mouse modes by using a combination of keyboard keys and left mouse button.
| |
| − | * Rely on one (left) mouse button only.
| |
| − | | |
| − | | |
| − | '''Workflow(s):'''
| |
| − | | |
| − | A '''novice''' user's workflow using these mouse-mode icons:
| |
| − | | |
| − | [[image:MouseModeIcons.png | icons ]]
| |
| − | | |
| − | * click the rotate mouse-mode icon, --> (mouse rotate icon highlights and all others deselect)
| |
| − | * then left-Click and drag in the 3D Viewer to rotate a view,
| |
| − | * click the pan mouse-mode icon, --> (mouse pan icon highlights and all others deselect)
| |
| − | * then left-Click and drag in the 3D Viewer to translate the view,
| |
| − | * click the zoom mouse-mode icon, --> (mouse zoom icon hightlights and all others deselect)
| |
| − | * then left-Click and drag in the 3D Viewer to zoom the view.
| |
| − | * click the mouse-pick icon, --> (mouse-pick highlights and all others deselect)
| |
| − | * then left-Click on several fiducial points in a Slice Viewer, which highlight.
| |
| − | * click the mouse-pick-and-manipulate icon, --> (mouse-pick-and-manipulate highlights, all others deselect)
| |
| − | * then left-Click and drag in a Slice Viewer to move all points.
| |
| − | * click the mouse-deselect-all icon, --> (mouse deselect highlights, all others deselect, all fiducials are deselected).
| |
| − | * click the mouse-pick-and-manipulate icon, --> mouse-pick-and-manipulate highlights, all other icons deselect),
| |
| − | * then left-Click on one fiducial in a Slice Viewer and drag to highlight and move that fiducial.
| |
| − | * click the mouse-deselect-all icon again, --> (it hightlights, all other icons deselect, and the fiducial is deselected).
| |
| − | | |
| − | | |
| − | An '''expert''' user's workflow using hot-keys (icon state provides visual feedback of mode):
| |
| − | | |
| − | [[image:MouseModeIcons.png | icons ]]
| |
| − | | |
| − | * ctrl+left-Click and drag in the 3D Viewer, --> (mouse rotate icon highlights and all others deselect; view rotates)
| |
| − | * alt+left-Click and drag in the 3D Viewer, -->(mouse pan icon highlights and all others deselect; view pans)
| |
| − | * shift+left-Click and drag in the 3D Viewer --> (mouse zoom icon highlights and all others deselect; view zooms).
| |
| − | * press ctrl-g to switch into mouse-pick mode --> (mouse pick icon highlights, and all others deselect),
| |
| − | * then left-Click on several voxels in the Slice Viewer to collect greyscale samples.
| |
| − | * press ctrl-m to switch into mouse-pick-and-manipulate mode --> (this icon highlights, all others deselect),
| |
| − | * then left-Click on a fiducial in the Slice Viewer to highlight it, and drag to move it.
| |
| − | * press ctrl-d again to deselect the fiducial point --> ( the deselect-all icon highlights and all other icons are deselected.)
| |
| − | | |
| − | | |
| − | | |
| − | ---
| |
| − | | |
| − | Below are SketchUp's interface, and Maya Interface, and the proposed Slicer mouse-mode icons (selected and deselected) as proposed. Maya's mouse modes switch between object transforms (translate, rotate and scale), object or region select, and an extrude function. SketchUp's mouse-mode icons switch between view transforms (translate, rotate, zoom) and an object extrude function.
| |
| − | | |
| − | [[image:sketchupInterface.png | SketchUp Example ]]
| |
| − | | |
| − | [[image:mayaInterface.png | Maya Example ]]
| |
| − | | |
| − | [[image:mouseModeMockup2.png | 3D Slicer Mouse mode ]]
| |
| − | | |
| − | ---
| |
| − | | |
| − | ====Please contribute comments here -- Thank you!: ====
| |
| − | | |
| − | <br />''' Return to TOC ''' | |
| − | | |
| − | [[Slicer3:Interface_Design|Return to Slicer3 Interface Design and Usability ]]
| |
