Using a back panel image as navigation

Question

I wanted to get some opinions and feedback on using an image of a back panel for navigation. In our current UI we have a setup of a appliance. The appliance has a number of ports and some need to be configured.

Note this is not the exact back panel but looks similar

Right now the interaction is that you click on the port that you want to configure and then we display the configuration settings below. For example if you clicked on the port #8 in the image above, we'll display config settings for port 8.

A few things to note, not all ports are configurable, but the ones that are, we highlight them. So on hover the user will get a mouse over and then on click they'll see the config for that port.

My concern is that it's not very discoverable. The user first has to decide what they want to configure and then find it in the backpanel image and click on it. I'm thinking a list or a hybrid approach might be more appropriate.

What's the community's feedback on this?

Answer 1

Use an all time visible list, and if it's not configurable - say so! This would look like

1. AC input - not configurable

2. DIN input - configures by ...

3. DIN output - configurable using ...

4. USB ports - not configurable, but can be used for installing devices

   ...

This is what I would do

Answer 2

Rather than on hover discovery, turn all the non-configurable ports grey so they blend in with the image. So all the ports which are visible are configurable.

Answer 3

May be you could demo the UI by displaying it with one port's data pre-opened.
After, either the user realizes that she can click on the other configurable ports, or if she's not audacious she can click one of the small [←prev], [close] and [next→] buttons in the displayed panel attaining the same result.
It would be interesting to track those clicks in order to get to know what did they prefer. And, you might want to store the status in a cookie assuming that a relevant number of users will come back, perhaps losing the demo effect.

Or ... Once upon a time I had a they-might-not-discover UI case and made a big image of the pointer arrow and flashed it briefly over the clickable or hoverable elements. But I don't know if it worked.

Answer 4

Use a design element to treat the ports like tabs - have one that is clearly shown to be 'selected' by default and display the relevant config data below. This indicates to users the ports are navigation elements.

I would also suggest to 'grey' or 'fade out' the rest of the back panel elements to indicate that they are not relevant.

I'd also provide a list of the port names so that users searching by name can also navigate.

Answer 5

Back in those pesky Flash days, we would play an animation showing the "on state" for a menu - then animate a cursor and whatnot - might be worthwhile here.

You can also add a type of "pulse" or "undulation" effect to the elements...might be over the top. A lot of sites with shopping carts for these types of things also have bordered boxes around the areas you can click/hover. These are usually presented as the product first. Then the boxes (which act as the hit areas) animate into place as a feedback mechanism for users to kind of understand that the image has changed from passive to interactive (car manufacturers come to mind, but I have no demo for you, and it would eventually disappear - if you would like images, I can set aside time to make them).

This sort of interactive menu probably shouldn't be the only way to get to this information - for accessibility concerns alone. So, having a secondary list menu, is a good idea as well.

In conclusion, the page could load with the image and the list. The "bounding" boxes around each configurable component can animate onto the image. After the bounding boxes are "live" - preselect the first component; thereby, altering the state of the first list item, the bounding box fills in with a color, the configuration message appears. With this type of setup you will want to ensure, as much as possible, to group all these elements together on screen at the same time. Maybe the panel spanning the top, the list to the left under the panel, and then the instruction copy to the right of the list but under the panel.

Hope that helps and kind of summarizes well what others pointed out too. Again, if you would like images/wireframes made or further explanation, please let me know.