Archive

Metro Design Language

Capture_image_header

Last week Microsoft announced a number of new features for the next Windows update and in time I will get to them; but right now I want to the public reveal of Project Neon.

Fluent Design System

Starting with the Fall Creator’s Update Microsoft will be shifting Windows away from the flat, minimalist world of Metro to the third dimension known as the Fluent Design System (FDS).

Fluent Design is an expansion on some of the ideas Microsoft started playing with in Metro, but it is also is the opposite of it. FDS caries on the ideas of the use of colors and for apps to be digitally native, but it’s not the strongly flat thing Metro was. FDS is also not as stringent as the guidelines for Metro was. FDS still draws inspiration from the same sources as Metro did but the world FDS is built for is far different.

FDS_Symbol

Designed for the Surface and Mixed Reality

One of the interesting things I learned about Fluent Design is it was partly designed around the fact Microsoft makes hardware. The obvious one was HoloLens, Microsoft’s augmented reality headset. FDS takes clear inspiration from the device with a focus on depth and materials and scale. But I think one of the other sources is the Surface.

Put bluntly Fluent Design is about creating appealing software and experiences that will make Windows devices desirable. The Surface team has been pushing the hardware envelope but the software has largely languished. FDS potentially fixes that.

Right now FDS will not be a one and done affair, but instead release as a series of waves. Wave 1 is already out with a number of applications using aspects in their apps.

So this is the end of part one. I’m going to post up a series of various images showing the future of Fluent Design soon.

So over the weekend news leaked of Project Neon, a new design initiative for Windows 10. According to those early reports, Neon was started about a year ago as an internal project.

There are a lot of questions about Neon. For one how far reaching will it be? Is Neon for only the Shell; dig deep enough and you’ll find the stuff that’s been there since Windows 3.0? Or will it be deeper? Will it be part of one big update or slowly integrated in? Most of these answers won’t be known until Microsoft makes whatever their doing publically known. However we can sort of trace where Neon is coming from and why it’s coming together now.

neon_suspect

History Lesson

It is hard not to start a design conversation about Microsoft and not start with Metro; the design language built for Windows Phone. That design had a profound impact on Microsoft. In many ways Metro brought design thinking to Redmond as part of the product. And while Metro was influential it was/is divisive; especially the version that ended up in Windows 8. It’s development stalled with the stalling of Windows Phone and later Windows RT. This led to the Modern Design Language or MDL.

MDL faced a huge task; bridging the UI of Windows Phone with the UI of Windows 8. It had to work across screen sizes and inputs while maintaining the Metro ideal. The result was mixed. Much like Windows 10, MDL was geared more toward easing the fears caused by Windows 8 mobile first posture. A balance was hit in the update to MDL but much of what made Metro a strongly identifiable interface were taken out or muted.

Now that was a really condensed version and it only tells part of the story. The other half is about the formalizing of Microsoft design.

Between Metro and MDL design responsibilities were shifting at Microsoft. What we now call Metro started inside what was the Entertainment and Devices Group (home of Xbox). At that time Chief Experience Officer J Allard was working on consumer initiatives like Windows Mobile, Zune, and Xbox.

The actual work of designing Metro was done at Pioneer Studios, Allard’s skunkworks group. The Metro associated with Windows 8 was done by the Windows team headed Julie Larsen-Green under Steven Sinofsky. So different teams, different approaches, and little contact. After Allard and Sinofsky both left their respective domains were joined together into Windows and Devices. In an interesting twist the design team for Windows comes from the core developed by Allard. Design was also elevated with company reorganization.

Building the City

Back in 2015 the idea of the city as an analogy for Windows’ UI was used. The first time I heard it was from Principal Designer Kat Holmes. It was used then to describe how while each service, like Office, has its own unique identity it was still part of Windows.

The analogy was used again by Windows’ design chief Albert Shum to describe the changing approach to Windows UI in 10 (along with a stated recommitment to underlying principles of Metro like typography).

The idea of the City; a place with clearly defined lines yet also containing differentiated neighborhoods is a good place to start a discussion about the Windows Interface. Given the products built by Microsoft and the wildly different ways it’s used is a lot like living in a city. Windows is complicated and after both Windows 8 and 10 complicated in ways unique.

Neon seems to be about easing these complexities.

neon_suspect5

Neon Signs

So why Project Neon?

Go back to the beginning of Windows 10. It was built upon the work of Windows 8 and RT and was mainly about answering desktop user concerns. The MDL was designed to make it easier on desktop users to use features built for Windows 8. The MDL was built to make the transitions between mobile and desktop easier along with making it easier for app developers to port apps to Windows. Part of the criticism that MDL received was based around how much it was about being this bridge without it’s own identity. And I think the designers in Redmond took the lessons of MDL and Metro into Neon.

