I have a chart which is showing information from a data-tree. Root is a big circle where the user can see children as smaller circles inside it. based on the space available, the user may see more than one level at a time. The user needs to have a intuitive way of diving in and out. Constraints are

  1. prefer not to have text buttons.
  2. It should only work with taps. not less controllable pitch in-out gestures
  3. prefer not to have a menu or global button.
  4. each circle also has a title, that displays details on a separate pane when clicked. I should avoid having accidental dive-in when user just wants to see the details.

zooming is not difficult to solve. when tapped inside a circle, but outside text area, I dive in.

How do I implement a zoom out? here is just an example of what I mean by circles display tree-shaped data structure using circles

  • 1
    This sounds like a confusing interface - Can you share some images (even redacted wireframes would be useful)? Also, what's the rationale behind choosing to design your interface this way? Commented Feb 16, 2017 at 8:33
  • @AndrewMartin I added a photo
    – n00b
    Commented Feb 16, 2017 at 12:01

4 Answers 4


I would use the outside of the circle currently focused.

For example, if the user taps the green zone in this picture, it zooms out a level.

enter image description here

  • No offense meant, but woah... that's GREEN! My Eyes! :P
    – Harshal
    Commented Feb 16, 2017 at 13:08
  • actually that is how it is working now..so you think a user will expect that too? I mean outside area to act as zoomout?
    – n00b
    Commented Feb 16, 2017 at 13:14
  • 1
    I'm not sure it's 100% intuitive. You could maybe try to add a text label (with the name of the upper circle) in the green zone just like you do for your inner circles?
    – user83776
    Commented Feb 16, 2017 at 13:17

Generally, and I know you said you didn't like text buttons, zooming out in treemaps (which yours is a circular version of) is done through a breadcrumb path, like this example --> https://bost.ocks.org/mike/treemap/

However, circular treemaps are difference to rectangular treemaps in that the children don't use all the available space of the parent (you can't tessellate circles), so nodes have a lot of space within that's not used by their descendants. This is utilised in this example where zooming out is performed by re-selecting the node you originally selected to zoom in (or it's parent if visible on the edge). https://bl.ocks.org/mbostock/7607535

You could of course use both techniques

  • I meant a button saying 'zoom out'. But I like the idea of some form of 'bread crumb'.. Just have to find a way of making it interesting, easy to click and fun to use
    – n00b
    Commented Feb 17, 2017 at 3:13

Look a Google Maps for what they do. May also depend if you are on desktop of mobile.

Desktop, you may want to have a +/- to zoom in or out, plus single click to zoom in. Scroll wheel on a mouse also zooms in or out.

Mobile, single tap to zoom in, double tap to zoom out.


This is an interesting interface. I liked the innovation, but it needs to undergo user testing.

I am most concerned about the fourth point. Two behaviors of clicking on the text vs clicking inside the circle and not in the text are going to create much havoc. Accidental taps, confusion and what not.

Now about your requirement of zooming out. How about leaving some room outside the outermost circle. If the user clicks outside the circle, you will zoom out. If you want to make it more obvious, you could have a small clickable area concentric circle overlapping the outermost data circle. Something like following,

enter image description here

In either case, an appropriate animation for zooming in and out is required to reinforced the learning once user does it for the first time. In the outermost data circle, you will not show the bounding semitransparent circle. The first animation when you zoom in will create the bounding circle informing the user as the direct feedback of his/her action. Then the user can click that semi-transparent part to zoom out.

Zooming out will be one level at a time. I do not recommend a stack/layer of bounding semi-transparent circles. To completely zoom out to outermost data circle, you need an action somewhere else.

  • I feel the issue when trying it myself. as you said, in the current format, it carries a lot of confusion. tried the outer area, but then it looks like a frame for the content and unless you accidentally tap, you can't guess it is a zoom out. I think I should start looking for a whole new design
    – n00b
    Commented Feb 16, 2017 at 13:10
  • I would have a secondary info panel next or below. I will let users drill regularly, and the circle which is at the outermost level at current zoom level will have its information in the secondary info panel.
    – Harshal
    Commented Feb 16, 2017 at 13:11
  • that is exactly how it is now. I just didn't take a shot of secondary panel. but having zoom out button there looks misplaced
    – n00b
    Commented Feb 16, 2017 at 13:12
  • Zoom out is solved by the outer circle or the background outside.
    – Harshal
    Commented Feb 16, 2017 at 13:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.