9

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

enter image description here

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.

  • Welcome to stackexchange. When asking a question please try to be as specific in your question as possible. Try describing what you want to know – also using screenshots or wireframes is ok – but please avoid forcing others to ckick on a link to understand your question – especially if it links to a store page. Questions like "How can I do this?" or "Please review my interface" are usually not very likely to get a lot of attention from the community. – tillinberlin Apr 18 '15 at 17:19
  • 1
    I'm voting to close this question as off-topic because it belongs on GraphicDesign.SE – Vitaly Mijiritsky Apr 19 '15 at 5:42
  • @VitalyMijiritsky I see where you're coming from in terms of being a GD question but it's also a UX related question in terms of methods of providing affordance and intent. The graphic design aspect has to be involved of course because this is a visual problem, but that doesn't immediately kick this ball over the fence into GD territory. – Roger Attrill Apr 19 '15 at 10:36
  • @RogerAttrill I agree that it's borderline.. For me it does fall on the other side of the fence, but that's just me :). – Vitaly Mijiritsky Apr 19 '15 at 10:42
8

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:

enter image description here

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.

| improve this answer | |
1

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.

| improve this answer | |
1

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...

enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.