I’m addicted to interaction details!
About a project and those details that hook me every time.
Gloam.io is an interactive data visualization of sunrise, sunset and twilight times.
It calculates these times based on user given latitudes. The user can explore the visual effects through adjusting date and time.
This article focuses on the interaction details in gloam.io.
If you want to get more detailed information about the process and development, check out the code on GitHub.
In my second semester in the course Programmed Design was the task to visualize calendrical data. I found it interesting to work with sunrise and sunset times. They not only differ over the course of the year, but also depending on the underlying latitude.
So I created gloam.io. It tries to visualize these interesting changes by giving the user the ability to create gradients which are based on different latitudes. Through changing the overall date and time, the differences in the sunrise and sunset times become clear. Gloam.io started as a student project, but I kept working on it in my free time. In that time I realized:
Thoughtful interaction details hook me up every time.
While working on gloam.io I had the most fun, while I was developing the smallest of details. When there was an idea, I immediately prototyped it, to try it out. Prototyping helped a lot to distinguish between those which did not fit and the really promising ideas. Sometimes a freshly prototype just felt right! This often happened when an intuitive interaction was combined with a thoughtful and supporting feedback. These moments were inspiring and kept me implementing these details.
The following examples are my favorite interaction details of gloam.io.
Depending on the different interaction possibilities the tutorial instruction will adjust his progress behavior:
When adjusting multiple latitudes with a fast move over multiple gradients no information is displayed. Adjusting only one latitude will show a guide and the exact latitude.
When adjusting a latitude close to the bottom border, the information will swap to the top of the gradient to prevent overlapping.
The animation to clear gloam.io depends on where the user initiates this process. This creates a more immersive experience.
Thanks for reading!
Do not hesitate to ask, if there are any questions. If you want to get more detailed information about the process and development, check out the code on GitHub.
A project by Nikolas Klein, 04|2015
Personal Project in the second semester at HfG Schwäbisch Gmünd
Supervised by Prof. Jens Döring and Michael Götte
