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

Question

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.

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.

---

UPDATE

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.

Answer 1

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

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. http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons

Answer 2

The problem is it's not flat enough

Are they icons or buttons? This is a common problem with flat design (see other answers) but one possible solution I haven't seen here yet is to remove information until the only viable option is to click. Think tiles.

...And at this point it should also become obvious that </> never was a suitable icon.

Answer 3

i thought of something like showing the first skill and let the user figure it out himself, that the others are clickable / tapable aswell

(sorry I din't have much time on my hands to do this, but it may help)

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 4

How about using a visual cue that users are most likely used to: an underline? Below is an example with solid underline and a dashed one.

Answer 5

material design is good but they're not flat perfectly. I recommend you this, my ideal flat button

p/s : if you want people consider something is a button, you need provide them "label" and "icon".With these two elements, most of users will know "ah, there's a button, let's click"

Answer 6

On a mobile device, the current design trend uses this. Users have become familiar with the touch method to drill down for further information without having to be explicitly told to do so.

Also, a "pointer" on a mobile device is redundant since there is never any other input device other than your fingers.

Keep the simplicity and elegance of your design. The only suggestion would be to perhaps increase the contrast between the two shades of blue.

Answer 7

A few suggestions:

1. Make the Label Visually Part of the Button

• Labels are usually part of a button
  
  

2. Add a Light Border (optional)

• Highlights without necessarily adding depth
  
  

3. Group the Buttons Together Comfortably

• Make it feel like a group of buttons, each of equal importance
  
  

4. Use a Bolder Font Weight

• The icons are quite chunky, and imo don't balance well against a light typeface
  
  

Unpressed / Pressed Button Examples:

Answer 8

I agree with both Long and DesignerAnalyst that a bit of styling makes them pop more as buttons.

While I like the icons in your edited version, I would suggest adding the text below the icon, for those who may not know what the icon means.

Icons are great when their meanings are obvious, but I program in JQuery and Javascript everyday, and didn't automatically recognize the icons.

Answer 9

There are a lot of answers, but I don't think any of them have got to the heart of flat design yet. The problem in flat design in not how to make things look like a button. The whole idea is that the metaphor of the 3D button is becoming old fashioned. I think there are plenty of children being born now, who will press a virtual button on a touch screen before they press an actual tangible button.

Metaphors are visually noisy. The challenge of flat design is to get rid of the metaphors, while keeping the design usable.

So if you want to create a proper, modern flat design experience, you need to make sure that your clickables look clickable, without making them look like buttons. The main rule/convention is that clickable elements should demand the most attention. We have the following tools to achieve this:

• Use contrast Your background now has greater contrast with the button's white than the button color. This is the main reason your design looks non-clickable. Switch the background and button colors.
• Use bright, primary colors: See above.
• Use white space: Make sure you keep enough white space around the button icons. The bigger the margins the more attention the element gets. Especially if those margins are filled with a bright color, that contrasts well with the elements inside it.
• Use bold text: White text on a dark background should be bold anyway, but on a button, this goes double.
• Put the text inside the button: The colored box should encapsulate everything to do with that clicking option. Put the text below it, and you're asking the user to map the text to the button.
• Rounder corners: Some flat design purists (BBC, Microsoft) will go for hard corners, but if you're not willing to go all the way, the rounded corner is a very strong convention for clickability.

Here's my redesign:

You may note that it still doesn't look that clickable. Why not? I think it's because six buttons is not a very conventional way to depict a list of skills. The user simply doesn't have a clear place to go at this point. In fact it's quite rare to have six buttons next to each other at all. Usually, when you make this type of button, it's the single most important element on the page. I think that's why your design looks like a list of icons.

To really get at the heart of the problem you might consider have another look at your overall design. Figure out what the user wants to do at this point. Perhaps something like content-based navigation can help you out.

Answer 10

You could also give a textual clue

You could change "more information" to something more specific

Answer 11

One option I have seen used (depending on these icons size) is a small picture of a mouse (basically a vertically extended oval with a division on the top for the two buttons) within each image icon.

Answer 12

Material Design concept can probably help you.

Its principle of layout by priority action which principal behavior is to have shadow between layout to show user what is over what help to differentiate object and add affordance

http://www.google.com/design/spec/material-design/introduction.html

So add little shadow at your button make is interactive by hidding shadow on press action. Add rollover response if it is computer displayed and you will more help your users.

Answer 13

Your first image feels like a gallery: each icon has a label (and it's not clear that images are clickable)

You could simply try to move the labels inside the buttons (even with you first set of icons, it should be enough). This way, it should feel more like a button.

After re-reading, it appears to belong to @Dom propositions

Answer 14

Keep 'Em Simple, Smarty

K.E.S.S.
You, as a developer, set the stage; but the user is the real performer. Two different skill sets. They complement each other, and harmonize.
Your app will have a set of expectations ~> like an online résume implicitly demands this sort of interaction. Clicking, and such. Your user will understand what you want as typical.

Here is my additional feedback to your question:

• Keep explicit labels with your button icons.
• Make hovered buttons grow. This will verify what the user intuitively has deduced.

Good luck!