Metro

Metro is the code name of the modern design language used in various Microsoft software products, including Zune, Xbox, Windows and Windows Phone.

Windows 8.1 – Ultrawide Multitasking

When I recently decided to set up a new workstation at home, I had a look at the available monitors. Without really thinking about it I assumed I’d just get a standard 16:9 monitor, but then I stumbled upon an article about an LG all in one PC with a crazy wide 21:9 screen. This really sparked my interest. Not in the PC itself – but how these ultra wide screens work with Windows 8.1.

Being a fan of Dell monitors, I decided to invest in a 29 inch Dell Ultrawide – so far it has done everything I’ve wanted, and I’ve been very happy with it.

Dell Ultrawide

Windows 8.1’s snap feature allows you to use up to four different applications at the same time with one of these Ultrawide screens. This extra horizontal space has drastically changed how I use Windows at home.

All of these screenshots are real examples of how I use Windows, and were taken over a few weeks of actual use. Basic tasks like email and note taking aren’t included, as I didn’t want to have to censor the content.


Writing a Blog Post

Writing a Blog Post

  1. Xbox Music
  2. Internet Explorer
  3. Internet Explorer

Arranging Tasks & Calendar Appointments

Arranging Tasks & Calendar Appointments

  1. Mail
  2. Calendar
  3. OneNote
  4. Xbox Music

Finding New Music

Finding New Music

  1. Internet Explorer
  2. Xbox Music

Looking for a Computer New Bag

Looking for Computer Bag Ideas

  1. Flipboard
  2. OneNote

Watching Windows Weekly

Watching Windows Weekly

  1. Twitter
  2. Twit.tv

ultrawide-10

Exploring the World

  1. Bing Maps
  2. Star Chart

Metro vs. Your Own Design Language

Facebook Banner

There was a little stir about the Facebook Beta for Windows Phone when it came out. Check out the comments on the official post. A few news sites covered the release, which ended in similar comments. This got me thinking about my view on the situation…

Why has the Metro design gone? Where is the uniqueness of Windows Phone?

Yes, as immediately noticed by those who care – the app doesn’t use the Metro hub pattern that the previous app used, but in my opinion it doesn’t matter because Facebook have their own design language.

Facebook News Feed

In March Facebook announced an update to the News Feed that will bring a lot of design elements from their mobile applications into their main web application, here they clearly state that they’re after a consistent user experience across all of their platforms. While there’s no doubt that the design borrows heavily from Android and iOS apps, but – more importantly to me – it also is very similar to the mobile web experience, which was my primary way of accessing Facebook throughout the day.

Original, Web and New Facebook Experiences for Windows Phone

But the principles are forward looking and similar to Metro, Facebook are focussing on stories and imagery, removing clutter and keeping their distinctive look with the typography and colour choices that users are familiar with. See below an example of how the same information is displayed on both the old and new versions of the Facebook app for Windows Phone. Which one looks more like Facebook?

Old and New Facebook App

By focussing on Facebook design language rather than Windows Phone design language, they’re actually following one of the most important UI principles for Windows Phone – content over chrome. Where the Facebook experience is the content, and the previous Metro UI treatments – like larger fonts and the main panorama – were essentially just chrome.

Does this mean the end of the Metro design language? Obviously not.

My personal view is that the built in templates that come with Windows 8 and Windows Phone 8 are to be used as starting points. You get a lot of good design for free that way, but if your application has its own way of doing things then the Microsoft development tools will allow you to craft them. Real designers make the best decisions from the options that are available to them. In this case, the consistent Facebook experience makes the most sense.

Using Windows 8 (without Touch)

Using Windows 8 (without Touch)

When I had my first Windows PC, I spent a large amount of my time in the DOS environment, playing with scripts and trying to optimize memory. When I went into Windows I had access to cool applications like Solitaire… but most of the things I had ran in DOS.

Using Windows 8 (without Touch)

