Masaryk Uni – Medical 3D Viewer
MASARYK UNIversity –

Medical 3D Viewer

Interactive web application for medical 3D visualisations

UI Design  •  Feb–Apr 2014

 / Summary

Digital 3D visualisation is a powerful way of displaying spacial information. Imagine for example an animated model of human organs and the possibility to look at it real-time from different angles. 3D representation and interactions can tremendously increase people’s curiosity and immersion.

The rise of web technologies made it possible to display complex 3D graphics on the web. Working for the e-learning service centre of Masaryk University in Brno, I designed and developed a tool for displaying medical 3D visualisations. Interactively and easily from a web browser.

The Challenge

During my work in the e-learning service centre, we were focusing on producing digital sources for university tutors. I was specifically focused on creating 3D visualisations which were then used as static images or embedded videos.

The original idea of the tool our 3D visualisations got into my mind while I was cooperating with a dentist MUDr. Jan Vokurka. Together we created animations of surgeries including models of teeth and a jaw with a gum. All of them was supposed to be available as videos. In that time, I started to think about ways of displaying 3D graphics interactively embedded on a website. After a few interviews with other tutors, we found out they are also interested in that idea. 

The Solution

Being a designer, developer and 3D artist of the project, I prepared medical 3D visualisations and created a new e‑learning web application – the interactive 3D viewer, which can be embedded on websites and displayed without any additional browser plugin.

As a result of that, people were able to see our 3D visualisations online from different angles and in different contexts real-time. This was especially useful for medical visualisations where the provided interactivity resulted in better students learning immersion.

My Role & Participation

UI Designer, Developer, 3D Artist

  • creation of medical 3D models and animations (using 3ds Max, After Effects, Photoshop),
  • design and development of interactive 3D viewer (in HTML5, CSS3, JavaScript/jQuery, WebGL).
3D symbol3D symbol3D symbol3D viewer in use on the laptop by a studentScreenshot from the 3D viewer

Impact & Benefits achieved

1. A New Powerful Tool

The e-learning service centre creates tools to improve e-learning on the university. The 3D viewer joined the line of these tools as one of the most hi-tech one in terms of used technologies. On top of that, the viewer is available also for the general public as open-source.

2. Interactive 3D Views

The interactivity of the solution and capability to set various angles of the views has opened new possibilities for tutors and medics. They were able to start showing their 3D visualisations in more creative and engaging way.

3. Increased Immersion

The possibility to explore 3D visualisations from different angles and contexts in real-time had a positive impact on users immersion and their curiosity. The mentioned then led to better learning.

 / Process

Me during a recording session with the university tutorsMain technologies used for the 3D viewer (WebGL, HTML5, Three.js, CSS3, jQuery, Sea3D)
My initial sketches of the 3D viewer

1  Technology research

Web 3D graphics was still a new field in that time (2014) and the support of web browsers was limited. Thus, web 3D was not massively spread among common users. I started with a research on available technologies with the goal to pick the most suitable one for our purposes, carefully considering future web evolution.

Based on the research and based on the browsers statistics of our target users I favoured HTML5 with WebGL/Three.js over Flash. The chosen technology was in my eyes more user-friendly (no additional plugins, good support on phones) and very promising (rise of HTML5).

2  App design & Development

During my cooperation with a dentist MUDr. Vokurka we put together requirements for the 3D viewer. We also discussed fundamental functionalities which would be useful for the users (university students).

I did also a research on UI patterns used in other 3D web solutions. That helped me to think about UI features which would increase overall usability and usefulness of the viewer (like a fullscreen view, mouse interactions and more).

When I had requirements with a set of UI patterns ideas, I sketched out the viewer on the paper to quickly visualise possible UI arrangements. Then I started prototyping using HTML5 and JavaScript libraries.

