Face Value

Each operating system (OS) has its own distinct visual style. This style is defined by the various elements that make up the GUI such as the taskbar, buttons, sliders and, perhaps most importantly, windows. Windows present the user a graphical means to interact with an application that would otherwise might be a command line tool.

Windows are at the very basis of a modern-day GUI, and because they're so important, every OS vendor has its own opinion about them. They provide programmers and UI designers with standard windows through a window manager. Microsoft's approach is called Windows Aero, while Apple uses Aqua. Whatever the name may be, their goal is the same: to provide a uniform GUI across the entire OS regardless of an application's functionality. This is why every single window uses the same window controls “traffic lights,” no matter what the application.

However, a lot of applications have been appearing lately that take some liberties with the OS-provided windows. Either these customized windows extend the application's UI beyond the window's boundaries, or alter the window chrome to meet their own aesthetic. Firefox recently added the aptly named "Firefox button" to FF4, which in the case of Microsoft Windows they placed not in the window chrome, but on the window chrome. Apple ignored their own Human Interface Guidelines by placing iTunes 10's traffic lights vertically instead of the standard horizontal alignment. Linux might suffer less from this phenomenon, but it's definitely not nonexistent.

These edits to the window chrome are not easily done (unless you use Adobe AIR, in which case it's quite easy). They are painstakingly coded. The programmers and UI designers decided the benefits of their designs outweighed the carefully designed overall experience of the OS. But is that decision wise?

Much of the inspiration for customized UIs (and their bounding windows) comes from the mobile world. Mobile devices are not window-based. A lot of what we've learned these last few years from mobile development is now starting to trickle back to the desktop. OSX Lion is a testament of this.

Being able to edit the window chrome to fit an app's aesthetic can go a long way in establishing a pleasant user experience. As Donald Norman pointed out, pretty things are often perceived to work better. I’ve noticed that a few apps for OSX use an enlarged title bar; the App Store, Reeder, Google Chrome, and Twitter have taller title bars than the OS standard. Giving the window controls larger padding above and below. If you have Twitter and Google Chrome running side-by-side (as I usually do), their shared, enlarged title bar creates one seamless transition. However, fire up any app that does use the standard window chrome and the effect is lost. The question is whether that larger bar is really all that better.

The single biggest reason to stick with the standard windows is that users are accustomed to them. They know where to click to close or maximize the window, or where to place the mouse to drag the window.

Placing UI elements on the chrome or tweaking the chrome in any other way risks breaking this expected behavior. One example of this is one I frequently run into myself. I often move Google Chrome across spaces on OSX. To do this, I click on Chrome's title bar and hold the Option key. Clicking one of the arrow keys should move the window to a different space. And it does. The only problem is there's no real visible boundary between title bar and tabbar. I usually click too low, meaning I switch spaces without taking Chrome with me.

This may be just a small nuisance, but it can grow into larger problems. In its early days, WinAmp allowed rigorous skinning of the app, often resulting in horrible usability. Having to stare at the UI to simply try to find the window controls is bad form, no matter how awesome the interface may look. Had WinAmp skins been forced to use the standard window chrome, the end result might not have been as fancy but at least the window controls would have been easy to locate.

Whether or not tweaking the window chrome is a good idea or not depends in part on what kind of app it is. A utility app such as Quicksilver would be negatively affected by using a standard window since these apps need to hide themselves when the user is done with them. But for apps that are open for more than a few seconds and cannot accurately predict when the user will be done with them, sticking to the OS standards ultimately benefits the overall experience. Browsers and text editors are examples of such an app.

There may be a new trend in UIs of consolidating window title bars and toolbars into one. If so, such a trend might evolve into every app having its own version of window chrome. In that case, the OS becomes nothing more than an empty canvas onto which every app is free to draw itself however it wants. Whether that's desirable or not depends on who you ask. Ask developers, and they might be glad to have fewer restrictions. Ask users, and they might be lost trying to work with dozens of different approaches to the same issue.

I spotted the following quote from a designer the other day: "Yes, I know it's missing the stoplights; not sure where to put those yet." It shouldn't be an issue to find an empty spot for the window controls. Operating systems define their windows in a uniform way for a very good reason, and as UI designers and developers we must be very careful not too disregard that too easily. Your application might look better in itself, it might work better in itself, but it might also negatively impact the user’s experience more generally.

I love my work.

There’s nothing that gives more a sense of accomplishment than tackling a usability problem both effectively and visually pleasing. Spending hours of  research to identify the core issue, thinking of elegant and simple solutions, sketching some rough outlines and then sketching some more, creating your first graphics and finally bringing it all together is a process that makes the entire solution YOUR solution. You identified the real issue behind failing usability and you made it your goal to solve that issue as good as you possibly can. You’re proud of your work, everything you made has a reason for existence, every pixel painstakingly put in place and then re-examined.

This is design. Solving problems as elegantly as possible. It’s fun & rewarding.
But literally everyone has an opinion about design. Some like it bold and flashy, some minimal and muted.  But what not everyone understands is that design goes deeper than just aesthetics. It’s more elegant problem solving than artistic prowess. Explaining that design is a combination of expertises is often a useless effort. No matter how well you defend your decisions, people will still judge by the looks. Books shouldn’t be judged by their cover, but they are. Design shouldn’t be judged by their appearance, but it is.

Let’s say you designed a dark UI. It’s dark because the app needs to work in dark environments, so you made a clear and well thought out decision for a very good reason. Making it light would hurt the eyes. But your colleagues prefer a light UI, chief amongst them your boss. So, they amongst them decide you should make the whole thing light. Majority decides, deal with it.

Now that’s a quite big example. More often it’s the little things that cause discussion. Text color, screen layout, logo size. For example, your professional opinion is text elements of equal importance should receive the same treatment. Their Dunning-Kruger-effect-induced opinion is that one little text-element should be typeset in bold red lettering because, hey, that’s what they use most often so obviously that’s more important to everyone. Oh, and make the logo bigger. 

On a sidenote: whitespace is the most underrated element by non-designers. They simply see it as a void that has to be filled with more stuff. 

Design is easy to comment on. “I don’t like it” is said easily enough; just as easily as “that doesn’t seem too hard”. Fair enough, to each his own opinion. But these very same opinions are usually not worded as an opinion, but as fact. Saying “this design sucks” is not stated as an opinion, it is stated as a fact because to them it _is_ a fact. But once again, based for a very large part on looks and first glances.

Comments like this can really put a designer down. Leave them thinking “Why bother? Apparently he knows my job better than I do”. This is dangerous territory, because it harms the very same design the commenters assume they are improving.

 There are people who are great designers, but poor debaters. There are people who are great debaters, but poor designers. Defending your design is an unfortunate part of the job. But it’s the only weapon we have against ill-informed opinions. You are the designer; don’t let other people’s opinions do the design work for you. 

I still love design, but that’s just my opinion.

Sony recently announced two new tablet devices which will be available later this year. It might not be a direct competitor to the iPad (yet), but at least Sony has the balls to come up with a formfactor of their own. Granted, that dual screen thingy does look a bit like an overgrown Nintendo DS.

The tablet itself runs Android 3.0, which frankly doesn't say shit anymore. Sure, it won't be lacking in features or, ahem, Flash support, but all that is nullified if they theme the OS horribly like HTC often does.

Judging from the video (which is unembeddable, so view it at the official page), Sony did slap a theme on Android, but from the looks of it, they didn't do a bad job. Clearly taking cues from Windows Phone 7, it's minimal, clean and plain pretty.

Sony took a good look at the major players in today's smartphone/tablet market, identified their strongpoints and merged them into 1 (well, 2) devices. Usually this approach result in a grotesque Frankensteinian behemoth of a device, but the folks at Sony just might have pulled it off by reinterpreting them all and -why is this so hard- coming up with a hardware design themselves that *doesn't* look like the iPad. Let's wait for the real deal, shall we?

The official announcement on the Sony blog.

Please no. 

Microsoft is really upping their game lately, and the progress shows. I'm specifically impressed with the direction their Metro Design Language is going. Metro is a far cry from the cartoonish XP and the "let's-add-gloss-because-it's-gloss" style of both Vista & Win7. The typographic approach of Metro stands in stark contrast with the Ribbon UI, and now the men & women in Redmond are experimenting with adding it to Windows 8's file explorer.

Since Redmond introduced the Ribbon in MS Office 2007, it has garnered a lot of attention, both praising & heavily criticising. Personally, I think a ribbon does more harm than good. It's used as an area on the screen where the developers can just throw any and all controls and be done with it. The positioning of these elements seem random & inconsistent, not to mention the valuable screen space a ribbon demands.

Now you know why I don't like the ribbon in principle. But adding it to a file explorer brings another risk with it, and that one is caused by users experimenting.
The ribbon was initially designed to make complex applications simpler, or put differently, to make advanced functions easier to reach and identify. This makes sense when using MS Word or PowerPoint. Simply click on a function and see what it does. There's always undo.
Doing so in a file explorer, especially in one that has access to *all* files on a system, is not so wise. Accidentally deleting a paragraph in Word is annoying but can be overcome. Accidentally deleting a whole file is a whole lot more annoying and might even be dangerous to the entire system. Granted, deleting a file is also easily fixed by retrieving it from the trash, but the thing is that the ribbon allows easy access to more sophisticated functions of the file explorer as well. Say the file explorer has the ability to hide any file from view, and this function gets activated by experimenting or bad aiming. The file'd disappear and it wouldn't be in the trash either. If you don't know exactly what you did, that file containing your Nobel Prize winning research would be lost forever. Not gone, but lost. 

And on a final note: those two tabs extending into the title bar ("Library Tools" & "Picture Tools") represent the very thing I hate about the ribbon: it consumes space where it shouldn't.

/via withinwindows