Difference between revisions of "Slicer3:UIDesign"

From Slicer Wiki
Jump to: navigation, search
m (Text replacement - "\[http:\/\/www\.slicer\.org\/slicerWiki\/index\.php\/([^ ]+) ([^]]+)]" to "$2")
 
(286 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
[[Slicer3:Interface_Design|Return to Slicer3 Interface Design and Usability ]]
 
[[Slicer3:Interface_Design|Return to Slicer3 Interface Design and Usability ]]
  
 +
[[Slicer4:UIDesign | Go to Slicer4 UI Design page ]]
  
 +
<br>
  
−
= Embodiment =
+
<br>
−
 
+
'''This page contains a catalog of user interface design and development notes for various aspects of Slicer 3.4, 3.6 (based on KWWidgets) and links to new work on Slicer 4.0 (based on Qt).'''
−
* Current schematic of the main application GUI: ( higher resolution image: [[Media:GUIMap.png ]])
+
<br>
−
 
 
−
[[Image:SmallEmbodiment.png]]
 
−
 
 
−
* Current schematic of a Slice Viewer and Controller: (higher resolution image: [[ Media:SliceGUI.png ]])
 
−
 
 
−
[[Image:SmallSliceGUI.png]]
 
−
 
 
−
* [[Media:NavZoomWidgetSketch.png|Design sketch for the 3D navigation & Slice magnifier widget]]
 
−
* [[Media:SlicerLookFeelDraftSmall.jpg|Early look and feel draft]]
 
−
* [[Media:LayoutSketch.gif|First sketch of the GUI layout design]]
 
−
* Link to a running [[Slicer3:VisualBlog|visual blog ]] highlighting progress in the Slicer3 embodiment.
 
  
 
= Slicer users =
 
= Slicer users =
Line 33: Line 24:
 
* Application scientists (who use 3DSlicer as a desktop application and turnkey system)
 
* Application scientists (who use 3DSlicer as a desktop application and turnkey system)
  
 +
<br>
 +
 +
= User Feedback: Feature, Resource, Application Convention Requests =
 +
 +
 +
Please add usability feedback to Slicer3's [http://www.na-mic.org/Bug/my_view_page.php bug tracker]. If you are not familiar with the bug tracker:
 +
* login or create an account
 +
* choose Slicer3 as your project (upper right corner)
 +
* and select Report Issue.
 +
* make sure to choose the correct category for your report (select "usability" for usability issues).
 +
 +
Early feature requests can also be found  '''[[Slicer3:FeatureRequests|here.]]'''
 +
 +
 +
<br>
 +
 +
 +
 +
= Codes to mark contributions =
 +
 +
These wiki pages can be hard to parse. Here's an experiment for marking feedback to make it easier to parse; (copy, paste and customize from below).
 +
 +
[[Image:Opinion.png]] '''(wjp)''' Add a general comment or opinion.
 +
 +
[[Image:Usability.png]] Flag a usability problem.
 +
 +
[[Image:Idea.png]] Mark an idea.
 +
 +
[[Image:Sketch.png]] [[Slicer3:UIDesign#Codes_to_mark_contributions | Mark a link to related info.]]
 +
 +
[[Image:Bug.png]] Report a bug.
 +
 +
[[Image:Fire.png]] Report a really bad bug that's blocking work progress, or causing a crash.
 +
 +
[[Image:MissingOrStaleDoc.png]] Report missing documentation.
 +
 +
[[Image:MissingOrStaleDocLink.png]] Report bad documentation link.
 +
 +
[[Image:WeakDoc.png]] Report insufficient documentation.
 +
 +
= '''Slicer 4.0:''' Working problems in QT Interface Design and Implementation =
 +
 +
[[Slicer3:Developers:Projects:QtSlicer|See this link for ongoing project]]
 +
 +
 +
= '''Slicer 3.6:''' Working problems in Interaction and interface design for KWWidgets-based Slicer interface. =
 +
 +
= Working problem: Consolidated Load in Slicer including a Data Management System =
  
−
== Current status and TO-DO ==
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:XNAT_Desktop_GUI_Design | Link to design sketches extending XNAT Desktop to have OsiriX-like UXP & functionality]] ==
  
−
The existing base classes form a basic framework for the UI. For the Alpha/Beta releases, we provided a main application window with the general layout described in our current design. For the Release deadline, we plan to complete the overall application GUI. Things we are focusing on:
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:Slicer_Consolidated_Load_GUI_Design | Link to info for Slicer Consolidated Load Design integrating a local file management system]] ==
  
−
* choose radiobutton/checkbutton with/without icon convention
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:XNAT_Enterprise_QueryWidget | Link to user specifications and design sketches for a Qt-based Query Widget for XNAT Enterprise]] ==
−
* finish content for slicer human interface and style guidelines
 
−
* theme font, match to screen resolution, set in application settings
 
−
* finish slicer mouse modes
 
−
* think through color palette to support semantic applications
 
−
* update module GUI how-to
 
−
* refine ROI toolbox design, work with developer to implement
 
−
* refine lightbox viewer
 
−
* implement mechanism to specify oblique view
 
−
* build classes for pop-up information (help and context info)
 
−
* copyrights
 
  
−
= Working problem: spot GUI fixing =
+
= Working problem: Mouse Modes in Slicer3 =
−
== Scene snapshot panel ==
 
−
This GUI panel allows the scene to be recorded at any point and restored later; it's particularly useful for sharing relevant views of a scene with collaborators or for instruction. The layout can be made more compact and improved in general. Also, colors on the 'restore' button are overly bold, and the red/green imply more than they intend.
 
  
−
'''Current layout:'''
+
Since a left-mouse-button click in Slicer's 3D or Slice Viewers can mean different things at different times; this can be confusing to users, and can lead to mistakes. We are currently deciding a good paradigm for defining and 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 make all actions possible with just the left mouse button (some mice have only one button), and to disambiguate what a left-mouse-button click in the 3D and Slice viewers means.
  
−
[[image: oldSceneSnapshot1.png]]
+
'''Goals:''' We'd like the interaction paradigm to have the following features:
  
−
[[image: oldSceneSnapshot0.png]]
+
* Consistent in all slice windows and 3D viewer
 +
* Reflect common software conventions
 +
* Intuitive and easy for beginners
 +
* Fast for intermediate and expert users
 +
* Rely on only one mouse button (but accommodate multiple mouse buttons)
 +
* Support direct manipulation as much as possible
 +
* Provide clear visual feedback about current mouse mode
 +
* Support both '''view transformation''' (rotate, pan, zoom) as the primary mode, and a set of '''mouse actions''' (pick, manipulate, place, etc..., and '''window/level adjustments''' according to convention in medical imaging software packages.
 +
* Consistent classification of all direct-manipulable entities in slicer into a set of groups, and have consistent behavior for 'selecting' all entities within each group.
  
−
'''New design:'''
 
  
−
The restore button needs to convey three states:
+
==Current issues we want to address in existing Slicer3 implementation:==
  
−
* no scene snapshots exist to restore
+
* Mouse motion should '''default''' to "transform view" mode
−
[[image: SceneSnapshot2.png]]
+
* Interaction relies on three mouse buttons (for rotate, pan, zoom, etc.) which aren't always present on all computers
−
* a scene snapshot is selected to be restored, but is not yet visible.
+
* It's currently easy to forget about persisting non-transform mouse modes (like pick or place) and assume that the view can be transformed -- leading to annoying errors.  We want to avoid these errors
−
[[image: SceneSnapshot0.png]]
+
* Would like to free up right mouse button to invoke the display of a 'context menu', but well-established convention uses right mouse button for zooming in all viewers.
−
* a selected scene snapshot has been restored, and is displayed.
+
* Would like BOTH intuitive one-handed mouse-only interaction to be possible AND hot-key assisted shortcuts to be available.
−
[[image: SceneSnapshot1.png]]
+
* We need to combine the concepts of '''active''' (volume or model, etc.), '''selected''' (volume or model...) and '''picked''' (volume or model...)
 +
* We need to design presentation treatments for all groups of selectable entities within Slicer, and a consistent presentation treatment for all selected entities within each group.
  
−
= Working problem: Application-wide support for ROI definition =
+
<br>
  
−
==GOALS:==
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:MouseModes:OtherSoftware | Link to Other software conventions...]] ==
−
* determine relationships between label maps, implicit regions (spheres, circles, ellipses), and vector-format region definitions.
 
