Does the shadow effect for "Managed Services" make it look tap-able?
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.
Use an icon indicating follow up (such as an arrow)
Use a flat shadow to create a more clickable look
Use textual guidance such as 'read more'.
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:
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:
- 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.
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.
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/