Design buttons to zoom in and out of the tree on desktop and mobile

[gissoo]

No description provided.

[gissoo]

@rlskoeser @jhimpele what do you think of the zoom in and out button on desktop and mobile?

• I would propose the following interactions:

1. when zooming in and out of the tree the zoom's position would be centered on the tree
2. when zooming out of a specific leaf the tree again becomes centered
   I am imagining this interaction will have to work with selecting the buttons and dragging using the mouse. I have to dig in more to see if there are other options for accessibility.

• do we want to keep the "reset to zoom" button? Or is it obsolete? I think it would be nice to keep it but wasn't sure how much it would serve our users considering the extra space it will take.

[jhimpele]

All looks really good @gissoo. Except you will look into zooming in toward a selected leaf, OR moving the tree around after the zoom?

The reset is fine with me....You and @rlskoeser would have a better sense of the conventions.....

[rlskoeser]

Buttons look fine to me, Gissoo.

I think we should keep the reset. Should it be hidden or just disabled when the tree is at full zoom?

Can we start with what is easy to implement for zoom? (I think default behavior is close to what you propose)

I guess + / - may need to be disabled when they are invalid too.

[gissoo]

Thanks, @jhimpele and @rlskoeser !! – Please let me know what you think:

• @jhimpele I was thinking to look into moving the tree around after the zoom, i.e. the dragging part ...based on my research we will need a way to move around the tree using the keyboard so that we wouldn't depend on using the mouse, such as the up, left, right, and down arrows to move around the tree, not sure.
• Thank you, both. I also think we should keep the reset. On mobile I don't think we should display the reset when it's at full zoom because of space, in this context displaying it does not serve any cognitive purpose either. But on desktop it may make more sense to display it.
• @rlskoeser sure, I agree on implementing what is easy with zoom.
• Yes, I think the +/- would need to be visible but disabled when invalid, I've applied these here based on default view vs. selected leaf/interaction with zoom

[rlskoeser]

@gissoo this all looks great to me.

[jhimpele]

I concur with Rebecca. Thanks, Gissoo.

[gissoo]

thank you, both!
@rlskoeser I forgot to mention one thing here, for the disabled state of the +/- buttons is basically the actual + or - in 40% opacity. I did not touch the brown square container they sit on because we want the container to be 100% opaque at all times in the case that they overlap with the tree.