Hi folks I'm presenting you Zircle UI, which is a circular zooming user interface library based on Vue.js.
It took me a lot of time to develop it since I'm a diplomat not a programmer. So, I had to learn Javascript, how to use Git and a lot of tools first. Also I experimented with many concepts before achieving what I wanted.
I always wanted to create a library to build apps or sites that use zoomable navigation so I build one :). I hope you like it!
Thank you,
Martin
Thank you! That is an interesting question. I think that Vue.js was easy for me to lesrn and use it. The development of Zircle took me more than a year. At the very beginning I felt overwhelmed with the amount of js libraries so I tried to built it using vanilla js. The outcome was, to say the least, a spaghetti code. So, a friend of mine said that I should use MVM pattern to tidy up the mess.
With that in mind, and having learned a bit more of JS, I found Vue.js very friendly for me.
I hope so. I think diplomacy is gradually evolving and adapting to the new times. For instance, Digital Diplomacy is a branch of Public Diplomacy and is quite a new way to interact with non traditional actors. Another factor is that there are new generations of digital native diplomats.
Not sure about circles as sole UI primitives, but this is a great start that could grow to support rectilinear views as well.
The big thing I would take a look at is the animation: Ease-in with a hard stop is not a pleasant motion for a zooming UI. I'd try an ease-in-out, and see if you can synchronize the scaling and the positioning so the new circle smoothly zooms into place rather than zooming offscreen and jumping into the center at the end of the animation.
Thank you for your suggestion! Surely the eases could be improved, maybe the best is to allow to the developers to define their own ease and timing according the use.
So creative, Martin! Is this inspired by those 'futuristic' human machine interfaces in movies, such as 'Minority Report'? Was this inspired at all by small devices, like Apple Watch?
I think It was mainly inspired by prezi and impress.js. I did several presentations using prezi. But that was after I decided to build something that uses circles as the main shape in the layout. I don’t know precisely why my initial fixation with circular shapes :). Maybe the fact that I perceive that many UI libraries and frameworks tend to use square layouts. I totally agree with that because I think is the most efficient way to organize a big amount of content and it is very flexible as well. Having that in mind I thought that maybe there were enough room for another point of view. Even if this idea doesn’t fit for all cases and uses, it would fit on other scenarios.
Finally the zooming navigation was a way for me to resolve the idea of using a 100% circular layout.
I like it, but it's a bit nausea inducing for me. I'm also the type of person that feels nausea playing FPS games, shifting my focus quickly is not the right feel for me.
Hey, congratulations on your work. Be aware that I am seeing lots of strange visual artifacts when testing this on Firefox Dev Edition. Basically there are scrollbars in all circles...
I've made an user interface based on spheres turning like a carrousel (using mouse wheel). When you clicked on a sphere they'll all go to the center and then the next level of navigation/menu appears.
Pretty aww demo effects on the final client.
Strictly no interest on a daily basis use. The company I worked with finally removed it.
So my point is that, despite the fact that I really like what you did (and I do :-), reinventing navigation way is a pretty rash UX problem and must be apply in very specific places.
Thank you! Pls, JeanMarcs understand that I've never thought on reinvent the navigation. I'm not feel comfortable in such position and It wasn't my goal.
On the contrary, Zircle allows me to learn Javascript and meet a very interesting people. Maybe, but just maybe it is a small contribution to the ZUI.
Also, I'm agree with you in to apply it to specific places. I think that Zircle may be work for building UIs for IoT, health & fitness apps, mini-dashboards, among other potencial implementations.
Thank you! It is very easy to use boxes instead of circles! You only have to change the css border of some classes. Pls feel free to contribute withan issue in Github if you like!
I ended with circle shapes just because a personal interest.
31 comments
[ 4.5 ms ] story [ 42.8 ms ] threadWhat made you pick Vue over other frameworks/libraries out there?
Do you plan in utilizing these newly acquired skills in your job?
Maybe it can be of some inspiration!
The big thing I would take a look at is the animation: Ease-in with a hard stop is not a pleasant motion for a zooming UI. I'd try an ease-in-out, and see if you can synchronize the scaling and the positioning so the new circle smoothly zooms into place rather than zooming offscreen and jumping into the center at the end of the animation.
Keep up the good work!
Affected classes: .z-content, .maindisc
Pretty aww demo effects on the final client.
Strictly no interest on a daily basis use. The company I worked with finally removed it.
So my point is that, despite the fact that I really like what you did (and I do :-), reinventing navigation way is a pretty rash UX problem and must be apply in very specific places.
Good work anyway and thanks for sharing
On the contrary, Zircle allows me to learn Javascript and meet a very interesting people. Maybe, but just maybe it is a small contribution to the ZUI.
Also, I'm agree with you in to apply it to specific places. I think that Zircle may be work for building UIs for IoT, health & fitness apps, mini-dashboards, among other potencial implementations.
Here is another example of zoomable ui : https://jonikorpi.com/zoomable-ui-for-the-web
How much effort will be need to make it squarish instead of circular ?