−
* determine what kinds of ROIs we will allow users to create/edit at application level
 
−
* determine how to expose ROI functionality application-wide (without "wormholing" to an ROI module)
 
−
* provide tools for defining, editing ROIs
 
−
* provide tools for converting ROIs into label maps (?)
 
−
* provide good mouse+hotkey design
 
−
* generalize implementation to eventually accommodate DICOM-format ROIs
 
−
* determine relationship between fiducial lists and ROIs (from implementation pov).
 
  
−
== Draft design: ==
 
  
−
Sketch of the draft interface for the "ROI toolbox" is below:
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:MouseModes:SelectionAndManipulation | Link to Notes on Selection and Direct Manipulation ]] ==
  
−
[[Image:ROIsketch.png ]]
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:MouseModes:WhatToPick | Link to Developer & user suggestions for what we need to pick]]==
  
−
Collecting feedback on the [[ Slicer3:EditorUsabilitySessions#Editor_design_sketch_3_.28ROI_toolbox.29: | complete Interface & interaction design]] drafted at June NA-MIC Project Week meeting / MIT:
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:MouseModes:Draft1 | Link to User suggestions and Early draft ]] ==
  
−
= Working problem: Consistent checkbuttons and radiobuttons across platforms (Issue Resolved) =
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:MouseModes:SelectedVersusActive | Link to Notes on State=Selected vs. State=Active in MRML ]] ==
  
−
== GOALS ==
 
−
Currently, radiobutton and checkbutton indicators display their state differently on different platforms Slicer supports. For instance, visually similar indicators on linux and windows actually represent different states. This can be confusing for people who work on both platforms. So instead of using the default Tk bitmaps for the indicators, we are proposing to use our own image data which will display the same on all platforms.
 
  
−
* develop a custom slicer widget as an extension of vtkKWCheckButton
 
−
* disambiguate current "deslected" radiobutton icon state -- it can be read as "disabled"
 
−
* override method for turning the old indicator visible/invisible (always keep it off)
 
−
* develop visually parseable convention for icons to represent:
 
−
** selected
 
−
** deselected
 
−
** disabled
 
−
* use methods SetImageToIcon and SetSelectImageToIcon to display selected/deselected icons, selected/deselected icons+indicators
 
−
* provide blank icons with and without indicators for people to download.
 
  
−
Various experiments below for quickly readable icon state: either "selected" "deselected" or "disabled". Varying color, contrast, texture, etc. to find a design solution that reads out state quickly, at a glance. Drop shadow makes icons pop, but requires more pixels in each icon and we might have to re-do all existing icons to ensure good packing behavior. Also, we might get tired of this effect. Contrast differences add more visual "pop" than color differences. The greyed out dotted lines  provide a good solution for "deselected" state, with good visual contrast to the black outlined "selected" state. Both are clearly distinguished from the "disabled" state. Options P&Q are preferred below.
 
  
−
[[Image:RadioIcons.png]]
 
  
−
How do various icon configurations appear with and without icons, text, and indicators? The preferred convention would be to use either '''indicators + text or icons alone''' -- rather than indicators + icons together, or indicators, icons + text together. Sometimes this extra information may be necessary, so the last two embodiments are not ruled out.
+
<br>
  
−
[[Image:RadioCheckButtons.png]]
+
= Working problem: CTSC: Facilitating Tumor Analysis Workflow in Slicer =
  
−
Best without indicator, but ok with too.
+
'''Contributors:''' Ron Kikinis, Jeff Yapp, Randy Gollub, Wendy Plesniak
  
−
== Applying new design to Mouse Mode Toolbar ==
+
'''Goals:''' Perform the following analyses in Slicer and create presentation & tutorial materials
  
−
Easier to comprehend at a glance, and no ambiguity between "disabled" and "deselected"
+
* '''A. Single Volumetric Dataset''' Basic Volumetric Measurements for Tumor Assessement
 +
** Linear
 +
** Volumetric
 +
* '''B. Dynamic Volumetric Data''' Visualize & Analyze Perfusion Data
 +
** Define ROI
 +
** Interactive Plot of Contrast Dilution as Function of Time
 +
** Measure Peak (first priority) & Transit (second priority) times in Blood Pool & Tumor
 +
** Save timepoints
 +
*** Intensity(t) for ROI1
 +
*** Intensity(t) for ROI2
 +
* '''C. PET Dataset''' Basic Standardized Uptake Value (SUV) Analysis
 +
** Segment Tumor by Hand (ROI or VOI, circle or sphere will work)
 +
** Normalize by SUV (use maximum value)
 +
** Extract Parameters:
 +
*** For single tumor: SUVmax_Baseline, SUVmax_Timepoint, %change
 +
*** For multi tumor: SUM(SUVmax_Baseline) - SUM(SUVmax_Timepoint), %change
 +
* '''D. Visualization Requirements''' Displaying Static, Dynamic and PET data
 +
* '''E. Presentation Materials''' Powerpoint Slides for CTSA IRAT
 +
** '''Deadline: September (for October meeting)'''
 +
*** Short slideset showing Slicer overview & BC tumor analysis
 +
** '''Deadline: November (for RSNA in December)'''
 +
*** Full slidesets including Basic Training and Specific hands-on BC tumor analysis
  
−
[[Image:MouseModeToolbar.png ]]
+
[[media:RSNASlidesUnderDevelopment.ppt | Tutorial slides currently under development ]]
  
−
= Working problem: Navigating with fiducials (Issue resolved: implemented in Editor module and Edit Box)=
 
  
−
==GOALS:==
+
=== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:BCAnalysis:Volumetric| Link to info for A. Volumetric Analysis]] ===
−
* use fiducials as markers for features of interest
 
−
* allow navigation to fiducial points within a slice window and
 
−
* allow navigation to same fiducial point in all slice windows (a feature we're calling 'jumpslice').
 
−
* want to read-out which fiducial is currently being viewed while navigating
 
−
* want to expose these features in top level in each slice controller widget
 
−
* want also to keep the slice scrollbar from getting too small to use.
 
−
* want to indicate which slice scrollbar direction is R,L, S,I, A,P, depending on orientation
 
  
  
−
==Proposed modification of vtkSliceControllerWidget:==
+
=== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:BCAnalysis:Dynamic| Link to info for B. Dynamic analysis]] ===
  
−
The widget below shows a read-out/entry for current fiducial; buttons for navigate-to-next-fiducial and navigate-to-previous-fiducial. Slice scrollbar is longer, and contains labels at each endpoint.
 
−
 
−
[[image:FiducialNavigationSliceWindow.png | icons ]]
 
  
−
* user can navigate forward, backward using fiducial jump buttons
+
=== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:BCAnalysis:PET| Link to info for C. PET Analysis]] ===
−
* user can enter an ordinal number (or name?) to jump to a fiducial (above, third fiducial of 12 total in the list)
 
−
* if viewers are unlinked, only the active slice viewer is updated
 
−
* if viewers are linked, all viewers are updated to show the slice containing the same fiducial.
 
−
* if a viewer's slice scrollbar is adjusted, its fiducial read-out is reset to ""
 
−
* any time a new fiducial is placed in a viewer, the fiducial read-out is updated to that (current) fiducial.
 
  
−
==Questions about placing and moving new fiducials:==
+
= Working problem: Customizable layouts for Slicer3 =
−
* should placing a new fiducial in the viewer cause a jumpslice event if all viewers are linked?
 
