stu-art :: Dev to UX

I’ve been working on a project in conjunction with the European Environment Agency for the past six months. It was launched on Tuesday during PDC and has already received great feedback from around the Internet.

Eye On Earth combines the power of Microsoft’s latest technology (Windows Azure, Microsoft SQL Azure, Bing Maps, Silverlight) with the availability of a wealth of real-time environmental data and interactive collaboration. The rich data and innovative UI will enable the EEA to offer both water quality through WaterWatch, and air quality through AirWatch, which for the first time is comprised of Ozone (0₃)  and particulate matter (PM₁₀) and Nitrogen Dioxide (NO₂). This information will be available to 32 countries, in 25 languages and also gives the EU’s 500 million citizens the ability to offer personal feedback and observations on their own experiences of water and air quality. Not only is the site available in Silverlight (PC, Mac, Firefox, IE etc) but an ASP.NET version was also created for our Linux friends.

Try out Eye on Earth for yourself at eyeonearth.eu!

The official press release can be seen at http://www.microsoft.com/emea/presscentre/pressreleases/EuropeanEnvironmentAgencyPR_041109.mspx.

Over the next few weeks I’ll be taking a look at some of the parts that make up the UI on Eye on Earth, including the new Bing Maps Silverlight control, the Silverlight Model-View-ViewModel architecture, and several custom controls that we built specifically for the project.

Windows 7 has finally arrived! I’ve been using it since the start of the year and it’s an amazing product. I quite liked Vista but this is definitely an improvement – it’s more user friendly, innovative, better value for money etc. For more information go to http://www.windows7.com/

Project Natal is a hardware add-on for the Xbox 360. Using three cameras and an advanced microphone, it allows gamers to use their own bodies as the controller. This is amazing and I want one!! The demos on the official site (http://www.xbox.com/en-US/live/projectnatal) are fantastic and it brings a new dimension to user experience. 

I've just been shown a really cool video from TED demoing a 'sixth sense' device. The prototype uses a projector to draw a UI on any surface (e.g. a wall, paper, even a hand) and then a camera recognises the interaction with that surface. It can even recognise gestures so a user can create a frame with their fingers and take a photograph.

Check out the video at http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html. It's really is inspiring to think that this technology is only a few years away!

Blacklight is a Codeplex project created by my colleague Martin Grayson. It is an open source repository for Silverlight and WPF controls.

Version 3.0 has recently been launched bringing an impressive collection of controls and styles. A showcase demonstrates the controls at http://mightymeaty.members.winisp.net/blacklight.silverlight/.

I'm hoping to be developing a few controls of my own for Blacklight soon so keep a look out!

This is some really cool software from Microsoft Research. Songsmith lets users sing into their computers and a music track will be created automatically. You can choose the genres, tempo, instruments etc. A great example of some clever logic with a great UI to encourage user creativity. Download it from http://research.microsoft.com/en-us/um/redmond/projects/songsmith/.

At the beginning of December, the Legal Sector Alliance held an event in London to encourage companies in the legal sector to join together and tackle climate change. Their key note was given by HRH Prince of Wales and several climate aware companies were invited to attend.

Microsoft were asked to create a Surface application that could engage guests and provide some entertainment for the evening. A colleague and I were lucky enough to have a conversation with the person overseeing this and we pitched an idea to LSA where guests could sign the Surface to show that they are supporting the alliance’s objectives.

In just over a week we designed and created a Surface application that recognised the name badges of the guests when placed on the device and showed a welcome card on the screen. This could be moved and rotated so that the guests could sign the card with their fingers. Once signed, the welcome card faded and the signature was added to the background image. Over the evening the signatures built up on the device.

We made several discoveries during the course of this project involving both design and development. I noted things to consider on a previous post and these proved to be very important. As we didn’t have access to a device for most of the time, the work was done using an emulator. It’s crucial to remember the different form factor when using the emulator as it’s very easy to forget that there is no real orientation on a Surface. Also, the devices resolution is 1024*768 but displayed on a large area thus making everything look a lot bigger than it does on a laptop screen. It’s definitely worth testing the app as much as possible on a real device.

From a dev point of view, we originally hooked up the welcome card UI to TagVisualizers but soon realised that having the virtual card following the physical name badge and then hiding it when the badge was removed was quite limiting. Instead we used the TagVisualizer simply to show a ScatterItem when the name badge was detected. This wrapped the welcome card UI so that it could be moved/rotated and wasn’t hidden until the user had finished signing it.

Although this project was very simple, it was a great opportunity to experiment with the new technology and design/build something that demonstrated Surface’s capabilities in a relevant and interesting way.

On my way back from a training course in Seattle I decided to watch a video of a presentation from the Professional Developer Conference on developing for Microsoft Surface. As a UX person with a huge interest in HCI, the form factor of Surface really excites me. It's not just about having a touch sensitive UI on a table (with the same interaction you'd get with a tablet) but a totally new form of interaction. Surface is an example of a NUI (Natural User Interface) where users can interact with computing devices in a more pervasive way.

The key offerings of Surface over other touch devices in the market are:

• Direct interaction - you manipulate the UI with your hands, not with hardware
• Multi-touch contact - several touch points can be on the UI at any time
• Multi-user experience - several users can gather around the Surface and collaborate together
• Object recognition - the device will recognise objects that are placed on it

When designing a Surface application, it's important to consider these offerings. For example, taking an existing UI and porting it to Surface would normally mean it can only be viewed from one direction - this means users can't gather around the device. Furthermore, a normal GUI application is designed for a single user on a PC therefore there is no concept of simultaneous use or multi-user collaboration. Object recognition can be very powerful when designing for NUIs as users already have associations with objects in the real world. This can be taken advantage of by adding value to that real world object using the device. For example a business card could be placed on the Surface and automatically access information about the person over the Internet, connecting to blogs, shared files etc. As with any new technology it's important that the use be considered carefully. There's nothing worse than using technology for the sake of it and coming up with a badly designed and implemented solution!

From a development point of view, Surface couldn't be easier! I was very happy to hear that apps can be built using WPF with extra Surface controls. There are alternatives to a lot of standard WPF controls e.g. SurfaceButton, SurfaceInkCanvas and SurfaceWindow and a couple of new ones that offer powerful functionality:

• TagVisualizer - this provides the functionality for object recognition. Objects can be tagged with images representing byte codes which the app can recognise and bring up a UI element defined within the TagVisualizer. This UI then follows the object if it's moved or hides it when the object is taken away. There are lots of properties to control how this looks.
• ScatterView - In my opinion, the most powerful control for Surface. ScatterView is a panel that arranges its children randomly across the Surface and provides gesture recognition for dragging, resizing and rotating. There's no configuration or code needed - just put items in the panel and it's all done for you!

So that's my quick intro to Surface! I'm hoping to get involved in a project soon to explore it further!

More info can be found at: http://www.microsoft.com/surface/ and http://blogs.msdn.com/surface/. Some really cool concept videos are at http://www.microsoft.com/surface/Default.aspx?page=Videos.