Lately, snippets of information on the new Windows have been seaping out from Microsoft. I haven’t been much interested in their doings in the past and I’ve never been particularly impressed with their ideas, either. The new visual styles aren’t particularly interesting, but certain small changes elsewhere, are. They are seemingly insignificant upon first glance, but dive into the consequences, and suddenly they’re not so insignificant anymore.
Working with usability and interaction design on a daily basis, these changes strike me as interesting. I can’t yet say whether they are, indeed, user friendly, but it might very well change how we do some things.
In this article, I’ll discuss a few of the nuggets that caught my attention.
Windows, Fitt’s Law and Tabs
A while back, I gave my opinion on the everlasting battle: Mac vs. PC. In the article, I mentioned a few things that annoyed me about MacOSX, and a few things that annoyed me about Windows. One of them, is particularly relevant:
Applications on Windows have their own window and header. Beneath this is the menu bar: “File – Edit”, etc. The window can be maximized to fill the entire screen save for the Task bar. It is easy to distinguish what is Windows, and what’s the application.
On the Mac, however, an application is a little less tangible. Basically an application is one or more floating Windows, and a custom title bar. Especially the title bar is confusing. Click the app, and the topmost, permanent title-bar changes to fit the active application. Click outside the application, and the title bar changes back to the default OSX title bar.
A commentator was quick to shed light on the OSX UI decision:
One smart thing about the menu bar on OS X, is the fact that everything on it makes use of Fitt’s law. That is to say, you can simply keep your cursor pressed against top of the screen and only be concerned about the left-right movement.
This is where Microsoft Max comes into the picture:
Max is a Flickr-like photo sharing application, that uses Windows Vista UI technologies such as WinFX. No comments will be made on the particularly Mac-like look, but rather some significant observations:
- There’s no application title, only a default application tab and tabs for each active section
- There’s web metaphor “back” and “forward” buttons
- To drag around the window, you click/drag almost anywhere in the application, not just the titlebar as was the case previously.
Tabbing seems to be the big new thing of 2005, yet the context in which they’re being used in Max is interesting. The tabs will be topmost to the screen when the application is maximized. This could mean proper use of Fitt’s Law, in the way that the tabs could be activated by moving your mouse to the edge of the screen. (While this was not the case beta I tried, I hope Microsofts interaction designers will work it into the final product).As for making large parts of the application click/draggable, I think I support the decision. I would prefer some concistency in where you click to drag, but the much larger hit area of the entire application is a good idea.
In any case, it’s interesting to see Microsoft change something as basic as the behaviour of the classic Windows titlebar. There’s a lot of unused realestate, and if the screen edges are properly used, it could very well improve some things. I imagine Photoshop with the first tab being a welcome page, and the second tab being the first open document, etc.
Their behaviour is quite strange; if you are at tab #2 and press “back”, you’ll immediately be taken to tab #1 and tab #2 will be closed. One would expect it to go the the last active tab.
Hello Office 12
The Office 12 suite will be getting a new UI. It’ll be metal (or Aero as they call it), and it’ll introduce a new piece of UI dubbed “The Ribbon”.
Word:
Powerpoint:
A few observations:
- No more header menus
Instead, there’s a new style of tabs that’ll each open their previous contents in a horisontal ribbon below. - Tabs aren’t topmost, like in Max
- Save, Undo and Redo buttons are placed alongside the new tabs
Well. With great power comes great responsibility. This is certainly the case for Microsoft.
With Office 12 they’ve tried very hard to get rid of “menu digging”. With more features than you can count, previous versions of Office often saw you digging through countless confusing submenus. Finding what you were looking for was hard, and if you were a bit quick on the mouse, the whole menu might collapse prematurely. I applaud their courage in redoing the UI of their flagship Office application, and I do admit they have some neat ideas now and then. With the ribbon concept, they’ve managed to tackle complex menus, and they’ve saved a few clicks here and there.
That’s where the fun ends.
- Consistency is key, in UI design. With an entirely new UI, they’ve also introduced a buckload of new UI widgets. A new scrollbar, another style of tabs, new re-arrangable ribbon menus, the list goes on. For their sake, I hope the look will be consistent with Windows Vista, once that arrives, but I suspect this new Office look will be the Brushed Metal of the Mac (i.e. the custom look of mothership applications).
- While the metal style is the same as Max’s, that’s where the similarities end. The Ribbon tabs are decidedly different in interaction design than those in Max. The Ribbon tabs do not make use of screen edges, thus losing the benefit that Max (possibly) has.
Afterthoughts
The most common usability / interaction design problem is lack of consistency. While Microsoft might be saving clicks, adhering to Fitt’s law and increasing submenu transparency, they won’t get anywhere unless they focus on consistency.
Changing fundamental things in the new Windows could very well make a positive impact on workflow, but unless the bulk of these new applications get a consistent, people won’t see the connection. Without the connection, the apps that do re-invent the UI will seem strange and out-of-place. Additionally, they won’t share the learning curve, but will each have their own.
Comparing Max and Office 12 to the early Internet Explorer 7 screenshots, I pretty much expect that browser to get the metal treatment as well. If I’m not mistaken, it’ll also mean no less than three different of tab styles: Max’ tabs, Office 12 tabs and IE7 tabs.
It’ll be fun to see Microsoft’s new ideas. Whether they’ll sink or swim, however, is an entirely different matter.
interesting. I understand what you mean about minning the menus, as a network admin the first thing we do is turn the auto hide menus off, people just don’t know that there is more options out there. good on microsoft for trying something new. maybe it will be a better windows, problem is maybe its too late. people are so used to not following the so called fritt’s law that they might have a hard time adapting to this new layout. creating an UI that really doesn’t follow the so called law but keep it with all your products for 10 years, people are becoming retrained from the obvious.
It’s fitt’s law actually
? Good observations Joen (and might I add that I actually like the design of the Max site).
It seems Microsoft might be walking into the same shakey ground Apple has recently veered into. I don’t know what they’re trying to do, but it feels a bit like they’ve lost the focus they need to present a unified front.
Luckily there’s a solution for OS X called Uno, which I’m currently making good use of.
The thing is, I’m all for specialized UI design when it’s indeed needed. You can’t do something like Photoshop using the standard UI element (I think you can’t anyway), so in that case it’d be needed to come up with some elegant solutions.
But by God, you’d better be serious about it and not just in it to woo the teens!
rob,
I imagine! The decision to further hide stuff is also just one of the most stupid UI decisions they’ve made in a longo time.
Michael,
I ws thinking the same thing. With OSX, the Mac got beautiful graphics. In the first releases though, it’s my impression that there was simply too much detail and too much eye-candy. I’d call that shakey ground, and I’ll expect Vista to be making the same mistakes as Apple did.
Exactly.
The thing is, the Max UI could actually present a clever solution to that everlasting edge problem. They just didn’t build it into the beta version (a hit-area that spans all the way to the top). This leads me to believe that it was a fluke, and the decision to place tabs in the header was entirely to woo people.
Sad.
[...] I’m not going to talk about the Apple event yesterday, others have already done so. Instead I’ll let you know of a nifty little ‘hack’ which lets you unify your OS X interface styles. No more brushed metal. No more Mail.app weirdness. Just Uno. (This is in relation to Joen’s entry on Windows UI)Apple Design interface interface design OS X ui uno // Used for showing and hiding user information in the comment form function ShowUtils() { document.getElementById(“authorinfo”).style.display = “”; document.getElementById(“showinfo”).style.display = “none”; document.getElementById(“hideinfo”).style.display = “”; } function HideUtils() { document.getElementById(“authorinfo”).style.display = “none”; document.getElementById(“showinfo”).style.display = “”; document.getElementById(“hideinfo”).style.display = “none”; } [...]
This may be of interest to you:
To be entirely correct, it’s Fitts?s law. (The man is Paul Fitts, not “Paul Fitt” or anything.)
Don’t make me come over there!
Anyway, I suppose it would be Fitts’ Law, wouldn’t it?
Feck, you’re right. I’ll blame Rob for this one. Confusing my l33t grammar skillz, dirty bastard.
Michael,
Interesting post over at Mezzoblue.
All in all, these new UI conventions are possibly good ideas. The switch, however, will always be difficult. Fact is, the “previous” way of doing things has been honed over maybe ten years. The new ideas need finetuning.
Related:
Windows Vista – Death to Menus
http://blogs.pcworld.com/techlog/archives/001028.html
I agree with the benefits of Max using wasted space on the screen edges (I often curse large “toolbars” for wasting space on my small macbook screen). The one thing that I do think will present quite a problem with the Max application just by looking at it is how in the heck are you suppose to drag that window around your screen if you have a window full of tabs open? That is certainly one of the benefits of having the title of the screen at the top, it provides some information (albeit probably not too useful), while providing you a place to drag the window to another location on your desktop. Given Microsofts penchant for full screen applications this might not be a problem for them, but I know I move my windows around in OS X all the time to maximize my information intake, and I would certainly not run an application like Max at it’s full screen setting on a regular basis, thus making it more likely that I will have a window full of tabs.
Benjamin, moving the screen is actually not a problem in Max, since most parts if not all of the chrome are draggable, not just the titlebar. That means you could drag the file empty space between images, and so on.
Well, it also appears upon looking at the flickr pictures that there still is a bar similar to OS X, it just appears underneath of the tab, instead of above it. So I suppose that works just fine.
When you say that the chrome is draggable, wouldn’t that interfere with my attempts to drag a box around multiple images/text I wish to select for subsequent manipulation? Instead of creating a box wouldn’t I then be moving the screen around?
Yes, I suppose it would, but I think things are a bit more complex than I laid it out to be.
In the case of Max, which is skinned using some gray metal, I believe all the gray metal areas are draggable. As such, one could deduce that with this form of application design, the “material” the borders are made of, is generally draggable — not the content area.
I was just playing around on iCal on my mac and noticed that the same thing works for that. Interesting. I still think the new features would take a substantial amount of getting used to for long-time GUI users. I am excited to play around on a Vista machine though.