We are in the process of redoing our company's website. One element which is absolutely required is this (Text has been removed just in case):

Puzzle control element

Each of the eight pieces around the edge, the inner ring, the four pieces inside of that, and the center circle are all clickable elements and will animate (scaling, mostly) to indicate they are selected. Selecting an element also causes the text surrounding the control to change based on the element selected.

The issue we are having is how best can we both indicate to users and allow them to deselect the selected element. Selecting a different element will deselect the currently selected element, but we also need the ability to just deselect the currently selected element, since there is default text that we should be able to revert to.

Our current suggested options are just deselecting on a click outside of the control, and having a button specifically labeled to deselect any element. The first runs into problems with mobile users, because the element takes up most of the screen, and attempts to scroll may accidentally deselect a chosen option. The second just seems clunky, and requires adding an additional element to what has already been designed.

What other possibilities are there that we haven't thought of, and what would be considered the best from a usability standpoint?

Additional Info: The element is something of a showpiece, and it also is meant to be a visual guide to our major service offerings, which is why it is required to be used. All it does is change the text surrounding it when one of the pieces is clicked. The text is general information about that service offering and will also include a link to the detailed page for that service in the text.

I know very well that this can be considered a "mystery meat" type control and will likely see little use by actual visitors to the site. This was already decided before the project involved my department, and I'm just trying to salvage it as best possible while including requested functionality.

Unfortunately, the default text does not match up with any of the pieces of the element, so that is not an option we can use.

  • The way you’ve described the problem leaves out everything about what you’re trying to accomplish and why. Since we don’t know the objective, or the rationale behind your solution so far, we have no basis on which to offer helpful feedback. Any feedback you do get will likely be misleading. Jul 30, 2015 at 16:59
  • @DanielDeLaney Updated the question with more information. Hopefully this clarifies what I'm trying to accomplish, if nothing else.
    – ndavis
    Jul 30, 2015 at 18:11

3 Answers 3


What directly comes to mind is a second click. Click once to 'turn on', twice to 'turn off'. Just like how many on/off switches work in the real world.

However, I feel like I should tell you that this doesn't seem like good navigation, though. First of it can be considered mystery meat navigation as it's not clear what does what or even that it's interactive and not a logo. Secondly because it takes up a lot of space like you mentioned.

  • I agree with the control not being particularly good navigation, but my hands are tied. The use of this control is mandated by C-levels, and I am not in a position to convince them otherwise. It's only used on the main home page, and we have a more standard menu system for general navigation.
    – ndavis
    Jul 30, 2015 at 16:31
  • Yea, click-on and click-off seems the simplest. The design should clearly show active, down and up states for the pieces. If this widget ever makes it into the mobile view, the tap-on, tap-off behavior will work well.
    – RobC
    Jul 31, 2015 at 17:35

How important is the "default text" for the user? Assuming it's not terribly important, you might not even need the ability to return to it.

But if you do, perhaps you can consider something akin to a back button on an app that appears next to the content title. Or perhaps even on the selected puzzle piece.


Have you considered assigning the default text an element in this control? If all elements are taken, consider using the center of the circle, perhaps adding an icon there that's in the 'selected' state on page load. That way there's consistency in the way the user controls what content is loaded on the page.

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.