Jump to content



Photo

[concept] Merging metro and the desktop


  • Please log in to reply
6 replies to this topic

#1 crumbleshake

crumbleshake

    Neowinian

  • Joined: 02-June 14

Posted 02 June 2014 - 16:29

Hi
 
Pretty much entirely because of exam procrastination, I've undergone a project to do a redesign of how I think Windows should behave, in the process of learning how to do graphic design since it's always been an interest of mine. This is a learning experience for me, so I don't expect much praise for how it looks visually. In stead, when reading this try and focus on the UI concepts themselves and how I'm proposing Windows should behave. The main focus of this is merging metro with the desktop in a way that's both elegant and user friendly.
 
Having gone through a lot of different formats of how I want to present this, I've eventually settled on writing a pretty lengthy document that goes into extensive detail, explaining why I decided to do what I did at every turn. If I had the time or the patience, I'd explain what I'm talking about with animations, but I sadly have neither of those things.
 
Here's a quick preview. The changes are subtle, I know, but that's kind of the point. The Window borders are based off those for Office 2013.
 
Metro Window Example (Xbox Music) small.png
 
So yeah, without further adieu, here's a link to the pdf on Onedrive.
 
https://onedrive.liv...thint=file,.pdf
 
Unfortunately, the Onedrive pdf viewer murders the quality of all of the images, so you'd be better off downloading it. This is crazy frustrating, actually. I hope Onedrive does something about it.
 
If you'd rather just look at some pictures, here's a selection of them:
 
https://onedrive.liv...int=folder,.png
 
So yeah, feedback would be nice. As I say, I'm not exactly an experienced graphic designer, this is the first time I've attempted anything, really.
 
Thanks for reading.
 
 
So over the last couple of weeks I've been doing this Windows design. Most of that was spent thinking about it, the rest was spent illustrating it. It turns out, I've put a lot of thought into it and I really think the best way of expressing it is by writing a hell of a lot of detail, so I'm afraid this post is very, very long. I'm not going to blame you if you skip the text and just look at the pictures.

I'm not a designer by any means. This was a learning process for me, in fact. The focus here isn't on the actual images, but more on the concepts they're representing. The main focus for this concept has been merging the two opposing environments of metro and the desktop.

Conception
I actually started this thing by thinking about the action center. I felt like a pull down from the top of the screen was the best way of accessing the notification center. Not only is it an elegant way of doing it, but it's also the accepted norm and people are going to expect it to be there when they buy a device. A good UI panders to the expectations of the public.
But the trouble with that in Windows 8 is that the top swipe is already taken. Swiping from the top grabs the app you have open so you can snap it to the side or close it. So I had to move that functionality somewhere to make room. I decided that, instead of simply switching between individual applications, a swipe in from the left should take you to a multitasking menu that looks just like Windows Phone's, and then if you press and hold an app in this menu, you pick it up ready to snap it to the side or drag it to the bottom to remove it from the list. This way is actually far clearer than the current implementation. I've seen a lot of people struggle with how it is currently and most people just don't use the snap feature because they can't figure it out. I'm willing to bet my way is how iOS will do it.

ffbqx4_medium.png
via i59.tinypic.com

This was a design I did for this at the time.

But that just got the ball rolling. I thought that, while adding features from Windows Phone into Windows tablets was important, if we're using the same OS for tablets as we are for desktop, it was just as important to figure out how these features should work with a mouse and keyboard, and then for it to be a really good experience for the mouse and keyboard, the two currently disjointed environments had to come crashing together in a way that was both elegant and user friendly.

This is what I came up with 
 
The Window
So for starters Windows borders look fugly. I used metromix a while back and, though it was a great program, I couldn't really use it because it felt too much like a dirty hack. The borders around those metro windows just weren't right. It was like looking at Windows running an emulation of a totally different OS. Don't get me wrong, metromix is brilliant, but it isn't the elegant solution we need for running metro apps on the desktop (Which is fine, of course. It's essentially a third party hack that fulfils its purpose perfectly so I wasn't expecting any more.)

