When should you use a sunken client area?


The WS_EX_CLIENTEDGE extended window style allows you to create a window whose client area is “sunken”. When should you use this style?

The Guidelines for User Interface Developers and Designers says in the section on the Design of Visual Elements that the sunken border should be used “to define the work area within a window”.

Specifically what this means is that a sunken client area indicates that the window is a “container”. So, for example, the Explorer contents pane gets a sunken client area since a folder “contains” its elements. Users expect to be able to manipulate the items inside a container. By contrast, a dialog box is not a container, so it doesn’t get a sunken client area.

At least those were the rules back in 1995. Perhaps the rules have changed since then. (Indeed I wouldn’t be surprised if they have.)

Comments (23)
  1. Jeff Parker says:

    Hmm, you know this is interesting, seen this sunken rule before but you know it explains something to me on a few applications I use. 3d development apps have gone crazy I think trying to redo the interface in 3d. Some of the Apps that come to mind are Poser and Bryce who use a raised window that is not sunken

    http://www.curiouslabs.com/

    http://www.daz3d.com/program/bryce/

    I have always just felt an uncomfortable feeling when using these apps, they just didn’t seem natural. However My favorite 3d app is Rhino 3d.

    http://www.rhino3d.com/

    I am more productive and it just feels comfortable to use. The do not stray from traditional window layouts, sunken workspaces. So there are apps out there challenging this rule, but if you ever work in one, it is uncomfortable at least for me anyway.

  2. Ben Cooke says:

    Poser’s interface is a great example of form over function. They should’ve just used the standard controls and style like everyone else, rather than trying to be "special".

    That’s graphic designers for you, I guess.

    The rules as Raymond writes them seem consistant with every app I’ve seen which I would class as "sensible". Obviously there are plenty of apps not being sensible like Poser, Bryce and WinAmp… the "let’s replace everything with fixed-size bitmaps" brigade.

    I wish application developers would realise that "skinning" should be an OS-level issue, not an application-level issue. The fact that every major skin out there has to be remade for every single skin-capable application should tell someone that this this is the wrong approach.

    Of course, Windows XP won’t let you use "custom skins" system-wide without third-party add-on software, but that’s another story.

  3. Pete King says:

    Poser and Bryce are two applications that the designers clearly wanted to lift away from the whole boring notepad/office/application look.

    Speaking as an owner of both these applications, and fairly regular user, I can say that their interfaces are easy to use and fairly innovative. For example, panning the camera using a visual ball control actually makes sense in 3D.

    Also, try and bear in mind that both Poser and Bryce take a highly complex subject matter (creating and editting 3 dimensional content) and simplify it so that a beginner can pick up the basics and "get into the package" very quickly. The interface, I think, helps lower this barrier of entry.

    Compare this to 3d studio max, Maya, Terragen and Motion Builder, whose interfaces can seem daunting.

  4. Don Kackman says:

    Every UI developer should read Alan Cooper’s book "About Face".

    He makes the very excelloant point that only software geeks like things such as skins and neat little UI widgets. Normal people just want software that allows them to accomplish their goals without feeling stupid.

  5. Maks Verver says:

    In reply to Don Kackman: "[Alan Cooper] makes the very excellent point that only software geeks like things such as skins and neat little UI widgets. Normal people just want software that allows them to accomplish their goals without feeling stupid."

    In my experience it is the other way around. I (a software geek) hate skinned GUI’s. Although I won’t claim that autoamtically proves my point for all ‘software geeks’, but in my experience many applications which are targeted at less skilled consumers tend to have non-standard interfaces.

    Think of applications like Microsoft MSN Messenger, Symantec AntiVirus (and compare it to the Corporate Edition which uses a different, more standard-compliant GUI), Windows Media Player, filesharing programs like KaZaA, etcetera.

    It may true that ‘normal people’ just want to get their job done, but often they are badly informed. They will chose form over function whenever the functional differences between various applications are not clear to them. Many ‘normal people’ are unaware of (and therefere can’t appreciate) the advantages that standard-comliant interfaces provide (ask your mother if she knows what those three dots in menu items mean, ask her if she knows how to drag-and-drop, etcetera) and are thus more likely to prefer an application that looks ‘nice’ over an application that looks ‘boring’ or ‘complicated’ but provides the same functions.

  6. Ben Cooke says:

    I’ve no objection to applications introducing new control types. You are right that Poser’s arrowy-ball-thingy is a great way to shift the camera intuitively.

    However, there was no need to completely reinvent the wheel for the rest of the interface. The main view area could have been a sunken container, and the widget panels hanging around could have been toolbars and side panels containing buttons and other widgets with the same general appearance (the camera panel would be essentially unchanged apart from the color scheme, I suspect) and the app would still have been essentially as intuitive for new users and much less annoying for existing users and those who are used to more traditional interfaces. I seem to remember one of my pet hates was the tall, thin panel full of dials for changing the pose and body characteristics. Dials were just about the worst choice for those widgets, and I think most people probably type in values more than use the dials anyway due to how clumsy the dials are, so they could have made the type-in boxes a lot more accessible.

    DAZ, who now own Bryce, are currently beta-testing a rival to Poser which I enjoy using a lot more. (when I do use it, anyway… I’m not really a 3D graphics person so I can’t claim I use any of these apps extensively.) They’ve still got a wacky color scheme, but on the whole their look is pretty standard.

    I should also point out that I’ve not used Poser since a demo version I got off a magazine cover CD years back, so it might now be nothing like I remember it as I assume there have been a few new versions since then.

  7. Chris Altmann says:

    Bryce. Ugh.

    The first and only time I used it (years ago), it took over the entire screen, even though it only used a tiny portion of said screen (didn’t scale to my high resolution). And when I wanted to close it, I couldn’t find the exit button/menu/whatever. I had to kill it by other means.

    Not very high on my list (ie: not at all) of quality UI.

  8. Chris Becke says:

    I think to a large degree, applications with totally unique userinterfaces work with non computer uses precisely *because* they are different.

    Basically, the applications become like discrete machines that can be leart seperate of any other app in the system.

    While "computer users" are confortable using interface metaphores accross many apps, its the close similarity between apps that actually makes it difficult rather than easier for computer neophytes to find their way around – Its like being in a maze – The similarity of the corridors hinders your ability to find your way around.

    Just recalling trying to teach my Grandfather how to perform some simple task – I remember the confusion caused by "options" moving from the "view" menu – where 95 and early windows apps put it – to the "tools" menu where it mostly seems to be found now.

    Which is my beef with Office UI diverging from the base OS UI – similar enough to look like the same corridor I was in just now, but different enough to confuse.

  9. Norman Diamond says:

    The base note surely explains why I still trip over parts of VS .NET and recent MSDN Libraries. When a file is open it’s related to the tab which is not sunken and not highlighted in a different color. When there is a selection of toolboxes or search panes or whatever, the panel that is open is the one which is not sunken and not highlighted in a different color. Still not used to it.

    The people who like skins aren’t computer software geeks (techies) but artistry software geeks (artists) who use computer software because it’s the current trend.

    Techies who want to get work done turn off those skins, and set taskbar sizes to small (and have to repeat this setting over and over again in Longhorn beta). We need space for the stuff we’re working on (in the client area), instead of extra space to make the non-client area look flashier. Of course we techies aren’t normal users, but still, we’re not the ones putting skins on everything, artists are.

  10. Raymond Chen says:

    ? Tabs are not containers; they should not be sunken. I guess I don’t understand what your point is.

  11. Artist says:

    I’m an artist and I hate skins.

  12. Mat Hall says:

    Skinned (or non-standard UI) apps can be their own wrost enemy. Look at the UI for QuickTime 4 — they’ve gone down the "let’s make it like a physical device" route, but it just doesn’t work. Some things you can click on don’t look like you can click on them, and some things that look the same as the non-obvious clickable areas don’t actually do anything; the volume control is just plain WRONG; the sliding trays mean that you pretty much need to keep the window in the top thrid of the screen to access some bits. Apple are normally quite good at this sort of thing, but QT is simply awful.

    Also, most skinned apps are no good for the visually impaired — they’re immune to high-contrast colour schemes and "large fonts", and give screen readers a fit…

    I can’t remember where the quote comes from, but it sums up skinning quite nicely:

    Whenever a programmer thinks, "Hey, skins, what a cool idea!" their computer’s speakers should create some sort of cock-shaped soundwave and plunge it repeatedly through their skulls.

  13. Pete King says:

    Ben Cooke – Youre right about the Poser interface, and I think you have a good point about the dials. Double clicking a dial pops up a text box so you can manually key a number in, however, seeing as the controls use different numbering scales, 1 in one dial can mean a lot more than in another e.g. z scale (percent) vs z rotation (degrees).

    Chris Altmann – You can change the document size to fill the screen in Bryce, however, Ive no idea why it doesnt do this by default. To get to the standard menu, move the mouse to the top of the screen and up it pops, you can close the application from there. I guess you get used to these little niggly things after a while, but I cant explain what the thinking was behind these.

    Mat Hall – "Whenever a programmer thinks, "Hey, skins, what a cool idea!" their computer’s speakers should create some sort of cock-shaped soundwave and plunge it repeatedly through their skulls. " … Whats wrong with a developer wanting his application to look good or stand out from his competitors? After all, the GUI is what made Windows 95 attractive to the general public, is the main selling point of Windows Longhorn (3D!) and is often what drives people to Apple machines…

    Maybe we should be praising developers for trying to be innovative. As a programmer myself (I use VB.Net), I dont want to make a characterless application…

  14. Norman: strictly speaking, the client-edge is used for windows which the user interacts with the contents of.

    Eg: A word document’s contents are shown within the sunken-client boundary. A web browser’s contents are shown within the boundary. A checkbox or radio button *used* to have the client-edge visual style, and kind of still do.

    It’s a difficult thing to define in words, but once you get it, it’s easy to figure out which windows should have it and which ones shouldn’t.

    One short-hand way of looking at it though is if you can conceivably think of a reasonable reason for the window in question to have scroll-bars attached to it, it most likely needs a sunken-client edge.

    If not, then it doesn’t need one.

    (Dialogs and tabs shouldn’t have scrollbars on them, regardless of whether or not .NET, VB or MFC allow you to create scrollable dialogs.)

  15. Mat Hall says:

    Pete: One man’s good looking application is another mans butt-ugly eyesore, and making something "pretty" at the expense of ease-of-use or accessability is, well, just plain daft.

    I’ve mentioned QT4 already, but it’s a perfect demonstration of why you shouldn’t try to reinvent the wheel, especially if your new version is square. Here’s in-depth dissection of all the wrong things it does:

    http://digilander.libero.it/chiediloapippo/Engineering/iarchitect/qtime.htm

  16. DrPizza says:

    "I can’t remember where the quote comes from, but it sums up skinning quite nicely: "

    jwz, of course.

  17. DrPizza says:

    (someone posted it as a response to his rant about media players, IIRC)

  18. Pete King says:

    Good article, and good point.

    However, good design and usability need not be mutually exclusive.

  19. Jeff Parker says:

    Hmm, I didn’t want to start a large debate, but Poser and Bryce were just 2 app that came to mind right away that I use as a developer to try to get work done and find the interface unproductive. Rhino though I think has a much beter camera controls, the window itself, Leftclick hold down and rotate however you want, Zoom in use the wheel. Need some granular control, hold down alt or ctrl while moving the mouse much like Adobe Phtoshops zoom controls work.

    I guess the same thing can be applied to websites. I mean how many high scale informative protuctive sites use flash for anything other than banner adds. Flash on a website it a lot along the same lines. Yeah it has its purpose but is it usually very productive for getting around a website and getting irformation fast? Normally i see it just used for show. Don’t get me wrong but things like Movie Trailer sites, and New Game sites yeah they look great in flash they are all about marketing but then again they are not productive sites. But could you ever possably imagine MSDN in flash?

    The Flash tool has been out for years I still find it a little difficult to use but it isn’t terrible. However one tool some may or may not remember is Microsoft’s Liquid Motion which originally started I thought to be a Rival to flash. Unfortunately Microsoft dropped it. It’s first generation came out about when Flash 4 did and I actually enjoyed using it. It was very close to being at generation 1 as powerful as Flash 4. Very easy to use and productive.

    As far as Skinning, I have to agree what real developer uses skins? Ok I admit I download the Terminator 3 Windows Media player skin. I used it for a while but I am back at the default for it. But other than that I do not think I have ever skinned a app ever. I never even changed Windows default color scheme. I did change the background but nothing else. But you go to someone in Marketing or HR or something like that and they will have Fancy little mouse cursors, different little windows, and of course Clippy will be ever dominant on those PC’s and active offering to help HR write a letter or something. I did have the thought once of trying to figure out how to feed clippy a big UML diagram but he kept wanting to correct my spelling in class names I gave up and shut him off again.

  20. Ben Cooke says:

    > Whats wrong with a developer wanting his application to look good or stand out from his competitors?

    I want to *use* applications, not be dazzled by the prowess of a company’s graphic designers. As I noted before, "skinning" should be a system-level issue applied to all applications, not an application issue implemented differently in every single application. For those who consider Windows’ standard widgets to be "ugly", they should be able to install a system-wide skin which will change the way they look everywhere. In fact, a third-party application that I don’t feel like advertising or promoting offer this possibility. For Windows XP, they get in front of uxtheme.dll and replace all of the Luna stuff. I think for earlier versions of Windows they just used ugly hooks to intercept paint messages for different window classes.

    I also wish it involved less bitmaps and more scriptable GDI calls. How many people here have switched to a "Windows Lookalike" skin in a skinned app and been annoyed because, since it is just a *picture* of what Windows normally draws, it doesn’t adapt to different color themes, Luna-style borders (for those weird enough to use them) and other issues such as odd DPI settings.

    Instead, a "Windows Lookalike" skin should just consist of a few GDI calls to draw the caption bar and some button-edged caption buttons, use Marlett to paint on the captions and you’re done. Depending on how wacky the application is, you could even just get Windows to draw it for you! This is most ideal, because then you get Luna controls when appropriate, the colors will "just work" and all the app has to worry about is drawing in the client area.

    Now that I think about it, I wonder how easy it would be to get inside Winamp 2 as a general-purpose plugin and draw sensible widgets all over it by intercepting its WM_PAINT and WM_NCPAINT messages. It’d be an ugly hack, but it would be quite funny! :)

  21. foxyshadis says:

    Haha, Ben. You could call it the "Unskin".

    You can say something should be OS-level all you want, but as long as it isn’t it’ll be provided by third-parties. Third parties usually prove the market for such tools before a vendor is willing to put the effort into adding the functionality at a lower level.

    I think skins are a perfectly valid response to the dismally repetitive, and occasionally ugly or broken standard visual styles. Good design means that everything feels seamless, not that it must be forced into a monocultural beige box. (Note that the default WMP skin is still a skin, and thus you use skins, just means you’re comfortable with the basic one.) Customization personalizes an app and makes it far more comfortable to use. If i could have the windows 2000 scheme but with a chisled granite flavor, I’d be in heaven.

    I could just hear the howls from this crowd if the prevailing argument was that command lines were useless because no regular user ever used them. Isn’t that, along with regedit, tweakui, alternate browsers, and all preferences menus, just another more powerful form of customization, after all? ;) We strike a balance between the causual user, the computer literate, and the power user, to give our creations the widest possible utility.

    Oh, and if a skin is important enough to bother someone on changing the windows scheme, than it’s probably important enough to hack to match the new scheme, just for peace of mind. Until powerful public libraries are readily available, people will go with the easier methods.

  22. Norman Diamond says:

    7/29/2004 5:29 PM Raymond Chen

    > ? Tabs are not containers;

    7/29/2004 9:26 PM Simon Cooke [exMSFT]

    > the client-edge is used for windows which

    > the user interacts with the contents of.

    I’m not sure what the "client-edge" means. As for tabs not being containers, I’ve just taken another look at the October 2001 MSDN Library and it is indeed true, the active tab is not sunken, but nonetheless the appearance of all the tabs back then was designed not to mislead. The inactive tabs are not highlighted in a more prominent color than the active tabs. The inactive tabs are separated from the panel by a line with just the right size and visibility, while the active tab is connected to the panel. Among the ways in which newer MSDNs and VS .NET differ from that, I guess the biggest are that the inactive tabs are prominently highlighted and the inactive tabs are sunken. These really are two backwards steps.

    > Eg: A word document’s contents are shown

    > within the sunken-client boundary.

    Well, Word 2000 has its odd MSDI interface (not too bad for Word 2000 of course, but I saw someone’s web site showing what it does to Access 2000) and earlier versions of Word had ordinary MDI interfaces so I haven’t really noticed the effect that you’re talking about here. Actually when Mr. Chen showed the evolution of the task bar from early trials through the version that is used in Windows 95 through 2000, the difference between that and tabs is highly visible. I wish that an MDI application, if one executing instance of the application is used in opening multiple documents, would have its own task bar rather than either the old MDI interface (minimized icons hidden underneath open document windows) or tabs. Since I think I haven’t seen the version you mention, I don’t know how it compares.

  23. Raymond Chen says:

    I think you’re misunderstanding what "sunken client" means. Tabs have no sunken client. The tab itself draws as "lower" (not even sunken; just lower) if it’s not active, that’s not the point here.

    Sunken client = has a raised edge around its content.

Comments are closed.