Building Microsoft Experiences:
New Dialogue with Karsten Januszewski

– Karsten Januszewski, Technical Evangelist, Microsoft UI Technologies

 

Highlights from this interview are available via a 15-minute podcast available here.

In the 2008 whitepaper “The New Iteration,” Karsten Januszewski teams up with Jaime Rodriguez to spotlight what Microsoft has dubbed the XAML revolution. Based on interviews with early Windows Presentation (WPF) and Silverlight users, Januszewski drills into emerging Microsoft technologies and explores how the designer/developer collaborative process is undergoing change.

 

But, what’s the bigger picture? Why is Microsoft investing so heavily in UI technologies? What are the business benefits that will drive adoption in a field traditionally dominated by rivals?

 

These questions and others are answered in the interview below. The UIRC enlisted the expertise of EffectiveUI’s Juan Sanchez — noted blogger and experience architect — to craft this interview and ask Januszewski about the challenges and opportunities Microsoft faces as it stakes a claim into the world of user interface design and development.

 

 

Q. Can you tell us about your role as evangelist for UI technologies?

 

A. Ultimately, what I do serves the purpose of teaching people about some of our new platform technologies and help enable people to build solutions. Specifically, I focus around the UI technologies Microsoft has been offering: Windows Presentation Foundation and also Silverlight, the cross-browser plug-in that runs both on Windows and on the Mac in the browser.

 

 

Q. You’ve written extensively about the designer developer workflow. In a nutshell, why is designer developer workflow important when bringing a product to market?

 

A. The process of creating software is rarely a solitary endeavor. Microsoft has been thinking about how to deal with, what you might say, the wall that has traditionally separated designers from the developers. A designer uses tools to create what the software should look, define interactivity and then essentially hands that vision over the wall to the developer. Then it’s up to the developer to implement that vision.

 

What Microsoft is trying to address with some of its latest tooling is how to improve that process so it isn’t as lossy — a term we borrowed from graphics. We want to reduce the lossiness as assets move from one person to another.

 

 

Q. Why is Microsoft making a shift toward workflow and why is that important to product innovation?

 

A. In the past, when people looked at Microsoft, they didn’t necessarily see it as a place to go to for designer tools. But I think in the last two or three years, you really see Microsoft recognizing the importance of design, the importance of the user experience and the value of the entire aesthetic discipline.

 

You could argue that 10 years ago Microsoft was more oriented toward tech and developers. But now you look at things like Vista or the new Office or even things like Zune and you see more of an eye for design. We now have a product suite that is targeted to designers — Expression Studio — and we have sections on our Web site for designers. I think you’re seeing Microsoft recognize the importance of design both in our own products and in our platform offerings so we can enable people to create software that looks great and that people want to use.

 

 

Q. From a business perspective, what would you say are the immediate and long-term benefits for companies to go down the Microsoft road and embrace the Microsoft product line for RIA development?

 

A. The thing that always strikes me about Microsoft is that there’s really no other company that can offer such a full suite of end-to-end offerings. When you embrace Microsoft as a platform, you literally can go everywhere from mobile to databases, from servers to clients, from the most stunning graphics to the lowest level, close-to-the-metal, high-performance computing.

 

The foundation underneath our focus on UI is the .NET language and runtime. Our new markup language XAML (pronounced zamil) is parallel to HTML. It stands for Extensible Application Markup Language. Those two things together, .NET and XAML, are the underpinnings across many different environments.

 

In particular, the technologies that I work on at the UI level have a really nice end-to-end offering so you can use the same tools, even use the same code to create solutions that could run on your mobile device, on a Web site, on a Mac and could also run as a desktop application on a Windows box. The ability to span all those different devices, all those different form factors while using a common technology, common toolsets and reusing skills, is a big benefit of Microsoft technology.

 

 

Q. Can you talk a little bit about what would be involved for a company that’s already focused on Microsoft technologies to get up to speed with XAML, and how that would that differ from a company new to Microsoft technologies?

 

A. There’s a curve when you come to any new technology. One thing that makes the Microsoft curve easier is that there are so many free resources and so much training that we offer in terms of hands on labs, videos, tutorials, code samples — just a wealth of information. So if you embrace the platform, you won’t be starved for content, that’s for sure. 

 