Windows 8 is like that today, most of the applications I need to complete tasks – be that for work or for personal endeavours – are well established on the Desktop UI paradigm. I tend to use laptops mainly, but when I’m working I plug the laptop into a monitor and a keyboard to get stuff done.

Using Windows 8 (without Touch)

I use a lot of utilities in the desktop for various development tasks, including F#, Python, Ruby, Vim, Filezilla, WinMerge, Fl.ux, KatMouse – all of which are portable applications which do not require installation. I keep these inside my Scripts folder and usually access them via PowerShell commands.

Because these applications sit inside my Scripts directory I get a number of benefits:

  1. I can sync the tools between computers (manually or via the cloud)
  2. I don’t need to sit through loads of installs on new machines (and remove the icons from the start screen!)
  3. I can be sure I always have a rich development environment for when I need to build software

On top of my scripts, I also run a number of proper desktop applications that require installing. Chrome, Office, Visual Studio, SQL Server, the Windows SDK and a few more.

Using Windows 8 (without Touch)

Once I have all these applications installed, Windows 8 gives me everything I need to get tasks done. I have Email, Word Processing, Spreadsheets, and an extremely rich development and scripting environment thanks to Visual Studio and PowerShell.

Using Windows 8 (without Touch)

My Desktop doesn’t include a number of things – apps don’t want to see there. No instant messenger, news readers or weather apps. That kind of information is made visible directly through the start screen and its use of Live Tiles. Clicking on the tile takes you to a full screen application that brings your focus to the task at hand.

Using Windows 8 (without Touch)

The full desktop is just one click away. If I want to check if a Visual Studio build has completed I can just flick back to check. This combination of the new and old interfaces seems to work perfectly for me. Taking all the distractions out of the desktop, and moving them into their own space. If I want to play a game of Solitaire – it takes over the full screen, giving me a rich experience. One click in the top left hand corner and I’m back in the desktop with all my windows exactly as they were.

Using Windows 8 (without Touch)

Am I going to continue using the desktop to access applications and consoles? Yup. Windows 8 has more than this though. The new applications we have today are pretty good. The Bing app has turned out to be extremely useful, for example. But where the new apps currently lag is in the more complex tasks like photo manipulation or music creation.

These kinds of experiences would be better in the full screen UI, and I’m very interested in finding out what the likes of Adobe and Propellerhead Software come up with in the future. But at the moment their products like Photoshop and Reason will have to be accessed via the multi-tasking desktop interface.

Many windows features are still only available in the desktop interface. Most notably File Explorer. There’s no way of casually browsing your file system through the new user interface. Sure you can select files to open inside of other applications – but if you fancy just browsing around – you are out of luck.

Through my use, I can say that Windows 8 has surpassed Windows 7 for its ability to get stuff done with a mouse and keyboard. The new start screen is also going to provide a rich user experience for touch input, and the new applications will really shine in these finger friendly scenarios.

While Using Windows 7 now feels like going back in time, I still think there is work to be done with Windows 8. It’ll be interesting to see if Windows Blue brings any changes to the desktop interface.

The ‘Metro Inspired’ Interface

We recently saw the release of the Office 2013 Preview which has been received by many as one of the best looking and best executed reboots by Microsoft. The preview is very consumer focused (which is where Microsoft is lagging) and includes some very interesting cloud integration features – like saving to SkyDrive by default.

The thing I want to talk about now is a trend that has been coming at Microsoft for a while now – everything is moving over the Metro look and feel, but there is a distinction between an application that is ‘Metro style‘ and ‘Metro inspired’ the first is built for the new Windows 8 user experience, and the second is just an existing Windows application which has been built with the Metro Design philosophy in mind. (Yes I’m going to keep calling it Metro, for now)

Part of the confusion on the Metro name is due to this shift, and we actually have two things:

  • New Windows 8 Applications (Metro style)
  • Any app designed with the Metro philosophy (Metro inspired)

Now ‘Metro style’ applications are going to be known as Windows Store Applications. But we’ve had no word on what the Metro inspired applications are going to be called yet.

