Show HN: Zircle UI – a circular zooming user interface library based on Vue.js | Hacker News Reader

Show HN: Zircle UI – a circular zooming user interface library based on Vue.js

zircle.io

56 pointstinchox527 comments

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

For someone who just got started, this quite impressive. Congratulations on putting it out there.

What made you pick Vue over other frameworks/libraries out there?

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.

Awesome! Good to hear that there was someone out there to help you. It can be quite daunting and overwhelming indeed.

Do you plan in utilizing these newly acquired skills in your job?

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.

Looks great! Check out this award-winning zooming interface from 2001 (requires flash): http://www.andyfoulds.co.uk/sites/relevare/

Maybe it can be of some inspiration!

I’ll see it! Thank you

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.

Keep up the good work!

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.

Certainly allow it, but provide a sane default, too. If you don't, people wiill be more likely to do something stupid than they would be otherwise.

Thank you for your suggestion about using ease-in-out. I'm playing with that and it is more pleasant.

Do you have diplomatic immunity?

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.

You're a talented designer. You should work for Apple or something. They need you! :)

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.

Thank you for your feedback! I appreciate your comment. Maybe it is a good idea to have the possibility to set the transition speed. Thank you!

This is really cool. Recently I was looking for zoomable ui for a complex timeline I want to implement, this may be useful for that.

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 ?

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.

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.

Good work anyway and thanks for sharing

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.

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...

Thank you for your support! You are right I have problems with the scrollbars in some ffox editions. I'll work on that!

Demos seem to suffer from a lack of "overflow: hidden".

Affected classes: .z-content, .maindisc

Good to know that! I really tried to make the transition as much smooth as I could. Your info will help me a lot to improve this aspect. Thank you

I feel dizzy :)

Reply on news.ycombinator.com