Make people understand they can click on a button in a flat design

  • I'm creating a flat-ish responsive website, which basically is an online résumé.

    I'm displaying skills (but it could be whatever) in a grid system. Each skill is clickable, to display some information about it (level, etc.).

    Here is a screenshot (from a mobile device view) of what I've made at this point. enter image description here

    I know, as the conceptor of the design, that it is clickable. However, I feel like it is not obvious - or not enough at least - for any random user.

    On a computer browser, it is easy to have visual change on hover, but on tablet / mobile, I can't figure out how to do.

    Does anyone has a visual trick to basically say hey, click on me? I think I could add a little pointer in the corner of each tile but I'm not sure it would look good.


    According to some suggestions, I have changed icons to be more relevant. Thus, I can delete the label.

    I also lighten a bit the background-color of buttons, in order to accentuate the constrat between the two shades of blue.

    enter image description here

    FYI, the properties of something that imply to people "you can do something with this" are called "affordance". The more you know!

    How does this `` thing is actually called and what single thing does it mean? I have seen it multiple times, but can't understand the meaning of ``...

    What I did was set a thin border, 1-2px, not more (it gets ugly) and its color to a more noticeable one, so the user thinks those are clickable. Hope it helps. Btw, nice design.

    @Vi. `` is used as a symbol representing code, and it usually refers to HTML, but is often used for any web-related programming stuff.

    Are you trying to maintain the flatness, or is a little skeuomorphism acceptable?

    @JamesM.Lay As much flat as possible

    what is CSS' backwards E? Why doesn't it have the standard of code/script? Is this just something filling in until you finalise and get unique logos for them all?

    @theotherone It is the official CCS 3 logo. All theses icons come from font-awesome ( and I couldn't find any relevant icon for PHP / JS / JQuery (for now at least) other than ``

    For jQuery, I'd recommend to use `$()` or their logo; for JS maybe the community logo (although not in yellow)

    It's an inherent fault of the "flat" design.

    Echoing @Bergi 's suggestion, while not related to your question, yes `$()`, `` or the elephant logo, and the js logo would help. Doing this, I think you would remove the need for text at all. If it were a resume I'd leave the text, but you've already directed them to your app, so you're not exactly on a resume anymore.

    @Bergi : I will probably switch to pictonic which provides free icons for these skills. But as mentionned, this is off-topic

    Beware of maintaining a consistent icon suite. Although these are all different things, the iconography set should be treated so they appear to all be part of the same family in this application.

    No, don't delete the text labels! The meanings of the "5", "3", and AT&T look-alike logos aren't that obvious.

    I agree with @200_success. The text labels are good to have. I had no idea what the CSS or jQuery logos were until I looked them up. Not everyone will know what those logos mean.

    Any way you can use colors other than blue? I looked at some examples of Microsoft's Metro UI to see how they deal with this problem, and buttons tend to stand out not only from the background, but from non-clickable elements as well.

    I'm sorry. I love all things Google... except Material Design for this very reason. With differences in lighting, devices, etc., I don't see anything that tells me there are any clickable buttons here. I would just start randomly tapping things to see what works.

  • Zoe K

    Zoe K Correct answer

    7 years ago

    The problem with your buttons is that they are not raised above the background, so they don't seem clickable.

    enter image description here

    I highly recommend the Material Design for details on how to choose between flat buttons and raised buttons, with exhaustive do's and don'ts.

    Wow that resource is awesome!

    Is there any difference between normal, hover, and focused? I can't see it.

    @PeterOlson: there's a slight difference in color. Normal color: 500 Hover color: 600 Pressed color: 700

    I absolutely love Google's Material Design, but I'm just not a fan of that PRESSED button. Pressing the button should move it visually towards the page instead of away from it. But right now it seems to 'pop out' even more (notice the bigger shadow).

    @VinceCgto I actually agree with you on this.

    @VinceCgto When a cardstock piece of paper is laying on a desk, and you press on a corner of it with your finger, the other corners pop up, away from the surface.

    Any larger shadow illustrates depth. On the Z, typically, the more "distance" the shadow has while still being underneath the element, the further away from the canvas it is. This means it's closer to the user, "virtually" speaking of course. The pressed button in this case is demonstrably incorrect as it reflects no known logical, real-world, physical item where pressed means to be cued as "UP".

    @A.L The World According to Google, a novel by Mark Pilgrim, et al. :)

    Yeah, I totally get the idea Google had, they probably even thought it was genius. But as @Hardrada states, it's a fundamentally flawed one.

    A flat design has no shadows, bevels or gradients. This is essentially a 3d answer to a 2d question.

    @Wyrmwood design does not always take words literally. A "60s dress" is not a dress produced in the 1960s. This answer provides a solution which keeps with the spirit of the "flat" design style, providing a very subtle 3d effect, just like a textured-surface business card is still considered a 2d object for most purposes. You are free to take the word "flat" literally, but then the answer becomes "sorry, it's impossible to get what you want", which is much less helpful.

    There's are several solutions posted that meet the requirements of a flat design. I never said it's not possible. This solution does not meet the parameters of the question.

    @Wyrmwood flat design, in the context of things like Google Material Design and iOS, has all sorts of shadows and gradients. There's no rule that flat design can't have shadows and gradients.

    @DA01 Then those who think so should edit the wiki page; which clearly states the opposite.

    @Wyrmwood there's a lot wrong with that article but FYI, the article has been edited to point out that it doesn't prohibit such things as gradients and shadows, just that it doesn't use them excessively. Also note that the article references Material Design and iOS7--which both use gradients and shadows.

    Google is not standard or criteria here. Material design is a design language it is not UX validation. The links are clickable too, have you seen them raised? Buttons are used for action, links for jumping to a part of or another page. I also think a raised button for pressing is against Skeuomorphism. Real world affordance is weaker. I might even think my action is not fulfilled. Shadows were a couple of years ago a no no. People were escaping from them. It is just a trend. I still don't use shadows may be inside when pressed.

    Haha, this is kind of amusing... If someone wants to use the flat design or another style, he needs to follow the specificity of that style. How is Material design the best solution for flat design? Change the color of the button's background in a darker blue and use the pointer cursor and it is enough.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM