Applying the Windows UX Design Guidelines for Layout and UI Design consistently

Question

There are many potential threads to this question I want to ask, but I will just limit it to two aspects from this example:

Firstly, in the Insert Picture Dialog there are five different types of dropdown selection controls on the screen. I understand that each has a slightly different functionality and therefore look and feel. However, this is quite different from my understanding of a flat/metro style of design where the interaction reveals the behaviour of the controls. So is it an incorrect application of the UX design guidelines to make the controls look the same but have different focus/hover interactions?

Secondly, I am trying to understand the hierarchy or structure to the interface layout. There are navigation elements on the left and at the top, and the filter/sort options are scattered at the top and bottom. Are the UI elements aligned individually within each section/group, and then aligned at a higher level? I would have expected to see some basic alignment of the right edges of the "Search Pictures" box with the "Cancel" button and the scroll bar, or perhaps the "File name:" dropdown aligned with the Organize dropdown, or maybe the "Tools" and "Insert" dropdown in the same grouping. Is there some rule being applied or have I missed them?

In the new Office 2013 applications, the layout and alignment also seems to be difficult to gauge. There is top alignment of the buttons, but the input field is not quite center-aligned with the buttons. The spacing is different between the input field and the text area, and the "Subject" label seems slightly out of place as well. The padding around the entire section is thicker at the top compared to the bottom as well. Any hints on what the rule applied would be appreciated.

Answer 1

Just to be clear, are using the Modern UI design guidelines to evaluate this image? If so, I don't think you should. While the developers have clearly tried to style it to be more inline with the Modern UI look, Word is a desktop app and is free to stray from the Modern UI design philosophy.

What we are seeing in this image is the legacy of the "UI real estate is expensive, cram as much onto it as you can" days of Windows. I'm sure you have heard the apocryphal story of the two art students who are debating the meaning of a new exhibit in a museum of modern art only to turn to someone who works for the museum and inquire about the artist and be told, "I'm sorry. That's trash from the remodeling we are doing."

And I wonder if you have not made the same sort of mistake by expecting there was a design philosophy used when it's just the legacy of the open file dialog used since Windows 98 and updated in Vista.

One way that it violates the Modern UI principles is that this dialog allows you to create folders and even files of completely unrelated types in the file system as well as reorder and organize the file system. So if you are trying to understand it in the context of the Modern UI design language and are confused, you aren't the only one! So no, you are not missing anything and your intuitions are right.

I think the image you added in your edit confirms my opinion that in these instances there is no over arching design philosophy and it is just going by "It looks good enough" rather than being held to a standard such as the Windows store apps. Areas such as the ribbon and the utility screens in Office may very well have guiding principles applied, but these examples you have shown not so much. They were built by developers not UX people.