1

I'm building a game which will use quite a lot of flat UI elements and colors. This is my first ever time doing flatUI, and I want to make sure that I don't over do it. I read that flat UI uses bold colors and subtle gradients to indicate that elements are interactive.

I'm including an image of the inventory screen. It's really busy and has a lot of elements, and I want to make sure that my flat UI buttons won't get lost or be perceived as noise. This is why the close button in the corner is screaming red.

Other things I tried:

  • Added 2px rouned corner
  • 1px golden outline
  • Dark red background

But now I'm facing a problem - there are 5 potion buttons under the character model, and golden border around them seems dizzying, because they are so long. I'm including an image of what they looked before.

How can I indicate that UI elements are tappable when using flat UI without overdoing it?

enter image description here

enter image description here

Improve this question
1
  • 2
    Flat doesn't mean you should ignore basics of web design. Flat design is just a design trend. Always think of basic principle, anything which is clickable should be standout. You can do following thing: 1. Add slight bevel on buttons(refer facebook) 2: Make BG less saturated and clickable items more prominent 3: Use white space around clickable items so that user can quickly scan the page or screen. Quick tip: After creating high fidelity design go to Photoshop apply 1px Gaussian blur and see if the action buttons are clearly visible. If not add more white space around and play with colors.
    – UXbychoice
    Commented Jan 7, 2014 at 7:08

2 Answers 2

Reset to default
4

You have quite distinguishable button style, e.g.:

enter image description here

So use this style for the buttons, or just apply it to some part of long button. It will be consistent solution.

Improve this answer
3

Not to get all existential but since this app looks more tappable than not-tappable it might be worth focusing on distinguishing the non-tappables instead, especially if there are far fewer of them.

I feel like in general there's an expectation of clickability on non-text on a touch device but maybe that's just me.

Improve this answer

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.