Differentiated User Experience (UX)



A new buzzword that I hear more and more these days, particularly from Microsoft evangelists, is "differentiated user experience" or "differentiated UI". I’m even guilty of using this occasionally myself. And yet, it is one of those terms that often makes people cock their head like a dog that heard a human-inaudible screech.

We have been using it a lot this week, because I have been working with the patterns and practices team at Microsoft on the Composite WPF project, and we want to make sure that what gets built there accommodates a differentiated user experience.

So what does Differentiated UX mean? Given the context of most recent discussions on the subject, one would have to think that a non-differentiated UX would have to mean any kind of UI that came before WPF or Silverlight. But that is not really the case. In fact, it may not even exist now given that a quick search in Live or Google yields almost nothing for the search term “differentiated UX” or "differentiated UI".

I think the term Differentiated UX fits cleanly into a similar space as the term SOA – especially when the SOA term was first being thrown about as the future of software development without any clear definitions anyone could agree on (then or now) about what qualifies an architecture as service oriented. Those talking about the new buzzword seem to have a clear understanding of what they mean, but most are left wondering what they have in mind when they say that term.

Imparting what a differentiated UX is difficult because a lot of it amounts to dynamic graphical behaviors that cannot be statically captured with any fidelity in a written document like this. When I think of a differentiated UX application, I can’t help thinking of a quote I have heard a couple of times when visiting my father-in-law in Kentucky – “Y’all ain’t from around here, is ya?” (delivered with a wide variety of grammatical crimes against humanity). This quote captures that visceral sense that something is different about your experience than what you were expecting or what you are used to. I think that captures the essence of differentiated UX. It should not be a completely alien user experience. The user still needs to know or easily figure out how to get done what they need to get done. But the look, feel, and interaction may be considerably different than the way the same task would have been presented with preceding UI technologies. Usually that difference is that it is more dynamic in some way, including visual effects such as fading, highlighting, scaling, moving, etc.

I think one attribute that would make an application a differentiated UX application is when the application gives the user a unique experience in performing a task that is familiar to them. Another way of spinning the same functionality is to say that a differentiated UX exploits new UI technology to allow experienced or novice users to discover how to complete a particular task with greater ease. Another aspect that puts things into the differentiated UX space in my mind is when an application has a unique visual theme or branding that makes it really stand out, but in a non-obtrusive way, from other applications designed to perform the same tasks, and that makes it somehow more pleasant to look at or use.