At this stage I should explain that the primary goal of a design language is in creating a common framework from which designers and developers can start. It is a guide and not the rules. I think one of the big lessons of Metro was making sure people understood that the design language and guide are the basic things to do not the only thing. With Neon Microsoft is pushing Windows and its users further into the modern age.

(Okay this is the part where I make up stuff and I had no witty transition so I put this here instead)

Neon comes at a point where Windows is being pulled in many different directions. On one hand there is the traditional PC with its mouse and keyboard. Then there is mobile which depending on your phone may also look a little like your PC. The Xbox is now a Windows device as is the HoloLens which computes neither like a pc or a phone. Add to this devices like 2 in 1s and you factor in tablets (and pens); Windows is complicated.

So Neon’s job will be about making tablets, pcs, and phones feel at home and usable. Neon will also improve on the various inputs Windows uses such as pen and touch. With Windows 10 inking saw major improvements and I expect those to be part of Neon. Neon will also be a spring board for mixed reality. Devices like HoloLens and the HTC Vive need interfaces and Neon will be part of their integration.

Lastly, Neon’s design will be about setting Windows up for the next generation of devices. Windows 10 came about because Microsoft wanted to move forward. I think Neon is about defining what moving forward means.

It’s going to be interesting seeing how this pans out.

 

Nxt_at_MSFT_3

This week Microsoft decided to profile a number of designers working at the company as well as do a podcast interview with Principle designer Katie Holmes and Principle researcher Bill Buxton. Given the dearth of info on what’s new in Windows 10 UI/UX I of course pounced on these posts.

Gang of Four

One of the interesting, and sometimes confounding things, about design at Microsoft is how communal it is. Whenever a designer from Redmond talks about design it’s never about a person but about a community of designers. This makes it hard to turn any number of people into a Microsoftian Jony Ive. However the consolidation of Microsoft’s products and groups has lead to veil being lifted so we no whom to praise (or blame).

hero_large

The designers profiled represent the hardware and software sides of the software giant. There is Kat Holmes who is Design Director, Operating Systems who worked on Cortana and is part of the team working on Windows 10. Next is Jonah Sterling, Azure’s Creative director and the guy I sort of wished would get a crack at Windows proper (I mean it the Azure web portal is sexy). On the hardware side is Yeongyku Yoo creative director for the Microsoft Devices team and Ralf Groene who is creative director for Surface. Yoo works on the upcoming HoloLens and for the newest hardware group, Devices, which is also working on wearables like the Microsoft Band. Groene, who every time there was a Surface video made me ask who he was, is part of the team that works on the Surface line of devices.

Each profile provides background on the designers and their various paths to Microsoft and their views on design. It’s an interesting mix because there is no lock step answer on what design means. Beyond these profiles was an interview on Microsoft and design done for the Next at Microsoft podcast.

Microsoft’s Five Burroughs

Nxt_at_MSFT

Bill Buxton is a principal researcher at Microsoft Research and someone who has done a lot of work on devices with consider commonplace. Buxton is also part of a larger movement to make design thinking a bigger part of Microsoft. In an interview with himself and Kat Holmes he discussed some of the issues Microsoft faces. One of the most interesting points was made by Ms. Holmes on where Microsoft’s interfaces are going. She described Windows and Microsoft services as being like the 5 boroughs of New York City; united but distinct. Buxton discussed the challenge facing technology was connecting devices and apps across their barriers.

And that is the latest in Microsoft Design news.

Next At Microsoft Podcast: Philosophy of Design

A Gang of Four: Holmes, Sterling, Yoo, Groene (Microsoft Stories)

images: Microsoft

Microsoft has always had its eyes on the future. Bill Gates was well known for making predictions on the future of computing (even wrote a book on it). In fact Microsoft has maintained a section of the company that works on thinking about the future.

Classroom_of_the_Future

For the last decade, starting in 2006, Microsoft has made a series of videos that show a vision of the future. For most people who follow such things the series was made famous in 2009. This past week a new video came out that once again put out a Microsoft colored vision of the world in 5-10 years.

SurfaceHub_Clear

Now some have criticized the Productivity Future Vision (PFV) videos for the fact they didn’t reflect products that Microsoft was working on. Critics wondered why the software giant would focus on making science fiction while Apple and Google made reality. For Microsoft the answer has been about creating a conversation by providing a glimpse on things Microsoft is working on.