One really interesting aspect of our strategy is that XAML is based on XML, and is similar to the HTML syntax. What that means is it’s very ‘toolable’ — by that I mean, easy for tools to generate XAML and to convert other formats to XAML. Where I’m going with this is that you can use your existing tools, plug-ins and converters to transform assets to XAML. For example, consider Adobe Illustrator, stock and trade in the industry for doing vector graphics. While Microsoft has an offering that’s also a vector graphics tool called Expression Design, nothing stops you from using Adobe Illustrator to generate assets. Designers can use Illustrator, the tool they know and love, and then use a third-party plug-in to convert Adobe Illustrator assets into XAML.

 

Similar tools exist in the 3-D space, for example Maya and 3DMax for generating 3-D meshes and animations. Those assets can be exported to XAML and pulled into a Windows Presentation Foundation. So my point is that Microsoft has platform as well as tools, and the two are not necessarily coupled together. You can embrace our platform without embracing our tools.

 

Another example of that would be with Silverlight. You can host Silverlight applications on an Apache server, on a Unix box, or a Linux box. You don’t have to run Microsoft servers in order to embrace Silverlight. You can create these solutions and host them an Apache Web server.  So we don’t make you embrace our entire platform in order to jump in.

 

 

Q. Would you say, though, that production and workflow are smoother if you were to embrace Microsoft products and the platform? Can designers rely on existing tools but still embrace some of the Microsoft technologies?

 

A. There is a better together story … if you use Internet Information Server and you use ASP .NET and you use Windows Media server for hosting video files. I just wanted to be sure to tell the other story as well.

 

For example, rapper Ice Cube launched a new Web site, www.uvntv.com, which is basically a media portal. The whole site is a PHP site, runs on Unix servers, and their whole stack is the LAMP stack, but they wanted to do a lot of video. They opted for Silverlight because they thought it was just a much better video experience on the Web than other offerings and so they totally embraced it. So, with Silverlight, you’re watching rich media streaming from a PHP site.

 

 

Q. Can you give a brief overview of some of the Microsoft applications that support XAML, and how they’re being positioned inside Microsoft?

 

A. Sure. First, I should say that XAML itself is an XML markup syntax — basically like an ASCII text file. You can open it up in Notepad, just like you can open HTML. It’s very approachable, very human readable. You can sling it around in the same way you can sling HTML around.

 

That said, Microsoft has two main tools that are used for working with XAML. One is more on the designer side and the other is more on the developer side. On the designer side we have the Expression Studio, and in particular a product in the Expression Studio called Expression Blend, which natively understands XAML. It has a kind of split view editor so you can draw on a design surface and it will generate XAML or you can directly work with the XAML and it will update the design surface — very much a kind of WYSIWYG (“What You See Is What You Get”) experience.

 

On the developer side, XAML is supported by Visual Studio, which is our main tool for developers to write code, debug code and the like.

 

 

Q. What are some of the major workflow changes that designers and developers might see using Expression Studio and Visual Studio?

 

A. Here’s the big difference. Let’s take a button, for example. In the past, a designer might use Photoshop to come up with a button, a hover state for it and a click state — and then export those assets for a developer to wire up and get working appropriately.

 

With this different workflow, a designer can literally design those buttons and those buttons states in Expression Blend that generates the underlying XAML code that actually gets compiled and becomes part of the application. The assets the designer creates are literally part of the project from the start. 

 

From there, the developer shares the same project, gets that XAML code from the designer and is off and running, writing code about what happens when that button gets clicked. So it’s a much tighter experience that allows the designer and the developer to iterate much, much more quickly than before. In the past, iterating could be a slow and clunky process to make changes. In this world, a designer can literally go into Blend, make that change and the project is updated.

 

 

Q. If the designer were unavailable, would the developer be able to change the border color of a button graphic or something like that using Visual Studio or would they have to go into Expression Blend?

 

A. They could do that from Visual Studio.  I would like to note that because it’s a tighter collaboration than in the past, this workflow does require some more communication to make sure that no signals get crossed.  It is important to have very good communication between the designer and developer so they understand who’s doing what and who’s touching what. That’s one big reason we wrote The New Iteration — to get into the brass tacks reality and best practices in this workflow.

 

 

Q. So it sounds like it’s less of a handoff and more of a collaboration between the two roles?

 

A. Exactly.

 

 

Q. Will designers be comfortable working in Expression Blend?

 

A. Blend was built with designers who work in the Adobe Creative Suite in mind. For example, familiar keyboard shortcuts that many designers use for rapidly zooming and moving objects around are all wired up in Blend. Using Blend, designers will find themselves in a familiar design environment that will nurture the creative process.

 

 