−
Seems we may not always want to trigger this by default. A reasonable solution for this is to unlink viewers when placing fiducials if you don't want the jumpslice behavior...
 
  
−
* should moving a newly placed fiducial in the viewer cause a jumpslice event if all viewers are linked? Again, seems we may not want this default behavior. And again, it seems easy enough to unlink viewers if you don't want the jumpslice behavior.
+
Instead of a finite set of layout options, we would like to provide users the ability to select among a richer set of layouts, some created to be appropriate for analyzing certain kinds of studies, and the ability to customize their application layout as well. We have begun working on ideas at the NA-MIC January 2009 AHM.
  
−
* can we undo the creation and placement of a fiducal easily, so that while exploring the data, user can click, look, delete, and click again -- as an alternative to grabbing and moving an existing fiducial?
+
Contributors: Jim Miller, Steve Pieper, Ron Kikinis, Julien Finet, Jean Christophe Fillion-Robin, Wendy Plesniak
  
−
==Questions about navigation:==
+
=== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:SlicerFlexibleLayout:UXP| Link to first draft of user experience design]] ===
−
* first time navigating, we start on fiducial#1. maybe we go forward to
 
−
fiducial 10 of 20. Next time navigating, do we continue on to 11, or restart at 1?
 
−
* Will there ever be too many fiducials to navigate?
 
−
* should the fiducial navigation entry (read-out) also take a fiducial NAME instead of number?
 
−
* Do we want to include other navigation options?
 
−
* With numerous fiducials, it may be hard to tell which fiducial is the corresponding one, when navigating them. Can we color the jump-fiducial temporarily to help integrate all displays?
 
  
−
= Working problem: Different "Picking" Mouse Modes in Slicer3 =
+
=== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:SlicerFlexibleLayout:UXP2| Link to second draft of user experience design]] ===
  
−
At the June 2007 project week at MIT, we determined that we'll need to be able to pick several distinct things in Slicer, and the single "pick" mouse mode currently available was not going to provide the unambiguous picking functionality we need. To address this problem, we'll probably need to design a set of "pick" mouse modes. Please add your picking needs to the list developing below. Thanks!
+
=== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:SlicerFlexibleLayout:UXP3| Link to tabbed-slicer layout]] ===
  
−
== What do we need to pick? ==
+
=== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:SlicerFlexibleLayout:Architecture| Link to first ideas about layout architecture ]] ===
  
−
* single/multiple vertices on models (for plotting, we need to be able to get the closest vertex ID)
+
= Working problem: Slicer3 workflow for Tractography: usability issues, design & planning =
−
* single/multiple cells on models ( need to calcuate the vertex usually)
 
−
* single/multiple points on surfaces (for placing fiducials, get RAS)
 
−
* single/multiple models
 
−
* model groups
 
−
* single/multiple "nodes" in general
 
−
* "node" groups
 
−
* single/multiple volumes
 
−
* single/multiple fiducials
 
−
* single/multiple ROIs
 
−
* tensors
 
−
* voxels in volumes
 
−
* slices in volumes
 
−
* subvolumes
 
−
* general polygons?
 
−
* annotations?
 
−
* two points to make a line?
 
−
* for tractography, we need to pick:
 
−
** cell in a model (to get one fiber trajectory)
 
−
** entire models (to pick a bundle)
 
−
** ideally, a model group (to pick an entire structure like the corpus callosum that includes several bundles)
 
−
* It would also be very cool to have a plane widget for 3D intersection tract selection.
 
−
* for tractography and other things with an intermediate processing step before visualization (generation of glyphs or whatever)
 
−
** it may be useful for picking to indicate what was picked, if several models are displayed per node
 
−
** like: model #2 was picked, then my code can know that is a glyph model, rather than a line model, if that is ever needed.
 
−
** this depends on the final implementation of Alex's new cool display API, whether there is ever >1 model allowed
 
  
−
==General selection pattern==
+
Working with Dr. Jean-Jacques Lemaire, we are understanding the use of Slicer in a complicated tractography analysis, within the context of a particular workflow. This work is identifying usability issues, software bugs, and ideas for improvement. These pages are a touchstone for the project.
  
−
* various lassos would be nice to select multiple of the thing current mode indicates
+
Contributors: Jean-Jacques Lemaire, Nicole Aucoin, Wendy Plesniak, Steve Pieper, Alex Yarmarkovich, Andriy Fedorov, Haiying Liu
−
* single click to select one of the thing the current mode indicates
 
−
* control-click to select multiple of the thing the current mode indicates
 
−
* a shift-click to select ALL of the thing the current mode indicates
 
  
−
= Working problem: Cine display for viewing and analyzing multi-volume data in Slicer3 =
+
== General issues, comments and feature requests==
  
−
Design for a basic cine controller:
+
=== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:SlicerUsabilityInTractography:Organization| Link to Organization of Presentation Layer]] ===
  
−
[[Image:CineBasicController.png ]]
+
=== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:SlicerUsabilityInTractography:Semantics| Link to Naming conventions]] ===
  
−
Design studies for a cine display that allows viewing either corresponding slices in multiple volumes over time, or consecutive slices in a single volume over time. Version 4 is the most recent iteration, containing elements for specifiying the following animation parameters:
+
== Workflow overview and details on sub-steps ==
  
−
* volumes (select a volume collection to animate)
+
Below is a rough outline of the tractography analysis workflow currently in use (pending a proofreading check by J-J). The workflow can be broken down into general stages:
−
* volume (select a single volume to animate)
 
−
* display (select Green, Yellow or Red slice viewer)
 
−
* step (set slice increment within a volume, or volume increment within a collection)
 
−
* speed (set animation speed from slow to fast)
 
−
* range ( choose range of slices within a volume, or range of volumes within a group. In the former case, we assume the animation displays consecutive slices in the specified range, incrementing according to the step size. In this latter case, we assume you select the slice of interest via the usual slice viewer gui, and animation displays the corresponding slice in each volume within the collection, incrementing according to the step size. )
 
−
* current ( show or choose current slice or current volume ).
 
  
 +
* setting up: including loading and saving and adjusting data display properties
  
−
And controller icons:
+
* registration of target dataset to a reference dataset
−
* go to first frame
 
−
* play in reverse
 
−
* pause
 
−
* stop
 
−
* record a movie
 
−
* play forward
 
−
* go to last frame
 
−
* loop
 
−
* ping-pong
 
  
 +
* exploratory and analytic tractography
  
 +
[[Image:DTIworkflowOverview.png]]
  
−
[[Image:CineDisplayDesigns1-4.png ]]
+
(if the figure should be corrected, please let me know how to fix -- maybe deformation should be part of the registration step).Data loading happens up front, but data and the scene may be saved frequently throught the workflow. Highlighted are some areas where serious usability issues have been flagged.
  
−
Slicer 2.6's Interval Browser controller for viewing and organizing timeseries data:
+
A plan to address these issues will be discussed on Dec 29/30 2008 at the next Slicer Developers meeting. Notes from that meeting and a proposed development plan will be posted here.
  
−
[[Image:ibrowser.png ]]
+
The sections below contain collected comments and suggestions for all workflow stages: '''Setting up''', '''Registration''', and '''Tractography'''. Markers on the figures indicate places where problems are reported.
  
−
= Working problem: Mouse Modes in Slicer3 =
 
  
−
Currently, a left-mouse-button click in Slicer's 3D or Slice Viewers can mean different things at different times; this can be confusing to users, and can lead to mistakes. We are currently deciding a good paradigm for defining and 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 make all actions possible with just the left mouse button (some mice have only one button), and to disambiguate what a left-mouse-button click in the 3D and Slice viewers means.  
+
[[Image:DTIworkflowSetup.png]]
  
−
'''Goals:''' We'd like the interaction paradigm to have the following features:
+
=== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:SlicerUsabilityInTractography:Loading | Link to Comments on Data/Scene Loading]] ===
  
