Under construction

Thanks m8, nice to see that the issues are known! I hope you and the rest of the guys are able to fix them shortly, I really hope so (please!). The New-Tab button space for example looks just bad. What do you think newcomers/people considering starting with Opera say when they see that?

And about the glass-line, correct. But they are also NOT visible on the bottom in thumbnails view (they ARE on the top in thumbnails, but not bottom). Forgot to write much about that..

And why not rounded corners for the right side of the address-field "right now"? You can't already be looking at a complete redesign, do you? There's no point in that, Opera 11s UI is very good and simple. Just fix the issues present at this point and you will have a wonderful UI for MANY MANY years to come. Please make rounded corners there too, it looks out of place. Should be the same everywhere!

"Buttons not aligned across toolbars" is probably easy to fix I assume, just make the padding/space the same on all toolbars and on both sides of the toolbars (left/right). It seems almost OK on the "Bookmarks"-bar though but you should still check it..


7) The space between the address-field and the search-field might be slightly too big? It was made that big to fit the three vertical black dots (***) back for Opera 10, but they were since removed.

Sorry about the long comment beforehand. I tend to ramble.

I don't quite understand why the sidebar cannot be blue. It was blue before without any problems. Sure, it wasn't entirely native, but it wasn't off the wall like it is now. Is everything going to be grey, monochromatic, and difficult to differentiate between? Why does absolutely everything have to be grey? It's blue in Windows when sidebars on Windows are white. Why can't it be blue in Mac OS X? Sure, it's not going to be entirely native, but it sure would look more native than it is now.

It's not like the sidebar is overly complicated (aside from the Mail panel) or so far away from what is in Windows that it can't be done. Since I mentioned Windows let's compare Windows' sidebars to Mac OS X's. Windows' sidebars have a hierarchical listing of items with a expansion arrow on the left; selections have a gradient-like appearance; and count badges are on the right side of the item flush right with the side of the sidebar. Mac OS X has exactly the same, but the only differences are that top-level items don't have an icon (and are capitalized), margins and padding, and the UI graphics themselves. Windows' sidebars have the expansion arrows disappear when the mouse isn't hovered over the sidebar; that's not really necessary, and applications which take great strides to blend in with Aero tend not to do that bit of special effects anyway. What I mocked up wasn't entirely native because I took care to try and maintain Opera's present features, but it fits in just fine.

Yes, everything here wouldn't be possible with the skinning system the way it is now, but the only things that would stand out to a casual user (on all of them except the mail panel... more on that later) would be margins and padding on items. Sure the selections themselves won't look native, but the ability to make those can come later. It's not something that stands out like a sore thumb, but the grey appearance of them now does. I don't know how difficult it would be to give skin authors precise control over items in the panel or to allow skinning of the selection status of items in the panel, but they're just icing on the cake anyway.

