2

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. enter image description here

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

  • 1
    Asking a question about the affordance of a flat button is fine. Asking for feedback on your design or solution is not, as it falls under a "site review", which is not allowed. – JohnGB Aug 2 '16 at 9:50
  • @JohnGB okay.. Thanks for pointing that out! My bad :) New here. – Harsh Gopal Aug 2 '16 at 10:05
  • That's why I edited it rather than close it. Everyone is new at some point :) – JohnGB Aug 2 '16 at 12:40
2

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:

enter image description here

  • Thanks for explaining with examples. :) I went ahead with the "flat shadow" one. – Harsh Gopal Sep 6 '16 at 3:29
1

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.

1

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.

0

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.

  • Hi Adnan, Thanks for your comment. in the edited version, I have added icons which when clicked show a small description of the "Service". Does this help?! thanks in advance. – Harsh Gopal Aug 2 '16 at 7:36
0

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

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/

  • 1
    Ah, your comment introduced me to jsfiddle. :D Thanks a lot! – Harsh Gopal Aug 2 '16 at 7:37
  • The shadow you used in your fiddle is not flat at all. You are saying it yourself 'I used shadow effect with inset shadow to give the button more roundness on the edges.' Round is not flat. – Summer Sep 1 '16 at 10:58

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.