So when Microsoft showed off their vision for metro apps running in desktop windows, I was shocked. It looked just as fake, just as inelegant, just as clashing as this third party hack. It was even more frustrating because Microsoft had only a year or two ago shown us exactly how metro apps should look on the desktop. Office 2013 is a gorgeous looking piece of software. It's like they had some proper designers who sat down and said, ‘you know what, Windows borders look really ugly. Lets just make our own.' And they did. And they're great.

A single pixel wide coloured border around the app is all you need, as long as that colour is consistent through the app. A hugely liberal use of white actually works perfectly well. So I ripped it off.

xkvf2x_medium.png
via i62.tinypic.com

Here's what I came up with. It's totally modelled off Office 2013. There's just a single pixel border round every app, the colour of which varies from app to app. The close, minimize and maximize buttons are subtly placed in the top right corner. There's no actual bar at the top, the buttons are just placed cleanly in the corner and UI elements like that side bar just continue to the very top of the app.

20afomc_medium.png
via i60.tinypic.com

wso7r4_medium.png
via i59.tinypic.com

There's now two states any app can be in

  • Full screen state. The app fills the whole screen, and can also be snapped to the side
  • Desktop state. The app is in a resizable window on a desktop

The maximize button toggles between these two states. The close, minimize and maximize buttons persist when in full screen state, rather than having a big bar that only shows when you put the cursor near the top - an awful implementation, I trigger it by accident constantly. They're constantly there so people remember they're there and so leaving full screen is a single click away. By default, all apps have a white bar at the top added to ensure these buttons don't get in the way of any UI or clash with whatever's underneath them, but this can be changed by the apps developer as shown in the music app here. Search can be accessed by the charm or by simply typing. Wherever you are, as long as the text cursor isn't in a text field, type and you will search your current app.
 
t8kuwl_medium.png
via i58.tinypic.com

If a window is made very small, it uses the snapped version of the app's UI

The importance of this new window border is that it makes it so that an app actually barely looks different whether its in full screen or in a window. There isn't some big border around it that sticks out like a sore thumb. You get the same immersive app experience either way.

The app bar has been added to all apps. It now always has the indicator that Mail and Calendar have so that it's easily discoverable and easier to trigger with a mouse.

Where there's already a desktop alternative to a metro app, scrap the desktop app. Metro apps are prettier and they're better. For example, the current desktop version of IE should be removed in favour of a window of the metro one.
For a plus, here's how legacy apps would look using this new border. You can see the white bar at the top.

2n16pl4_medium.png
via i62.tinypic.com
 
The Status Bar and charms
That's right, I've added a new bar. To reiterate, when I'd only set my scopes on tablets, I was mainly looking for consistency between Windows Phone and Windows. An important part of that is the status bar. So when I'd first come up with the status bar for tablets, it was relatively simple, and had the basic functionality that the Windows Phone one had, showing glanceable information.

On a desktop, however, it completely took over the role of the taskbar's tray. The buttons on the taskbar tray are interactive so the status bar buttons need to be too, so it's almost ended up with similar functionality to the top bar in OSX.
 
sexgsz_medium.png
via i59.tinypic.com

So here it is. You'll notice the charms menu has been moved here. This is because, for one, hot corners gestures are really inelegant and take a knack to do, especially with multiple screens. The main reason they're here, though, is discoverability. With the current charms menu, it's totally hidden unless you know a very specific gesture. This isn't too bad on tablets, since edge swipes are far easier to teach but invisible hot corners? No thanks.

This discoverability has meant that the search, setttings and share buttons that have been popping up in various apps like mail are no longer necessary.

You'll notice the devices charm has gone. This is because I've merged it with the share charm. If you're in a place where you can print something, print shows in the list of apps you can share to. Same goes for play-to stuff..

This merging has made room for the Cortana charm. You'll notice that I haven't replaced the search charm with Cortana. This is so that search can return to its old context based functionality, rather than being a universal search. The charms were originally about having consistent controls that did the same thing whatever app you were in, and changing the search charm to universal search ruined that. Cortana can also be accessed with a long press of the start button.
Finally the notifications button in the top left allows you to open the action center. I didn't go for a pull down from the top edge action, as I felt it would be totally inelegant for a mouse, and even had the potential to be accidentally triggered often. If you click and drag down from the notifications button, you can let go anywhere and it won't open all the way, as you can on Windows Phone.

