How to give user ability to clear selected state of control?

Question

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):

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.