The State Of Windows UI
So right now, There are a host of little problems that are plaguing the UI for Windows 10. I’d like to talk about all of them. I’m going to do this by going over a point list. I understand that app design can be seen as subjective, but there are still some common rules that everyone seems to follow to give the user what they need without being intrusive or unorganized. There needs to be more guidelines for what an app should look like.
Ancillary buttons. If horizontal scrolling, off-screen chrome, cut-off pages, and odd menu controls were the problems of the Metro Apps for Windows 8, then unnecessary extra buttons are a big problem with Windows 10. There are unnecessary hamburger buttons and ellipses along with every other app having a profile button as part of the navigation menu. Then there’s the buttons in the title bar which are outside the normal app layout. Is it necessary for the Xbox app to have a refresh button and a shrink button in the title bar? I understand that the XBox app is probably one of the most difficult universal apps to design because it has to do a lot. Shouldn’t there be some agreement on what definitely goes in the title bar? Some of the Metro apps are trying really hard to put as much feature utility in the interface when it seems like consolidating what needs to go where is a more important part of the hierarchy. The other thing that seems out of place are the profile and feedback button in some apps (News, Sports, Money, and Weather.)
The Lone Button. One of the biggest problems I had with Windows 8 was the Menu layout inside the Windows 8 apps. If I recall correctly the Health app had a minus button in the bottom right corner that brought up the main menu. I found that confusing. With Windows 10, Microsoft made the vertical navigation bar part of almost every app. Every now and again though, I’m using a Windows 10 app and the layout seems randomly placed. Here’s an example:
And here is an example of a more organized layout:
The Vertical Navigation Bar. One of the biggest efforts Microsoft has put forth with Windows 10 is the vertical navigation bar. It is on almost every app, but there is something that I would like to point out. The Twitter app switches to the mobile layout when the app window is made small enough. The breakpoint app layout is something that seems like it has a lot of potential. Here’s what the News app looks like:
And Here’s what the Twitter app does when the window shrinks:
Isn’t that much more appealing?
There is also the missing address bar when starting up Microsoft Edge. Why would you not, at very least, give the address bar a highlighted (not hover) color if this was the space the address bar is designated. I understand there being another bar inside the app start page, but even then it would still be confusing to someone opening up the browser and wondering why the address bar is missing from it’s usual designated place.
Left Aligned Side Bar. One of the things that really bothers me about the new apps is the layout. Some apps have right aligned sidebars and others have left aligned side bars. But what’s even worse than that is the pullout menus that could easily be a sidebar. Skype does this. Here’s an example:
An here is an example of the side bar as left aligned:
Here’s another example of another overlaying sidebar:
And here here it is with a left aligned sidebar:
Cut-Off Buttons. One thing the new apps need is a preference for Window size. Every other app has a button here or there that is completely missing when the windows size is shrunk down to a certain level.
Borders. Here is one of my main complaints about Windows phone UI and Windows 10. The thick borders make the UI look clunky and cheap. A good example of this are the search bars with double line thick borders. Here’s an example:
Instead of that, what about something that only uses the background color and doesn’t add a border. There are several websites that do this. MSPowerUser being one of them. Here’s an example:
Doesn’t that seem less ridged and more appealing? Even the animation is pleasant. It’s not just that, but a lot of the borders in the Modern Apps are still miss colored one side is grey and another is black. They are completely mismatched.
Icons. Microsoft recently showed off a new File Explorer icon in Build 14352. It is a vast improvement on the other File Explorer icons that have come out over the last few iterations. It is easily readable. It uses a softer tone of color. It’s a desktop icon so it uses a bigger color palette, but still not too much.
I hope more desktop icons follow in this direction. One of the things I haven’t liked about previous versions of Windows 10 are the isometric icons. When the interface is supposed to be unified having the desktop icons flat like the others in the UWP apps makes everything look more seemless. There is one thing I’d like to praise the icons in the Settings app.
Too Much Simplicity. One of the newest problems plaguing Windows 10 is the use of simplicity to give the app a cleaner look. Here’s an example:
And here is the way it looked before the anniversary update:
I feel like the separate background color makes it look more recognizable and it brings me to another point. A really feel and I know this is still something people would consider up in the air, but I really feel the left panel is a more situated place for every side bar. There are a few apps that have a right panel side bar that could easily be placed on the left (either through a pulled out menu or fade in transition. Namely, The Outlook app.) The Universal App design is something that is constantly ongoing. It has a lot of potential.
The Back Button. One of the main reasons I have stayed on iOS for several years is to avoid the extra navigation bar on Android. I really think Windows should move away from the Android model and be more like iOS and keep the back button in the app layout. And… strive to remove both the hamburger button and the back button from the layout. I know some people don’t think this is possible, but there are already apps that don’t use the back button at all.
Project Neon. The new Paint3d app has several differences to it’s layout, color scheme, animations that give an idea of what Microsoft is going to be displaying in the future. There’s the big details and there’s the little details. So let’s take a look:
First, there is the opening dialog box. This is clearly meant for Hololens. The leaf protruding from the edge of the main tile seems nice, but the usage of several tiles as opposed to one window seems unnecessary, especially, the tiny tiny tile for the “More Videos…” Already, there is a heavy usage of gradients. Gradients that seem overly colorful and unuseful.
Second, the general app layout. Every bit of it is oversized.
Next up, there’s animation for the for the About dialog box. I don’t really have anything to complain about here. It’s too big and the usage of space could be better.
Third, there’s is also the tool layout. They are too big and the bright usage of color reminds me of the icons used and then removed from Windows 10 when it first came out.
There have been a lot of good concept artist that have submitted something over the course of Windows 8 to Windows 10. Kalinin Ilya. DAKirby. Nik255. Metroversal.
The thing I would really like to emphasis in this concept is the thumbnail grid layout. I think it is very important to the UWP design. The thumbnail grid and the actionable drawer seem like a necessity to the UWP design in the future. This is a concept from a concept. This is a tweaked version of a concept by Metroversal. Metroversal’s concept has different elements to it, it inspired this concept, and the original may be better in some ways, so I am providing a link to it. http://metroversal.deviantart.com/art/Windows-10-VLC-519058314
Below, is just something I really want to see implemented universally. The combination of the menu bar and title bar.