All that's left is the mail panel. I demonstrated how the new features available to it can apply to Mac OS X (and really the other platforms with padding, margin, and graphics changes). The only things I suggested removing were the odd behaviors of it, things that just confuse people like how the top level items stack at the top of the bar when scrolling. I set my brother (who's not very technically inclined) up to use Opera Mail for his business, and he's moved to using Apple Mail because he finds the mail panel "buggy" and frustrating. I couldn't convince him otherwise (because the behavior isn't a bug) because that stacking behavior is just bizarre. The scrollbar choice is also weird. There's nothing wrong with simple scrolling people have been used to since the popularization of the GUI and the OS's native scrollbar for performing that action.

Also what about the dark grey bar that appears on the bottom of the panel when the status bar is disabled? It's been there since Opera 10.5 alpha.

Spacing on toolbars is easy in Mac OS X. There's 8 pixel margins on the left and right of every item in the toolbar. This can be achieved in Opera by putting a 4 pixel padding on the left and right side of the bar itself while there's 4 pixel margins on the left and right of every toolbar item. That's pretty much a universal rule. Windows uses 6 pixels, but sometimes there's 6 from the edge of the bar and 8 between items. Ubuntu's is 9 from the edges of the toolbar and 8 in-between items. It'd be safe to just use 8 for simplicity's sake. Icons require a bit more work. The best way to unify icons across the UI would be to make them all fit within the same sized container. If you look at my toolbar icons in the mockups I made most of them are 16x16 icons within an 18x18 container, but a few of them take advantage of the extra pixels available. Thanks to Jon's efforts with Opera 10 all of the icons have a common look and feel. That's not the problem. In my mockups I used my icons because I have a set I've created already (and created some new ones because I wanted to because it's fun); it's not that I personally find what's there now distasteful. It's just that when you add some buttons to a toolbar the UI breaks. The extensions rules dictate an 18x18 icon size then everything else should be that size because in Opera you can put any button just about anywhere; that capability has to be taken into consideration. Because favicons are 16x16 then the panel selector icons can't be 18x18, but if Opera allowed users to specify their own 18x18 PNG images for Web panel icons (like they can specify 16x16 ones now for labels in M2) then that restriction can be removed. Web panels have always broken layout, so this problem isn't really new. Only thing that's left is the status bar which has smaller icons. The status bar already uses the .mini declaration in skin.ini anyway. You make regular sized icons for items that go there in case people want to put them elsewhere while mini icons are what are used for that toolbar. For completion sake you would make mini icons for everything in Opera, but that might be going too far; at least make mini icons for things people regularly place on the bar. Simply taking a poll about that would be a good way to find out what people usually put on the bar similar to all the questions Jon asked of the community when he first started at Opera. The only reasoning behind making mini icons of all the commands in Opera would be if users could through the Appearance dialog make any toolbar use .mini like the status bar does. You then use the push-button appearance for all toolbars which can effectively use them. You can't really do it on the tab bar, personal bar, or on the content block bar for instance, but it's certainly viable mostly everywhere else that doesn't have some other appearance need. Where it's not then you still use the 18x18 size icons. They just won't have a button around them. It's be a good bit of graphics work to retool a lot of the icons, but the skinning system as it is now looks to allow it (at least from my memory of skinning prior to Opera 10 because my skins used the same icon size for everything) and the fruits of the labor would be excessive.

I have tweaked my Toolbar to hell. There are like... tons of stuff I don't particulary like, but talking about the default skin on Windows 7, these are my major concerns:

* I was going to make a list, but I prefer a commented screenshot *

http://img254.imageshack.us/img254/6011/20110219160119.jpg

These have to be managed carefully, since fixing them might cause more problems...

@lolfang:
since this build, the panels on the left and the address-bar are perfectly aligned. but it was already pointed out, that there is a need of black magic, to correct this

Originally posted by Helmers:

On OS X sidebar color
It probably won't be changed (back to blue) unless we have the technical underpinnings to make it more similar to what is used in other OS X applications.

http://bit.ly/hhXIhe
Looks like in Lion the finder sidebar will be gray...so you can keep the current one! Also seems like the native buttons won't be rounded, but will look very similar to the ones you've made for styling the infobar! Time to set Push button skin = infobar button skin in order to have a preview of the new lion native buttons?

Actually sidebars are still blue except now they have an unnecessary gradient. They turn grey when the sidebar is inactive just like they do now (something else that'd be cool for the skinning system to take care of... inactive window skin changes). If you notice in your screenshot they're grey because the window is inactive.

On another note it'll be really nice to see aqua buttons go. That should have been done in Leopard. Consistency is good. Gets difficult when there's a different button type for everything. Looks to have a couple different button appearances, but they're all consistent in shape. Less confusing!

What I don't care for, though, is their trend of going to monochrome icons for everything. They look fresh in small bits (say for navigation on a Web browser), but when everything's monochrome it's hard to differentiate between icons unless the shapes are radically different. It's odd because they made sidebars blue simply because if you make everything on the UI grey it all blends together. It's easy to see the problems in iTunes today when before you could instantly tell a smart playlist from a regular one by the purple color. Now with a long list of playlists everything just runs together. There are examples where colored icons are used in what I've seen, but the vast majority of everything is monochrome. In an application like Opera where there's hundreds of actions with corresponding icons it'd be ridiculous to make them all in that manner. There's no reason to have most icons in one color; we have displays able to pinpoint accurately represent millions of colors.

On another note it looks like scrollbars are getting the iOS treatment in Lion, but the appearance is more in-line with what is seen in Twitter or Sparrow for Mac than what's seen in Opera. I do wonder if the user will be able to turn arrows on, but I guess not too many people use them these days, eh?

Originally posted by Khadgar:

Actually sidebars are still blue except now they have an unnecessary gradient. They turn grey when the sidebar is inactive just like they do now (something else that'd be cool for the skinning system to take care of... inactive window skin changes). If you notice in your screenshot they're grey because the window is inactive.

Sorry....you're right!

Originally posted by Helmers:

@lolfang
Some of those things are design choices - like the roundedness of the tabs. Other things are by convention - such as input field height (it is controlled by the font used).

Then there are simply bugs. We need to improve our processes to make sure that they do not get out.

Shift+F12: color scheme, default is "None".

Maybe setting it to "System color scheme" by default - will more convenient ?

---------

Also, there is no TitleBar in Windows 7 aero, which is GOOD.
.. but as a side-effect of it,
we cannot see page title. At all. Which is quite annoying, when you are reading some comments and cannot check what article or thread they belong to...

http://my.opera.com/eXtremo/blog/2010/12/15/opera-11-ui-glitches
still present

Fitt's Law Fix

Please fix the tabs so that they reach the top of the browser. Anyone can change Chrome Integration Drag Area if they want some space above the tabs, but modifying the skin to fix this is not trivial for end-users. To fix it is trivial for the skin designer.

There are many threads on this in the forums, such as this one.