Microsoft Bridging the Gap Between Developers, Designers and the User Experience

This article originally appeared on Digitalmelon, and is re-blogged here with the kind permission of Chandima Kulathilake. Chan has been recently evaluating new Microsoft technologies for User Interface Design – in what is just the start of Microsoft recognising interactive designers as integral to software – better enabling them to deliver an engaging User Experience.

User Experience is now of the key facets to creating software. User Experience and interface design in the context of creating software represents an approach of putting the user at the center of the process rather than being system centric. This is commonly referred to as user centered design.

The key of successful user centered design is to incorporate user concerns and advocacy from the start of the design process. The needs of the user to carry out tasks using the system should be the focus in any design decisions.

With the release of Windows Vista designers and developers can create rich user interactions in the software that they build.

Windows Presentation Foundation (WPF) provides the core foundation for building these rich user experiences.

WPF architecture allows different media types to be handled (vectors, Bitmaps, Audio, Video, Text and even 3D). The animation effects of WPF span across all media types allowing the developers and designers to animate almost any kind of content.

One other core feature of WPF is it’s composite engine. This allows the capability of having live content inside of another content. This basically gives the capability to have a 3D object rotating inside – say for example a button control – then have a video projected over the surface of the 3D object.

This basically means that WPF has a nesting tree structure capability for all content and controls provided by WPF.

WPF experience simply does not end here and extends to databinding, controls and layout.

The key design principals of WPF can be categorized broadly as follows:

Integration

WPF provides a unified API which allows seamless integration across multiple services that offer content within a single application. The idea is that you are able to use the same constructs for animation, databinding and styling regardless whether you are targeting 2D or 3D applications.

Vector graphics

The main composition engine of WPF is vector-based, allowing for scaling of all output to match the resolution of a specific screen. The rendering architecture uses Direct3D for all output: on video cards that implement DirectX 7 or later in hardware, WPF renders output using the GPU wherever possible. In situations where hardware rendering cannot be used, software rendering is available as a fallback. Lastly, a floating-point logical pixel system and 32-bit ARGB colour support provide a rich high-fidelity experience that anticipates future technology needs, such as high-DPI displays.

Declarative Programming

WPF introduces XAML (eXtensible Application Markup Language), an XML-based language for instantiating and populating nested object hierarchies. While XAML isn’t exclusively tied to WPF, it is suitable for tasks such as UI definition and construction. The design of XAML allows applications to parse and manipulate UI logic at run-time for dynamic workflow scenarios. Importantly, the XAML / code-behind model embodied in Windows Presentation Foundation allows designers and developers to work collaboratively on client application design and development, using tools such as Microsoft Expression as well as third-party specialist tools including ZAM 3D and Mobiform Aurora.

Easy Deployment

With support for both standalone applications and Web-browser applications, WPF offers the best of both deployment models. Web-browser applications run from within Internet Explorer, either occupying the entire window or within an inline frame. They offer the ease of deployment as per standard web applications and can take advantage of the local client hardware and use 3D and media services for a very rich Web experience. On the other hand, standalone applications are locally installed and offer full access to the underlying platform.

Document Lifecycle

WPF introduces a new set of document and print technologies. Applications that need to persist data to a local store can use the Open Packaging Conventions, a ZIP-based packaging convention shared with Office 12 that supports core properties and custom metadata, digital signatures and rights management functionality. For applications that want to share documents for collaboration across multiple machines, even without the application installed, the XML Paper Specification allows visuals to be fixed in a printable, portable format.

All this is good but how can traditional “developers” work with “designers”?

In a typical scenario a designer will create the visual look and feel of the software application. This is typically delivered to the developer as JPG, PNG or a PSD. This works to some extent but fails in some aspects when the developer converts this into the real application. If the designer creates a control which is not available in the standard control set   the trade off is that the developer spends significant time creating that custom control to match the designers original mockup. Or simply replaces the control with one of standard ones which are available.

XAML to the Rescue

In order to enable the collaboration between developers and designers, XAML is used.   XAML is the format which integrates the development process and is the way for both developers and designers to access the functionalities of WPF. XAML is generated by the designer, XAML is consumed by the developer. Further more, the workflow is now two-way meaning that the development process can also start from the developer side who creates XAML and then delivers this XAML to the designer which can take it and style it or completely redesign its appearance.

To enable this interaction developers need not learn new technologies but simply use Visual Studio as the consumer of the XAML generated by the designers using the Microsoft Expression tool set.

CTP editions of Expression are available for download from http://www.microsoft.com/products/expression/en/default.mspx

WPF and WinFX is now part of .Net Framework 3.0. To learn more about these technologies visit   http://msdn.microsoft.com/winfx/downloads/presentation/ and[ http://wpf.netfx3.com/

To see what interactive applications can be built using WPF go to http://www.ibloks.com/