Introduction to Microsoft Expression Blend

This chapter is from the book

Microsoft Expression Blend Unleashed

Learn More Buy

This chapter is from the book

This chapter is from the book 

Microsoft Expression Blend Unleashed

Learn More Buy

In This Chapter

• The Next Generation User Experience
• Windows Presentation Foundation (WPF)
• Expression Blend Versus Visual Studio
• An Introduction to Expression Blend and XAML
• The Benefits of Expression Blend

Taking aside the technical aspects of learning how to use Microsoft Expression Blend, there are many areas that are often disregarded within discussions about how Blend is—and should be—used in a real-world project sense. You may be a single person business or employee that needs to fill all the roles that Blend is best used for; or, you may be part of an enterprise size team.

Knowing, why a tool should be used in a certain way sometimes makes it easier to apply the options provided. This chapter talks about areas within project teams, their roles, and their perspective.

The Next Generation User Experience

One of my favorite pastimes is watching movies. I don't care how old they are or if I have already watched them 10 times. I find that watching movies relaxes me; it allows me to escape my own thoughts for an hour or two, and most of the time they inspire and motivate me in some way.

I especially enjoy watching movies in which computers are used in the plot in some way. I guess that is the geek coming out in me, but there is something special about the user interfaces, and in some spectacular cases the visual and interactive design, that are also explored in such movies.