Just to note, on a touch screen, the charms return to the side swiped charm menu, and the action center becomes accessible via top swipe, meaning the whole bar can get slightly thinner. This is based off whatever input you used last. You tap the screen, these buttons slide away. Then move a mouse or trackpad at all and they slide back on.
 

The Taskbar
mr4dvk_medium.png
via i57.tinypic.com

The taskbar hasn't undergone all that much change. Firstly, the system tray has been removed. This has made room for a new button I'll talk about shortly.

Visually, the taskbar has remained transparent, though the colour isn't as intense. It's now a cloudy, clear glass with only a slight hint of your accent colour. I tried making the taskbar a solid colour as that seemed more obvious for metro design but it looked fugly.

App icons on the taskbar now use a live tile. They can change and animate and display notifications. They could even use the same live tile as the small tiles on the start screen.

rr1d8i_medium.png
via i57.tinypic.com

That pin button on the far right toggles whether the taskbar is persistent when you're in full screen state for an app. If it's not then you have to touch the bottom of the screen with your cursor to have it reappear, as it does since Windows 8.1 Update 1.

If you click an app on the taskbar, it reopens in whatever state it was last in, though this is configurable. However, you can also click and drag an app from the taskbar onto the screen to open the app in metro. Click and drag an app to one side to snap it to that side.

One strikingly important but subtle change on the taskbar is that the indicator to show that an app is open only shows when that app is on screen. If you've got an app minimized, there's no indicator for it. Consumer computing as a whole is distancing itself from the concept of open and closed. On a truly modern OS, apps that aren't on the screen are frozen in the background. They have their exact last state cached, taking up negligible processing power, only to be restored in their exact previous state when they're reopened. Apps that want to be able to do stuff when they're not on the screen do so using so called background agents. Background agents are small functions the apps are able to do in the background, like play music/sounds, download news, check for messages, etc. etc. and they do so without having to run the full app, meaning nowhere near as much processing power is used. This is the future of open and closed. You're either interacting with an app on screen, or the app isn't on screen, doing stuff on its own, taking negligible processing power. This is how it works on Windows Phone and iOS (not Android though as far as I know, that's a big part of why Android is so slow. They might have sorted that out by now, though, I don't know). The closest to closed you can get is being able to disable an app from running in the background in settings.

Instead of showing you what's currently open, the taskbar can be thought of showing you a list of recent apps. The only real difference that clicking the close button on an app should make from the minimize button is removing it from the taskbar if it's not pinned and that it doesn't cache your state so next time it's on screen, it's at the start of the app again. The same goes for the multitasking screen on Windows Phone. And iOS, actually. People always go through, closing their apps on their iPhones thinking it saves battery life. All it does is remove them from the list. 

Multitasking and Multiple Desktops
If you ask me, multiple desktops is the most important part of this whole redesign. It adds a whole new level of functionality and will get the power users on Windows' side again. I'm also really pleased with this implementation since it's actually using a way really consistent with Windows Phone.

Here it is:
u7u6t_medium.png
via i61.tinypic.com

That button on the far right of the taskbar takes you to the multitasking screen, which looks pretty similar to how it does on tablets and on Windows Phone. It shows all of your recent full screen apps. If you're on a desktop PC there's not likely to be many. Notice that plus button on the right of the screen. It does exactly what you're probably thinking. It creates a new desktop.

So each desktop has a totally different set of windows open on it, allowing you to create separate environments for different kinds of work that are really easy to jump between. A right click on the multitasking button simply instantly switches between recently used full screen apps and desktops, as a click on the top left of the screen does currently. If you click on a particular window in the preview of a desktop from here, you'll move back into that desktop and that window will move to the front.

On a multi screen setup, each screen will have its own desktop. If you open the multitasking screen, whatever's on your other screen, whether its a desktop or full screen app, will be in the multitasking screen with a small indicator on it to tell you this. If you click on it, it swaps the two screens round.

This is very similar to OSXs implementation, I'm aware of that, but that's because it's a good way of doing it. I've certainly added a Windows twist to it.