−
* Consistent in all slice windows and 3D viewer
+
=== [[Image:Sketch.png]]  [[Slicer3:UIDesign:WorkingProblems:SlicerUsabilityInTractography:Saving | Link to Comments on Saving]] ===
−
* Intuitive and easy for beginners
 
−
* Fast for intermediate and expert users
 
−
* Rely on only one mouse button (but accommodate multiple mouse buttons)
 
−
* Support direct manipulation as much as possible
 
−
* Provide clear visual feedback about current mouse mode
 
−
* Support both '''view transformation''' (rotate, pan, zoom) and '''mouse actions''' (pick, manipulate, place, etc...).
 
  
−
---
+
=== [[Image:Sketch.png]]  [[Slicer3:UIDesign:WorkingProblems:SlicerUsabilityInTractography:PreRegistration| Link to Comments on Quality check & Deformation (Pre-registration)]] ===
  
−
==Current issues we want to address in existing Slicer3 implementation:==
+
=== [[Image:Sketch.png]]  [[Slicer3:UIDesign:WorkingProblems:SlicerUsabilityInTractography:Registration| Link to Comments on Registration]] ===
  
−
* Mouse motion should default to "transform view" mode
+
[[Image:DTIworkflowRegistration.png]]
−
* Interaction relies on three mouse buttons (for rotate, pan, zoom, etc.) which aren't always present on all computers
 
−
* Persistent non-transform mouse modes (like pick or place) are easy to forget, and attempts to transform the view can lead to annoying errors.
 
−
* Would like to free up right mouse button to invoke the display of a 'context menu', but well-established convention uses right mouse button for zooming in all viewers.
 
−
* Would like BOTH intuitive one-handed mouse-only interaction to be possible AND hot-key assisted shortcuts to be available.
 
−
* We need to combine the concepts of '''active''' (volume or model, etc.), '''selected''' (volume or model...) and '''picked''' (volume or model...)
 
−
* We need to design a consistent way to render when something (model, volume, fiducial, vertex, label) is selected.
 
  
−
===Proposed mouse mode design===
+
=== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:SlicerUsabilityInTractography:Tractography| Link to Comments on Tractography]] ===
  
−
[[image:MouseModes.png]]
+
[[Image:DTIworkflowTractography.png]]
  
−
===Current bindings (not entirely consistent across 3D Viewer and Slice Viewers):===
+
<br>
  
−
* 3D viewer: left mouse button >> rotate
+
= Working problem: Welcome Module for Slicer3.4 release =
−
* 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
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:WelcomeModule:Draft | Link to Mockup]]==
−
* 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
 
  
−
---
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:WelcomeModule:VersionA | Link to First Draft Implementation]]==
  
−
===How Actions and View Transformations are done in Maya===
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:WelcomeModule:VersionB | Link to Second Draft Implementation]]==
 +
<br>
  
−
Maya is a very heavily used professional 3D animation package. Basic mouse bindings are:
+
= Working problem: Design revision on Fiducials GUI for Slicer3.4 release =
  
−
* Rotate: alt-left mouse button
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:FiducialsGUIDesignRevisions:Draft | Link to Draft1]]==
−
* 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 ).
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:FiducialsGUIDesignRevisions:Draft2 | Link to Draft2]]==
  
 +
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:FiducialsGUIDesignRevisions:Draft3 | Link to Draft3]]==
  
 +
= Working problem: Module Management Wizard Interface & Interaction Design Storyboard =
  
−
===How Actions and View Transformations are done in Blender===
+
This wizard allows users to uninstall modules from their current build or to download and install new modules. Currently working on a usable design. Storyboard roughed out during IGT project week Dec8-12 '08, (Terry Lorber, Steve Pieper, Wendy Plesniak)
  
−
[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:
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:ModuleManagementWizard:Draft1|Link to Draft 1]]==
  
−
* 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
 
  
 +
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:ModuleManagementWizard:Draft1|Link to Draft 2]] (not yet ready)==
  
−
===Note: Mac bindings===
+
<br>
  
−
On a one-button mac, the following translations work by default in Mac OSX:
+
= Working problem: Consolidating Load functionality =
−
* single button -> left mouse button
 
−
* alt (option) + button -> middle mouse button
 
−
* apple (command) + button -> right mouse button
 
  
−
---
+
Functionality to load data is spread all over the application... we want to begin consolidating it in some simple fashion and to gradually implement a more integrated and appropriate solution.
  
−
==Proposed approach -- please comment!:==
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:ConsolidatedLoad:Draft1|Link to Draft 1]]==
  
−
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). Please contribute any feedback you have in the bottom section. Thanks for your help!
+
<br>
  
 +
=Working problem: Save Data Widget=
  
−
'''Details of the proposed interaction design:'''
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:SaveDataWidget:Draft1|Link to Draft 1 and notes]]==
  
−
* Mouse mode icons in "selected" (top) and "deselected" (bottom) states: [[image:MouseModeIcons.png | icons ]]
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:SaveDataWidget:Draft2|Link to Draft 2 and notes]]==
−
* Icons + descriptions:
 
−
** '''pick+manipulate''' [[image:ToolbarMouseManipulate.png]] pick and/or manipulate an object as appropriate, like selecting and moving a fiducial point, or grabbing and manipulating a 3D vtkWidget, or for sampling voxel values, etc. When multiple objects (or objects of different types) are selected, this behavior may or may not apply.
 
−
** '''region-select''' [[image:ToolbarMouseSelectRegion.png]] rubber-band box to select multiple objects,  selected state is persistent until deselected;
 
−
** '''lasso-a-region''' [[image:ToolbarMouseLasso.png]] manually drawn outline to select multiple objects, persistent until deselected;
 
−
** '''deselect all''' [[image:ToolbarMouseDeselectAll.png]] not really a *mode* per se. The Deselect-All icon becomes highlighted when anything has been "selected" with the region or lasso (persistent selectors), and it becomes lowlighted when nothing is "selected". Clicking the button when highlighted deselects all, and then lowlights the DeselectAll icon;
 
−
** '''put''' [[image:ToolbarMousePlace.png]] for new placing fiducials, seed points, etc.;
 
−
** '''view-tumble''' [[image:ToolbarMouseRotate.png]] rotates camera in the view plane;
 
−
** '''view-track''' [[image:ToolbarMousePan.png]] translates camera in the view plane;
 
−
** '''view-dolly''' [[image:ToolbarMouseZoom.png]] moves camera closer to or farther from the scene.
 
−
* Selected state and accompanying special cursor indicates current mouse mode.
 
−
* Each mouse-mode causes a special cursor to be displayed, as feedback to user.
 
−
* Hot-keys to select a mouse mode are contiguous on the keyboard (action): 1 2 3 4 5 (view transform:) 6 7 8.
 
−
* View transform modes are also selected with key-modified mouse-clicks (see table below). But once a mode is selected, only left-mouse-button is required to transform the view in that mode.
 
−
* All mouse modes apply consistently in 3D Viewer and Slice Viewers, except the view-tumble mode, which is not defined in the Slice Viewers. When Slicer is in view-tumble mode, either:
 
−
** the view-tumble cursor would be displayed in the Slice Viewers but nothing would happen when the mouse is clicked *or*
 
−
** the pick-and-manipulate cursor will be displayed when the mouse moves over the Slice Viewers even though the tumble-view icon is selected and the tumble-view cursor is displayed when the mouse moves over the 3D Viewer, *or*
 
−
** a new cursor that indicates "mode-doesn't-apply-here" will be displayed when the mouse is over a Slice Viewer.
 
−
* 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 mouse buttons.
 
−
* Works with one (left) mouse button only, but other mouse buttons are mapped (for tumble, track and zoom) for people who have and want to use them.
 
−
* Context menu can be displayed with space bar, or with quick click-and-release of right mouse button.
 
  
 +
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:SaveDataWidget:Draft3|Link to Draft 3 and notes]]==
  
−
---
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:SaveDataWidget:Draft4|Link to Draft 4 and notes]]==
  
