March 30, 2018

Designing a new Windows shell: introducing Fluid Desktop

Redefining the Windows desktop experience with a new look, refined apps, and improved Cortana intelligence.

The Windows desktop experience has always been of great interest to me and has been the focus of a lot of my recent design concepts over on Twitter. I’ve received a lot of feedback and have been asked a lot of questions. I want to try and address all that, while also introducing the first major part of a Windows redesign project that I’ve spent the last few weeks lightly working on.

Why redesign the shell anyway? There’s not much wrong with it, right? I agree that it seems a little weird given how there’s much more important parts of Windows that need work on, and it’s not like the shell is fundamentally broken anyway. So what’s the actual design motive behind this:

“To redesign the shell to be cleaner and more intelligent.”

That’s the goal. To get rid of the current clutter and replace it a more minimal but more powerful shell experience. I call it Fluid Shell. And I want to share the journey it took to get here.

A new taskbar

Some of you might remember when I wrote about reworking the Windows system tray, and I had a lot of positive feedback about that. Inspired and excited by what possibilities there was in this area, I went on to refine the design further to create a flyout I eventually named “Quick Actions”, and even apply the same overall look and feel to Action Center as well.

This led to a new system tray design. Gone was the overflow of icons and applets that have cluttered up the taskbar since 1995—in its place a clean tray with only the essential information presented.

Afterwards I started thinking about how the taskbar itself could be made simpler and more modern looking. I couldn’t remove any more icons, the system tray rework had already removed everything possible. So I thought about the actual taskbar–could its shape, size, material be changed? What if it wasn’t constantly attached to the edge of the screen, and instead floated (something inspired by Chrome OS).

Here’s the first iteration of that new taskbar:

The floating taskbar.

Things felt more open now the taskbar was split in two. The people button also got detached from the rest of the system tray, since it’s not really related in any way to anything in the tray itself.

Initial feedback centered around one thing—the Start button.

Currently on Windows, the Start button sits in the corner of the screen, so you just have to move your cursor into any of the four corners of your display to quickly get to the Start menu. People were concerned that moving the Start button away from the edge of the screen would prevent this behavior from working.

The answer is simple, of course, simply make the hitbox for Start extend into the corner, allowing users to continue to quickly get to Start just as they always have.

Other feedback focused on tablet mode usage. I thought about this one for a while. Right now, the taskbar remains visible on Windows when you enter tablet mode. I always preferred the Windows 8 way of having apps run full-screen in this mode — and now that the taskbar “floats”, the idea of it drifting off the edge of the screen, only appearing when the user swipes from the edge, makes more sense.

Sets

Microsoft announced a new feature dubbed “Sets” last November, and I’ve been interested in how this would work with things like the taskbar and Task View. I’ve not yet finalized a design on how a set of apps will look in Task View, but I did design a rather minor change to how they’re displayed on the taskbar.

Instead of having all the apps scattered across the taskbar, why not group them together (and include a little visual cue that the apps are part of a set):

Previews of different sets tabs on the taskbar.

In addition, I believe that having tabs in every single app is a bit stupid. Who needs a tabbed calculator, for example. With that in mind, adding a new tab button alongside the existing window controls doesn’t seem like a bad idea:

Making Start fit the taskbar

This isn’t something that has to actually be thought about. You could just bolt on the existing Windows start menu to the new taskbar and leave it at that—but it doesn’t exactly look all that great. Something feels wrong.

An early Start menu idea for Fluid Desktop.

There’s still work to be done in terms of element sizing, but this new Start menu fits in better with the overall modern look and an integrated search box at the top replaces the need to have a search bar confusingly placed at the bottom of the menu.

Intelligence

If you’ve been paying close attention to these concepts, you might have realized that Cortana seems to be missing. Her button was replaced by a search icon (that launches a search UI much like the one discovered in Redstone 4 builds last year). The Spring Creators Update already moves a lot of Cortana’s “cards” and other proactive info to Action Center, where it gets delivered when a user needs it.

But what if you could go to Action Center and see suggestions of things you might want to act upon, and talk to Cortana in a more chat-like fashion (like you can with Google Assistant).

Here’s what that idea could look like:

Intelligent Action Center in Fluid Desktop.

As always, notifications are displayed first, followed by suggestions of things you might want to act upon. They could be calendar events (like shown here), local news, weather alerts, reminders, and even activities based on your nearby devices or location.

At the bottom of Action Center is the edit control that we’re familiar with from the taskbar. You can still talk to Cortana by tapping the microphone icon. The queries you type are shown as “messages” to Cortana, with her replies being inline — allowing for a greater level of context, since you can scroll back up and see your previous replies in that conversation. The conversation idea also helps bring a bit more consistency between Cortana in Windows and Cortana in Skype (where she acts as a bot in your chats).

Here’s that conversation view:

Talking to Cortana directly in Action Center on Fluid Desktop.

Conclusion

This is only a first look at my “Fluid Desktop” idea. Some things might seem a bit out of place, maybe because they are, or maybe because we’re not used to thinking about Windows that way. But hopefully you can get an idea of what I’m shooting for here.

I’d love to hear your feedback, whether it be in the comments here on Medium, my design Twitter account, or my personal Twitter. Let me know what’s good and what can be improved — feedback is really important when redesigning stuff as big as the Windows shell.

Thanks for reading!

Share this on Twitter

Related

Device Manager
Microsoft Store editorial content
I rebuilt my site using Hugo