81

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

200_success
  • 2,301
  • 2
  • 16
  • 18
pistou
  • 913
  • 1
  • 7
  • 9
  • 1
    Related: Can a mobile application be made using a totally flat design? and Mobile WebApp - Gradient vs. flat regarding UX – Graham Herrli Dec 11 '14 at 13:53
  • 15
    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
  • 1
    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 </>... – Vi. Dec 11 '14 at 17:16
  • 1
    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. – Esteban Dec 11 '14 at 22:05
  • 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 04:04
  • 1
    Are you trying to maintain the flatness, or is a little skeuomorphism acceptable? – James M. Lay Dec 12 '14 at 07:32
  • @JamesM.Lay As much flat as possible – pistou Dec 12 '14 at 08:43
  • 1
    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? – the other one Dec 12 '14 at 11:14
  • 1
    @theotherone It is the official CCS 3 logo. All theses icons come from font-awesome (http://fortawesome.github.io/Font-Awesome/icons/) and I couldn't find any relevant icon for PHP / JS / JQuery (for now at least) other than </> – pistou Dec 12 '14 at 11:17
  • 1
    @TouPye, there's always this: http://7php.com/pimg/2014/01/elephpant_281_193.png – fri Dec 12 '14 at 11:30
  • For jQuery, I'd recommend to use $() or their logo; for JS maybe the community logo (although not in yellow) – Bergi Dec 12 '14 at 12:42
  • 4
    It's an inherent fault of the "flat" design. – Hot Licks Dec 12 '14 at 13:26
  • Echoing @Bergi 's suggestion, while not related to your question, yes $(), <?php> 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. – corsiKa Dec 12 '14 at 13:39
  • 1
    @Bergi : I will probably switch to pictonic which provides free icons for these skills. But as mentionned, this is off-topic – pistou Dec 12 '14 at 14:13
  • 1
    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. – Arthur Harrison Dec 12 '14 at 20:36
  • 50
    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
  • 9
    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
  • 1
    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. – Phillip Quintero May 21 '15 at 14:40
  • 1
    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. – DocSalvager Feb 06 '16 at 03:08

14 Answers14

65

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

Zoe K
  • 4,958
  • 17
  • 21
  • 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 04:26
  • @PeterOlson: there's a slight difference in color. Normal color: 500 Hover color: 600 Pressed color: 700 – Zoe K Dec 12 '14 at 07:20
  • 44
    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 C Dec 12 '14 at 07:30
  • 1
    @VinceCgto I actually agree with you on this. – Zoe K Dec 12 '14 at 07:35
  • 1
    @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. – Matt Dec 12 '14 at 15:17
  • Live demo: https://www.polymer-project.org/components/paper-button/demo.html – Ajedi32 Dec 12 '14 at 15:45
  • 3
    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". – Hardrada Dec 12 '14 at 17:44
  • 4
    According to Google (direct link to image), a pressed button rises up. – A.L Dec 12 '14 at 17:46
  • 3
    @A.L The World According to Google, a novel by Mark Pilgrim, et al. :) – Agi Hammerthief Dec 12 '14 at 20:36
  • 3
    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. – Vince C Dec 15 '14 at 07:34
  • 5
    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
  • 3
    @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. – Rumi P. Jan 25 '15 at 18:06
  • http://en.wikipedia.org/wiki/Flat_design – Wyrmwood Jan 26 '15 at 01:59
  • 2
    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 Jan 26 '15 at 02:01
  • 2
    @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 Sep 23 '15 at 06:13
  • @DA01 Then those who think so should edit the wiki page; which clearly states the opposite. – Wyrmwood Oct 04 '15 at 04:17
  • 1
    @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. – DA01 Oct 04 '15 at 07:21
  • 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. – tekin Jun 05 '17 at 13:17
  • 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. – Madalina Taina Jul 17 '18 at 15:10
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.

Alex Shroyer
  • 517
  • 3
  • 8
  • 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. – Alex Shroyer 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. – Alex Shroyer Dec 15 '14 at 01:59
  • Oops, I just realized that the original source image's buttons have subtle outlines, which could indeed look like highlights or shadows. – Alex Shroyer Dec 15 '14 at 02:02
12

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

Pascal
  • 756
  • 4
  • 10
  • 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
  • 5
    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
  • @Pascal Sure but your CV should be tailored towards your strengths and it doesn't really make sense to try to measure your strength just as a percentage. "I'm good at PHP but I've never used it to interface with System XYZ" is a much more meaningful statement. – David Richerby Dec 15 '14 at 15:48
  • Percentages on a CV are a bad idea and almost always wrong. Info on time using a technology and projects worked on plus links to code are helpful, but a real-world programming exercise and lively discussion on the day of interview to discover the reality of a candidate's abilities cannot be beaten. – Nick Oct 10 '18 at 16:31
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

fri
  • 591
  • 1
  • 3
  • 10
  • 1
    Or use ellipses. – Mazura Dec 13 '14 at 02: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
8

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"

Long Eleven
  • 107
  • 2
  • 17
    I don't see how an object with 3D shading can be considered perfectly flat. – fri Dec 12 '14 at 09:17
  • 1
    because it's awesome I guess :D – Long Eleven Dec 12 '14 at 09: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 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 – S P Dec 13 '14 at 12:23
  • @IgnazioCalò : this is not really ux problem, this is UI issue. – Long Eleven Dec 15 '14 at 06:26
  • @LongEleven It is a as much of a UX problem as it is a UI too. You are fixing a UI issue to improve the UserXperience! – Mo'ath Oct 05 '20 at 18:20
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.

Arthur Harrison
  • 301
  • 1
  • 6
  • 7
    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
  • @Jim excellent example! – Mo'ath Oct 05 '20 at 18:21
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:

Community
  • 1
Dom
  • 657
  • 5
  • 12
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.

Andrew Neely
  • 634
  • 4
  • 7
3

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.

Peter
  • 4,813
  • 1
  • 22
  • 27
2

You could also give a textual clue

You could change "more information" to something more specific

Textual clue

Viktor Mellgren
  • 565
  • 1
  • 3
  • 14
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.

Michael Durrant
  • 471
  • 3
  • 8
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.

pierre lebailly
  • 316
  • 1
  • 5
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

oliverpool
  • 111
  • 2
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!

Jedi Commymullah
  • 306
  • 1
  • 5