Part of the solution was also to find a suitable 3D format for our visualisations + to invent an effective system for their export from 3D software to load them by the viewer. To be able to ensure smooth manipulation, we needed to choose a format with high model performance optimisation. That was fulfilled by Sea3D format, which encapsulates also a definition of 3D animations and sounds.

3  Ideas sessions & Design reviews

My work on 3D visualisations and the viewer was accompanied by several meetings with tutors, dentists and medics. The purpose of these sessions was to gather ideas and sources and to review the current progress.

It was often necessary to make videos of physical models performing desired movements. These materials were later converted into 3D with effects which can’t be normally recorded (as for example semi-transparency).

3D symbol3D symbol
3D symbol

What I’ve Learned

We learn something new with every project...
•  Web 3D technologies can create unique experience

The world of 3D in connection with possibilities of the web can bring really outstanding solutions. These solutions can establish big users immersion and curiosity. One of my favourite and really inspiring application utilising 3D on the web is human visualisation → www.biodigital.com.

•  Content idea, usability and performance are crucial

3D graphics can be very performance heavy. Thus, the optimisation of a loading speed, size and amount of 3D objects is important for smooth manipulation. It is a part of good usability which can be supported by UI patterns and consistency. Having a meaningful visualisation data is crucial as well. Content idea, usability and performance is the foundation of a great user experience.

•  Meeting in person is worth of a thousand emails

During designing is important to inform clients about the progress and regularly perform design reviews. It is possible to do it through emails, but meeting in person is always more beneficial. You can get better feedback, ask additional questions quickly, see the emotions and establish a better sense of client's involvement.

 / Designs

Screenshot from the 3D viewer (all available controls)
Noticeable UI features

The viewer provides controls to manipulate the view (see the grey panel and the black one). These controls can be hidden to allow full focus just on the visualisation.

Some browsers might still have a problem displaying 3D. In that case, the user gets an informative message and can switch to a tab with the alternative content.

View manipulation

The viewer has controls to hide specific model parts, to set a specific angle of the view and to manipulate with the view real-time. That is possible either by a mouse or a panel which includes controls for the view reset, rotation, moving and zooming.

The viewer is capable of displaying also 3D animations defined in the loaded file. If the model includes any, additional controls for animation with timeline are shown.

All controls are described in the user interface guide shown on the right.

Screenshot from the 3D viewer (user interface help)
Screenshot from the 3D viewerScreenshot from the 3D viewer
Screenshot from the 3D viewer
3D viewer capabilities

On the first screenshot, you can see the initial view with a human head. That can be easily changed into uncovered view by hiding particular parts of the model.

Camera position can be moved to any detail to show the model from a totally different angle. It is also useful to switch to the fullscreen view for better visual immersion.

Screenshot from the 3D viewer
Future possibilities

A lot of medical visualisations can benefit from the 3D viewer. I can mention for example models of human body and its organs, demonstration of surgeries, medical data representation and more. The viewer can be extended to display complex 3D animations, which opens the door to even more meaningful visualisations.

Screenshot from the 3D viewer

Did you like my work?

Let’s work together! I'm especially interested to help projects focused on healthcare, smart technologies, or project management.

Feel free to contact me at → bretislav.mazoch@gmail.com

Other projects...

Explore 2 more case studies.

Epro – UI Style Guide & Features (preview)
Epro –

UI Style Guide Features

Design system and features for clinical web application

As a UI Designer, I managed UI style guide of the main product. We extended the style guide which led to better UI consistency, better usability and increased amount of designed features. For example, one of the new features sped up the management and import process of any patient document by clinical staff.

Case study →
Summary  •  Process  •  Designs
Auntie Knitter – Knitted Ties E-shop (preview)
AUNTIE KNITTER –

Knitted Ties E‑shop

Visual identity and website for business with knitted ties

As a Graphic & Web Designer of the project, I designed all brand visuals and designed and deployed the website (e-shop solution). Thanks to that, the business is able to manage online sells and be promoted.

Case study →
Summary  •  Process  •  Designs