Great job on the implementation, examples, and documentation, but personally I don't like these kind of buttons. They don't look like buttons. Take the text away that usually specifies an action (like 'download', 'submit', 'buy now') and all you have is a rectangular coloured box.
I really do appreciate the critique and the compliment.
A few months ago I've been really searching high and low for a simple library to recreate those buttons Microsoft uses on their websites. I do agree, it really doesn't look like buttons when you take away the text. Well anyway, I decided to build one for my own. Just shared this v1.1 release to everyone here at hn. Just maybe, just maybe, someone out there also needs a simple button/form library for such a specific need.
The release kind of addresses some issues, because some people keep contacting me at twitter or fb asking me "how-to's", so hopefully most of their 'needs' are met :) Really tried to make the documentation a little eye friendly for everyone.
I for one am a fan of the Metro look. Whether I'd ever use it on a client's site, that I can't say but for my own creations I simply adore the look. Awesome work!
Can you maybe point me towards any other metro UI libraries you may have found?
Both are full-blown frameworks with grids and everything and I've tried them out for my needs, but most libraries are too over the top. I needed something more stripped down for buttons that can work with Bootstrap or with my own handmade disaster.
Oh of course, I don't mean that as a dig towards you - it's great that you found something that was needed and implemented it yourself, which you've done very well. I guess it's more towards Microsoft for taking a concept that is relatively well ingrained by now (I'm referring to buttons with bevels, gradients, and shadows), and turning it on it's head in a seemingly backwards way.
This isn't about skeuomorphic design or lack thereof. Take a look at the examples page, at things like button groups or button strips. They're grey rectangles, and the only way to tell that they're clickable buttons is if you mouse-over them. This is a problem on a touch device because there's no way to trigger that state.
In fact, each example group has a grey rectangle in the top-left corner that says "Example" and the distinguishing feature is that it uses a bolder font in a lighter shade of grey. But otherwise a user might think it's also a button. So I guess when you say it's got to be incorporated into a Metro-style design, you just really can't have any other colored rectangles on the page anywhere lest they be confused with input right?
I'm not saying this to be critical of the author. I think he/she did a fantastic job, and the buttons look really well done for Metro style.
> This isn't about skeuomorphic design or lack thereof
"They don't look like buttons" is a complaint about lack of skeumorphism. An extremely common and accepted case, but a case nonetheless.
Metro-like buttons do not look like 'real' buttons and, embedded in non-Metro content, don't look clickable. In a properly designed Metro UI they are unmistakably clickable and work fine in touch devices. Metro is still relatively new and takes some getting used to in the wild. But hey, there was a time when people complained about the lack of underlining in the text of button-looking clickable elements in web pages.
You are right also, in Metro a colored rectangle with a symbol and/or a short word is meant to be clickable. Non-clickable elements should look clearly different in content or in styling. That is fine.
Note: I'm not trying to defend Metro as 'better' or 'worse', only emphasize the fact that it's different.
I'd argue it's not so much about skeuomorphism as much as it is about affordance. They don't look like you can push them and interact with them, which means you need to be much more careful about the context and design language you use them in.
They do look clickable when in context. Verbs such has "Delete" signal to me, regardless of how much gradient or border-radius an element has, that it is in fact a button. As do actionable icons like a trash can.
But affordances (such as bevelled buttons) are not the same as skeuomorphic design. Bevelling an area of the screen implies that something is pressable and hence aids the user. Covering iCal in a fake leather bitmap does not help the user. WP7/Metro seems to have taken a lot of tried and tested affordances away, but hasn't really replaced them with anything.
You're right of course, but if you take that to the extreme, styling a clickable action with a coloured square is skeumorphism too (it's still a button). The way I see it, the concept of a button has long since tracended into a metaphor in the visual language of UI. Where it used to mimic the physical world, it has since been reduced to a symbol. I think that most people would say that the beveling effect is part of this symbol. If that is the case, then Metro tries to redefine an established symbol. This isn't unique per se - languages evolve all the time, but it does explain why a lot of people might be confused of it.