Q. You touched on this a little bit earlier in the interview, but can you be more specific about how far reaching WPF and XAML are in terms of taking XAML code and touching down on other media devices?

 

A. The first technology that came out that really embraced XAML and this workflow and these new tools was Windows Presentation Foundation. It’s available on Vista, and will run on Windows XP with an install. Then we wanted to take it further and Silverlight technology was born. Silverlight is a subset of WPF, so it doesn’t have all of the power of WPF, but it has quite a bit of power in its own right. It is a very small plug-in that runs on Windows and Firefox; it runs on the Mac, on Safari, and there’s even an effort by Novell called Moonlight to have Silverlight technology run on Linux boxes. So Silverlight has much more reach, if you will, than WPF just in terms of cross-platform, cross-browser type situation. It also uses XAML and it leverages the same tools.

 

We recently announced that we’ll be doing Silverlight for Mobile, and in fact there was an announcement at MIX* that Nokia has agreed to distribute the Silverlight runtime on their phones coming forward. So Silverlight for mobile isn’t available yet, but it will be available. Silverlight for mobile will run on Windows smart phones as well.

 

 

Q. Can you develop across the technologies you mentioned using Expression Studio and Visual Studio?

 

A. Yes.

 

 

Q. Is this the final answer to “code once, deploy anywhere?”

 

A. That’s what we’re trying to get to.

 

 

Q. With Microsoft tools, would you say designer developer workflows are more productive?

 

A. I’d say there are a few areas of efficiency in addition to reduced lossiness. One is faster iterating — which is huge for agencies responding to client demands and requests on tight timelines.

 

Another more subtle efficiency is the ability to make comps that turn into applications. What I mean is that an agency designer may whip up 12 visions in Photoshop or Illustrator and most of them may be throwaways — not something that will get used in the real app. But what people are finding is if they’re designers actually comp in XAML, there’s a high probability that those comps aren’t just throwaway. Comps can actually get used in the final solution.

 

Here’s a metric. Robert Tuttle, an architect with Frog Design says “Our prototypes in the initial stages of a project used to be between 100% and 50% throwaway. With WPF development, our prototypes are down to 20% throwaway.” And I would add that I believe the same metric applies to Silverlight.

 

Another efficiency aspect of Blend and XAML that I should be sure to point out is that XAML isn’t just for graphics; it’s also for animation. A designer might create a really great comp that the client loves that has some cool transition between screens that can be used in the final product if it flies.

 

 

Q. Aside from the designer and developer, let’s talk about the intermediate role — the integrator.

 

A. We interviewed agencies to find out what’s happening on the ground. We found that there isn’t just one workflow, there are many workflows — each one dictated by the size and scope of the project and the skill sets of the team members.

 

We also found out about a new role. The integrator serves as a go-between between the designer and the developer to make things more fluid, and do things like make sure that all the naming conventions in the XAML file are all tidy, and possibly to clean up code. Some people felt that the integrator is a good role to have, but it’s not mandatory. The pro of an integrator is that it takes some of the burden off of the designer and developer. The con of course is: a) it’s another cook in the kitchen, and b) it potentially has the possibility to slow things down even.  We’re actually thinking about putting up a Wiki so people can document all the different workflows out there.

 

 

Q. As far as the background of an integrator goes, do you see most of them coming from a design background or evolving from a development background?

 

A. A good integrator is that designer who tends toward geekiness and can write a bit of code, or it’s that developer with an eye for design and actually has an interest in design tools. The person best suited for the integrator role tends to be that person blurs across both disciplines.

 

 

Q. Do you have a preference for a certain type of workflow?

 

A. The official answer should be: there are different workflows and it depends on the team and the project and many other variables. I have to say though, personally I like a small team with just one or two developers and one or two designers that are working really closely together and have great lines of communication.  That’s when things really start to sing. So I’m more in favor of no integrator — just tight designer/developer collaboration and great communication, preferably sitting next to one another or on IM back and forth as they work.

 

 

Karsten, it’s been a pleasure speaking with you. Thank you for taking the time.

 

I’ve really enjoyed this. Let’s keep the dialogue going!

 

*Microsoft MIX08. March 5-8, 2008. Las Vegas, Nevada.

 

 

About Karsten Januszewski

Karsten Januszewski is a developer with Microsoft who has been working with Windows Presentation Foundation, Silverlight and the Microsoft Expression suite for more than five years.