A great example of differentiated UX available in the public domain is in the Family.Show reference application by Vertigo software (http://www.codeplex.com/familyshow). The assumed audience for the application is non-technical users who want to enter and track information about their family tree (a genealogy application). There have been dozens of small applications written for this purpose in the past, and most employed traditional UI controls including grids, list boxes, combo boxes, and text boxes to try to convey the potentially dense and hierarchical information contained in a family tree. Family.Show harnesses the ability of WPF to easily display rich 2D graphics (with additional features such as zoom and pan that are extremely easy to implement in WPF due to its vector graphics rendering engine) to show a family tree as just that – a 2D graphical interactive rendering of a family tree with vector representations of individuals in the tree, relationships, other adornments for peripheral information about the individual. The incremental cost of displaying information in this way in WPF if a fraction of the cost it would have taken to do this with Windows Forms, MFC, VB6, or even current web technologies (excluding Silverlight).

Additional information is presented not with traditional drill down dialogs or other UI that requires a distinct context switch for the user, but through rich content pop-ups and detail panels that slide out from a selected location, giving the user graceful transitions that are easier to follow and not get disoriented by the context switches in the application.

clip_image002

The Woodgrove Financial Application is another sample WPF application that demonstrates features I would say puts it into the realm of differentiated UI. Similar to Family.Show, it uses rich graphics (2D and 3D charts in this case) to depict data that would have often been presented with grids, list boxes, and text boxes in a typical line-of-business (LOB) application. It too features rich content pop ups (bar charts inside the tooltip shown, a zoomed view of the chart in the upper right when you hover over it, additional axis labeling in the 3D bar chart when you hover over data that represents a particular vertical market, etc.). All of those are also delivered leveraging WPF’s animation and transparency features to provide gradual, more intuitive transitions for the user so that even though there is a lot more information flying out of the screen at them in response to subtle user interactions, it does not become overwhelming or disorienting.

clip_image004

Another example I like to show that speaks of a differentiated UI is the Cine.View application by thirteen23.com, a WPF design company. Cine.View is a WPF smart client front end for the NetFlix web-based movie rental service. Although the choice of color gradient is a bit overwhelming, the application demonstrates a number of great styling capabilities of WPF that add the sense that this ain’t your typical smart client application anymore. They use a navigation-style WPF application with forward and back navigation like a browser, and use quite a bit of animation, transparency, and element styling to give a really distinctive application feel to something that could be quite mundane otherwise. An intelligent use of transparency and animation in simple things like presenting a drop down menu or transitioning between views can add a lot in terms of just making the user “like” the application.

clip_image006

While a lot of this may seem like just eye-candy, one has to be always cognizant of the impact a simple visceral coolness to an application compared to its competitors may have. I frequently work with customers ranging from internal corporate applications; to ISVs for major industry software including financial, insurance, and medical; to government contractors developing specialized applications for defense and management purposes. In all these arenas, there is always an aspect of sales to the success of the project. If the funding source (the VP of X in the corporate environment, the purchasing bank or insurance company in the ISV scenario, or the General with the budget to give the green light in the government arena) can look at an application for which they have no expertise to judge themselves, but immediately feel like it is impressive in some way (which usually manifests itself graphically first), then they are likely to chose that as the way forward.

Other examples I have encountered in industry (for which I do not have screen shots) include the following:

· Medical monitoring: An arena that used to require specialized, embedded applications to display real time graphical information about patient measurements and status can now be implemented using WPF. Not only does WPF enable rendering of the dynamic graphical displays, it allows tighter interactive integration of traditional (lists, fields, and grids) UI with the graphical displays.

· Maritime navigation simulation: Rendering of near-photo-realistic versions of vendor equipment such as dials, gauges, controls (steering, throttles), and other user interaction screens to directly model the experience for a particular vessel.

· Defense intelligence data visualization: Presentation of 2D graphical iconic views overlaid on 3D models for situational awareness, complete with user interaction with those graphical elements. Also in this same application, traditional grid-oriented presentation of data enhanced by WPF features (animation and styling) to provide contextual clues while merging different sets of data.

An interesting aspect of the concept of a differentiated UI that was brought up by an insightful student in a recent WPF class I was teaching. He observed that for years we have had design standards which dictated that menus and toolbars and status bars and grids and such were supposed to look a particular way and be in a particular place in your UI. And it was always a battle to get developers to conform to those, but eventually the tools started to make it easier to do those things out of the box. Now it seems the trend is to go in the other direction and to seek a differentiated UI – one that at least looks and feels different (and presumably better) than another app that does exactly the same thing. I think part of this is due to the realization that previous rigid design standards didn’t really make any applications considerably easier to use. Just because a menu item can be found in the expected location doesn’t mean you have any clue what will happen when you invoke it or what the side effects of that action may be. Somehow you have to put yourself into the eyes of the user, think like they will think, and find ways to present tasks to them in a way that will make sense and be easier to use. Putting overly restrictive stylistic constraints on the application designer in getting that done just goes in the wrong direction, so differentiated UI is definitive a swing of the pendulum in the other direction from rigid application UI design standards. Now many of the things those standards addressed, such as menu and toolbar actions, are presented directly in the context of what the user is doing through pop up tooltips and controls that present themselves so the user doesn’t have to go far away in the UI to get done what they are doing.

So “differentiated UX” remains an ambiguous term at best. I think I know what it means when I hear it, because I have seen a number of examples that I think would qualify for that term, and have thought about what makes these applications different from the way they probably would have been written, appeared, and behaved had WPF not been available.

If you had to boil it down to a few key attributes, I would include the following:

  • Application styling and UI features create a unique and distinctive look and feel for the application
  • 2D and 3D graphics are leveraged to provide better data visualization that traditional forms over data controls
  • Integrated data interaction across multiple different data views
  • User context hints provide richer context clues for the user about what they are doing or what they should do next (rich content tooltips, animated attention grabbers for focus shifts, etc.)
  • Location of user interface elements is less rigidly defined by the application shell, and may be completely in the control of the user. This may range from something as simple but important as dockable/floatable windows to a Microsoft Surface-like desktop metaphor where application ui widgets can be moved freeform around the screen by the user (Minority Report effect).
  • The UI framework (WPF/Silverlight) supports defining these features with a minimum of code

So that’s what Differentiated UX means to me. What does it mean to you? Is it worth having a buzzword to capture this essence or mojo that makes a WPF app different from what came before it? What are some experiences you would put into the "differentiated" space?

I suppose a Wikipedia entry is inevitable at some point, maybe this post and discussion can lead to that?