Let's start the WPF Learning Series of articles with definition and analysis of two terms which are used interchangeably when thinking of and working on Human Computer Interaction.
User Interface (UI) vs User Experience (UX)
We’ve been seeing and using software for decades. Though the purpose of computer and software is still the same today when comparing to the past but the way we interact with computers today has dramatically changed the way it used to be in the past. Having a look back at 1970's, we used to interact with computers with a command-line user-interface where we had to issue some text based commands to a computer, having computer process those commands and returning some results back on the console in the same text based manner. Computers through the software they were running used to notify us if we had typed something wrong which was not understandable by it and/or ultimately telling the things to make sure to rectify the errors to proceed further.
As mentioned above, the purpose of computer and software today is still the same as it used to be in the past but human computer interaction is much more mature today. Our interaction with computer is not only based on a typical input device which enables us to input some text commands and a black & white screen to see the results back. Today, we interact with computers in more natural way (the way, we do with other living things in our environment). It’s not a fiction anymore to interact with computers through voice commands and some sophisticated types of input/output devices which ultimately make the experience very natural for computer users. Imagine a world of computer where everything looks and behaves like a real object; a received email pops up a letter symbol in front of you with a sound, you open it with your hands by touching the screen, letter unfolds itself in front of you with sound and so on. This all has been made possible due to collective advancements in software and hardware technologies. Today, it’s not a luxury to have 1 GB of memory, high speed and high capacity hard disk, a good GPU, a high speed CPU, and a plethora of types of input/output devices.
To conclude the discussion on User Interface and User Experience, we can say that UI is just a component of a larger term UX where UI with other components collectively make the user experience better. And UX is all a user’s experiences from software interaction point of view. So ideally speaking, a UX can incorporate basic input controls, 2D and 3D animations, audio and speech capabilities and other media.
Where the inspiration comes from?
Inspiration to work on a technology like WPF comes from the limitation of previous technologies used by developers to develop a better UX. There were/are technologies available like GDI to build basic UI and technologies like DirectX and OpenGL for building UX for games but what if a business developer needs some cool UX in the software he/she is working on? He/She had to learn different technologies to make this happen. Argh… What’s this? One software, more than one technologies just for a single UX. On the other hand, frankly speaking DirectX and OpenGL are not really for a business developer but these are the technologies for game programmers who are well aware of all that geometry stuff to rotate some sphere, showing shadows, managing views and bla bla. A typical business developer is more concerned with the task in hand that how to validate this information, how data is being processed and how to present and save results. Why he would learn geometry stuff to handle different aspects of graphics, which is a really time consuming work.
As a result of this, many UX designers ended up using gradient styled images on the back of windows, containers and buttons, and using animated images (GIFs) for the animation effects which they could not even start and stop or changing the flow programmatically. And others started buying some third party controls, though these controls were better looking than the standard set of controls available to windows programmers but they also had some limitations like not being able to paint some special area of control, seeing a killing flicker while resizing them and so on plus these were full of un-resolved bugs.
What is WPF?
In simple, Windows Presentation Foundation is a rich set of libraries (API) for UX development which is accessible by both designers and developers through a declarative language called “Extensible Markup Language” (XAML). In this article, we are just focusing on introduction to WPF and its usefulness in UX and I'll be ignoring XAML for now. We’ll be looking at XAMl “zammel” in detail in the next article. WPF is the technology which makes it possible to very easily build better UXs incorporating all the components and features explained above. WPF is one of the four technologies added to version two of .Net Framework ultimately making it .Net 3.0. So what you need to have installed on your machine is .Net Framework 3.0 or above to run a WPF application.
Features of WPF
There was really a need of some nice technology which may address all those issues, providing a concise and unified programming model etc. Fortunately today, we have WPF.
WPF has the following features:
As mentioned above that in the past, if a developer needed to incorporate animation and/or speech support in UX of a software, he/she needed to learn other technologies which was really not desired by him/her. Using the WPF, its now possible to incorporate nice looking UI elements, 2D and 3D animations, audio, video, speech in the UX of a software. WPF not only provides a built in support for all the types of media which a developer may wish to incorporate in the software UX he/she is working on but also a consistent programming model to access all those resources.
In WPF world it does not matter if you see the visual part of a software on and 15” monitor or on a 60” plasma screen because WPF is based on vector graphics and vector graphics are resolution independent which means that they are redrawn to suite the underlying resolution of a screen on which they are being viewed.
Internally, WPF uses Direct3D which is a part of DirectX and Direct3D uses hardware acceleration which means that all rendering work is offloaded to the Graphics Processing Unit (GPU) which is able to do such type of work faster than a general purpose CPU can do. But in case there is no capable GPU hardware available on machine WPF manages it the other way.
WPF provides a consistent declarative programming model through Extensible application Markup Language (XAML) using which you define the objects’ hierarchy and relationship and leave the rest to be done by parser and compiler. XAML, being a consistent language lets both designers and developers can contribute on a single project because tools used by both group of people understand XAML. (we’ll be talking on XAML in detail in the next article)
WPF provides backward compatibility with previous Microsoft technologies like Windows Forms and ActiveX. It means your existing investments are secured and Windows Forms and ActiveX controls can still be used the same way in WPF application. We’ll address the topic in one of the future articles when talking about the WPF Inheritability.
In WPF, you can create both a standalone application which compiles to an .exe file as well as an application which can be hosted in a browser such as Internet Explorer from Microsoft and compiles to XBAP. And the good thing is that for targeting both types of applications, we follow the same programming model. We’ll be looking at the topic in future articles.
What WPF can Do?
I hope you have seen Microsoft Surface Computing Platform, Yes you can see the power of WPF in Microsoft Surface computer. For more information please have a look at this.
Yahoo Inc. has also implemented a new version of it famous IM client “Yahoo Messenger” for Windows Vista in WPF. If you are running Windows Vista, you can download from here and play with it.
And Last but not least, New York Times Reader Application has also been developed in WPF.
Here I’m linking to some of the URLs of browser hosted WPF applications (XBAP) on which you can have a look to see what kind of experience WPF can provide.
- WPF Analog Clock
- WoodGrove Finance Application
- Xceed WPF Data Grid
These are just the examples of what we can do with WPF.
Conclusion
WPF is the technology which will be used to build rich user experiences on the windows platform in next few years and make the fictions possible you used to see about the software UX in movies.
Assessment
After reading this article you should be able to define:
- Difference between UI and UX
- What is WPF?
- Resolution Independence.
- Hardware Acceleration.
- Types of applications built with WPF.
- Declarative Programming Model.
What's next?
This article was all theoretical and may have bored some of the readers who are always eager to write some code but it was important to understand the basic knowledge of what is WPF and why it should be learned and used? Plus beginners should also get maximum output from the WPF. In the next article (within a week), we’ll be looking at XAML so we’ll be writing some code in both XAML and C#.
So, if you have joined me in WPF learning and are interested in the next articles, please get your machines equipped with:
- Microsoft Visual Studio 2008
- Microsoft Expression Blend
Feedback
I’m looking forward for your comments, recommendations and questions...
Best Regards & Best of Luck,
Rizwan a.k.a RizwanSharp