+1 for styled buttons A strong, unified visual design outweighs whatever advantage having familiar buttons adds.
I am an OSX user and UI designer and, if possible, I will always style the buttons. I think one of the big disconnects in this argument is that the Windows XP buttons look pretty good and neutral, so it's not as compelling to style the buttons to look more like your site's theme. The aqua buttons on OSX, on the other hand, are just plain jarring if you have a strong visual theme on your site (which the Habari admin does). Google is the exception because it has such a simple design that the aqua buttons are fine. I think the strong unity of design in a site outweighs the slight advantage of having familiar native widgets. The examples of other major web sites using custom buttons is a pretty strong indicator that styled buttons do not negatively impact the usability of the site (Apple, Microsoft, Yahoo, Facebook, etc). You know these companies have collectively spent millions of dollars on usability and they have all styled their buttons. The target audience for the Habari admin is also a significantly more advanced user than someone using live.com or yahoo.com. As long as the buttons like like *buttons* Habari users will have no trouble. Even on consumer websites targeted at the least savvy web user (live.com for example), you will see styled buttons. Finally, styling buttons allows you to add hover effects which are not present in native OS buttons. I would argue that hover effects add more to the usability of a button than the familiarity of native buttons. -Andrew On Nov 24, 9:45 am, "Chris Meller" <[EMAIL PROTECTED]> wrote: > How about we check a little of the FUD first and actually hear the > counter-opinion before we vote and at least maintain the perception that > we're doing this with open minds? > > On Mon, Nov 24, 2008 at 5:59 AM, Matthias Bauer <[EMAIL PROTECTED]> wrote: > > > Hey everyone, > > > instead of yet another revert-commit-revert fight, here's a call for a > > vote on the matter of using the default OS widgets (buttons, dropdowns, > > etc.) or whether to style them via CSS. > > RandyWalker shouldn't have reverted it until after the vote was completed, > BTW. Up until that point there had been no organized consensus that > countered their attractiveness. > > The problems I have with styled widgets: > > > > > - The styled buttons look bad in Chrome/Chromium, Safari 3, and likely > > other WebKit browsers, due to the lack of antialiasing on rounded > > borders. I haven't even checked in IE. > > It looks fine to me in Safari 3 on both Windows and OS > X:http://dump.chrismeller.com/habari_buttons-safari.png > > In fact, it looks identical to > Firefox:http://dump.chrismeller.com/habari_buttons-firefox.png > > We don't support IE in the admin, but they would simply appear as normal > square buttons with the gradient and > border:http://dump.chrismeller.com/habari_buttons-ie7.png > > If we don't support IE, how can we complain that it doesn't look good in > Chrome? It's Chrome's fault there's no antialiasing - there's nothing we can > do until they add that feature. It's hardly the only thing screwed up in > Chrome, and I happen to think it still looks > decent:http://dump.chrismeller.com/habari_buttons-chrome.png > > - State transitions are far too subtle with the current styling. The > > > hover can barely be made out, for example. > > This is obviously going to vary with the quality of your monitor and its > contrast settings (it was clear enough to me when designing it), but the > current styling was not set in stone, it was just a quick change that > everyone on IRC at the time liked. > > - The usability is worse than unstyled buttons, because people know > > > their OS widgets and know how they look like and what behavior to expect > > from them. > > There is something to be said for this point, but I think people are hiding > behind it blindly for the lack of a better reason and because they haven't > taken the time to actually think through the alternative. > > I also don't think changing the button style significantly impacts the > user's ability to recognize the function of the object. In fact, I think the > ability to more finely hone the message of each button is improved. Colors > speak volumes - having the 'delete' button include red somehow would greatly > improve the understanding of its function, as red and green are basic colors > users have already associated with certain actions and consequences. Using > non-OS-standard styles allows us the ability to customize the interface in > ways which harness user understanding outside the browser, and allows us to > do it on any platform. > > Can you honestly tell me that this (although hastily done and a bit over the > top) doesn't convey more information about the action being performed than > the standard button?http://dump.chrismeller.com/habari_buttons-reddelete.png > > You may like the buttons on OS X (I don't), but there are users of other > platforms out there. There are also those of us who regularly switch between > platforms and would appreciate a little aesthetic unity. > > I would also like to point out that the dropbutton concept in no way > integrates with the OS. It's a button and a select drop-down merged > together, yet it shares no elements of either. How is that particularly > intuitive to the user? While working on the new buttons on IRC, we also > discussed changing the look of drop-buttons so they more properly emulate > their default counterparts to convey a more clear purpose of their intent > and to match the newly styled buttons. Again, unifying the entire design so > we don't have big ugly black dropboxes all over the page. Can you really > tell me that it wouldn't look better using the button style, something like > this:http://dump.chrismeller.com/habari_buttons-dropbox.png > > Even the almighty Apple has done the exact same thing with me.com [1] and > the Apple Store [2] - they replaced not only the button, but also the > checkbox with a custom control. Since they designed the original OS X > widgets and are considered *the* UI company, surely there's something to be > said for the fact that they chose not to use them on their own sites. In > fact, I would say that Apple's use trumps any 3rd party UI "assessments" > (like the one Khaled links to). > > [1]:http://dump.chrismeller.com/dc7ea1853be03c3bbc450cd80e11d250.png > [2]:http://dump.chrismeller.com/47daa54fd7a9196d584e049e8695e7c4.png > > - Lastly, I don't think they fit in with the rest of the admin > > > (different border radius, different color, different gradient, etc.) > > How can you say they don't fit the rest of the admin? The gradient colors > are nearly identical to the page and box background colors. The border is > nearly identical to the shade of gray we use for text all over the place. > > The different border radius is because they're different elements. Half the > argument here is that they're buttons and shouldn't look like everything > else... well, should they or shouldn't they? > > By making them slightly more subtle, we also prevent things like this > abomination from looking so horrible: > > Buttons:http://dump.chrismeller.com/habari_buttons-comments.png > No > Buttons:http://dump.chrismeller.com/habari_buttons-windows.pngandhttp://dump.chrismeller.com/habari_buttons-osx.png > > > The only pro argument I could see: > > > - Make Habari look consistent across platforms. Doesn't resonate with me > > because I don't think Habari should try to appear as a separate > > platform. For me, Habari is an app. > > I disagree. I regularly use Habari on both OS X and Windows, and would > appreciate it looking the same on both platforms. Currently all our other > input elements are styled heavily, buttons are the only ones left untouched. > Why are they different? If you can visually indicate to the user that this > modified text box is a text box and they have no problem comprehending that, > why is it different for buttons? It's not... > > I'd like everyone to re-vote after having read my arguments. Also, please > take a minute or two to explain why. "It's ugly" and "It should never be > done" aren't arguments that help to change my opinion, they just override > it. --~--~---------~--~----~------------~-------~--~----~ To post to this group, send email to [email protected] To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/habari-dev -~----------~----~----~----~------~----~------~--~---