Below are a few of these ‘Metro inspired’ apps we have today…

The first of these applications pre-dates Windows 8 itself and was really the birth of the Metro design philosophy on Windows. The Zune desktop software has always had many of the original design features which we now know as Metro design – big on typography and whitespace.

I spend a massive amount of time in OneNote, and the 2013 version is so Metro it’s almost invisible. If you go into the full-screen mode.

Now applications from the Office Division are merging their ‘fluent’ ribbon interface with the Metro design that the Windows team has embraced. The combination is very interesting.

The Developer Division has also taken note, and Visual Studio 2012 has a really amazing (and controversial) look.

Personally, I really love this Metro look. I just wish Microsoft would decide exactly what we should be calling it. Until then – it’s Metro.

Photosynthesise

I’ve had two themes for this site since I started it in December 2010, and even the second one was only a small refinement of the first. Back then I figured that getting the site up and running was more important than the look itself, so I never really gave that much attention to the theme – until now.

Before the design of my new theme even started, I had to give the project a name. I decided to call it Photosynthesise, as I wanted to give the feeling of energy and growth. (Oh and also the signature colour is green!)

This time I thought I’d share my ideas behind the design process…

Goals

There were three things I really wanted to have for my Photosynthesise project:

  • A design built to fit inside a typographic grid
  • A design which evolves the current identity
  • A design that is great for all existing content

Thinking about space

While researching Swiss Style, I discovered that things look better in grids. I think this is a concept that everyone already knows, but really focusing on the grid when laying out a user interface gives it much more balance. The users may never be aware of the work you have done, but unconsciously – they’ll appreciate the eye for detail.

Switch on the grid to see how it looks.

Thinking about identity

My old site was green, and I decided to keep it. This time the new logo at the top was designed to be a lot smaller, allowing the title of the website to come outside of the coloured box. Designed in a 16×16 grid, the new logo will easily scale down to the microscopic resolutions of favicons, as well as scale nicely when zoomed up to higher definition.

Joining the signature green, the previous theme’s hyperlink colours have also been used throughout the new look. It will be no surprise to designers that this almost-RGB colour pallet is influenced by digital displays. Finally, three shades of grey and white make up all of the colours used throughout the design. The darkest of the greys is used in place of black to ensure the other colours are never overpowered.

The old site was based on Twenty Ten, which had a shape that was very similar to other WordPress blogs. I’m happy to continue to use this layout as it is familiar and user friendly. The overall size of typographical elements in the design is fairly large, something which has also continued over from the previous theme. This keeps the overall look of the site mostly the same as it was before, even though everything has been refined.

When it comes to the typography, I decided to go for Segoe UI for the body font. I had also greatly considered using either Calibri and Cambria, but I ultimately decided that I liked Segoe UI the most. The reason I picked Windows fonts is not by accident – as a Windows developer they feel very familiar to me, and I like writing in them.

Thinking about content

The content is the really tricky bit. Due to the fact I have previously used 600px wide images throughout the blog, I’ve decided to keep the content at that width. Consequently, images like the one above still have a big impact on the body text. Oh and I don’t have to resize everything.

“I feel like a pig shat in my head.” – Withnail

I’ve greatly improved the spacing of the text and other elements to make the whole content area flow with the 100+ posts I already have. I’ve also improved the ability to post quotes, code samples and console commands, handy when you spend as much time in PowerShell as I do.

Windows PowerShell
Copyright (C) 2009 Microsoft Corporation. All rights reserved.

PS>


To enable new discovery of content, I’ve improved the visibility of the categories and tags. Large blue links to the right of the content enable switching between categories, and now a new section at the bottom of each post makes the relevant tags much more visible.

I plan to keep tweaking the code over the next few days, but if you have any feedback or you’ve noticed any bugs please let me know in the comments!

Using Windows 7

I have used Windows 7 since the early betas, as is always the case with new Windows releases – I was very interested in what new features were coming. Over the years I’ve come to rely on these features quite heavily, and like millions of other people I’m currently use it as my primary operating system.

