Concept
The idea behind Windows 10 Google was to take the best of Google and merge it with the best of Microsoft in a huge operating system concept; take the ideas of power and functionality from Microsoft and put them with the ideas of approachability and ease of use from Google.
You'll see what I mean when we get to the mockups.
Windows 10 Google is my latest project as of the time of writing this article. Well, that's a pretty misleading thing to say. I've been at it since August in the summer of 2015. The whole project was meant to be done by mid-September. But now it's December, and we have a lot of fun stuff done, but also a lot to go. This is just a little preview, a morsel of the whole project that I wanted to share. You can see the latest project on DeviantArt:
View latest progress on DeviantArt
Windows 10 Google is my latest project as of the time of writing this article. Well, that's a pretty misleading thing to say. I've been at it since August in the summer of 2015. The whole project was meant to be done by mid-September. But now it's December, and we have a lot of fun stuff done, but also a lot to go. This is just a little preview, a morsel of the whole project that I wanted to share. You can see the latest project on DeviantArt:
View latest progress on DeviantArt
Contents
Click to skip!
Mockups
Above is the master mockup, the pinnacle of the project to date. Everything presented in this article will be more or less about or leading up to the above mockup; for the latest mockups, see my DeviantArt page.
Action Center
The original mockup, seen below, was just about that.
It was quite a simple design, granted, and not much has changed to date. The layout almost exactly mirrored Windows 10's, save for the Material Design Clear All FAB. The top section held notifications, the bottom section quick settings. I got rid of the Action Center title, and the notifications were organized more like the ones in Post-Material-Design Android (Lollipop and Marshmellow to date): white cards with information on them. The time of the notification is shown on the right; hovering the mouse over it turned it into an X to dismiss the notification.
But these were all things taken from Android. There were also things that we had to decide on our own - color scheme, for example. This seems simple, but is really integral to creating an effective interface.
We wanted to convey power with the action center. The interface itself had such a simple and straightforward interface that it seems to lack much usefulness and power. So to balance that out, we used some color psychology.
In color psychology, black conveyed boldness and power, and blue stability and calm. The action center was a quick dashboard to control your whole system; so it had to communicate effectiveness, but also safety and approachability. Users shouldn't look over the action center, but they shouldn't shy away from it either. So we chose some dark blues and grays from the Material Design palette and used them as the back for the action center. In fact you can see these darker colors across some of the more powerful applications in the system.
Quick Settings
Before we talk about the notifications, let's talk about the quick settings. They definitely borrow a lot from windows 10 and Android. They serve the same purpose, which is to quickly toggle and change settings (they are quick settings, after all). My mockup takes the 25-50-75-100 brightness button from Windows rather than the slider from Android, more because of UI than UX; it just made the whole interface a lot tidier, and wasn't too bad for UX.
But there are also some little things that I added. The More button, rather than like a separate type of element like in Android or normal Windows 10, is designed to look like a quick setting toggle. It's all part of the effort to keep the whole action center streamlined and minimal. A lot of effort goes into simplicity.
The bottom row of icons is also designed to give more information on the status bar icons, minus battery, which is found in the expanded settings, but plus brightness, which I feel is toggled more, especially on touchscreen devices. This is because the status area icons like WiFi and Battery no longer have pop-up windowed settings. Clicking on them opens the corresponding setting up in the action center, with a title this time, and a back button to go back to the action center:
It works a lot like charms, really; a central menu where you can access everything. I personally thought that Windows 8 got a lot right, but was burdened by its horrible metro app system; charms was one of the successes in my opinion. This is my attempt to bring back Charms in a way, but do it right.
Notifications / Cards
After I worked out the quick settings, the school year began and I stopped working on the whole project for a while. In December (read: last week since I wrote this article) I resumed work again.
One of the first things that I did was redo the action center using a new wallpaper and new icons where the old ones looked kind of hideous (like the start button and search icon; plus, most of the taskbar programs just didn't look very material-y).
It was meant to be just a polishing of what we had done back in September, but it ended up opening many new avenues for improvement that I was able to follow.
One thing was how notifications, live tiles, search, the start menu, and the action center worked together. Back in September, we had started discussing what we wanted to do with the start menu. We discussed a lot of things, but the thing most relevant to the mockup above is the placement of the search bar.
Traditionally in Windows, the search bar has been in the start menu. In Windows 8, it became a charm, but it was still essentially in the start menu. In Windows 10, it became its own little menu next to the Windows button, but, just like in Windows 8, it could still be accessed from the start menu and essentially worked - and looked - like just an extension of the start menu
But then I had an idea about the action center. It was a system of "cards", inclusive of notifications, Google Now cards, search results, and interactive widgets like in the olden days of Windows and in Android. To utilize this all-encompassing, universal system, we had to place a search bar in the action center. But then would it be unnatural to cue a search from the start menu and have the cursor jump to the other side of the screen?
This issue was never resolved by the team. But when I got back to work in December, I was mostly alone, with the team's support, but not necessarily the active critiquing and discussion that was done back in the days of old. So I went ahead and put the search bar in the action center and having, in my opinion, a beautiful, effective, and elegant system of notifications and stream of information.
Search
Now that the search bar was established, I started working on the actual interface when a search was made by the user. First, the search bar buttons change into back and clear buttons.
The search results are presented in the form of cards. Originally, my idea for search results actually looked like this:
But this wasn't the best UX or UI. In terms of UX, I felt it too similar to the inefficient and ineffective search in Windows 10, so it wasn't much of an improvement; in addition, at first glance it doesn't look very inviting or easy to use. Google started off as a search engine known for being simply "ten blue links on a plain white page," and this is really the modern evolution of that original concept. All information - notifications, search items you are trying to find - are all united in one system of cards.
Tablet Mode
This mockup started as a doodle that I did while bored in my last-period class. (When I'm bored, or even when I'm doodling in general, it's mostly about tech stuff - quick sketches of a program, a spec list for a fantasy laptop, those kind of things. I'm a weird person.)
I initially had an idea about a kind of overview mode, a sort of extensive dashboard. It would be a fullscreen experience, to open up if you need to figure out what to do next. It would have reminders, a calendar, notifications about email and social media, and just an elegant stream of information. There would be many times when I would find it so helpful to be able to three-finger-swipe up on the trackpad and get my calendar and whatnot, with everything that I need to take care of - reminders, notifications, events, emails, all that - right at my fingertips.
So in class, that was what I doodled about. Sometime somewhere the previous idea got tangled in with Windows 10 Google, and what I ended up with was a rough wireframe for a tablet task view/action center in a sense.
A few days after I made the doodle, and after further staring at it and contemplating during other boring classes, I finally sat down one afternoon and said, I will make a mockup of this doodle!. It was one of the most fun design sessions of my life for me, mostly because it was so productive and with so few distractions. I had most all the specifics worked out in previous mockups; the action center was copied and pasted, quick settings of course as well, and I could focus on just trying to make it look the way I wanted it to. Adjusting margins, tuning the blur, positioning those titles. Everything went very smoothly.
And what became of this process was the mockup that you see above. It took me about an hour of doing stuff in Paint.NET, and a couple days of thinking ahead of time.
I think it turned out very well. Some new things that I tried worked out really well - larger margins (on the notification pane), the metro-esque large titles, and even the crazy idea to have a blurred transparent element cast a shadow, a blend of not only metro and material, but the old Aero style with Material Design.
And that's what pleases me so much - this mockup represents the vision for the whole project. You can clearly see influences from Aero, Metro, and Material Design, all wrapped up in a pretty, streamlined, functional interface.
I initially had an idea about a kind of overview mode, a sort of extensive dashboard. It would be a fullscreen experience, to open up if you need to figure out what to do next. It would have reminders, a calendar, notifications about email and social media, and just an elegant stream of information. There would be many times when I would find it so helpful to be able to three-finger-swipe up on the trackpad and get my calendar and whatnot, with everything that I need to take care of - reminders, notifications, events, emails, all that - right at my fingertips.
So in class, that was what I doodled about. Sometime somewhere the previous idea got tangled in with Windows 10 Google, and what I ended up with was a rough wireframe for a tablet task view/action center in a sense.
A few days after I made the doodle, and after further staring at it and contemplating during other boring classes, I finally sat down one afternoon and said, I will make a mockup of this doodle!. It was one of the most fun design sessions of my life for me, mostly because it was so productive and with so few distractions. I had most all the specifics worked out in previous mockups; the action center was copied and pasted, quick settings of course as well, and I could focus on just trying to make it look the way I wanted it to. Adjusting margins, tuning the blur, positioning those titles. Everything went very smoothly.
And what became of this process was the mockup that you see above. It took me about an hour of doing stuff in Paint.NET, and a couple days of thinking ahead of time.
I think it turned out very well. Some new things that I tried worked out really well - larger margins (on the notification pane), the metro-esque large titles, and even the crazy idea to have a blurred transparent element cast a shadow, a blend of not only metro and material, but the old Aero style with Material Design.
And that's what pleases me so much - this mockup represents the vision for the whole project. You can clearly see influences from Aero, Metro, and Material Design, all wrapped up in a pretty, streamlined, functional interface.
Conclusion
So that's about this for this preview! Keep in mind that much more will be coming in the future. In this article I more or less only discussed the design for the action center. In the future I will be writing articles about first-party application mockups for apps like the email client, media center, and more, so keep tuned!
Be sure to give me your thoughts and suggestions in the comments below!
Please share this concept if you liked it!
Be sure to give me your thoughts and suggestions in the comments below!
Please share this concept if you liked it!
No comments :
Post a Comment