How to make people understand that a flat button is to be tapped/clicked

Question

Have this tiles in the mobile version of a website I am designing. In the web version, the mouse hover would reveal a brief description, but how do I make the tile look clickable/tap-able to a user.

Does the shadow effect for "Managed Services" make it look tap-able?

Answer 1

There are multiple things you can do to make a flat designed button more attractive for the user to click on, even on a mobile device such as you are designing.

These are a few tips that you can use. You can also try combining them.

1. Use an icon indicating follow up (such as an arrow)

2. Use a flat shadow to create a more clickable look

3. Use textual guidance such as 'read more'.

4. Using a more recognisable button shape. Squares are not the first thing one thinks of when seeing a button.

I made a quick sketch to visualise these tips:

Answer 2

The shadow don't make the card look more tap-able, it make it look active/ in the hover state.

If you obtain that effect, change the color of the text, make it underline or add a button with "see more", even all the card is wrapped with the link.

Answer 3

As Flat Buttons are becoming the latest trends, you can use Shadow effects to make it look like Tap-able.

Or on Hover you can change the color. so, it will indicate to the user that it does something.

Or changing the cursor could help.

Answer 4

From the tile/ card titles I take it your users are getting introduced to your product, or at a very early stage of their interaction with it. If that is the case, you need to add more context to your cards. Context comes in various shapes:

• Imagery
• Current state icons
• Brief descriptions
• Icons that describe further actions to be taken.

To make things clearer, you can also assign a smaller section of the card as a button, while keeping the entire card tappable.

Answer 5

Your options:

• Use animation / motion to make it clear that the object can be interacted with.
• Icon indicating the follow-up step (such as a + or >)
• Clarify the action: Click here, read more, etc

Answer 6

I personally like shadow effect. It does make it hover, but the flatness still remains. I have used shadow effect with inset shadow to give button more roundness on the edges.

https://jsfiddle.net/kd1sbwnn/3/

Update: Thanks for all your advices and help! Have made the slight change as shown below. Once the user taps a tile, a small description is displayed. Does this look any better?!

What I would have in mind:

• Minimize clicks/taps that user has to do for navigation
• Pictures can be more descriptive than a words

I don't like that mobile version where user needs to tap twice to navigate (tap once - description appears and tap second time to navigate).

I recommend for the mobile version to add a picture and a button name. Maybe something like this: https://jsfiddle.net/kd1sbwnn/7/