Tuesday, June 15, 2010

What's wrong with oxygen buttons ?



Since there are recurring complains about how oxygen buttons look like, and requests to make them more beautiful, whereas, on the other hand, both Pinheiro and I are quite happy with them (we are, really), I'd like to gather some more details about what's really wrong with them.

Picture on the top-left shows basically all the buttons that oxygen can draw. I'd like to know what's not right with them. Margins? Shadows? Gradients? The way they look when pressed?

Things like: "they're ugly", and without any constructive idea to counterbalance the statement will be ignored. Also, things like "they should look like plastique" (or any other theme) will not help much either (since this is precisely the point of oxygen, not to look like plastique).

Other than that, if anyone has comments on these, or even better: mockups, feel free.

77 comments:

  1. i like them :) but thats not very constructive..

    ReplyDelete
  2. I bet there are a 100 more constructive ways to apply your talent than to redesign buttons (which are IMHO quite good). Leave it to someone else to make a better design.
    Well, if you are gathering feedback, just two points:
    - the folder icon struck me as a printer first time seeing it. Because the leaf comes straight out. See what i mean?
    - buttons: they do seem to take up quite some space, but that seems inherent in the design. Maybe another design could focus on minimal space...

    ReplyDelete
  3. Those buttons do look fugly, mainly because of the shadow and the lack of "3d" roundness; check out Ubuntu's default theme for example, Ambience, it's way smooth and easy to the eye. In fact, most bundled Gnome themes are like that.

    The KDE buttons seem too hard and "amputated".

    So more smooth and soft overall please, to make you feel like you would enjoy pressing that button, which would be rather gummy, not hard and sharp edged, where you could hurt your finger into. It's a lot of psychology involved here, I know :-)

    ReplyDelete
  4. I also like them quite a lot. Maybe the only thing that bothers me is that sometimes it is not immidiately visible if som togle button is on or off (for example the buttons in KStars that you use to togle constellation lines ...). And I would in general like to see some more gradients in Oxygen, or even some subtle textures on surfaces. Currently I get a feeling that surfaces are too "empty" or "boring".

    ReplyDelete
  5. I like the clean layout - you dont want your gummy icons on your desktop pc at work. ;)

    ReplyDelete
  6. @snirp
    actually I just dir a test between kde styles, using kcalc (tons of buttons there), to see which style takes the most space. Turns out its pretty even among styles give or take 10 pixels.

    See:

    http://www.flickr.com/photos/hugo-oxygen-icons-org/4704804196/sizes/l/

    ReplyDelete
  7. The problem with the buttons is that they are overstuffed. The height of the button is way to small for this text/image size + text on the third button in the first row should be at least 4 pixels to the right.

    Buttons need breathing room.

    ReplyDelete
  8. My main problem with oxygen is the lack of contrast, I find it very "Washed Out" which makes it difficult to discern structure. Like a previous poster I'd like to see more 3d in the buttons with clearer boundaries.

    Please note - I do like oxygen a lot.

    ReplyDelete
  9. I too like them, but since you asked, my 2 cents: The one thing I would suggest is that proper affordances are kept in mind. In other words, if you aren't familiar with the concept, in the 'Toolbuttons' preview section, the top-right and lower-left ICONS are *not* buttons. Developers and experienced users know that they are buttons, because through experimentation these particular icons act like buttons, but their appearance does not suggest to any new user what the possible and appropriate actions are for how to interact with them.

    ReplyDelete
  10. No, no, no. The Oxygen buttons are fine, what needs to be fixed is the scrollbars.

    ReplyDelete
  11. Do not dare change those buttons! They look really good!

    Last of all give them a rounded gummy 3d look.

    ReplyDelete
  12. Please don't destroy current appareance of oxygen. It looks great. It's clear and very easy to read. Buttons are great, I like that they are thin, shadows are good. Don't apply gradients on top of buttons! The flat top looks great and that's why I love Oxygen since KDE 4.4. Maybe I'd like little stronger whole window gradient. So my vote: don't change buttons too much!!!

    ReplyDelete
  13. Ok, maybe some changes to tool buttons: raise them like the other buttons and connect them (ala Mac) ?

    ReplyDelete
  14. Another sugestion: allow to choose background of dolphin's sidebars (white color like in normal listview). I looks very good, try it.

    ReplyDelete
  15. If anything, I think the buttons should be more flat on top. But I think they look alright as they are.

    ReplyDelete
  16. As a GNOME user, I may not be the best source of feedback on Oxygen's buttons :D

    However, looking at your picture, here is what I think:

    - Checkboxes and Radiobuttons are extra-pretty. Don't change anything there.

    - Icons containing text or icon are way too small and look flat. Maybe it's due to the font, but what's inside the buttons looks "compressed." Furthermore, there isn't much 3D feeling...
    Here is a quick screenshot of my desktop: http://img7.hostingpics.net/pics/150105Untitled.jpg

    See how text has got space around, making it easier to read and look not cluttered? And see how the use of a darker lower part makes buttons look rounded and 3 dimensional?

    Hope this helps!

    Looking forward for seeing your future beautiful buttons ;)

    ReplyDelete
  17. First of all, I think Oxygen is very very good, but is not up to the feeling you got with ubuntu's gnome or mac os. With some improvements, I think it can reach them, and even surpass them.

    I think the buttons lacks of contrast and "3d". Look at the windows buttons, they are much better! They are find to find them "at first look", the best example is the scroll bar (which also is very big for my taste). One thing to improve contrast is to allow gradients in the background of the windows (but I think this is not Oxygen fault). I think the last version of iTunes gives an example of good contrast and "3d" without "glossyness" (although not the volume control). Maybe a tint on the gradients (should be inside) could help in better identify them without being too obtrusive (see the Play button in iTunes).

    I also think padding / margins inside should be adjusted.

    Checkboxes and radiobuttons should be a bit smaller and more clear inside (maybe just white) to improve visibility.

    If you prefer a "flatter" approach, I think Moblin interface has done an excellent job, you coud take many ideas on buttons and widgets.

    I hope I am clear with my thoughts. I think Oxygen is very good, but needs improvements, if you look ubuntu's gnome theme / mac os, they are cleaner, more easy to use and overall better. Oxygen can get to this feeling, I think, with some tweaks.

    If we could have like a widget / button editor to test things, it would be *VERY HELPFUL*.

    Sorry for not posting a mockup,
    Keep going, your work is very very good,
    Cheers,
    Rodrigo

    ReplyDelete
  18. In the running theme of "I like it... but as long as you asked..."

    I personally think the Oxygen buttons look fine. If I were to suggest one improvement, it would be to differentiate the buttons from the background more. Currently the shadow, edges and hilights look perfect. The actual colour is very, very similar to the window background colour though occasionally making them a bit harder to distinguish. Either a subtle, more 3d rounding, or even just adjusting the colour to contrast (slightly) more would make clearer what was information for the user and what was actionable.

    I'd also like a pink pony and they should flash and play funny videos about cats that have their heads stuck in jars. That's always good. :D

    ReplyDelete
  19. I really like the push-buttons. But I think the menu-buttons should be somehow enhanced. Like some other guy here said, it would be cool to have a look like the menu-buttons of the bespin style.
    see: http://kde-look.org/content/preview.php?preview=1&id=125979&file1=125979-1.png&file2=&file3=&name=roxydoxy

    I also agree, that some new scrollbars would be great. I think it's better to keep them more simple, for example: http://dev.chromium.org/chromium-os/user-experience/ui-elements

    Last but not least, I think it would be cool, if you could enhance the appearance of the main kde-apps, especially dolphin.

    I really like your theme, and I really like your buttons :D

    ReplyDelete
  20. I'd also say that padding should be adjusted. Text and icons look like squeezed. It happens regularly that an icon gets over the edges of the button.

    ReplyDelete
  21. I dont think the buttons has big problems. I think the problem is with the color schema. The Oxygen color schema is just so bright that the buttons does not look good on many monitors because they have today just too bright contrast and they easily overburn everything.

    When you play with color schema, especially the window background and button background colors, you find out what is wrong in them. It is not the button size, the 3D effect, the form or shadows. (just use Oxygen color schema and do not change the color, just the shade of the Oxygen.

    By my opinion, the Oxygen color schema affects the buttons look with same basic manner as it had with earlier when the color was needed to be change littlebit more brown because most monitors are cold by their color. Just for compensate that.

    And what comes to the toolbar, I would love to see a option (option, not take this or nothing) to set the toolbar buttons like they would be normal buttons. Join buttons together what does not have separation between them. I do not like the idea to have buttons encarved to the window. I think it look littlebit silly. But it could be third option as well.

    Then we would have four options for toolbar buttons (we love options!)
    1. The current totally flat button, only the icon. When hovering the retancle would come around the button.

    2. The current totally flag button, only the icon. When hovering the button structure pop-ups.

    3. Make toolbar buttons look like buttons. Join them together unless there is a separation between them. Give the user information "this is a button and not just icon"

    4. Make the toolbar buttons work like the 3, but carve them to window. A lá Mac OS X. ( I dont usually like this because the button icon gets shadow around it and the button looks smaller).

    And do not make one style what has only one feature. Okay, the Oxygen can be wanted to be a such what has only one option or if must, two. But really, we all are users who loves to get the UI as we want. Different thing is that you are artists and developers and you can make KDE officially look as you like. We users, we do not know how and we all can not enjoy Oxygen as it is but we need then to search other styles like QtCurve or Bespin to get options what we miss but we end up to situation where the look is still not like Oxygen. But the options are there.

    And what comes to scrollbar, I agree it does not look so good. The gradient has always confused me. It does not look like a button what it should be.
    Personally I do not like the scrollbar edges between the scrollbar and the background. I would like to get the 2-3 pixels removed from the sides of the scrollbar. So the scrollbar itself would take more space in widht and fill the area. The scrollbar would have different gradient as well.

    But serieously, the toolbar buttons needs something to get done. When you have learn the toolbar buttons are buttons, it is nice to have smooth toolbar and not filled with buttons or edges. But same times toolbar buttons with Oxygen button look would just be so good looking because Oxygen buttons itself does not have so bad problems (if something is wanted to test, try littlebit sharper corners for the buttons, like scrollbar background corners are!)

    ReplyDelete
  22. I have always had a love hate relationship with Oxygen. Love for how beautiful professional looking the icons are generally. Hate for some of the icons which just look out of place on a modern desktop (IMHO) Here are a list of some of the icons I think needs improvements.

    Volume Icon: The volume Icon is simply ugly. and looks very out of place when viewed in the system tray. In fact I hated it so much that I usually hide it and use my multimedia button for volume control. It would be nice if that can be completely redesigned.

    Also the Close button (for closing tabs) could do with some redesign too. probably just replace it with an X in place of the current design (I am not good with words so I don't know if you get what am speaking of)
    Anyway those are some of the issues I can think of right now. Otherwise Oxygen is a great Icon theme. Every time I use something else, I also see myself coming back to it.

    ReplyDelete
  23. I think the buttons are very good, as is oxygen! Thanks for all the work!

    Only thing I'm not liking is the down arrow of the comboboxes and the arrows of the scrollbars. I don't know what is wrong with them really, but I think they don't fit in with the rest.

    ReplyDelete
  24. The Chrome example what ano nymous linked is exactly what I meant with scrollbar edges.

    And from that I got a wish as well that Oxygen would support touchscreen friendly -option. As here is said, there comes situations where buttons are too small and the 16x16 icon goves over the button edges or does not fit well. Example from Dolphin when you take file properties. Then there is the wrench what gives the file type editing. The icon does not fit the button well.
    Long time ago I made wish that the button would get little bigger and it would get text for it. So it could be "[  ] Edit type" and so on easier to click and actually notice it.

    But today we have lots of touchscreens. And Oxygen is not so well supporting them. Oxygen has only one feature what has support and it is a scrollbar that it can be adjusted so big that it is easy with finger to scroll with it. But buttons should get 1.5x-2.0x bigger. So we would have "OK" and "Cancel" buttons big enough. With toolbars it is great to have possibility to set icon size and text under icons. It is very touchscreen friendly feature in the KDE SC. Same way the tabs should be twice as tall as now. Tab close button as well at least 22x22 size.

    I think it could be done adding a options to resize the needed parts.

    We have panel what can be resized so big that it is touchscreen friendly. Something what is only in Mac OS X as well (Windows 7 has too small panel). We can set toolbars bigger (no where else).
    We can have scrollbar bigger (no where else). But we can not get tabs or normal buttons bigger.
    And even now there is a feature for Oxygen itself that we can move window from any empty space, not just from window decoration! (Like in Bespin and QtCurve has).
    KDE SC is very touscreen frienly in many places but it needs polishing.

    Oh, and one last wish about buttons!

    Make the breadcrumb in Dolphin/Oxygen to have option for buttons structure as well, instead just text and coloring when hovering over!
    Check the Oxygen demo screenshot what you posted and the toolbuttons, top row, third from the left.Just turn the arrow to right. I tcould then be as well a button what looks like the second from the left but when hovering it would look like third from the left.

    Just for my 2 cents

    ReplyDelete
  25. I like them.

    Only one thing: the bottom-right button (last one on the second row) has margin on the right and none on the left. Compare it to the first one (looks like the last one is the first one without the left margin, while the right margin is still there). Maybe zero margin on the left, too?

    Where is it used?

    ReplyDelete
  26. A smidgen more 'y' height, perhaps, but I actually think that the Oxygen style is the best GUI style to ever be released in the Linux world.

    /izo\

    ReplyDelete
  27. 1) I would vote to increase the space around text and icons in buttons. It feels a bit "congested".

    2) To a much lesser degree, I think the radius of curvature of the corners could be lessened a little. Currently, it feels a bit like the corners have been cut-off, instead of being smoothly rounded.

    Thank you for your work, and thank you for taking feedback!

    Bala.

    ReplyDelete
  28. imo the only problem with oxygen style are the tool buttons. they don't look like buttons when you mouseover

    ReplyDelete
  29. probably this won't be very constructive, but the straight to the point answer to your "What's wrong with oxygen buttons?" question, in my opinion, is "Nothing! I love them!" ;)

    ReplyDelete
  30. I like the buttons. I'd rather see the Oxygen team add missing icons to the set rather than to tweak existing stuff over and over again.
    Eg. https://bugs.kde.org/show_bug.cgi?id=210170
    https://bugs.kde.org/show_bug.cgi?id=208222
    https://bugs.kde.org/show_bug.cgi?id=219770

    ReplyDelete
  31. For me there are two problems:

    1. Color: Oxygen looks way better in darker color schemes than in light color schemes, although I don't like dark schemes at all. In the dark ones the buttons have "volume". The gradient is more obvious. In the light ones, the gradient is almost invisible and it depends on the gradient in the background window so most of the buttons look completely flat and that effect is enhanced by my second complaint.

    2. Edges. This is a matter of taste. Personally I don't like the sharp edges of oxygen widgets. I like the rounded edges of scrollbars and progress bars but not the sharp edges of everything else, including buttons. Some people may like it but I find it more pleasant to have buttons that don't look so 3d-ish. They reming me of the buttons in Windows 95 and since then, almost all the themes in Windows, Mac and Linux (whith the exception of Aqua but this is changing) have softer buttons with less edges and no so 3 dimensional.

    ReplyDelete
  32. Seriously? People don't like the Oxygen buttons? Wtf.?

    Please apply your time to something else than redoing Oxygen's beautiful buttons (and possibly making them less pretty). I'd say you should go for what your vision tells you. You have a great aesthetic sense.

    And thank you for your excellent work so far!

    mutlu

    ReplyDelete
  33. I love Oxygen's button, people who don't like something are always more vocal, but not really representative of the overall community.

    My only gripe is when there are buttons in a horizontal layout, some with icons some without and they appear at different vertical sizes - ruining the consistency.

    (though this can be fixed explicitly in the calling program)

    ReplyDelete
  34. An italian blogger suggests to add padding!

    +1px top bottom left right

    http://pollycoke.org/2010/06/16/add-more-padding/

    ReplyDelete
  35. My main complaint is that the text/icons on buttons do not move when pressed. e.g. with plastique, clearlooks, etc. when a button is pressed the contents move 1 pixel down and right. This (to me at least) gives a better impression that the button is being pressed.

    ReplyDelete
  36. I think oxygen needs more padding everywhere.

    ReplyDelete
  37. Possibly, some of what people are talking about might be addressed by having a stronger border around the button (a shodowed trench) to give a stronger impression of the button being "in" the interface rather than floating above it.

    ReplyDelete
  38. I have no issues with the Oxygen buttons, the only thing I'd really do to change them is make the buttons a little taller so that the text/icons have a little more breathing space.

    ReplyDelete
  39. I'd like to apologize in advance for making an offtopic post but this has been bothering me since forever.

    I think that KDE team should start discouraging users from customizing theme and put more focus on improving default look&feel.

    Currently, there is a plethora of theme engines and color-schemes that make it downright impossible for a developer of a custom widget to create a complex widget that will look good for everyone. The developer have to deal with the variations on two levels:

    1. Theme engines. Every engine is completely different from each other, a likely solution would be to have custom design for every engine.
    2. Color schemes. Dark, grey, light. You might as well just give up here.

    As a result you just end up recycling standard widgets because dealing with the above things is not worth any effort.

    Of course you can target only the audience that uses the default theme. Leave aside the point that you'll miss like 50% of users, there's also no guarantee that the default theme appearance will not change when the next major KDE version comes out and will not screw up your carefully designed widget.

    Customizability is a doom for designer. Most Linux apps have generic look & feel which is not very appealing to your average Joe. I bet the Linux applications would have been more usable and more beautiful compared to what we have now if we didn't try to make everything customizable.

    I believe that KDE team should make a brand theme and stabilize it. Tuning the default appearance should be restricted like it's currently done on Windows and Mac OS X.

    ReplyDelete
  40. Eshmee, there is no one good theme what fits for all. Not even in Windows or Mac OSX environments. KDE SC is not different or either is GNOME. There are lots of different users who like different things. You can not please everyone with one single theme. If you have options, then you get wider users pleased easily. But that needs few things.

    1) Make the default as good as possible for new user who has not learn stuff.

    2) Make it easy to change options so user who advances, can change settings when the default comes as obstacle.

    KDE SC is good on it. We can arrage toolbar buttons, toolbars, panels, shortcuts, icons, colors and so on.

    Now what you are suggesting is like people should only stick on the wallpaper what is by default and user itself should not have possibility to change the background because some backgrounds does not fit well with icons on desktop and some backgrounds are two colorfull and adding wallpaper change option would confuse the user. You get the point?

    We all want to enjoy working with good looking desktop environment. We all have different taste and opinions. What works for you does not work for me and what works me does not work for him.

    The default is the critical point. It does not matter is there how many settings if the default is good. Because normal user does not then need to change the settings. If the defaults are bad and first time user needs to start first by clicking the settings around to get something good, it is already lost fight.

    The point is, if with good defaults we can please 80% of the users, it is just awesome!
    But if we add few options and we keep same good defaults, we can please 93% of users and it is even better, almost perfect!
    And when we add more options so we can have 99% of users pleased, we hit the nail. Because 80% users can stick on the default, 13% can make a small tweak and get wanted results and 6% are happy that they get all the special tweaks. Only 1% would be unhappy and they would be those who hates all kind options and only wants one setting for everyone, even that they would not need to touch existing settings at all but stick on the default!

    With software we have totally different changes available than what we would have with physical products. And when it is with open source, those who know how to code, can actually change the product so it works for them who can not use it otherwise.

    With closed source or physical product the thing is usually different. If you do not like something, get a other product. Everything is fine as long as there is multiple choises. But if there is only a few and none of them is pleasing, you are out of luck unless you make your own and it can be difficult or impossible.

    If someone invents a car painting what can change the color just by selecting color from color wheel and pressing button, with similar way as in GIMP. He would be damn rich. Because people would love to change their car color by the seasons and day. Drive a red car to home, take a black car to holiday and use green car for shopping. You could change the color by your mood. And then the car buyed could not care less what colored car he would choose when buying the car.

    ReplyDelete
  41. Oxygen buttons are a false problem.
    Oxygen style for Applications seems, in general, an old theme/style compared with plasma style, like Air, Glassified or Oxygen itself.
    Where plasma styles are glossy and trasparent, Oxygen interface is heavy, static, with those too greys large panels for preview or resources .
    It's incoherent, distant, respect the plasmoids widgets.
    A wall.
    This is my opinion, obviously.

    ReplyDelete
  42. I think there is a problem with the oxygen buttons as well as radio buttons and checkboxes. They look misplaced in my opinion as if they do not belong to the rest. The frames for example are beautiful.
    Why not making them a little less sharp just like the plasma buttons. Those are perfect in my opinion.

    ReplyDelete
  43. I like the style, but the not uniform size makes the interface looks a bit messy. For example, from the picture above you can see that if a window consists of buttons with icon and without icon, the size of the buttons will be varied. This causes a lack of consistency in the look and feel, even within one window.

    Other than that, I agree with someone who mentioned that the button is overstuffed. Need to give some paddings for the text and icons.

    ReplyDelete
  44. Personally I object to buttons without borders, where the borders only show up on mouseover - this means I have to run the mouse over a window to see if anything is a button or not.
    A flat button in the toolbar is not a real problem as that is expected to hold buttons but in a dialogue, if there's no obvious graphic showing a 3d button, it's not immediately obvious if a button is actually a button or simply a gratuitous piece of eye-candy.
    This may not be a problem with Oxygen per se but with the use of buttons within applications.

    ReplyDelete
  45. I have to echo what Mutlu said above -- I love Oxygen, and can't imagine why anyone would complain about it. That said, I think I can understand what Dark Knight is saying in the 4th comment; the default Gnome theme in Ubuntu provides a very different style, and provides a different appeal. I think there is, perhaps, a hole that an alternative theme with a completely different vision could fill. I think that would be awesome, but have been coming to an understanding of the degree of effort involved in a project like Oxygen through the relevant blogs aggregated on Planet KDE.

    ReplyDelete
  46. The Oxygen buttons are really the best I have ever seen. Simple, elegant, beautiful, they work, and there's nothing better out there. There are other icon sets that are hideous, and other problems more annoying such as dolphin always stalling.

    ReplyDelete
  47. From me experience, the look of the oxygen themes depends very much upon the COLOUR SCHEME . At some colour scheme it looks really pretty and less pretty at some other.
    The default colour scheme makes it less appealing. That can be a reason.

    All kde apps looks good in oxygen with good colour scheme. But other apps like vlc doesn't look good.

    ReplyDelete
  48. The margins are too tight (really, just 1 pixel in most cases), which gives the impression that space to lay out the widgets was scarce and everything was squished to compensate. Therefore, it looks like the dialog is cluttered when it actually is not. See the buttons in the "Text and Icon" section for an example.

    The use of chevrons instead of full triangles to decorate the buttons with incremental disclosure is questionable too. For me, it looks like when V and ^ are used in ASCII art to represent arrows.

    Other than that, DejaVu Sans is an offensively dreadful type. But this is off topic and fortunately can be changed anyway.

    ReplyDelete
  49. Just add *PADDING* (1 px on each side, like others commenters said)

    ReplyDelete
  50. Hmm, good to know it's not just me. I've always thought Oxygen looked amazing with the exception of the buttons being somewhat subpar.
    They look like pieces of flat paper floating slightly above the window; rather than like an integral, organic part of it, as the other widgets do. I'm not sure what this translates to in graphics-speak, but I think the part 'connecting' it to the substrate should be made more obvious; either that, or it should visually be at the same level as the window, rather than lifted above it, with a thin groove or something around it.

    ReplyDelete
  51. lots of comments! My favourite buttons are chromium web browser ones. yours are very similar, but I think chromium has a darker blue background to supply more contrast so that the buttons 'pop' a bit more

    ReplyDelete
  52. Sorry if these have already been stated, but although oxygen looks very good I do have some suggestions:

    1. I think the glow should be animated, in that over a period of time (maybe half a second) it gets noticeably brighter then dimmer then brighter again in a cyclic manner. I think this would draw the eye much more, be more noticeable, feel more dynamic and "alive", and be prettier. Currently the glow is not that noticeable in my opinion. This is especially true of the title bar buttons but I think all of the buttons would benefit from this:

    2. I also think some sort of animated transition from pressed to released state, and a smooth change from non-highlighted to highlighted states for the buttons, would make things feel smoother and more interactive. Animated transitions in check boxes and radio buttons might also be nice.

    3. I think the glow should follow the shadow more, so it is brighter and larger on the lower-right than at the upper left. I think the glow should also continue into the button. Basically make it look like the glow is under the button and leaking out from a small gap between the chrome and the edge of the button. Similary, The glow from highlighted elements in the UI like the drop-down arrow should extend a bit from the arrow into the surrounding UI so it looks like the arrow is a slit in the button with a light behind it that is lighting up a little area around the slit. This would also apply to the depressed case fro flat buttons, but of course not the raise (or, rather, flush) case for those buttons.

    4. Some sort of better connection between the flat buttons and their drop-down arrow. Perhaps a line like a 7 or 90-degree rotated L that goes from the arrow up and then left towards the button the arrow is connected to. This is more important when there is text present.

    5. For the flat buttons with the dropdown that has a separator in the non-flat case (fourth row, third from the left), I think a the blue glow should be in two sections when hovered, one like you have now and a second section connected to it that surrounds the arrow.

    6. I think the depressed area in the drop-down menu should be larger relative to the menu (from the second button from the left in all rows), I think the margin is too large around the depressed area so the depressed area is too close to the text and icon. It looks squished to me. (this would be the second button from the left in all 4 cases shown).

    7. At least for the default color scheme I do not think the glow has enough contrast from the background color, so when things are glowing they are kind of hard to see. Having them animated would help with this, but I think changing the color slightly might as well. I am not sure exactly how, though.

    8. In the third row, third button from the left, when you click the area on the right, I would only have the section of the button to the right of the divider go down, the rest of the button should stay raised. Similarly, when you click the main part of the button only that part should go down, the section with the arrow should not get depressed. So rather than one big button, the two sections would behave as two buttons right next to each other.

    9. The margins around some buttons are not consistent. So far instance in the text under icon case, the side margins are much larger than the top or bottom margins. In the text beside icon case, the right margin is much bigger than the top, button, or left margin. I think making these more consistent would help. They should also be consistent across button layouts (this consistency should apply to dropdown menus, which would fix 6)

    ReplyDelete
  53. I just used the magnifier to take a closer look at the chromium buttons.

    1. they have a uniform boder around the button
    2. the border gets darker when you mouse over
    3. the button gets darker when you mouse over

    I think these 3 features are what makes it 'pop' slightly more than oxygen.

    ReplyDelete
  54. GTK has buttons way to height. KDE has the opposite, too thin. Give the buttons an intermediate height and it will be almost perfect.

    Radiobuttons and checkbox are too big compared to others widgets. It should be thinner.

    And if you ask me I would like to see less roundness in everything that is not so big, like: checkbox, buttons, etc. For windows it's ok because it is much bigger. But look for those buttons, so thin and so rounded.

    Just look how windows is (aero): windows has rounded corners bigger than buttons and selectboxes.

    I see what you tried to do, keep the same radio to everything. But sometimes, given the size of things, it is not so good to coherent with such values.

    To summarize:
    buttons: a little higher;
    thin widgets: less round radio.

    ReplyDelete
  55. Though oxygen is a neat theme, it need not appeal someone in the first look. If it lacks anything, it is 3D LOOK . I think some thin gradients at edges would make it look better .

    A BETTER USE OF COLOURS would also be good .

    ReplyDelete
  56. I think some people don't like the more industrial look, but for others of us who came up through motif, etc, it's a nice compromise between aesthetics and usability.

    For God's sake don't add any gradients!

    ReplyDelete
  57. While I overall really like the Oxygen style, the interface has a very "washed out" look with the buttons blending in too much with the background. I don't feel 3d is the answer, but it would be nice to see have the buttons slightly coloured (blue?) and/or highlighted. Additionally, as has already been mentioned, I definitely feel that the buttons require a bit more padding, especially vertically.

    ReplyDelete
  58. I first thought you were talking about the window buttons :D

    Oxygen buttons are fine IMHO, the only thing I notice is that the look too "edgy", as if the edges weren't rounded but just cut off, some fine-tuning there would be great :)

    ReplyDelete
  59. Look at the Pause ktorrent button in ktorrent when its pressed. It's really horrible to understand the state of this toolbar button because it doesn't look pressed

    ReplyDelete
  60. The main problem with oxygen buttons is when they are drawn in a webbrowser... webpages just look horrible with them coz they're not adjusted to round buttons - i can make a screenshot - perhaps the solution would be to make seprate more Google Chroem like buttons for Konqueror only ...

    ReplyDelete
  61. I like the look of Oxygen in general. However, I think the checkbox and radio button are too big, they should be no taller than the line of text next to them, which throws off formatting and alignment in some Web pages.

    ReplyDelete
  62. You have a fantastic theme already that solved some of the worst Oxygen problems (although it has some problems of its own). The Air Plasma-theme scrollbar is perfect. Scrollbar needs to cut the inner 2 px white line (to clarify which scrollbars belong to what and to prettify everything). Buttons need 2 or 4 px more of height, a little less roundedness and a little more 3D effect (I used to use Phase in KDE3 because of its strong 3D effect, now I find it outdated with Oxygen, but you get the idea). The focus indication is badly done (simply a blue line, emulating lesser toolkits. Qt allows you to perfectly lighten or darken entire areas to highlight focus). About buttons, the arrows in the scrollbar are buttons. Show me that ;).

    ReplyDelete
  63. I agree with Alejandro.

    I'd also like to add what I think, please bear with me because the "feeling" I get when using it is hard to express.

    1. Checkboxes and radiobuttons: These are supposed to be smaller than they are, and need to be filled with some gradient. They need to look 3D, like a "depression" or something. CB's and Radiobuttons are supposed to be depressed, not raised. Also, they don't feel "soft" or "pressable" right now, if you can get what I mean. Currently, they seem like "raised platforms" which I'm supposed to "hit", not press softly. Even after "hitting" them, they don't depress.

    When doing a mouseover, the blue border that appears outside the widget, should rather appear inside.

    Really, they must be smaller. Open Gmail in rekonq, you'll notice, the checkboxes are half-occluded due to their huge size.

    2. Scrollbars. Again, the default mouseover effect is to highlight the border of the scrollbars. Very ugly, still doesn't make the scrollbar look "usable". It looks like a "disabled", greyed-out widget. I can remedy this by configuring the style, making the whole scrollbar blue on mouseover. But what really bugs me is that even after clicking on it, it looks the same as it did upon mouseover. Not "juicy" at all. It should, again, give the feeling that it is "pressed". Right now, it feels like hitting a stone bar. Fix this by smoothly changing the color on mouseclick.
    About the scrollbar arrow buttons - In simple terms, I feel very "insecure" when I press them, I'm not even sure if they're meant to be pressed. Give them a button. It feels like pressing text, not like a button.

    3. Tabs: Tabs are a success story. I like how a gradient was given to them, in the very early releases they seemed totally flat. Although they could do with some color love INSIDE the tabs, not outside on the border.

    4. Buttons, Comboboxes, etc: They need padding, a gradient (like the tabs), and they definitely need some color INSIDE them, not on the border outside. And yes, they need to feel "juicy" when pressed. I feel like I'm hitting, not pressing. By juicy I might mean inversion of inner gradient. In serious need of some contrast love.

    And please, depress the contents of the button too, otherwise it feels really weird, as if the text/icons are "floating over" the widget.

    5. Toolbar buttons: Bespin-like grouping? I don't know what to suggest here. But the drawing of a thin border around them seems weird. This now seems like hitting "hard rubber". Maybe a nice gradient as in klearlooks (with the k) might help?

    4. Drop-down menus: The highlighted item looks ugly. Instead of some strange gradient where no gradient is required, how about a flat, bright highlight that extends to both sides of the menu?
    The current highlight is just a grayer gray on an already gray background, it looks "dead". And I think the rounded corners of the menu would look good only at the bottom, NOT at the top. Currently, the menu looks "disconnected" from the menubar.

    I guess that covers it all.
    Summarizing, the current theme looks like a big grey stone slab, with raised stone platforms and carvings on it which don't seem flexible enough and must be "hit" instead of pressed, and the dropdown menus are just more slabs that emerge out of a parent slab.

    That was (I hope) my constructive criticism.

    ReplyDelete
  64. PS: The best example of "juicy" is the widget style of M$ Office 2007 in windows, especially the buttons and beautiful scrollbars in the ribbon (no, I don't like the ribbon itself).

    ReplyDelete
  65. I absolutely agree with Aditya.

    ReplyDelete
  66. Hi I am Stan
    These are my comments:

    1. Pushbuttus should have some kind of inside highlight when cursor is on them. Currently only a glow around buttons is implemented. It should be possible for buttons to shine from inside and in turn become expressive and inviting for user.
    2. Edges of these buttons should not have such visible "roundings" at corners of them. Then user pains attention to shape of the button, not content of it.(User is distracted). I think that pushbuttons should be a bit more rectangular.
    3. I think that it is worth to discuss about shadows and themes inside (within) buttons. Then buttons would gain dynamics (feeling of motion). Then they would be more interesting, attractive for a user. By these "shadows and themes" I mean graphics that would be a background for content (text). Looking at buttons would then mean: a) noticing content (text), b) background (design makes working more pleasant).
    These three comments can include toolbuttons as well.
    4. When it comes to icons, I must say they are really good. Nevertheless I think that they are made too simple. They look as if the lack some artistic vision. I understand that icons should be understandable so designers decide present simple representation of what icon is about (new doc, folder). They just forget that icon should do sth more than just represent sth. It should have some artistry, if you know what I mean. Vivid colors, round shapes, perspective, image of content etc.
    4. When it comes to checkboxes I think that issue discussed in part 2 can be applied as well.
    5. I would consider making smaller radiobuttons and checkboxes because they are bigger than default font. In turn size of then makes user look at them not on the text (content) that should be analyzed by him.

    ReplyDelete
  67. Hello Hugo!
    Firstly,congratulations for the great work you did so far... I'm the developer of the "Oxygen KDE" theme for firefox ,an effort to bring the oxygen style to the famous browser...

    I like a lot the oxygen style (really :D) but if you ask about the buttons I did a mockup to show you what I would change to them.. I tried to not go far away from the general feeling of the style and I came up with this:

    http://img63.imageshack.us/img63/505/mockupbuttons.png

    IMHO they look a little nicer...
    Note that I got this effect using only css code ... no images at all ... I would like to have a reply from you to know your opinion about the mockup ..

    If you are interested I could post the css code...

    Best wishes,
    Jimmy

    ReplyDelete
  68. Hey,
    Number of comments is quite impressive (somewhat overwhelming in fact).

    Things I noted:

    - giving more room to text inside button seems very important. And I agree. Will try, though it is not easy because it has a tendency to break all alignment with other widgets. (funny thing is: oxygen did have more room for buttons in the past, but then there was a lot of comments about oxygen wasting too much space, so that we reduced it -along with other things- to its minimum: 1 pixel).

    - button background and color scheme. I think the two are related (as quoted some place above) and that the button background color in the screenshot I posted is too light with respect to the window background, which tends to "fade" the existing (quite strong in fact) gradient.
    Additionally, window background has a strong gradient, so that depending on where the button is on the window the contrast between button and window background differs, this increases the feeling that buttons are not a part of the window but an addition to it. We just fixed that in svn, hopefully for the best. IMO it makes the buttons more blended with the window, and the whole thing looks more consistent (best example of that is kcalc).

    - checkboxes and radio buttons. We did make them smaller already for kde4.5 (well: we made checkboxes smaller, not radio buttons). They are not matched to the font size as someone asked, because that would make them way too small when using small fonts (notably that would make the mark look even smaller than the font, which we don't agree). There are indeed bugs when rendering these buttons in some web pages (e.g. gmail), but this is due to errors in the web page design: they ignore the size hints provided by oxygen. Not my fault. Some websites get them just right (e.g. bugzilla).

    - on having a different color for button background, (though I think its a bad idea), its a color scheme issue, not an oxygen issue. Users can change that at will.

    ReplyDelete
  69. - I agree that using flat toolbuttons outside of the context of a toolbar is a bad idea, and it is an application's fault, not oxygen's fault (and the ones in the screenshot are just for illustration purposes). On the other hand having frames around toolbuttons in toolbars (whether they are joinded or not) nedlessly clutters the toolbar. I think the toolbar concept is known enough by users now that showing only the icon (with our without text) is enough. Its similar to what's shown in menus: nobody draws a frame around menu items, right ?

    - there are several comments that addresses other issues than just the buttons. Since this post is about buttons, I won't answer them here. One note though: we did try to improve (a bit) the look of scrollbars for kde4.5, and reduced the distance between the scrollbars and the frame they refer to. It should connect things better. I agree it should give some feedback when it is pressed.

    - there are comments that change everything about the style (e.g. Adytia). Won't happen in oxygen: what you'd need to match these comments is a brand new theme. I won't do that. The idea of the post was more: tiny subtle changes that would not break the oxygen design ideas, and just make it better (improvement as opposed to change)

    - along the line of comment above: mouse-over effects will remain "glow" effects and nothing more. We decided, from the beginning, that changing the background color to indicate widget's state was a bad idea, and used "light" effects instead. (with the exception of menu mouse-over, and to some extend, flat toolbuttons). So this won't change. and people not happy with that should switch to another theme, since its a fundamental disagreement. IMO many many styles fail on mouse-over effects due to this background painting thing. Besides, using shadow/glow allows one to have a consistent effect between buttons and sunken frames mouse over (such as editors).

    - on the rounding of buttons, I agree they do not look optimal. This is mostly due to subpixel anti-aliasing, and I'll try fix. But the rounding will stay. And the shadow also. There will be no 'carved-in' buttons, because that's also an initial choice, to make them look consistent with the rest of the style (see: tabwidgets, raised frames, and groupboxes)

    - there is a comment (kurtz77) about making the style looks more like plasma. I don't think this is a good idea, and this because plasma, and styled apps answers too very different purposed: plasma is all in your face, and about widgets that can be hidden at will (dashboard) or are most of the time covered by styled applications. You interact with plasmoids rather seldom in fact (at least I do). Styled apps on the other hand are of everyday use, notably for working, so that the style, IMO, should be descrete, in order not to take too much room with respect to the apps functionalities (imagine: kdevelop written with Plasma. Or even Kate). This goes along with comments on the 3D look of oxygen. Oxygen has some 3D look (its one of the very few Qt style which uses gradients for the background), but should not have too much, and will never have much more than what it has now. Since its a design choice, again, people not happy with it should really consider using another style. Same is true about "gloss", "gumm", "

    ReplyDelete
  70. - Finally, kudos to Dimitri, who sent the only real mockup here (rather than posts to other styles). First: I think your job on firefox theme is awesome (by far my favorite). Also: you're mockup its really attracting (many whao on IRC when I forwarded it here). It has more space for buttons contents -which we lack-; is exactly in the spirit of the tiny changes I was expecting. Having the white contrast pixel surrounding the entire button (as opposed to top and side as they are now), is quite interesting. I'll give it a shot and coordinate with nuno. (but it first needs more space :-)). One minus: your sunken button has a left-right asymmetric shadow. This is not a good idea I think, since all other shadows (including the one from the deco) are left-right symmetric. PS: you're welcome to talk with us on #oxygen at IRC any-time.

    Ok. That clearly does not address all the comments (there are so many). Maybe more later.

    ReplyDelete
  71. "making the style looks more like plasma. I don't think this is a good idea, and this because plasma, and styled apps answers too very different purposed:"

    that's correct, but not for the reason you suggest:

    "plasma is all in your face, and about widgets that can be hidden at will (dashboard) or are most of the time covered by styled applications. You interact with plasmoids rather seldom in fact (at least I do)."

    you don't use the tasks widget, the system tray, the clock, etc. on (e.g.) the panel? :)

    no, the real reason for keeping plasma elements styled one way and app elements styled another is dual. one is close to what you wrote next:

    "Styled apps on the other hand are of everyday use, notably for working,"

    most applications are designed for high density widgets surrounding / augmenting a large document viewing area. plasma widgets are more like apps we see on phones these days: the controls meld with the content, sometimes even are the content and need to be as easily accessible as the content. as a result, the widgets are lower density and don't revolve nearly as much around a document viewing area.

    the other reason is more subtle, but imho incredibly important: it gives us a way to identify what is "the application" and what is "the computer". popups that appear that are styled in the plasma style are "things belonging to the system" stuff (notifications, job progress, window listings, power management, screen brightness, etc.) while things styled with the oxygen style are "applications i've launched and am interacting with".

    it creates a visual separation, if subtle, between the environment the apps run in and the apps themselves. the styles should be complimentary, but visually distinguishable without (or with hardly any) effort.

    the idea is to help sort out what "i'm doing" and what "the computer / network is doing" which is getting increasingly complicated.

    game console systems have been doing this for more than a few years now, and it's exceptionally effective.

    ReplyDelete
  72. I agree that buttons need more padding. Buttons height is too small.

    ReplyDelete
  73. Can you please make the buttons less edgy ? If possible , change the sharp cut at the edge to a little more smooth .

    ReplyDelete
  74. Oxygen looks pretty nice. Some small changes can be done. The current design is a bit away from whats called "the golden section"

    So, make the buttons padding wider or let the user do this. Their height is to small.

    The scrollbar is the ugliest in KDE4 - but that is another design problem... QtCurve did a good job in booth things

    ReplyDelete
  75. please dont do anything to the buttons! those are seriously my favorite part of oxygen. the buttons are awesome!

    ReplyDelete
  76. Don't think this will be read, three years after, however, just in case, I have a complain about oxygen buttons: they lack of default-button visual-hint. A subtle recoloring would do. A frame a la Motif would also, but I think that would not match the general Oxygen look

    ReplyDelete

Followers