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