My use of Windows 7 has changed quite a lot over the years – from simply changing themes to using totally different applications. But as Windows 7 is coming to the end of its life (for me anyway) I’m interested to see how my computer usage will change and evolve when Windows 8 takes over as my primary operating system.

So I thought I’d take a moment to reflect on how I’m using Windows on my MacBook today…

I like to keep things simple, a trend that will no doubt continue to Windows 8. As part of this I usually keep the number of applications I pin to the taskbar to absolute minimum. On my home computer this is PowerShell, Outlook and OneNote.

In the notification area I tend to have only power, networking, and volume icons, as well as the awesome Process Explorer. This is pretty much all I want to see down there, and everything else gets hidden away. (Remember when we couldn’t hide stuff down there? Ugh!)

Because this is a laptop, I tend to run a lot of my programs either maximised or side-by-side using Aero Snap. This is by far one of my favourite features in Windows 7, and I use it all the time. Just grab the title bar of any window and drag it to the top, left or right of the screen to snap the window into place.

Windows itself is just the shell that works around the applications, and right now the applications I tend to use the most (other than the web browser) are:

  • PowerShell
  • Office
  • Visual Studio
  • Expression Studio
  • WebMatrix
  • Windows Live Essentials
  • Zune
  • WorldWide Telescope

All of these applications are made by the same company as the operating system they are running on, so you’d think that they’d all behave exactly the same. This is not the case – each one tends to have its own UX and personality. Something that’s probably going to change in Windows 8 thanks to the advent of the Metro design language.

There are plenty of other smaller applications that I also use, including (but not limited to):

  • Paint.NET
  • EOS Utility
  • FileZilla
  • Flux
  • KatMouse

Oh and as for the browser? My current choice is actually Google Chrome. Mostly because of the spell checking functionality. I’ve used Internet Explorer 10 pretty extensively on the preview versions of Windows 8 and I quite like it, so the chances are I’ll probably move back to IE when it comes out at the end of the year.

Finally I also spend a large amount of time in PowerShell console windows. I have a lot of applications and scripts that I use in this environment, and I’m really hoping we get some kind of full screen Metro treatment to PowerShell – until then I’m probably going to have to use the Desktop to run these kinds of apps.

Windows 8 will definitely let me work in exactly the same way I do today – you can get access to all of the desktop and features of Windows 7 (with more stuff) so there’s no doubt about that. But will things change?

Eventually Metro-style applications will take over from the desktop applications we are using today. It just might take a while.

The ‘Real’ Windows 8 Logo

The new Windows 8 logo, as shown above from the Microsoft blog post that announced it, has been designed to compliment the Metro Design Language and also has roots in the Swiss International Style, which is all about typography, solid colours, strong lines and grids.

Over all I like it, but when I first saw it I felt like something was a little off with the ‘beams’ on the window. It looked like the perspective was messed up or something.

Later I came across an article about the new logo by the design agency Pentagram – who were commissioned by Microsoft to create the new logo. After thinking about it for a little while I understand that the beams are like a grid on top of the rectangle shape, and because of this understanding the logo looks better to me.

This is a bit like seeing the arrow in the FedEx logo for the first time.

You can tell this version of the logo looks slightly different to the one posted on the Microsoft blog. As Pentagram explains, the window shape itself has been chosen to be a rectangular shape in perspective, but the actual beams (or grid lines) are separate from the shape.

The perspective drawing is based on classical perspective drawing, not computerized perspective. The cross bar stays the same size no matter the height of the logo, which means it has to be redrawn for each time it increases in size, like classic typography.

You can see these lines are cut out of the coloured shape, and are not in perspective at all. The idea is that each time the logo is drawn the lines are always the same size, as shown below.

Seeing the logo in this view makes me appreciate the design a lot more, but the problem is that the version that is on the Pentagram website is actually quite different to the one on the Microsoft site.

Here is an animation which Kean created for me which show the difference in the beams and text between the two.