Another part of multiple desktops, each one is pinned to start separately so you can get between them more quickly. This adds a feeling of relative permanence to them. These live tiles show that desktop's wallpaper and the
To snap apps side by side from here, you can click and hold it from the list then it will be ‘picked up' for you to drop it on either side. You can grab a full screen app and drop it off the bottom of the screen to remove them from the list, or you hit the small close button in the top right corner of the app's preview.

Wherever you are, the taskbar shows all apps that are on all desktops and that are full screen in the multitasking view. If you click any app that's open elsewhere, you're moved to it automatically.

On a touch screen device, this is accessible by swiping in from the left of the screen. When you do so, the start and multitasking buttons along the bottom don't appear.

The Action Center
First off, here's how it would look on a tablet, or for that matter any device as long as you opened it with a drag from the top of a touch screen.
 

2v8o50n_medium.png
via i60.tinypic.com

It's meant to look pretty close to the Windows Phone one. You get quick settings, easily defined in settings, a link to all settings, etc. etc. It's pretty much functionally identical to Windows Phone. The only real difference being the addition of the Today column, which was mostly just to fill all that empty space. It shows all sorts of stuff for that day. Weather, calendar appointments, etc.

Here it is when opened with a mouse/trackpad.
 

2wq4cna_medium.png
via i60.tinypic.com

The difference is the removal of the quick settings. There's a good reason for that. It doesn't help that they're crazy big and would just feel like a waste of space on a mouse/trackpad device. More importantly, though, the status bar buttons do all the same things, since they've taken over the system tray. So when you're using a mouse, anything you've set to be in your quick settings appears, instead, on the status bar. Click on the wifi icon on the system tray, for example, and it lets you change your wifi settings. I hate overlapping functionality so I've avoided it.

As I said previously, you access the action center by clicking the button in the top left. It makes this big thing come down. Alternatively, you could click and drag from that button halfway down and it'd only take half the screen. The button then also makes it disappear again with a click, so you can really quickly glance at your notifications with 2 clicks in the same place.

Personalisation
Finally, the last part of bringing metro and the desktop together was to make personalisation features consistent with the two. You currently have two separate settings menus to customize how everything looks and that's not helping the two parts feel integrated.

So here's my solution.
 

mltfdg_jpg_medium.png
via i57.tinypic.com

There's a lot that's pretty self-evident here, but I'll go into a bit of it.

The accent colour is now used for all sorts of stuff. Your taskbar has a slight hint of it, some apps like settings and the file explorer use it, the start button in the bottom left changes to your accent colour when you mouse over it, the charms menu when you drag in from the right uses it for its start button. Your given some of your recently used colours but going on ‘More Colours' lets you pick from a bigger range, and crucially these same colours are available on windows Phone. There's also an option under ‘more colours' to have it select one automatically based on your wallpaper. If you've got more than one desktop, it uses the wallpaper of the desktop you used most recently.

Crucially, you can now choose how many tiles are visible at any one time on the start screen, making the tiles bigger or smaller. I was shocked that this feature wasn't in the final version.

You can now select your start screen background from a whole horde of them under a separate pop out menu. Now if they want to add more with an update, they don't have to get rid of old ones that people may like. They can also add to this regularly with offerings from graphic artists similarly to how they did the Zune art program.

Select Wallpaper certainly needs elaborating. When you go on ‘select wallpaper' you get a separate pop out window for selecting your wallpaper and you can change each one individually.

20px2fm_medium.png
via i57.tinypic.com

Looking back this one looks pretty ugly. The spacing's nasty. But you get the idea.

The same concept as lock screen apps from Windows Phone has been brought to Windows Wallpapers. You can now allow apps to set your wallpaper. A Bing app might set it based on the Bing picture of the day. A webcomic app would make your wallpaper the latest issue. You can also quickly select a single picture by clicking and dragging it onto the preview, or have it shuffle a group of them by dropping a selection on there.

Live lock screens are also brought to Windows 8, along with showing artists on your lock screen.

rjgw7b_medium.png
via i59.tinypic.com

Wrap up
So that's it then. I've merged metro and the desktop in a way that's added a boat load of functionality and added in a whole bunch of Windows Phone features that are needed for Windows.

