User Experience

With the advent of graphical user interfaces, creating the perfect experience for computer users has been more important than ever. Well designed applications should allow the user to complete their task with as little effort as possible.

Captivated by Her

When reading an article about how design is shaping the new Microsoft, I stumbled upon a video by Kat Holmes from last year.

In this video, Kat talks about how conversations power innovation and new experiences. She goes on to discuss how the movie Her both validated and shaped Microsoft’s thinking around their Cortana digital assistant.

Like Kat I have found the movie Her to have a fascinating look at the future of human and computer interaction, primarily through verbal communication and relationship building. While the movie certainly takes the relationship part of the equation to the extreme, I firmly believe that this kind of trust between digital agents and ourselves will eventually enable a new kind of human excellence.

her

Microsoft also collaborated with Vice’s Motherboard to produce a couple of short documentary videos titled Captivated by Her. They’re well worth watching if you’re interested in how human emotion inspires and shapes technology.

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.