This year’s video is interesting because much of what’s on screen now reflects products Microsoft makes. The video’s focus also seems to coincide with the new focus the idea of the ubiquity of experience and mobility that’s been the focus of Nadella’s tenure.

Holo_Pad

For me the PFV is a vision of computing and of Microsoft that I want the company to strive for. The idea of computing being this thing that travels cross devices where you walk in, log on and use a device and everything is there; and when you go your stuff just goes with you.

Productivity_Vid_Hologram1

Productivity Future Vision (link)

(You just don’t know how much this video has me like a kid on Christmas day)

images: Microsoft

Today I read an interesting retrospective by Paul Thurrott on Windows Phone. It was part of a series of articles he writes on past Microsoft technologies with occasional comparisons to current events.

The article on Windows Phone was interesting because it talk about the fact that with Windows 10 Microsoft was closing the door on Windows Phone and on what made it special. It is an interesting read but it left me wondering if Microsoft was really closing the door on Windows Phone as it was and if that wasn’t entirely a bad thing.

Five years ago Microsoft made a break from it’s then mobile OS Windows Mobile to Windows Phone 7 Series. They shifted their thinking away from delivering software that Phone makers would re-skin and put on various hardware to a consistent interface and underlying hardware platform aimed at consumers and not enterprise. The move brought design into focus for Microsoft in ways it never had and brought kudos and awards.

But it hasn’t been the success Redmond was hoping for.

Five years later the vision put out for Windows Phone has had to exist in a less than friendly market. It’s innovative thinking around applications and notifications were love by critics but not widely adapted by app makers. The designers had to move quickly to make the platform work in a market where it was a distant third player and thus some things were tossed. Add to that Windows Phone’s merger into the larger Windows ecosystem (beginning with the move to the NT kernel in Windows Phone 8) brought more changes.

Some of the changes were sad. The need to keep partners and increase traction meant hardware requirements became optional. The next billion users meant an increase in affordable phones and less flagship devices. The dearth of app developer support meant things like Hubs and other initiatives went largely untouched.  And user expectation has meant the strong Metro design language has had to concede to things like hamburger menus.

And to be honest with Windows 10 what Thurrott describes as backing away is true; many of the elements that marked Metro and Windows Phone are gone to one degree or another. the Panorama and Pivot controls which define the typical app no longer is the representative design.

And yet we are talking about Windows Phone at year 5. And after five years it is time in my opinion to move on. As much as I liked Windows Phone and Metro I always thought they were a step toward something else. And while I would’ve loved to see user generated Hubs and an anti-app model I also wanted to see a Metro that allowed for a UI developers could stretch and brand their own way. I also think Windows Phone wasn’t perfect if the goal was to create something that could run on tablets as well as phones.

For me after four or five years an interface can and should be re-examined. What was fine in the beginning may no longer work. Unlike iOS and Android Windows Phone couldn’t bend developers to add features or influence the influencers. Users did not flock and it’s hard to know if it was the uniqueness of Metro, the lack o certain apps, or both that kept them away.

With Windows 10 Microsoft is merging Windows Phone and Windows RT (tablet OS) to create a new mobile offering. This means the things Windows Phone was about in its beginning no longer apply. And that could ultimately be bad or it could be good. We will know in another five years.

win10_xbox_devices_web

Since the release of the second preview for Windows 10 I’ve been going over the presentation and the latest Build looking at the changes for Windows and the Metro interface. Visually there have been clear changes made to core applications as they make the shift from Windows/Windows Phone 8.1 to the Universal app model. Reception for the overhaul has been mixed to be polite. I’ve read a few user comments saying Windows 10 sucks for tablet users. Also a few feel the new interface with new app controls and the hamburger menu means Windows is losing its unique accents.

While the overall ideas and final look for Windows 10 is far from finished, there is enough stuff there to make a preliminary brief.

Up first let’s talk about the Hamburger. The Hamburger menu is a button composed of three lines which represents menu selection or more options. It is used a lot for mobile websites and apps across platforms. The menu is a bit controversial in design circles; some consider it the mystery meat of design. Now in Windows and Windows Phone the Hamburger was rarely used; instead pivot and panorama controls were used on Phones and edge UI elements used on tablets. The new Modern UI is moving beyond both. Now one thing I observed with the new menu is how much it also resembles the look of the Mail app in Windows 8. When you shrink it down the Map app’s settings resemble the template used in creating the new Map app. Photos, and others. The Hamburger menu simply lets you hide them.

Outlook_UI_900x530