−
Shown in the figure below:  
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:SaveDataWidget:Draft5|Link to Draft 5 and notes]]==
  
−
* the icons for mouse-modes (their appearance when highlighted and lowlighted),
+
<br>
−
* suggested hot-keys and mouse-selection actions, and
 
−
* cursor appearance when any one mode is chosen.
 
−
* an example workflow for novice and expert users to perform the same simple task.
 
  
−
[[image:mouseModeMockup.png | 3D Slicer Mouse mode interaction design ]]
+
=Working problem: Slicer & XNAT Informatics =
  
−
---
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:SlicerInformatics:Draft1|Link to Fetch Medical Informatics (FetchMI) implementation 1 notes]]==
  
−
==Simple workflow storyboard ==
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:SlicerInformatics:Profiling_and_Refining|Link to Fetch Medical Informatics (FetchMI) and RemoteIO profiling/refining notes]]==
−
Below is how a user would use the mouse-mode interface to
 
−
tumble, track and dolly the camera to get the 3D View to look the way they like, and then put down three fiducial points and adjust their position. A novice user's workflow is compared with an expert user's workflow.
 
  
−
'''1 (novice) tumble:''' click the view tumble mouse-mode icon [[image:ToolbarMouseRotate.png]]
+
== [[Image:Sketch.png]] [http://www.na-mic.org/Wiki/index.php/CTSC_Ellen_Grant,_CHB  Link to CTSC Use-case: Grant & Pienaar at Children's Hospital Boston] ==
−
* --> mouse-tumble icon highlights and all others deselect, cursor changes to indicate mouse-tumble mode.
 
−
* then left-Click and drag in the 3D Viewer to rotate the view.
 
−
* if the mouse moves over a Slice Viewer, the cursor changes to indicate that the mode doesn't apply.
 
−
'''1 (expert) tumble:''' ctrl+left-Click and drag in the 3D Viewer,
 
−
* --> mouse-tumble icon [[image:ToolbarMouseRotate.png]] highlights and all others deselect; cursor changes to indicate mouse-tumble mode; view tumbles.
 
−
* if the mouse moves over a Slice Viewer, the cursor changes to indicate that the mode doesn't apply.
 
  
−
[[image:SB1.png]]
+
== [[Image:Sketch.png]] [http://www.na-mic.org/Wiki/index.php/CTSC_Brad_Dickerson,_MGH  Link to CTSC Use-case: Brad Dickerson at Mass General NMR] ==
  
−
---
+
== [[Image:Sketch.png]] [http://www.na-mic.org/Wiki/index.php/CTSC_Simon_Warfield,_CHB  Link to CTSC Use-case: Warfield & Weisen at Children's] ==
  
 +
== [[Image:Sketch.png]] [http://www.na-mic.org/Wiki/index.php/CTSC_IGT,_BWH  Link to CTSC Use-case: Managing Image Guided Therapy (NCIGT) Restrospective Data at Brigham & Women's Hospital] ==
  
−
'''2 (novice) dolly:''' click the view dolly mouse-mode icon [[image:ToolbarMouseZoom.png]]  
+
== [[Image:Sketch.png]] [http://www.na-mic.org/Wiki/index.php/CTSC_Slicer_XNE Link to FetchMI XNE extension planning (work with Curtis Lisle)] ==
−
* --> mouse-dolly icon hightlights and all others deselect, cursor changes to indicate mouse-dolly mode.
 
−
* then left-Click and drag in the 3D Viewer to dolly the camera in and out.
 
−
'''2 (expert) dolly:''' shift+left-Click and drag in the 3D Viewer
 
−
* --> mouse-dolly icon [[image:ToolbarMouseZoom.png]] highlights and all others deselect; cursor changes to indicate mouse-dolly mode; view zooms.
 
  
−
[[image:SB2.png]]
+
<br>
  
−
---
+
= Working problem: Scene Snapshot Interface =
  
−
'''3 (novice) track:''' click the view track mouse-mode icon [[image:ToolbarMousePan.png]]  
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:SceneSnapshots | Link to Scene Snapshot UI Design]]==
−
* --> mouse-track icon highlights and all others deselect, cursor changes to indicate mouse-track mode.
 
−
* then left-Click and drag in the 3D Viewer to translate the view left-right, and up-down,
 
−
'''3 (expert) track:''' alt+left-Click and drag in the 3D Viewer,
 
−
* --> mouse-track icon [[image:ToolbarMousePan.png]] highlights and all others deselect; cursor changes to indicate mouse-track mode; view tracks.
 
  
−
[[image:SB3.png]]
+
<br>
  
−
---
+
= Working problem: Application-wide support for ROI definition =
  
−
'''4 (novice) place fiducials:''' click the mouse-place icon [[image:ToolbarMousePlace.png]]
+
==GOALS:==
−
* --> mouse-place icon highlights and all others deselect, cursor changes to indicate mouse-place mode.
+
* determine relationships between label maps, implicit regions (spheres, circles, ellipses), and vector-format region definitions.
−
* then click the Slice Viewer's Fit-To-Window icon [[image:SlicesFitToWindow.png]]
+
* determine what kinds of ROIs we will allow users to create/edit at application level
−
*--> the Slice in that viewer (or in all viewers if their controls are locked) resize to fit the Viewer.
+
* determine how to expose ROI functionality application-wide (without "wormholing" to an ROI module)
−
* then left-Click three times at x,y locations in a Slice Viewer to put down three fiducial points.
+
* provide tools for defining, editing ROIs
−
'''4 (expert) place fiducials:''' press 5-key to switch into mouse-put (or place) mode
+
* provide tools for converting ROIs into label maps (?)
−
* --> mouse put icon [[image:ToolbarMousePlace.png]] highlights, and all others deselect; cursor changes to indicate mouse-place mode.
+
* provide good mouse+hotkey design
−
* then click the Slice Viewer's Fit-To-Window icon [[image:SlicesFitToWindow.png]]
+
* generalize implementation to eventually accommodate DICOM-format ROIs
−
*--> the Slice in that viewer (or in all viewers if their controls are locked) resize to fit the Viewer.
+
* determine relationship between fiducial lists and ROIs (from implementation pov).
−
* then left-Click on three x,y locations in a Slice Viewer to put down three new fiducial points.
 
  
−
[[image:SB4.png]]
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:EditorToolbox | Link to Draft ROI design]] ==
  
−
---
+
== [[Image:Sketch.png]] [[ Slicer3:EditorUsabilitySessions#Editor_design_sketch_3_.28ROI_toolbox.29: | Link to Interface & interaction design]] drafted at June NA-MIC Project Week ==
  
−
'''5 (novice) zoom the slice view:''' click the mouse-dolly icon [[image:ToolbarMouseZoom.png]]  
+
== [[Image:Sketch.png]] [[Slicer3:EditorUsabilitySessions | Link to Earlier notes from Editor module usability sessions]] ==
−
* --> mouse-dolly icon highlights and all others deselect, cursor changes to indicate mouse-dolly mode.
 
−
* then left-Click and drag in a Slice Viewer to zoom in.
 
−
'''5 (expert) zoom the slice view:''' shift+left-Click and drag in the Slice Viewer
 
−
* --> mouse-dolly icon [[image:ToolbarMouseZoom.png]] highlights and all others deselect; cursor changes to indicate mouse-dolly mode; view zooms.
 
  
−
[[image:SB5.png]]
+
<br>
  
−
---
+
= Working problem: Consistent checkbuttons and radiobuttons across platforms (Issue Resolved) =
  
−
'''6 (novice) select and move fiducials:''' click the mouse-pick-and-manipulate icon [[image:ToolbarMouseManipulate.png]]
+
== GOALS ==
−
* --> mouse-pick-and-manipulate icon highlights, all others deselect, cursor changes to indicate mouse-pick-and-manipulate mode.
+
Currently, radiobutton and checkbutton indicators display their state differently on different platforms Slicer supports. For instance, visually similar indicators on linux and windows actually represent different states. This can be confusing for people who work on both platforms. So instead of using the default Tk bitmaps for the indicators, we are proposing to use our own image data which will display the same on all platforms.
−
* move mouse to location of fiducial in a Slice Viewer and see the fiducial highlight; left-Click and drag in a Slice Viewer to reposition the fiducial point.
 
−
* move the mouse away from the fiducial and see it lowlight.
 
−
'''6 (expert) select and move fiducials:''' press 1-key to switch into mouse-pick-and-manipulate mode.
 
−
* --> mouse pick-and-manipulate icon [[image:ToolbarMouseManipulate.png]] highlights, and all others deselect; cursor changes to indicate mouse-pick-and-manipulate mode,
 
−
* then mouse-over a fiducial point, see it highlight, left-Click and drag to reposition it. Release mouse button and move away, and see the fiducial lowlight.
 
  
−
[[image:SB6.png]]
+
* develop a custom slicer widget as an extension of vtkKWCheckButton
 +
* disambiguate current "deslected" radiobutton icon state -- it can be read as "disabled"
 +
* override method for turning the old indicator visible/invisible (always keep it off)
 +
* develop visually parseable convention for icons to represent:
 +
** selected
 +
** deselected
 +
** disabled
 +
* use methods SetImageToIcon and SetSelectImageToIcon to display selected/deselected icons, selected/deselected icons+indicators
 +
* provide blank icons with and without indicators for people to download.
  
−
---
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:RadioCheckButtons | Link to Radio and check button tests]] ==
  
−
'''7 (novice) pan the slice view:''' click the mouse-track icon [[image:ToolbarMousePan.png]]
+
<br>
−
* --> mouse-pan icon highlights and all others deselect, cursor changes to indicate mouse-pan mode.
 
−
* left-Click and drag in a Slice View to pan.
 
−
'''7 (expert) pan the slice view:''' alt+left-Click to switch into mouse-track mode.
 
−
* --> mouse-track icon [[image:ToolbarMousePan.png]] highlights and all others deselect; cursor changes to indicate mouse-track mode; left-Click and drag in the Slice Viewer to pan the view.
 
  
−
[[image:SB7.png]]
+
= Working problem: Navigating with fiducials (Issue resolved: implemented in Editor module and Edit Box)=
  
−
---
+
==GOALS:==
 +
* use fiducials as markers for features of interest
 +
* allow navigation to fiducial points within a slice window and
 +
* allow navigation to same fiducial point in all slice windows (a feature we're calling 'jumpslice').
 +
* want to read-out which fiducial is currently being viewed while navigating
 +
* want to expose these features in top level in each slice controller widget
 +
* want also to keep the slice scrollbar from getting too small to use.
 +
* want to indicate which slice scrollbar direction is R,L, S,I, A,P, depending on orientation
  
−
'''8 (novice) select multiple fiducials:''' click the mouse select-region icon [[image:ToolbarMouseSelectRegion.png]]
 
−
* --> mouse-select-region icon highlights and all others deselect, cursor changes to indicate mouse-select-region mode.
 
−
* sweep out a rubber band to enclose three fiducials and see them highlight.
 
−
* when fiducials become selected, the "Deselect-all" icon [[image:ToolbarMouseDeselectAll.png]] highlights.
 
−
'''8 (expert) select multiple fiducials:''' press 2-key to switch into region-select mode.
 
−
* --> mouse select-region icon [[image:ToolbarMouseSelectRegion.png]] highlights, all other icons deselect; cursor changes to indicate mouse-region-select mode.
 
−
* sweep out a rubber-band box to enclose three fiducial points, see them highlight.
 
−
* when fiducials become selected, the "Deselect-all" icon [[image:ToolbarMouseDeselectAll.png]] highlights.
 
  
−
[[image:SB8.png]]
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:NavigatingWithFiducials | Link to Fiducial navigation UI design sketches]] ==
  
