IMAIOS is a cutting-edge company in the field of medical imaging and e-learning. It designs products to support healthcare professionals in their daily practice through a range of tools including anatomy atlases, a DICOM viewer, training modules, and practical case studies. The primary objective of these resources is to provide high-quality educational materials, foster innovation, and ensure intuitive and user-friendly interfaces.
Several aspects need to be taken into account when designing the UX of our interfaces in order to achieve this:
- target audience (professors, healthcare professionals, students)
- the range of platforms and products (apps and web tools)
- accessibility (sharp contrasts, sufficiently large font size, etc.).
Before delving into the specific constraints of IMAIOS, here’s a brief overview of UX. UX (user experience) refers to the quality of the user's experience.
The term is most often used to describe interactions between the user and an interface, but it can be found in many physical domains.
UX covers both ease of use (usability) and the study of the emotional impact felt by the user. The role of the UX designer consists in making the tool intuitive to grasp, but also in facilitating the actions the user intends to perform during interaction. It's also about anticipating all the scenarios our target might encounter. For example, displaying the missing characters when a user creates a password, to prevent errors when setting up their account and avoid frustration. Negative emotions provoked by slowness, bugs, restrictive actions or excessive delays drive users away. This is where we need to focus our attention.
What factors should be taken into account?
Our target
In the healthcare field, software systems are often obsolete, not ergonomic or don’t offer a modern interface, although this is gradually evolving. Nonetheless, the healthcare professionals we work with already have well-established habits when it comes to using these tools. This is definitely a factor to take into account when creating user flow (we'll come back to this term a little later).
Additionally, these tools need to be adapted to a diverse audience: web and application usage habits vary across different generations and demographics. To understand the habits of each generation let's take the example of the burger icon, which often evokes nothing to people with little experience of the web. The UX Designer will improve understanding of this icon by simply adding a text or by displaying its name in a tooltip when the mouse is over it. In this way, users are familiarized with new practices, eventually becoming habits, just like the pictograms for Olympic disciplines, for example.
Finally, different audiences mean different needs. Our tools are used by students, teachers and healthcare professionals. Each of them will have specific needs that we need to identify in order to highlight them on our interfaces.
Digital Accessibility
Now mandatory in some countries, IMAIOS is also committed to applying the W3C recommendations in order to enhance the accessibility of our website and applications. It's a long-term project that we take into account in our designs on a daily basis.
How is this reflected in our interfaces?
This is expressed in a number of ways that are more or less visible, as certain rules need to be applied within the code.
For the most visuel of them:
- we have revised our colors to meet the AA level of accessibility, which mandates minimum contrast ratios (4.5:1) between text and background colors in order to improve content readability,
- we accompany our pictograms with text or tooltips,
- we have enlarged or reduced the size of labels in e-Anatomy modules (see examples).
For the less visible:
- we're improving keyboard navigation,
- we've improved and keep improving the naming of our HTML tags to provide better semantics for screen readers.
In response to numerous user requests, we're also working on a dark mode for the website. Although not strictly speaking a question of accessibility, this theme improves the use of our products in low-light conditions and avoids eye fatigue.
That's why your feedback is important to us, as it allows us to continuously enhance our products to better meet your needs.
A wide range of media and products
Some of our products are available as both mobile applications (iOS and Android) and web tools. Therefore, we need to ensure consistent interaction patterns across these three platforms while respecting their unique characteristics.
Let's use the e-Anatomy menu as an example: opening and displaying filters and tools are similar on the web and in applications. However, scrolling, moving and zooming have disappeared from the application interface. On a tablet or phone, we use our fingers rather than a mouse, which changes the way we interact with the screen. The gestures associated with these tools already exist through the use of a touch screen.
In addition to these considerations, we also take into account the native behaviors of each operating system. At IMAIOS, we aim to maintain these behaviors when they make sense. Google and Apple each offer their own vision of UX, and this is illustrated by different gestures and displays. If you're looking for filters on iOS, they're often hidden in the three-dot icon in the top right-hand corner, whereas on Google they're often visible and associated with content.
Before-and-after case studies
To illustrate the evolution of our interfaces and improvements we’ve made, partly based on user feedback, here is a visual comparison of our products before and after.
Improvements to e-Anatomy
The anatomical structure panel
One of the major projects we carried out on e-Anatomy was to improve both the visual and ergonomic display of anatomical structure definitions. Initially, it was displayed as a pop-up on top of the module content. This prevented users from continuing to scroll through the module if they wanted to keep the structure information displayed. Therefore, we decided to switch to a side panel that can remain open or closed. This adds a modular aspect to the interface. The way it works remains the same for all applications. We have, however, adapted the width it takes up and it behaves differently (going over the content) because the space available on a tablet or smartphone and a large screen is not the same.
Restructuring the "my account" Section
Internet leaders such as Google and Apple, through their extensive presence, have set certain standards and access methods. This is the case with "my account" management. So as not to disrupt the habits of our users, we have chosen to redesign account access to match these habits. As a result, users don't have to spend time searching the whole application for their subscription information or interface customization settings (see before/after).
Improvements to IMAIOS Dicom Viewer
Switching to dark mode
IDV was the first app where we implemented the dark mode. We took the opportunity to modernize its interface and adopt the same graphic codes as the website, aiming for a unified look and feel. The goal was to ensure that when our users open any of our applications or visit the website, they immediately recognize the distinctive IMAIOS style. However, the decision to introduce the dark mode in IDV was primarily motivated by the desire to provide less aggressive contrasts, that make the interface clearer and more legible, and allow other content to be highlighted.
Series' cells
Many small changes have been made to the DICOM IDV reader interface. Some of these changes have been made thanks to user feedback, such as infinite scrolling within a series; adding a toast (a temporary notification) to indicate the start and finish of the series; and the ability to change the series displayed in a cell using a select, where previously we only indicated its name.
Furthermore, enhancements and new gestures have been incorporated for mobile and tablet devices. To display a series in a cell (in addition to drag & drop), simply tap on a series to automatically display it in the active cell. Sub-series can be opened by pressing and holding on the image. Their appearance has been revised to make them easier to understand and differentiate from series without sub-series.
Finally, the number of images per series is now indicated on the thumbnails in the bottom bar.
Some of these improvements have also been applied to the DICOM reader on our website, including the number of images per series, the presentation of sub-series, the appearance of the select and toasts. These updates aim to ensure a common look and feel across all platforms.
Website improvements
Suggest a definition or modification
At IMAIOS, we believe that the collaborative aspect is key to achieving a common goal and disseminating knowledge. This is why we are keen to enhance user engagement with our content. The idea is that, wherever possible, users can suggest modifications or structure definitions directly online (content will be reviewed before publication).
This is where user stories come in.
A user story is a simple sentence describing a software feature, written from the point of view of the end user. Typically, it follows the format:
"As [customer profile], I would like to [software objective] in order to [result]".
Applied to our case, it would be: "As a healthcare professional, I'd like to provide additional information on a definition to enable other users to have a more precise definition."
Based on this premise, we will outline a user journey to provide the best possible experience. This means illustrating all the steps that the user is likely to go through, using mockups or wireframes. These stages of reflection are essential as they allow us to highlight areas for improvement, streamlining, renaming, and more.
Sharing a clinical case
As part of our commitment to sharing and disseminating knowledge, we have redesigned the clinical case creation interface to make it simpler to understand, less restrictive in terms of information requested, and more efficient when it comes to sharing the case. We have also redesigned the annotation system to make it directly accessible from the cells, while also enhancing their functionality.
In this particular case, the biggest challenge was figuring out how to create an annotation on mobile devices. With little space to spare, we needed to simplify the interface as much as possible, so that it wouldn't be too tedious and the creation of an interpolation would be straightforward. To achieve this, we rely on existing tools, even those unrelated to our domain. This allows us to learn from different practices and potentially adapt the best ones to our own tools.
Today, both with e-Cases and IDVyou can annotate your DICOM files in a very user-friendly way.
In conclusion, UX is a job that requires a lot of thought, analysis and testing to improve the understanding and comprehension of our products. Thanks to UX, our products are more effective, and we're closer to the needs of our different audiences.
