Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Update: Just to clarify that this question is not about imitating the OS but more about what the ideal dimensions should be, especially when they seem so random natively.

I am building an application in Adobe AIR that will run on both Windows and Mac OS X.

I'm giving the window chrome its own UI but keeping in with the OS its running on (so for example titlebar buttons will be left or right aligned etc.).

I've not been able to find any guidelines on either Apple or Microsoft developer networks so I've opted for screengrabs of Windows 8 and then redrawn the windows for my own versions.

What I've found for Windows 8 (desktop mode) is that a window has 6px spacing around the edges with 1px inner shadows and outer shadows. The title bar is 29px high and 22px when maximized.

The titlebar buttons are even more obsure, 26x20px for minimize, maximize and 45x20px for close button. The height is reduced to 19px when in maximized mode.

Here's a graphic I've made to demo all the above sizes:

enter image description here

The question is why the random sizes? As usually when I do anything like this I would do something like a 44px title bar, with either 16px, 24px or 32px icons. So that everything is an even number and is easy to do padding and position.

For example that close button is 45px wide, but the icon is 8x7px so it has 18px of padding one side and 19px the other side, and 7px top and 6px bottom (it's 6 top and bottom when reduced to 19px height on the maximized state). Is there some method in the random spacing?

What I've noticed most of all in Windows is that all the different apps have slight variations of icon sizes and window border dimensions (e.g. Visual Studio, Office, etc.)

What dimensions do people use for their window chrome? And are there any guidelines for this type of thing?

share|improve this question
    
For native (and Java) applications the OS normally handles the window chrome, not the application. Does Adobe AIR not do the same? –  Evil Closet Monkey Feb 6 at 16:00
2  
Whatever the reason, don't forget that the actual OS windows can be restyled on the OS level. So your carefully imitated windows will be out of place for anybody who doesn't run the out-of-the box theme. Is there a reason you insist on imitating native controls in a non-native technology? –  Rumi P. Feb 6 at 16:01
1  
AIR can replicate the native chrome, but for arguments sake I was trying to figure out why the dimensions were all over the place and when doing custom UI it's hard to choose dimensions when the foundations follow no pattern. –  Cameron Feb 6 at 16:05
    
This is mere speculation but I wouldn't be surprised if the windows 8 ui elements are responsive in scaling. –  kontur Feb 7 at 12:41
1  
As Steve Jobs once mentioned: "Microsoft has absolutely no taste" so I think that nobody actually cares about that and there is no any "real reason" behind these "random paddings and button sizes". –  alexeypegov Apr 7 at 13:05

3 Answers 3

Why the random sizes? Is there some method in the random spacing?

Just because they differ between full screen mode and free floating screen mode, doesn’t make them random. The difference may kome from test, where it would be easier to hit the top bar in full screen mode than in a free floating window. In full screen you can run the mouse to the top, and it stays there. In a free floating window, you need to aim more careful, thus the bigger header. But to know for sure, one need to be a Microsoft Employee at the right department, which I am not.

What dimensions do people use for their window chrome? And are there any guidelines for this type of thing?

Microsoft have published a good article on the matter Guidelines for window sizes and scaling to screens (Windows Store apps) where the say the following on window chrome:

The following tables show the most important screen sizes to consider when designing your app.

Fullscreen screen size 
(effective pixel resolution)  |  Device description
1366x768                         Tablets, convertibles, and many laptops (16:9 aspect ratio) 
1920x1080                        Large laptops and devices (16:9 aspect ratio) 
800x1280 and 1280x800            Portrait-first small devices (16:10 aspect ratio) 
1024x768 and 768x1024            Landscape-first small devices (4:3 aspect ratio) 
1371x857 and 857x1371            Small devices (16:10 aspect ratio) 
2560x1440                        Very large all-in-one device (16:9 aspect ratio)

enter image description here

Even though it's targeted toward apps in general, it works just as well on forms windows.

share|improve this answer
1  
The point about the random sizes was not to do with fullscreen vs windowed mode. Rather why is there unbalanced padded either side of the buttons and unusually heights that don't follow any pattern. –  Cameron Mar 6 at 10:24

I personally tend to go with even numbers like you do. I often space and size things based on units of 10. Mostly, this is because when designing in Photoshop, and a lot of other Adobe products pressing Shift+some arrow key will move the element by 10 pixels. This prevents me from not being able to just stick with a number.

Sometimes going by units of 10 is too much. That's when I use 5. For example, an icon might be too small at 30px but too big at 40px, so I'll try 35.

If things still don't "look right" then I size up or down by a pixel at a time. This is where I tend to get measurements like 26px or 11px.


I also think units of 12 work really well. You can divide it evenly by 2, 3, 4, and 6. Pretty useful.

For small elements like borders I tend to use 1,2, and 4. That's a personal preference not based on science, just preference.

share|improve this answer

According to The Counter.com 1024 x 768 was the most popular monitor resolution in January 2007. 53% of their stats used that resolution. That's a lot.

On the other hand, most Web designers use monitors that are even larger than that, in the 1280 x 1024 or even 1600 x 1200 range. (And if you have a 1920 x 1200 monitor, I hate you... According to The Counter.com 25% or more had a monitor resolution higher than 1024 x 768.

There isn't an exact correlation, browsers and monitors are different, but here is what I use:

640 x 480 = 620 x 310
800 x 600 = 780 x 430
1024 x 768 = 1000 x 600
1200 x 1024 = 1180 x 850
1600 x 1200 = 1580 x 1030
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.