−
---
+
<br>
  
−
'''9 (novice) move multiple fiducials:''' click the mouse-pick-and-manipulate icon [[image:ToolbarMouseManipulate.png]]
+
= Working problem: Cine display for viewing and analyzing multi-volume data in Slicer3 =
−
* --> mouse-pick-and-manipulate icon highlights, all others deselect, cursor changes to indicate mouse-pick-and-manipulate mode.
 
−
* left-Click and drag in a Slice Viewer to reposition the fiducial points.
 
−
'''9 (expert) move multiple fiducials:''' press 1-key to switch into mouse-pick-and-manipulate mode.
 
−
* --> mouse pick-and-manipulate icon [[image:ToolbarMouseManipulate.png]] highlights, and all others deselect; cursor changes to indicate mouse-pick-and-manipulate mode,
 
−
* left-Click and drag in the Slice Viewer to reposition multiple fiducials.
 
  
−
[[image:SB9.png]]
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:CineDisplay | Link to Drafts of UI for Cine Display ]]==
  
−
---
+
<br>
  
−
'''10 (novice) de-select fiducials:''' click the mouse-deselect-all icon [[image:ToolbarMouseDeselectAll.png]]
+
= Working problem: Linked controls in Slicer3 =
−
* --> the last mouse-mode (mouse-pick-and-manipulate) remains highlighted, and the fiducials are deselected.
 
−
* The "Deselect-All" icon lowlights.
 
−
'''10 (expert) de-select fiducials:''' press 4-key again to deselect the fiducial points
 
−
* -->  the last mouse-mode (mouse-pick-and-manipulate) remains highlighted, the fiducial is no longer highlighted.
 
−
* The "Deselect-All" icon lowlights.
 
  
−
[[image:SB10.png]]
+
== Goals ==
  
 +
Slice viewing can operate in the context of a single slice reformation or in a ''linked'' state where multiple slice viewers respond to interactions with any slice viewer. When Slice Viewers are linked, a number of viewing geometry and view representation parameters are linked across viewers.
  
−
---
+
== [[Image:Sketch.png]] [[Slicer3:UIDesign:WorkingProblems:LinkedControls | Link to Drafts of UI for Linked Controls ]]==
  
−
==Please contribute comments here -- Thank you!: ==
+
<br>
  
−
'''PNL: '''
+
= Background: Slicer 3.2 usability & ideas for Slicer 3.3=
−
* Tumble view mouse mode: We would prefer the cursor indicating "mode-doesn't-apply-here" like it can be seen on workflow example 1 in order to avoid confusion.
 
−
* Deselected states of icons: This will not be a problem for anybody who uses slicer more often, but to a novice user the "deselected" state of the mouse mode icons might suggest that these modes are currently unavailable. This might be because in menues usually unavailable options are greyed out. Maybe all icons could be coloured all the time and the active mouse mode icon could be somehow indented or framed (like on the Maya screenshot)?
 
−
* The icons, shortcuts and different cursors look very good and it's great to have consistency within different views and modules. Also, the shortcuts are really easy to memorize!
 
−
* First we thought it would be good to have another mouse mode in which a mouse click on one voxel adapts all the views so that this voxels can be seen in all views (currently in slicer 2 this is done with holding shift and left clicking). But then we came to the conclusion that it would be even better if this functionality would be an independent hot key(shift+ click for example) that can be used in every mouse mode at any time, since we use this functionality a lot. Do you guys plan to have such a shortcut implemented?
 
−
* Does the general undo also apply to accidential mouse mode selections? For example, say you've selected 10 different fiducials and accidentially hit hot key "4" that deselected everything. It would be great if this could be undone as well.
 
−
* Minor thing that was not clear to me: if you want to change to say the "mouse dolly camera" mode using ctrl + right mouse key: Do you have to hold the ctrl key down all the time when zooming? Or do you only right-click once while holding crtl and then the mode is changed so that you can zoom in and out with only left mouse button?
 
−
* Do you have already plans about how this mouse interaction schema will work in the Editor module? Will it be the same, just with more hot keys for the drawing tools for example?
 
