How to convey that an indicator is clickable

Question

We made an app that analyzes your driving behavior and generates a score for it:

One one of the screens you can see score circles in blue/orange/green/red (click to enlarge):

When you click on one a pop up comes giving more details about the specific score.

What we're trying to figure out is a way to make it clear graphically to the user that the circles are clickable, so far we've looked at 3D type icons with bevel/shadow but haven't been able to find the right ones.

We're not married to any particular way of doing it, there doesn't need to be circles at all, just looking for solutions that jibe with the clean/minimalist look of our app.

Answer 1

The problem is in having something that looks flat and yet stands out enough to look touchable.

To add touchable cues you need to put some kind of border around each independently touchable thing - to separate it from the adjacent touchable thing, and to make the figure stand out from the ground.

Google's material design principles provide some inspiration to do this quite nicely without adding heavyweight design elements. Simply add shadow to raise layered elements away from the surface behind. In this way, the shadow acts as a border without really being a border. Instead it looks like a physical or spatial separation and giving a 'card-like' appearance which seems all the rage at the moment!

Here's an example:

Note: I didn't have the same fonts to hand. I reduced the number of words to increase the minimal look as well as accentuate the 'formula' relationship between the first three measurements and the total, rather than making the total actually bigger.

Answer 2

Observations

• Flat UI's a problematic because it's hard to tell which elements are interactive.

• This is particularly true with visual widgets/gauges, because you are overloading the widget with more than one function:

  • Users see the gauge and assume its purpose is informational, and (rightly) don't think about it having more than one purpose.

• You have a cluttered interface with a lot of high contrast borders, fonts, and multiple colors. on top of that, you've got a map (which is itself complex by nature). So that is a lot of cognitive load and distraction for a user.

  • This makes it even harder for users to think about the gauges as interactive, because there is so much noise around the console.

---

What to do?

I think a solution here requires both of:

1. Calming the interface. Reduce the complexity by lowering contrast for non-essential elements, reducing the color palette, and number of fonts and font sizes onscreen. This will help users perceive the interactive controls better (and also make for a less stressful experience overall)

2. Provide extra affordance to communicate that the gauges are buttons. You need to overcompensate here because you are overloading them with more than one function. Adding a drop-shadow or a bevel will help do that.

For example...

Answer 3

It appears that your app's UI follows the Material Design principles. One of the key insights from Google's Material Design is to reduce interaction on a particular screen to a single button, and give it prominence.

You need to reduce information displayed on your screen. This is likely to increase the amount of interaction you'll experience from users (purely guesswork here, you got to see the metrics) because you can introduce a certain amount of curiosity.

What if the space is used to give the user their total score, which is shaped like a clear button and the further breakdown is displayed on a separate screen? You might have to run it through some A/B tests but this would simplify your interface.