0

I would like to consult with you about a zoom-in functionality we would like to add to a module we're adding to our data SaaS product - wire-frame depicted here: enter image description here.

We have clickable bubbles, and we also enable zoom-in for a selected area. What would be the best we to make the zoom-n capability understandable by the user? Should the cursor depict an arrow or something else?

4
  • Is the zoom made with the mouse wheel? As the user moves it, progressively?
    – Alvaro
    May 24, 2017 at 15:56
  • Does that click able bubbles helps zoom in? or it does something else? If so what do it do?
    – divy3993
    May 24, 2017 at 17:05
  • Hello @Alvaro, the mouse wheel does not affect the zoom, as it is already used to scroll down/up to navigate to other modules in the product. Jun 19, 2017 at 14:16
  • Hello @divy3993, the click opens the "bubbles" that make one big bubble and adds breadcrumbs on top to show navigation. Jun 19, 2017 at 14:19

3 Answers 3

2

You might consider letting the user know where they are, spatially speaking, using a navigator pane akin to that in Adobe Illustrator.

Navigator Pane Suggestion

Note I've taken the zoom slider from this blog post from Gimp's UI team.

The benefit is that the user does not have to zoom back out to navigate to a different area.

Change to the 'Drag' cursor upon hovering over the active area in the navigator to let them know they can drag it.

This is at the expense of screen space however, and might conceal information underneath.

1

Show Click-ability with Hover States

Users will intuitively mouse over the objects. You should provide some feedback, in the form of a hover state (shown below as a circular highlight), when they do.

Show Zoom-ability with a Zoom Slider

The UI control that conventionally communicates "You can zoom in and out on this page" is the (usually vertical) slider, shown in the image below.

If it's also possible to zoom with a mouse or keyboard keys, you might consider showing a tooltip when the user interacts with the zoom slider, briefly explaining the other options.

enter image description here

Here's the image I stole the slider from, which I found by Google Image searching 'zoom slider control'.

enter image description here

1

What about changing the cursor into a magnifying glass? And of course, elements' feedback on hover... Always! :)

1
  • We did that, and in usability testing we have done, we see that users try to click to zoom, instead of using the box-zoom functionality. Jun 5, 2017 at 9:36

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.