−
* Actually about the Editor Module: When drawing in the slices and the user mouses over to the 3D view, could the mouse then automatically be in tumble view mode in the 3D view?
 
−
* (not directly realted) It would be great to be able to switch between one's favourite modules using hot keys, is there anything planned like that?
 
−
* In case you have a labelmap overlayed on for example a structural volume: would it be possible to bind the mouse scrollbar(if existing) to fading the foreground in and out? Related to that: it would be good to have smaller increments available for the fading (compared to the fade bar currently available in slicer2) for more sensitive differences.
 
−
---
 
  
−
== Slicer mockup and GUI screenshots from other packages: ==
+
* [[ Slicer3:ApplicationUsabilitySession | Application GUI sessions ]]
−
Below are snippets of SketchUp's interface, and Maya's Interface. 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.
+
* [[ Slicer3:EditorUsabilitySessions | Editor Module sessions ]]
 +
* [[ Slicer3:FiducialsUsabilitySessions | Fiducials functionality ]]
  
−
[[image:sketchupInterface.png | SketchUp Example ]]
+
= Some Embodiment History=
  
−
[[image:mayaInterface.png | Maya Example ]]
+
* [[Media:GUIMap.png| Earlier embodiment of main application GUI]]
 +
* [[Media:SmallSliceGUI.png| Earlier design for Slice Viewer and Slice Controller Widgets]]
 +
* [[Media:NavZoomWidgetSketch.png|Design sketch for the 3D navigation & Slice magnifier widget]]
 +
* [[Media:SlicerLookFeelDraftSmall.jpg|Early look and feel draft]]
 +
* [[Media:LayoutSketch.gif|First sketch of the GUI layout design]]
 +
* Link to a running [[Slicer3:VisualBlog|visual blog ]] highlighting progress in the Slicer3 embodiment.
  
 +
<br>
  
 
[[Slicer3:Interface_Design|Return to Slicer3 Interface Design and Usability ]]
 
[[Slicer3:Interface_Design|Return to Slicer3 Interface Design and Usability ]]

Latest revision as of 02:26, 27 November 2019

Home < Slicer3:UIDesign

Return to Slicer3 Interface Design and Usability

Go to Slicer4 UI Design page



This page contains a catalog of user interface design and development notes for various aspects of Slicer 3.4, 3.6 (based on KWWidgets) and links to new work on Slicer 4.0 (based on Qt).

Contents

Slicer users

Core user communities:

  • (NAC) Longitudinal and multi-channel dataset analysis
  • (BIRN/NA-MIC) Individual and group analysis
  • (IGT/AMIGO) Real-time control and tracking in the operating theater
  • (IGT) Neurosurgical planning and guidance