So which one is the real Windows 8 logo?

I find it really hard to believe that Microsoft would be able to convince everyone – from OEMs to the press – to render a version of the logo for the exact size they need, every time they need it. So I think they’ve had to compromise on the design given to them by Pentagram.

I’m not sure which is the ‘real’ Windows 8 logo yet, or if Microsoft are going to make any more changes before it gets released to the public. But I’m going to place my bets on the version that Microsoft posted to their blog.

I’m assuming they’ve just picked a width for the beams which fits well for the majority of sizes shown in the new operating system, and decided to stick with that moving forward.

I wasn’t the only person to notice this, Long Zheng has a write up on his excellent blog. He suggests changing the beams to fit in with the perspective of the rest of the logo, and I think his version looks pretty good too.

Microsoft Future Vision

Every so often Microsoft make ‘Future Vision’ videos, and while both of the ones I have posted here were produced some time ago, I stumbled across them again recently so I thought I’d share them for anyone who hasn’t spotted them yet.

The basic concept is for the Office division to imagine where productivity will be in the next 5-10 years, without having to actually create the products today. Both of these videos have a similar feel (I actually prefer the 2011 video) and the technology in them is smart and subtle. Some of the technology is even starting to become real.

It’s this smart yet subtle concept that really connects me to the modern Microsoft design language, including Metro on Windows Phone and Windows 8.

2009

My favourites from the 2009 video have to be the smart school room, and the flexible newspaper display. Fantastic ideas.

2011

There are so many parts of the 2011 video I like, but most of all I like the way the devices work together. The taxi windows and hotel room computers become personal once hooked up to the smaller devices. A very powerful concept.

You can watch a few of the Microsoft Future Vision videos on the Office YouTube page, but I don’t think we’ll see a new one until next year.

Principles and actions for Metro apps

Metro User Interface Design

I saw that there was a very interesting post on the Windows Phone Developer Blog about the Metro design philosophy titled ‘From Transportation to Pixels‘ and I wanted to add a few thoughts on the process of designing an application which uses Metro.

There’s always a lot of fads which come and go in user interface design. (Glossy buttons anyone?) but good design lasts forever. One of my favourite designers is Dieter Rams – some of the stuff he made with Braun was very impressive (as Apple have noticed).

Dieter Rams ‘good design’ principles

  • Good design makes a product useful
  • Good design is aesthetic
  • Good design helps us to understand a product
  • Good design is unobtrusive
  • Good design is honest
  • Good design is durable
  • Good design is consequent to the last detail
  • Good design is concerned with the environment
  • Good design is as little design as possible

While this is mainly about hardware, many the principles still hold strong for software – including applications designed to follow the principles of the Metro design language.

Actions for designing Metro applications

Keep it light & simple

  • Focus on primary task
  • Do a lot with very little
  • Fiercely reduce unnecessary elements
  • Use whitespace to delight your users
  • Make sure things feel fast and responsive

Typography is ideal for information

  • Remember that type is beautiful
  • Use clear, straightforward information design
  • Be uncompromising in sensitivity to weight, balance and scale

Motion brings your app to life

  • Make it feel responsive and alive
  • Use transitions to give context and improve usability
  • Create depth and dimension by using motion

Focus on content, not chrome

  • Delight users through the content instead of decoration
  • Reduce visuals that are not content to the minimum
  • Content can become the UI so users interact with the content directly

Be honest

  • Design for the form factor
  • Be authentically digital
  • Don’t try to make it what it’s NOT
  • Always be direct

While I do believe that the Metro design principles are super important, I do not feel the need to treat them like a fad and just start redesigning everything in the name of Metro. For example – I have seen people update their websites and say “Hey look at my new Metro site!” which just makes me think they are missing the point…

Follow the actions listed above at all stages of your application design, and make sure it fits in with the good design principles that has lasted for so many years. Keep at it, and you can’t go wrong.

But don’t kid yourself – Metro is not the ultimate interface, it’s just the (very cool) start of a whole new generation.