Navigating CT scans with a Loupe widget
This animation demonstrates interface improvements to a Loupe widget used in a medical imaging software, which was targeted at medical technicians who must process large numbers of patient scans in order to quickly locate abnormalities in tissue density, shape, and texture.
The Loupe widget was designed to efficiently navigate the data with a minimum of controls, yet heuristically expose more discriminating tools when necessary.
- Interface widgets are located on the right side of the window. Each tool is activated by clicking it with the Hand tool, which then places the widget on the canvas.
- Active widgets are shown in the Tool bar, grouped with the Hand tool in a cartouche.
- The Loupe widget can be moved by dragging within the magnifying ring. To resize the loupe you drag on the edge of the magnifying ring.
- Hovering over the ring reveals contextual tools: a Zoom controller, a Close button, and a Properties tab.
- Dragging on the Zoom control sets the magnification of the loupe. We could also add a text display next to the control to show the current zoom percentage.
- Hovering over the Properties tab reveals the Contrast, Sharpness, and Colorize icons. Each icon is a button; clicking them reveals property controls below.
- The Histogram display can be manipulated by dragging the handles of the preview bar. Tissue densities outside the preview are shown in red while areas within the preview are shown in yellow. On the canvas, pixels outside the histogram preview are colored blue (too low) or green (too high) while dragging the preview handles.
- The Close button deactivates the Loupe widget and removes it from the canvas.