I think this kind of merge is vital for Windows to be a good OS. See, it started out with a problem. It shoved two opposing UIs together that didn't compliment each other and just assumed that was passable. While metro is far from unusable on a desktop PC, it's just not right for an OS to have these two big opposing UIs. Everything that's happened since Windows 8 has been covering for this and making up for it. The only way Windows can go now is to fully merge the two in a way that's sensible on a both tablet and on a mouse/keyboard setup. Devices like the Surface need this update too. Since it's a hybrid, you're going to use the desktop and full screen apps a lot and switch between them regularly, so having the two environments feel integrated is important.

I don't want to start a debate on the start menu, but the reason I've not covered it is because I think the start screen's not far off being the perfect app launcher and I disagree with bringing back the start menu. The only changes I'd make to the start screen, in fact, is making tiles as dynamic and animated as they are on Windows Phone and I'd maybe have an option to make tiles show the accent colour, again as on Windows Phone. Though these things are hard to illustrate but easy to write in a single paragraph.

I've also done some serious, serious work on the file explorer and completely rethought it from the ground up in a way that's probably going to be controversial. But it's not ready just yet. If anyone wants, I can also do some more mockups of some more apps in window mode.

Crumbleshake x




#2 mastercoms

mastercoms

    Expert Microsoft Fanboy & C# Coder

  • Tech Issues Solved: 3
  • Joined: 21-May 13
  • Location: Marietta, Georgia
  • OS: W10 + Fedora 21
  • Phone: Lumia 928 WP8.1U1 Black

Posted 11 June 2014 - 08:07

You sir, should be hired by Microsoft right now.

#3 Praetor

Praetor

    ASCii / ANSi Designer

  • Tech Issues Solved: 7
  • Joined: 05-June 02
  • Location: Lisbon
  • OS: Windows Eight dot One dot One 1!one

Posted 11 June 2014 - 08:33

you can't remove the system tray; well, at least not the clock. It's incredible handy (to see if a server has the same clock as the rest of the DCs, for example).



#4 mastercoms

mastercoms

    Expert Microsoft Fanboy & C# Coder

  • Tech Issues Solved: 3
  • Joined: 21-May 13
  • Location: Marietta, Georgia
  • OS: W10 + Fedora 21
  • Phone: Lumia 928 WP8.1U1 Black

Posted 11 June 2014 - 08:55

The only suggestion i have is to change the multiple desktops to something like metro IE tabs, those could be shown at the top or bottom of the multitasking menu.

Kind of like what I did in a concept a while ago
http://i.imgur.com/8E9ubj8.png

you can't remove the system tray; well, at least not the clock. It's incredible handy (to see if a server has the same clock as the rest of the DCs, for example).


Doesn't the concept move the system tray along with the clock to the top?

#5 +MikeChipshop

MikeChipshop

    Miniman

  • Tech Issues Solved: 3
  • Joined: 02-October 06
  • Location: Scotland
  • OS: Windows 8, iOS, Android, WP8
  • Phone: HTC 8X / Nexus 5

Posted 11 June 2014 - 09:03

Clearly a lot of thought has gone in to this and it's the first 'mockup' I've seen that actually would be usable. 

You've got a long career ahead of you.



#6 +DConnell

DConnell

    Madman with a blue box

  • Joined: 16-July 04
  • Location: Honey Brook PA
  • OS: Windows 8.1u1, Win RT 8.1u1
  • Phone: Lumia 1520 running Windows Phone 8.1

Posted 11 June 2014 - 14:34

I'd remove the taskbar. Its features are duplicated in the left sidebar, which works for both mouse and touchscreen. The sidebar should be made aware of both apps and desktop programs, and the taskbar done away with entirely.

 

And if you're going to retain the traditional max/min/close buttons, I'd move the close button over to the left corner, and set the default to double-click. How Windows 3.x had it. This would help prevent accidental program closing due to stray mouse clicks.



#7 +Brando212

Brando212

    Neowinian Senior

  • Tech Issues Solved: 17
  • Joined: 15-April 10
  • Location: Omaha, NE
  • OS: Windows 8.1
  • Phone: Sony Xperia ZL, Nokia Lumia 925

Posted 11 June 2014 - 14:51

wow this is actually a rather nice concept

 

with a little bit of tweaking here and there this would make a great OS experience