Types of users:

  • Algorithm researchers (who work within 3DSlicer's development environment and with associated toolkits)
  • Biomedical engineers (who rely on 3DSlicer's interactive enironment and scripting capabilities)
  • Application scientists (who use 3DSlicer as a desktop application and turnkey system)


User Feedback: Feature, Resource, Application Convention Requests

Please add usability feedback to Slicer3's bug tracker. If you are not familiar with the bug tracker:

  • login or create an account
  • choose Slicer3 as your project (upper right corner)
  • and select Report Issue.
  • make sure to choose the correct category for your report (select "usability" for usability issues).

Early feature requests can also be found here.




Codes to mark contributions

These wiki pages can be hard to parse. Here's an experiment for marking feedback to make it easier to parse; (copy, paste and customize from below).

Opinion.png (wjp) Add a general comment or opinion.

Usability.png Flag a usability problem.

Idea.png Mark an idea.

Sketch.png Mark a link to related info.

Bug.png Report a bug.

Fire.png Report a really bad bug that's blocking work progress, or causing a crash.

MissingOrStaleDoc.png Report missing documentation.

MissingOrStaleDocLink.png Report bad documentation link.

WeakDoc.png Report insufficient documentation.

Slicer 4.0: Working problems in QT Interface Design and Implementation

See this link for ongoing project


Slicer 3.6: Working problems in Interaction and interface design for KWWidgets-based Slicer interface.

Working problem: Consolidated Load in Slicer including a Data Management System

Sketch.png Link to design sketches extending XNAT Desktop to have OsiriX-like UXP & functionality

Sketch.png Link to info for Slicer Consolidated Load Design integrating a local file management system

Sketch.png Link to user specifications and design sketches for a Qt-based Query Widget for XNAT Enterprise

Working problem: Mouse Modes in Slicer3

Since a left-mouse-button click in Slicer's 3D or Slice Viewers can mean different things at different times; this can be confusing to users, and can lead to mistakes. We are currently deciding a good paradigm for defining and 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 make all actions possible with just the left mouse button (some mice have only one button), and to disambiguate what a left-mouse-button click in the 3D and Slice viewers means.

Goals: We'd like the interaction paradigm to have the following features:

  • Consistent in all slice windows and 3D viewer
  • Reflect common software conventions
  • Intuitive and easy for beginners
  • Fast for intermediate and expert users
  • Rely on only one mouse button (but accommodate multiple mouse buttons)
  • Support direct manipulation as much as possible
  • Provide clear visual feedback about current mouse mode
  • Support both view transformation (rotate, pan, zoom) as the primary mode, and a set of mouse actions (pick, manipulate, place, etc..., and window/level adjustments according to convention in medical imaging software packages.
  • Consistent classification of all direct-manipulable entities in slicer into a set of groups, and have consistent behavior for 'selecting' all entities within each group.


Current issues we want to address in existing Slicer3 implementation:

  • Mouse motion should default to "transform view" mode
  • Interaction relies on three mouse buttons (for rotate, pan, zoom, etc.) which aren't always present on all computers
  • It's currently easy to forget about persisting non-transform mouse modes (like pick or place) and assume that the view can be transformed -- leading to annoying errors. We want to avoid these errors
  • Would like to free up right mouse button to invoke the display of a 'context menu', but well-established convention uses right mouse button for zooming in all viewers.
  • Would like BOTH intuitive one-handed mouse-only interaction to be possible AND hot-key assisted shortcuts to be available.
  • We need to combine the concepts of active (volume or model, etc.), selected (volume or model...) and picked (volume or model...)
  • We need to design presentation treatments for all groups of selectable entities within Slicer, and a consistent presentation treatment for all selected entities within each group.


Sketch.png Link to Other software conventions...

Sketch.png Link to Notes on Selection and Direct Manipulation

Sketch.png Link to Developer & user suggestions for what we need to pick

Sketch.png Link to User suggestions and Early draft

Sketch.png Link to Notes on State=Selected vs. State=Active in MRML


Working problem: CTSC: Facilitating Tumor Analysis Workflow in Slicer

Contributors: Ron Kikinis, Jeff Yapp, Randy Gollub, Wendy Plesniak

Goals: Perform the following analyses in Slicer and create presentation & tutorial materials

  • A. Single Volumetric Dataset Basic Volumetric Measurements for Tumor Assessement
    • Linear
    • Volumetric
  • B. Dynamic Volumetric Data Visualize & Analyze Perfusion Data
    • Define ROI
    • Interactive Plot of Contrast Dilution as Function of Time
    • Measure Peak (first priority) & Transit (second priority) times in Blood Pool & Tumor
    • Save timepoints
      • Intensity(t) for ROI1
      • Intensity(t) for ROI2
  • C. PET Dataset Basic Standardized Uptake Value (SUV) Analysis
    • Segment Tumor by Hand (ROI or VOI, circle or sphere will work)
    • Normalize by SUV (use maximum value)
    • Extract Parameters:
      • For single tumor: SUVmax_Baseline, SUVmax_Timepoint, %change
      • For multi tumor: SUM(SUVmax_Baseline) - SUM(SUVmax_Timepoint), %change
  • D. Visualization Requirements Displaying Static, Dynamic and PET data
  • E. Presentation Materials Powerpoint Slides for CTSA IRAT
    • Deadline: September (for October meeting)
      • Short slideset showing Slicer overview & BC tumor analysis
    • Deadline: November (for RSNA in December)
      • Full slidesets including Basic Training and Specific hands-on BC tumor analysis

Tutorial slides currently under development


Sketch.png Link to info for A. Volumetric Analysis

Sketch.png Link to info for B. Dynamic analysis

Sketch.png Link to info for C. PET Analysis

Working problem: Customizable layouts for Slicer3

Instead of a finite set of layout options, we would like to provide users the ability to select among a richer set of layouts, some created to be appropriate for analyzing certain kinds of studies, and the ability to customize their application layout as well. We have begun working on ideas at the NA-MIC January 2009 AHM.

Contributors: Jim Miller, Steve Pieper, Ron Kikinis, Julien Finet, Jean Christophe Fillion-Robin, Wendy Plesniak

Sketch.png Link to first draft of user experience design

Sketch.png Link to second draft of user experience design

Sketch.png Link to tabbed-slicer layout

Sketch.png Link to first ideas about layout architecture

Working problem: Slicer3 workflow for Tractography: usability issues, design & planning

Working with Dr. Jean-Jacques Lemaire, we are understanding the use of Slicer in a complicated tractography analysis, within the context of a particular workflow. This work is identifying usability issues, software bugs, and ideas for improvement. These pages are a touchstone for the project.

Contributors: Jean-Jacques Lemaire, Nicole Aucoin, Wendy Plesniak, Steve Pieper, Alex Yarmarkovich, Andriy Fedorov, Haiying Liu

General issues, comments and feature requests

Sketch.png Link to Organization of Presentation Layer

Sketch.png Link to Naming conventions

Workflow overview and details on sub-steps

Below is a rough outline of the tractography analysis workflow currently in use (pending a proofreading check by J-J). The workflow can be broken down into general stages:

  • setting up: including loading and saving and adjusting data display properties
  • registration of target dataset to a reference dataset
  • exploratory and analytic tractography

DTIworkflowOverview.png

(if the figure should be corrected, please let me know how to fix -- maybe deformation should be part of the registration step).Data loading happens up front, but data and the scene may be saved frequently throught the workflow. Highlighted are some areas where serious usability issues have been flagged.

A plan to address these issues will be discussed on Dec 29/30 2008 at the next Slicer Developers meeting. Notes from that meeting and a proposed development plan will be posted here.

The sections below contain collected comments and suggestions for all workflow stages: Setting up, Registration, and Tractography. Markers on the figures indicate places where problems are reported.


DTIworkflowSetup.png

Sketch.png Link to Comments on Data/Scene Loading

Sketch.png Link to Comments on Saving

Sketch.png Link to Comments on Quality check & Deformation (Pre-registration)

Sketch.png Link to Comments on Registration

DTIworkflowRegistration.png

Sketch.png Link to Comments on Tractography

DTIworkflowTractography.png


Working problem: Welcome Module for Slicer3.4 release

Sketch.png Link to Mockup

Sketch.png Link to First Draft Implementation

Sketch.png Link to Second Draft Implementation


Working problem: Design revision on Fiducials GUI for Slicer3.4 release

Sketch.png Link to Draft1

Sketch.png Link to Draft2

Sketch.png Link to Draft3

Working problem: Module Management Wizard Interface & Interaction Design Storyboard

This wizard allows users to uninstall modules from their current build or to download and install new modules. Currently working on a usable design. Storyboard roughed out during IGT project week Dec8-12 '08, (Terry Lorber, Steve Pieper, Wendy Plesniak)

Sketch.png Link to Draft 1

Sketch.png Link to Draft 2 (not yet ready)


Working problem: Consolidating Load functionality

Functionality to load data is spread all over the application... we want to begin consolidating it in some simple fashion and to gradually implement a more integrated and appropriate solution.

Sketch.png Link to Draft 1


Working problem: Save Data Widget

Sketch.png Link to Draft 1 and notes

Sketch.png Link to Draft 2 and notes

Sketch.png Link to Draft 3 and notes

Sketch.png Link to Draft 4 and notes

Sketch.png Link to Draft 5 and notes


Working problem: Slicer & XNAT Informatics

Sketch.png Link to Fetch Medical Informatics (FetchMI) implementation 1 notes

Sketch.png Link to Fetch Medical Informatics (FetchMI) and RemoteIO profiling/refining notes

Sketch.png Link to CTSC Use-case: Grant & Pienaar at Children's Hospital Boston

Sketch.png Link to CTSC Use-case: Brad Dickerson at Mass General NMR

Sketch.png Link to CTSC Use-case: Warfield & Weisen at Children's

Sketch.png Link to CTSC Use-case: Managing Image Guided Therapy (NCIGT) Restrospective Data at Brigham & Women's Hospital

Sketch.png Link to FetchMI XNE extension planning (work with Curtis Lisle)


Working problem: Scene Snapshot Interface

Sketch.png Link to Scene Snapshot UI Design


Working problem: Application-wide support for ROI definition

GOALS:

  • determine relationships between label maps, implicit regions (spheres, circles, ellipses), and vector-format region definitions.
  • determine what kinds of ROIs we will allow users to create/edit at application level
  • determine how to expose ROI functionality application-wide (without "wormholing" to an ROI module)
  • provide tools for defining, editing ROIs
  • provide tools for converting ROIs into label maps (?)
  • provide good mouse+hotkey design
  • generalize implementation to eventually accommodate DICOM-format ROIs
  • determine relationship between fiducial lists and ROIs (from implementation pov).

Sketch.png Link to Draft ROI design

Sketch.png Link to Interface & interaction design drafted at June NA-MIC Project Week

Sketch.png Link to Earlier notes from Editor module usability sessions


Working problem: Consistent checkbuttons and radiobuttons across platforms (Issue Resolved)

GOALS

Currently, radiobutton and checkbutton indicators display their state differently on different platforms Slicer supports. For instance, visually similar indicators on linux and windows actually represent different states. This can be confusing for people who work on both platforms. So instead of using the default Tk bitmaps for the indicators, we are proposing to use our own image data which will display the same on all platforms.

  • develop a custom slicer widget as an extension of vtkKWCheckButton
  • disambiguate current "deslected" radiobutton icon state -- it can be read as "disabled"
  • override method for turning the old indicator visible/invisible (always keep it off)
  • develop visually parseable convention for icons to represent:
    • selected
    • deselected
    • disabled
  • use methods SetImageToIcon and SetSelectImageToIcon to display selected/deselected icons, selected/deselected icons+indicators
  • provide blank icons with and without indicators for people to download.

Sketch.png Link to Radio and check button tests


Working problem: Navigating with fiducials (Issue resolved: implemented in Editor module and Edit Box)

GOALS:

  • use fiducials as markers for features of interest
  • allow navigation to fiducial points within a slice window and
  • allow navigation to same fiducial point in all slice windows (a feature we're calling 'jumpslice').
  • want to read-out which fiducial is currently being viewed while navigating
  • want to expose these features in top level in each slice controller widget
  • want also to keep the slice scrollbar from getting too small to use.
  • want to indicate which slice scrollbar direction is R,L, S,I, A,P, depending on orientation


Sketch.png Link to Fiducial navigation UI design sketches


Working problem: Cine display for viewing and analyzing multi-volume data in Slicer3

Sketch.png Link to Drafts of UI for Cine Display


Working problem: Linked controls in Slicer3

Goals

Slice viewing can operate in the context of a single slice reformation or in a linked state where multiple slice viewers respond to interactions with any slice viewer. When Slice Viewers are linked, a number of viewing geometry and view representation parameters are linked across viewers.

Sketch.png Link to Drafts of UI for Linked Controls


Background: Slicer 3.2 usability & ideas for Slicer 3.3

Some Embodiment History


Return to Slicer3 Interface Design and Usability

Retrieved from "https://www.slicer.org/w/index.php?title=Slicer3:UIDesign&oldid=62247"