4 ms·

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 awa

by highace 14y ago

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.

acesubido 14y ago
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. Thanks again man!
- highace 14y ago
  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.
- navs 14y ago
  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?
  - acesubido 14y ago
    For WPF (.NET) applications, I've personally used MahAppsMetro (http://mahapps.com/MahApps.Metro/ http://mahapps.com/MahApps.Metro/). For web, I've seen code52's metroCSS (https://github.com/Code52/metro.css/ https://github.com/Code52/metro.css/) and olton's Metro UI CSS (http://metroui.org.ua/ http://metroui.org.ua/) 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. On a sidenote, the day Microsoft adviced and pushed developers to stop calling it "Metro" and call it "Modern UI" instead (http://gizmodo.com/5933580/on-second-thought-microsoft-is-calling-metro-modern-ui-style-now http://gizmodo.com/5933580/on-second-thought-microsoft-is-ca...), really got their own ecosystem off balance.
    - navs 14y ago
      Thanks. I find these full blown templates invaluable in prototyping.
TazeTSchnitzel 14y ago
They do look like buttons when incorporated into a Metro-style design. The contrast with their surroundings, and the text, makes it clear. Metro isn't about skeuomorphic design, you see.
- jaimzob 14y ago
  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.
  - MatthewPhillips 14y ago
    Bevelled buttons make a flat object appear to be three dimensional. It predates what we think of skeuomorphism today, but it's just a predecessor.
    - troels 14y ago
      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.
- bratsche 14y ago
  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.
cooldeal 14y ago
> Take the text away that usually specifies an action (like 'download', 'submit', 'buy now') and all you have is a rectangular coloured box. I guess that is the part of the point, to have actionable text which describes what happens if you press the button.
vyrotek 14y ago
They look like clickable buttons to me when used here: https://www.windowsazure.com https://www.windowsazure.com

by highace 14y ago

acesubido 14y ago

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. Thanks again man!

highace 14y ago
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.
navs 14y ago
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?
- acesubido 14y ago
  For WPF (.NET) applications, I've personally used MahAppsMetro (http://mahapps.com/MahApps.Metro/ http://mahapps.com/MahApps.Metro/). For web, I've seen code52's metroCSS (https://github.com/Code52/metro.css/ https://github.com/Code52/metro.css/) and olton's Metro UI CSS (http://metroui.org.ua/ http://metroui.org.ua/) 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. On a sidenote, the day Microsoft adviced and pushed developers to stop calling it "Metro" and call it "Modern UI" instead (http://gizmodo.com/5933580/on-second-thought-microsoft-is-calling-metro-modern-ui-style-now http://gizmodo.com/5933580/on-second-thought-microsoft-is-ca...), really got their own ecosystem off balance.
  - navs 14y ago
    Thanks. I find these full blown templates invaluable in prototyping.

TazeTSchnitzel 14y ago

They do look like buttons when incorporated into a Metro-style design. The contrast with their surroundings, and the text, makes it clear. Metro isn't about skeuomorphic design, you see.

jaimzob 14y ago
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.
- MatthewPhillips 14y ago
  Bevelled buttons make a flat object appear to be three dimensional. It predates what we think of skeuomorphism today, but it's just a predecessor.
  - troels 14y ago
    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.
bratsche 14y ago
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.

cooldeal 14y ago

> Take the text away that usually specifies an action (like 'download', 'submit', 'buy now') and all you have is a rectangular coloured box. I guess that is the part of the point, to have actionable text which describes what happens if you press the button.

vyrotek 14y ago

They look like clickable buttons to me when used here: https://www.windowsazure.com https://www.windowsazure.com