One of the things some of the early applications show is that the shift in design is partly about providing an experience that moves easier between screens. The transfer of Metro from mobile to tablets wasn’t as easy because the teams designing them were coming from different directions. Another aspect I am noticing is the new Modern design might’ve been created to with an eye on reducing app repetition. By repetition I mean how a lot of Metro apps just used the basic templates which resulted in a bunch of similar apps.

The new Modern language deviates from some of what Metro was but not much. It’s not backing away from minimalism or a focus on content over superfluous elements. The Universal app model carries an inherent need for the reuse of elements, but not necessarily shrinking the interface. There is a merger of ideas in some places and changes in others. The edge UI’s in Windows 8 and 8.1 have been replaced easily available quick app settings (hamburger). The app bar remains but rules on controls have be relaxed. Commands can now be on top or bottom. One thing to note is that some apps appear to use motion and animation when switching controls. An example of this is in the new Mail app. App controls look to be heading for a change in styling. A new design for App controls was seen.

Beyond applications there has been work done to modernize the desktop. The taskbar has a new highlight feature with opened programs. Microsoft has tweaked the flat color and style introduced in Windows 8 along with the title bars and the minimize, maximize, and close buttons. The Start menu continues to be iterated on. In an interesting move the Start Menu has been rebuilt in XAML, a software language used to make applications. This is interesting because Microsoft is using its tools to build apps; these tools are available to developers.

w10_pc_people_contactcard_16x9_en-us_laptop-13

The interface and experience that has been made public has divided Windows users especially those who loved the Metro design language. The new Modern language. Windows 10’s rough sketch is showing an OS that is trying to think about mobile from a new perspective and balance the needs of traditional PC users while not abandoning users who adopted touch and tablets. This approach is obviously something to get used to and refine.

images: Microsoft

So right now I’m going back over the big Windows 10 event which beyond HoloLens had enough news to make one busy writing on it for at least a week. And while many are writing about Windows Holographic and whether Microsoft is cool, a potential fanboy rage event (FRE) could be lurking within.

Amongst the many things the software giant showed off were new applications based on the new Universal app model. Many of the apps shown were one’s available now on Windows tablets and Windows Phones like Mail, Pictures, Maps, and People. They all looked nice and they all seem to, even in this early stage, perform well.

But there is an issue with them.

One that will be a discussion point in fanboy flame wars….

It does not look like Metro.

Now what does that mean. In one sense the apps shown as demos and as motion studies don’t use the Pivot and Panorama controls introduced with the birth of Windows Phone. You don’t gesture over to another screen with your fingers. Settings are now no longer contained on the bottom of the screen or hidden when not in use. There is a certain level of chaos that has been injected into the uniformity that has been part of the Metro design language. The live tiles are there (and they may change) but other aspects are changing. On the PC side gone is the Charms bar; replaced by an overhauled Action Center. Sliding from the left brings up not a set of thumbnails of open apps, but the new task view which looks like webOS (card like). This along with the many little changes sprinkled in is making some wonder if this is the end of the Metro line.

Right now Windows 10 is in Technical Preview, meaning its available for anyone to use but it is not ready to ship. That means a lot of enthusiasts along with IT admins get to test it. Now I call this post a war but really I am just observing the reactions of people who took to the Metro language complaining about changes that make 10 look to them like another “me too” system. On the other side I’m also reading the views of those who thought Windows 10 would mean the death of Metro and a return to Windows 7 and Aero. At this point I could describe to you the level of rage and the invectives used by both sides but that is boring, mind numbing, and tedious; in condensed form there is must bleating and bitching.

Actually let me say this. There are a number of people who are Metro purists; people who take the design guidelines as rule of law. As much as I like Metro I don’t think it should be the last stop in the evolution of interface design, especially at Microsoft. Even the Office labs envisioning videos I still hold up as what I want in a UI shouldn’t be the end point (in fact it’s time to rethink them too).

For me what I see so far is intriguing. As much as I like Windows 8 and what it brought I also acknowledge it hasn’t been accepted by people. In order to move forward changes had to be made to make Windows accessible and acceptable to users who use laptops and desktops. On the other hand Windows 8 brought new features which honestly make Windows easier for people to use and manage. We can’t go back to the days of Windows 7 because those days are gone and users are looking for something modern.

And that is where Windows 10 comes in.

Now this doesn’t mean I don’t have issues. The new icons and looks could be construed that Microsoft is trying to make Windows look like iOS and Android. Also I still think the Start Screen needs tweaking to open it up more for customization beyond backgrounds; especially on phones and tablets. Lastly I think more should be done around making Windows work better on pure tablets.

But right now I think 10 is on the right track.