Minority Report, with Tom Cruise, is a great example of what we want to be moving toward in providing an outstanding user experience and interface. That interface (and indeed the entire process that encompasses Tom's user experience) is custom made for its application in assisting the user to scrub video feeds and visualize complex data. Without having actually used such an interface, we can only assume that it is ideal because of the efficiency it gave Tom's character in performing his job's functional requirements.

The applications functional playback of simultaneous multimedia streams gave Tom's character the ability to visualize and analyze complex data, but it is the user interface and "light glove" device that provided the cohesive, relevant, and intuitive movements; allowing the application to work with him, flow with him, and ultimately deliver for him. The input hardware is not quite ready yet, but by the time we collectively perfect our interfaces, we should start to see additional hardware flow into the market place.

Will Vista deliver this? Or more accurately, will Vista allow us, as software designers and developers, to deliver perfect user interfaces? Gartner Inc. analyst Michael Silver believes that the year 2009 should see a noted shift in worldwide Vista installations, already predicting it to eclipse Windows XP. According to Microsoft (Securities and Exchange Commission Microsoft Corporation Quarterly report #0-14278), an estimated 80% of all new PC-based computers sold will be pre-installed with Vista and a steady upgrading through business will occur as the security models improve and business requirements for security of personal data increases.

Microsoft predicted (or just told anyone who would listen): Vista will be the quickest adopted operating system in history. I'm not so sure that this adoption wave is the reality at the moment; however, designing and developing better applications through improved user experience is the one thing that could push users into upgrading.

All the predictions are based on the maturity of the Internet as an information delivery mechanism. If you observed the Internet and the changes that occurred when dynamic rich content first began showing itself, you would have seen how companies were able to expand their business offerings to online customers in areas that were previously thought to be too complicated for the average nontechnical user to follow. Suddenly, holiday booking engines and online flight ordering businesses were able to provide live pricing data that enabled potential customers to shop for the best deal and a myriad of other business sectors could engage their current and potential customers by explaining their processes more clearly (visually as opposed to verbally by a sales person on a telephone) and in a nontechnical way.

From a user experience point of view, given the choice between two websites, even the most nontechnical users will opt for the more professional looking website, because subconsciously they believe that if a company has put great efforts into making things easier to view, the company must be more professional in their approach and will almost certainly treat personal information and security details with the same high quality of care. Of course, this is not always the case, and is a reason phishing attacks are so successful—but that's another story.

This does, indeed, prove the case that the best product with the most features does not always guarantee success for a business. You need a door opener, a way of first attracting the customer. Then you can educate them on the features and benefits of a given product or service. The main thing is that you got them interested in your offerings first, before that of your competition.

So, why would people continue to use desktop applications over web-based applications? The features and abilities of any given web or desktop application are directly linked to the code accessibility permissions of the client. The web will continue to be a delivery mechanism for partially trusted applications, whereas the desktop will continue to provide unrestricted high speed features, unbound by prohibitively expensive bandwidth limitations that still exist in countries like Australia and Ireland, to name two.

How This Book Will Help You

The use of Blend in real-world environments has been a topic that not many people have wanted to discuss. Maybe that's not true, but it is difficult to find others that think about it in depth. On the surface, the discussions have been all about the nice flashy demonstrations, the eye candy side of the promise that Blend brings—the Kool-Aid—as one of my U.S. associates refers to it. The promise I am talking about is designer/developer collaboration.

It's one thing for people, even Microsoft, to talk about designer/developer collaboration, but actually making it work in the real world can be quite difficult. I thought that, aside from helping people (both designers and developers) to use Blend, I might also be able to provide some instruction in using the tool(s) so that others don't get the headaches I did when implementing Expression Blend in projects for the first time. You will still get some headaches—that's just a given!

The best advice is to embrace as many designer/developer tools as you can, and then decide which ones are good and which ones are not. As a result of trying each tool, you will know which are best suited for a particular purpose when it comes time to deliver.

Expression Blend is a designer's tool because it has no true development language within it (it has a script but not a language). This does not mean that only designers should use it. Yes, you use .NET code in the form of C# and VB.NET to create the backend functionality for your controls and objects, but inside Blend it's all about XAML. The Blend UI serves as a visual aid in creating XAML scripts.

Before going any further, it is important to clarify the term designer. It is just too broad to be used often when discussing Expression Blend. There are many types of designers: interactive, graphic, and industrial to name a few. These individuals may see the term in relation to what they know of the product and think that Blend really isn't aimed at them at all. Blend can be used by most, if not all, classes of designers. However, it is most suited to the interactive designer—the designer who creates the workflow and user processes that are intended to create an experience.

Blend certainly provides several excellent services in real-world projects:

• Prototyping—By creating a functional prototype using Expression Blend, properly constructed UI solutions are available to the production cycle immediately, providing a massive productivity gain and reducing development lifecycles. Prototyping also removes an additional layer of interpretation that is traditionally performed by developers that can radically change the end user's experience if incorrectly implemented.
• UI process development—User interface processes can mean the difference between high and low application productivity. Involving potential end users in the design and development process is always advisable. Being able to modify the interface to suit the users' requirements with Blend is certainly a benefit to the end solution. Previously a designer may have needed to report end user feedback and changes that were needed to a developer. At that point, the whole "interpretation" issue was raised again.
• Animation production—Blend provides a simple, easy-to-use storyboarding mechanism for animating object properties that allows designers to control motion and workflow while, at the same time, giving developers a simple reference to execute when the specific animation is required.
• Visual asset creation—While not a primary role for Expression Blend, the application is stocked with enough tools to allow graphic designers to create exceptional visual assets. Using the built-in resource management system also allows those assets to be shared and reused with minimal work, increasing productivity and ensuring visual continuity within the solution.
• Resource file management—Expression Blend allows you to create, modify, and utilize templates and resources stored in the working files, the application, and/or a XAML file called a resource dictionary. This means that one designer could create a certain style or a specific functionality of a certain object, a button for example, and then provide that same group of styles and functionality to everyone else working on the solution. This is perhaps one of the most powerful features of Expression Blend.
• XAML architecting—This is how Blend is used in a real-world project—a role to which Blend is particularly well-suited. XAML architecting is about taking all the assets from both designers and developers and putting them together. Visual Studio plays a big part in this process as well; but, without Blend combining assets would be a very difficult job indeed.

Of all the roles previously mentioned, the XAML architect (XA) is the role which embodies the prescribed collaborative process—the best in a real-world scenario.

The day-to-day process surrounding the XA is asset designers mocking up and creating beautiful pieces of art and coders implementing required functionality that brings said art to life. If these designers don't understand .NET development and the coders have no idea about animation, then without the XAML architect to bring their contributions together in a meaningful way, no collaboration can exist. Neither the designer nor the developer can understand or appreciate the requirements of the solution as a whole.

It is the job of the XAML architect (XA) to own and control the design and development of all XAML-based assets. The XA understands the creative vision of the graphic designer, the user experience and workflow concepts of the interactive designers, and how to implement functionality in .NET code to ensure animations, binding, and other pieces of the functionality work with the user interface (UI) specification and the user experience (UE) expectation.

This is where the power of Blend can be exploited to its capacity. The name says it all, really. As an XA, you blend the code and visual assets to produce the UI and UE. This blending of design and development is the most important concept you should take away from this book.

The great scientist Louis Pasteur once said, "Chance favors the prepared mind." That means: If you expand your knowledge and gain experience that covers all the angles, then there is no such thing as luck—just opportunities. While a Zen Monk may disagree with this interpretation, no one could argue that keeping an open mind in today's world isn't a good approach.

Now is the time to gather experience, understand the potential, and prepare for the opportunities. This book is not going to give you all the answers, but it should make sure your head is screwed on the right way before you start your journey. I have tried to change the dialog you see in most technical books, because I want you to think of the two of us sitting in a pub somewhere having a chat over something cold, may be a beer, whatever suits your fancy!

The chapters are in the order in which a non-developer (but still technically astute) designer should be learning the skills necessary to use both Expression Blend and Visual Studio. There is no escape from Visual Studio if you want to use Expression Blend for anything more complex than creating XAML-based visual assets. Another reason for the chapter sequence is that there were moments during my initial experiences with Expression Blend and XAML that I wish I knew some things earlier. This chapter sequence addresses the concerns I had.

Unlike the rest of the book, this first chapter is one big rant. If you continue to read it, you will understand why it is important for you to grasp the new technology and how you might begin to change your working vision to become one of the new breed of XAML architects that is required to make the technology work successfully in enterprise level development. Of course, you may just want to continue to be a designer of a certain discipline or a developer—that's fine. I have tried to cater to diverse needs.

If you are just itching to get into the code, please be patient. Shortly you will be up to your neck in code and markup, but you will understand why you are doing certain things, and more importantly, what you are doing. You will understand the mindset of others in your working arena and should then be ready to climb this very steep learning curve.

Above all, remember: We are dealing with interfaces, user experiences, coding concepts, architecture, and how to bring this all together to capture, amaze, and empower your end users.

The Business Mindset of the End User

Think back to Minority Report for a moment. Visually speaking, those UI's are amazing. When you think about it, however, we are not too far away from that right now.

In my experience over the last 15 years working in several countries on projects of all sizes and budgets, the single biggest issue facing the development of these UIs in mainstream applications is a time/cost ratio that rarely has enough time or money assigned to the commercial development lifecycle. The one exception to this rule is the game/entertainment industry. They understand the importance of visual perception.

Visual perception is the awesome use of a designer's imagination, where he or she envisions user interfaces that are tailor-made to provide an immersive, state of the art navigation system that engages users so that they are excited about what they are doing. Although these navigation menus often don't provide any more functionality than could be achieved with the good old File menu ribbon system that is available in simple applications like Notepad.exe, the users' visual perceptions are that the interface is more engaging. These UI's actually draw upon the users emotional pool.

Most of the bigger companies are now starting to pick up on the fact that if you engage your user, make him or her feel good about what they are doing, the user's productivity goes through the roof. Regardless of whether another product has more features, higher productivity outweighs the lost feature benefits. High productivity is like a virus. If you walk into a room and everyone is smiling, you will naturally feel better. Similarly, in an office environment, if some staff are productive and excited, more people tend to get onboard and feel productive and excited. This is a huge benefit to business.

Companies like Microsoft have always tended to place particular importance on the standardization of interfaces. Using certain user interface items such as the Ribbon in Office products even have strict guidelines that must be followed to comply with the end user licensing. For most there is a Vista User Experience Guideline document that provides for requirements on such things as menus, control layouts, accessibility, and more. The logic here was that people would be more inclined to want to learn and continue to use an application if it had a familiar feel. That logic is still partly true today.

Familiarity is a strange sense. Just the other day I was helping a relative discover the joys of modern day computing. He happened to mention to me that the staff in his office use Classic settings in Windows XP. He had no idea what this meant. It was just something he heard them say once—it is their preference, or simply what they are comfortable using and feel most familiar with.

As an experiment, I showed him the standard Windows XP interface and explained where things were. Then I switched the view to Classic view. His response was that it looked dull, didn't really give him much in the way of the Start Menu, and that he would find it much easier to remember the pictures (he meant icons) as opposed to just the names of items in the control panel application, for example.

In the 21^st century, the general population in most developed and technically advanced countries is becoming more tech savvy than ever before. People do not need to be coddled and can understand that moving a mouse and clicking on a button has repercussions. They don't need a paper clip (see Figure 1.1) telling them they have just clicked the button!

Figure 1.1 Just in case therapy helped you to forget!

People are going to ask the question "Why should I upgrade to Vista if it doesn't give me anything new?" I respond: It is not about getting anything new. Vista and the software designed for it help users work smarter, faster, and more efficiently by providing a framework of smart common controls and a more visually intuitive user interface. Together these elements ensure that all applications provide a familiarity while at the same time making the responses to choices that the end user makes much clearer.

It is certainly fair to say that while technology has continued to improve and advance, the opportunity to improve user experiences in software has not kept pace until now. Compared to the Internet, which has seen a huge rise in back-end technology as well as user interface design tools and standards in the last decade alone, application user experiences are far behind. Think of all the new languages that have come along to facilitate web applications: the more frequent use of Ajax to improve user experience and perhaps the biggest advance—the introduction of Adobe Flash and the shockwave format (.swf).

This improvement in technology is now affecting desktop applications, through user interface design. The power of the desktop application will always surpass that of the web application, primarily due to security; but, until now all of the desktop applications have been a tad boring and deployment has been nothing short of a nightmare. In the coming years ever more importance will be placed on the user experience, which is directly linked to the quality of the user interfaces that we will be building for our end users.

Vista and .NET Framework 3.0/3.5 (Formerly WinFX)

"Where is my Minority Report?" I hear you say. Well like Tom, you do not have a Minority Report. You can be 100% sure of what your future holds (hopefully not murder!) but it will contain Vista, high definition (HD) and high fidelity content, glass and gel interface objects, Expression tools and .NET programming languages. Microsoft is betting the house on it, so to speak, and they usually get what they want—eventually.

There are other companies out there producing products for designers and developers that are XAML based, like Aurora by Mobiform Software Inc. Regardless of what advanced features they have implemented, I can tell you that Microsoft are working a few years ahead so Expression Blend and their other products should ultimately work more efficiently with other integrating technologies that will become fulfilled with Vista, and even further ahead with Windows 7 and beyond.

If you have used Microsoft Vista, you will have noticed how Microsoft appears to have finally gotten an outstanding balance with their product with respect to familiarity, visual appearance, and general feel. As you go deeper into Vista, you will see that some of the dialogs have much the same content and layout as they did in Windows 2000 and XP. Figure 1.2 illustrates the similarity. There are slight differences in the user workflow in some cases, but the visual continuity is always the same throughout the operating system.

Figure 1.2 The Windows XP and Vista Computer Properties applications.

Vista also brings an outstanding addition to the operating system control base, the use of Bread Crumb controls. These controls have several features that make the task of navigating more flexible and more intuitive. Let's take a look at the file explorer application window (see Figure 1.3).

Figure 1.3 The Vista File Explorer with Bread Crumb control.

You can now navigate from within any hierarchical level along your path instead of getting repetitive strain injury (RSI) hitting the back button way back on the first level. You can enter a path directly as you have always been able to do, complete with history. You will also get visual feedback as to the status of your navigation from the control being used as a progress bar in the background. That is most handy when navigating large file sets or across really slow networks.

There are lots of controls like Bread Crumbs and Navigation Services that have been added to Vista. The important thing to realize is that better use of both graphics and functionality has improved the application and user experience tenfold. The Vista navigation elements are shown in Figure 1.4.

Figure 1.4 Vista application Navigation buttons.

The Windows Presentation Foundation (WPF), part of the .NET Framework 3.0/3.5, provides us with hardware-accelerated graphics power for standard applications that have previously been available only to DirectX and OpenGL applications. Integrating DirectX into a standard desktop application certainly has some great benefits, if not interesting results, but the development time is enormous—not to mention the performance issues designers and developers face when dealing with such a huge variation of end user machine specifications.

Increased visual performance through hardware-accelerated graphic pipelines includes more than just getting glass window borders in your applications. It includes the ability to apply transforms and animations to objects and use automated layout and true scaling with vector images that don't decay with size. By shifting all this graphic processing to the GPU, a huge load is removed from the CPU which, in itself, gives rise to massive performance increases.

The key to all this interactive magic is XAML (the Markup script-language supported in Expression Blend) and its integration with the development language base of the .NET Framework 3.0 and 3.5. Visual Studio 2005 with extensions from the product code named Cider was a preview of Visual Studio 2008, which is now available. This tool is home to developers, allowing them to modify XAML as well as UI elements within a design surface.

XAML is the only reason designers and developers—and you as an XA—will be able to work together as a team. The XAML markup is the common component that binds all parties together, the glue, if you will.

So, why use Expression Blend if Visual Studio contains a design environment? The design environment in Visual Studio is simple at best at this stage. It contains no methods for applying animations through a timeline interface, nor does it have a control template editor. In other words, it is a limited design interface made for developers and not for animators or designers—and certainly not for an XA who needs a clear understanding of the end user workflow. Conversely, Blend is a designer's environment that switches between both XAML markup and .NET code in Visual Studio to allow you to apply CLR coding requirements. Both Visual Studio (or the .NET Framework to be more accurate) and Expression Blend share common UIElements. That is why we want to look at Expression Blend as an XA's tool. Understanding UIElements visually is far easier than looking at a heap of XAML markup and trying to picture it in your head, although in time you will be able to do this as well.

What I am trying to say is that with these new tools and pseudo languages you will be able to quickly create a "Minority Report" type of interface for Vista or XP. You, most likely, already have the majority of the core skills required. I am going to show you how to use those skills to give you a head start for getting into the new technology.

Getting your hands dirty is the only real way of understanding and perfecting your use of XAML and integrating it with the .NET languages. We will use only C# in this book because it is the language used most commonly for this purpose at the time of writing.

You do not have to be a coding guru to get great results from WPF—but it always helps. I am going to assume that you are a beginner programmer or designer. It would be helpful if you understand some of the core functionality provided by the .NET Framework within client application development terms. Don't worry if you haven't opened Visual Studio before, though. Chapter 10, "Visual Studio: C# Primer," provides a designer's view of coding to help you on your way.

If you are a developer, note that I am not going to try to convert you into a designer (which is more of a natural skill). Conversely, I am not trying to magically turn designers into developers. Instead, this chapter is intended to show you a little of how the other half lives, so to speak, so you understand and can liaise with teammates with other skill sets. The first half of the book is more oriented toward designers, focusing on Blend and XAML. The second half is more focused on developers, bringing in the concepts of the .NET coding requirements that will greatly extend the functionality of your applications.