76

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.


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.

enter image description here

  • 14
    FYI, the properties of something that imply to people "you can do something with this" are called "affordance". The more you know! – DawnPaladin Dec 11 '14 at 14:12
  • 3
    @Vi. </> is used as a symbol representing code, and it usually refers to HTML, but is often used for any web-related programming stuff. – Rahul Dec 12 '14 at 4:04
  • 4
    It's an inherent fault of the "flat" design. – Hot Licks Dec 12 '14 at 13:26
  • 46
    No, don't delete the text labels! The meanings of the "5", "3", and AT&T look-alike logos aren't that obvious. – 200_success Dec 12 '14 at 21:32
  • 8
    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. – Kaz Wolfe Dec 14 '14 at 10:27

14 Answers 14

64

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

  • 5
    Wow that resource is awesome! – Hugo Dozois Dec 11 '14 at 22:25
  • 11
    Is there any difference between normal, hover, and focused? I can't see it. – Peter Olson Dec 12 '14 at 4:26
  • 41
    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). – Vince Caregnato Dec 12 '14 at 7:30
  • 4
    According to Google (direct link to image), a pressed button rises up. – A.L Dec 12 '14 at 17:46
  • 4
    A flat design has no shadows, bevels or gradients. This is essentially a 3d answer to a 2d question. – Wyrmwood Dec 15 '14 at 15:54
17

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.

supa flat

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

  • I should have mentionned that </> icons were temporary. Thanks for the advice, I ill give it a try – pistou Dec 12 '14 at 15:17
  • 4
    "The problem is it's not flat enough". Should that be... "The problem is it's too flat"? The original design is completely flat. Your enhanced icons have subtle 3D (hightlight/shadow), so are less flat. – MrWhite Dec 12 '14 at 18:54
  • 8
    wat? My "enhanced" icons simply cropped the text from the original and squished it all in tighter. No shadows or highlights added. – hoosierEE Dec 12 '14 at 18:55
  • 5
    It looks like there are subtle highlights and shadows. This is probably caused by the effect discussed in this question over at Graphic Design SE. – David Richerby Dec 14 '14 at 13:04
  • 3
    Very interesting link, thanks. Although I think it must be purely an optical illusion here. The colors and transitions are identical to the source image, so it must be our brains "inventing" highlights and shadows, or at least making them more prominent here. – hoosierEE Dec 15 '14 at 1:59
11

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)

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • This is a interesting idea, I will give it a try. Since there could be more great ideas, I will let the question open if you don't mind – pistou Dec 11 '14 at 13:48
  • absolutley no problem :) good luck on the job hunt (if its yours ;) ) – Pascal Dec 11 '14 at 13:49
  • 4
    I don't think that would be good design for a CV. A CV should focus on what you can do but the big white areas on the "progress bars" give the opposite impression. Why would you hire a guy whose CV seems to be saying "I'm only 75% good at PHP"? – David Richerby Dec 14 '14 at 13:06
  • @DavidRicherby This is an interesting point of view. How would you say it in a positive way ? I mean, who can say "I'm 100% good at everything" ? Either liars or geniuses (IMO) – pistou Dec 15 '14 at 15:31
  • Where I'm from, knowing your limits / weaknesses / points to improve is a BIG plus while looking for a job.. (at least thats what HR told me lately) :) – Pascal Dec 15 '14 at 15:43
11

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.

enter image description here

  • 1
    Or use ellipses. – Mazura Dec 13 '14 at 2:04
  • 1
    Yeah, this was exactly my thought after reading the question. I always use dashed underlines for anchor/modal links and solid underlines for links to other pages. I don't really prefer the use of underlines for hover tooltips, because to me an underline says "click me" - I'd reserve the use of an adjacent icon to indicate a tooltip. – Phil Tune Dec 15 '14 at 23:04
  • 2
    I personally prefer this kind of affordance, but isn't this the opposite of Material Design? I thought Material was all about taking away this kind of affordance and making it harder to tell which rectangles or text are interactable and which ones aren't. – AlexC Apr 13 '16 at 10:48
  • 1
    @AlexC there is no mention of Material Design in the question. – fri Apr 14 '16 at 11:43
7

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.

  • 6
    I disagree - users don't always think to use "touch" if it doesn't occur to them that it would respond. For example, if the previous screen said "Skills" this may appear to be a list of skills and then the user hits "back" or "home" thinking they are done. – Jim Dec 13 '14 at 15:38
7

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

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"

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

  • 16
    I don't see how an object with 3D shading can be considered perfectly flat. – fri Dec 12 '14 at 9:17
  • 1
    because it's awesome I guess :D – Long Eleven Dec 12 '14 at 9:37
  • 7
    This isn't really answering the question. You haven't said why this is suitable. Imagine a work situation and someone has been asked to provide a button design - they provide this, they're asked why they've chosen it and their answer would be...? – JonW Dec 12 '14 at 10:00
  • I definitely will not do this. Someone says "ux is like a joke, if you have to explain it is not so good". – Ignazio Calò Dec 12 '14 at 18:16
  • 5
    @IgnazioCalò, while that's a great idea when you're talking about a user, but with a client/boss, I think one should be able to explain and back-up every detail – Sathvik Dec 13 '14 at 12:23
6

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:

5

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.

2

You could also give a textual clue

You could change "more information" to something more specific

Textual clue

  • Wouldn't Tab on a skill... be better? – Knerd Dec 12 '14 at 14:52
  • Since the one asked used the term "click", I just used the same. The "device neutral" action would maybe be called press/select/activate/hit/choose – Viktor Mellgren Dec 12 '14 at 16:12
  • 9
    Nope. If you need to put usage instructions on the screen, you've already failed (plus users are unlikely to read them) – Piskvor Dec 12 '14 at 16:44
  • 1
    I would add "choose" – Ayyash Dec 12 '14 at 18:49
  • Sure; many mobile apps use "Tap here to ..." if the button is not too obviously a button. As a user I would definitely prefer outlined (non-flat) buttons though. – Mr Lister Dec 15 '14 at 10:34
2

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:

enter image description here

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.

0

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.

0

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.

0

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

0

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:

enter image description here

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

Good luck!

protected by Community May 21 '15 at 6:43

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.