UX improvements for the 3D tool

Since this project was done over multiple years (with breaks in between), a few changes were made to improve the User Experience.

The Earth

To make the Earth stand out from the night sky, a halo was added to it. It is also now animated and rotates when the user opens the tool.

Here is the link to the tool: https://sternenhimmel-der-menschheit.de/explore

Adding the CTA to the center of the screen

Originally, when the user wanted to explore the constellations of a culture, he needed to first select it by either clicking on the Earth or the list on the left and then click on the CTA on the right. After observing how users interact with the website, it became clear that going back and forth between multiple parts of the screen was confusing. The new position allows users to access the culture’s constellations by clicking on the earth twice in a row. The CTA itself was also simplified to only show the name of the culture and an indication that you can explore it.

I first decided to add the CTA to the center of the screen, with an absolute position (since the selected city would always be animated to the center). But then quickly realized that this would not be the best choice. Indeed, to give the impression that the CTA is over the currently selected city, the animation centering the city on the screen needs to finish before the CTA is animated in, and once it is done, if the Earth is rotated again, the CTA would need to disappear immediately. I therefore changed it to a CSS2D element which is linked to the position of the city it represents and follows its position whenever the Earth rotates again (it's the same technique that was used to create the star labels).

Stars' size

The size of the star was updated to better reflect the original artwork (the 2D content on which the website is based) and make them, and their contrast in size, more visible.

Labels' size

The labels now scale while zooming in and out, so that they take less space when a lot of them are visible.

Black vignette

The first cultures that were added to the tool had very few constellations in them. However, as more complex cultures were added, it became obvious that the screen was overloaded with information. A black vignette was added to reduce the content complexity (which increased in the meantime as more labels are visible and the stars are bigger).

Highlight effect

To further help the user focus his/her attention on one constellation at a time, the design team decided to add a highlight feature. This feature fades out all constellations (and their labels) except for the one currently highlighted. This was a bit tricky to implement since it didn’t mix up well with the navigation system of the tool. Indeed, to navigate the scene, the user needs to move the cursor a lot, where there are constellations everywhere, the highlight feature would get triggered all the time while moving the cursor to navigate, causing the constellation’s opacity to switch on and off, sometimes 5 times per second. To counter this, I added a small delay. If a constellation gets hovered, its ID and the fact that a delay should be applied gets stored, and then a setTimeout of 175ms is used to trigger another function. This function will verify if the current highlighted constellation is the same as the one which was hovered 175ms and, if it’s the case highlight it. This duration seemed a good compromise to have a hover effect happening fast enough for the user to receive direct feedback, but still slow enough to let him/her move his/her cursor around to navigate.

After adding it, I noticed that this feature could also be very helpful for the search tool and the story, since both have interactive elements which help the user look at a specific constellation. After discussing it with the rest of the team, I received approval to add it.

This feature also makes it more convenient for the user to identify the constellation’s name, since the constellations overlap in some cultures, so there can still be some confusion, even if the name is next to it.

It also makes it possible to see some constellations better, since some hidden parts (which are behind other constellations), can now be revealed when they are highlighted.

Centering the constellations on mobile

Originally, the 3D scene containing the stars and constellations was only centered when the story was open. However, since the search tool takes quite a bit of space at the bottom (on mobile), I chose to move it up when it is in use so that the constellations appear more visually centered. This causes a gap at the bottom (since the 3D scene is moved up, the space becomes empty) but this was easily solved by adding a black background with a gradient (which also helps make the search tool stand out).

Adding music

Music was added to make the experience more immersive. At first, the concept was to make it play by default since we thought that the user would not necessarily realize that this option is available, especially since it's only possible to play the music in the tool. While implementing it, I learned that it's not possible to play music directly. This is because playing a video or music can be a nuisance to the user, so much so that it was agreed to make it impossible for developers to implement it that way. I therefore did the next best thing, which was playing the music after the 1st user interaction. After going through the experience multiple times, it was agreed that going with the recommended UX practice (no sound by default) is the better choice.

Centering the constellation on click

Centering the constellation on screen was originally possible in 3 ways: by clicking on the constellation in the search tool, in the story, or by double-clicking it in the 3D scene directly. Double-clicking the constellation is not an instinctive behavior, but I originally made it that way, to avoid any problem occurring with the navigation in the scene (which is done by click and drag, which means the user does a lot of interaction similar to clicking, so differencing the clicks created to navigate and those to center the constellation was difficult).

Since we thought that very few people would try to center constellations by double-clicking them, and that just clicking them once is more intuitive, I was requested to find a workaround. I realized that if the user wants to navigate the scene, he/she would press the cursor on one constellation, move it around, and then let go. So it’s possible to know when the user is dragging the 3D scene around by combining the pointer down and the pointer move event. Therefore, it is possible for the click event to not get in the way of the navigation, only by triggering it when the user is not dragging.

New resolution

The 3D scene now adapts to the pixel ratio of the device displaying it.