Visual Design for a Radiology Reading Station

The skilled use of visual metaphors, layout, color, and fonts can dramatically improve usability, user experience, and brand image. Visually strong interfaces group and prioritize information effectively, focus attention, and contribute to a polished, high-quality brand image. Visually weak interfaces make inappropriate use of metaphor, layout, color, and font, confusing or misleading users and distracting attention from the task at hand. A poor visual presentation will leave users wondering whether the creators of the product paid sufficient attention to design details.

Unfortunately, the graphical treatment for a user interface is often left in the hands of software engineers with little or no training in visual design.

The Engagement

Human Factors MD has created compelling visual designs for many of our client's graphical user interfaces, including eMed Technologies' Matrix, a radiology reading and reporting application. Radiology reading stations are typically multi-monitor computers that present X-ray, CT, MR, and ultrasound images to radiologists for reading and reporting.

Visual Treatment

The image below depicts the final visual design for the product's patient information screen. The visual presentation re-enforces the patient folder metaphor (i.e., a patient's folder as a collection or records detailing the patient history, including prior imaging examinations and reports). The folder metaphor, background color, and layout are used to separate patient demographic information (that is common across examinations) from details for individual studies presented below. Radiologists select a study from the history on the left to display information for that study on the right, including the study contents, notes made by the technologist when the study was acquired, dictated reports, and specific images that illustrate key findings.

The colors used throughout the UI mirror eMed Technologies' corporate colors. Earlier versions of the design used a lighter background to maximize the visual contrast of the text. But usability testing showed that the color choices for the patient information screen where too bright relative to the darker radiographic images displayed across other monitors. As radiologists shifted their view from one monitor to the next, the change in brightness between monitors and was too visually jarring. The final design (shown here) has sufficient contrast to read information clearly, while decreasing the differences in brightness across workstation monitors.

Icon Design & Testing

We also designed and tested a set of meaningful, memorable icons for display in a user-configurable toolbar. A test and subsequent re-test method was used to evaluate both how understandable the icons are on first viewing, and how memorable they are over time. Production icons were created and delivered as part of a full graphics library containing all of the visual resource elements for the UI.

Top^