Tuesday, October 04, 2005

UI Designers Implementing UI

In my last post entitled "Battle of the Windows Presentation Technologies", I mentioned that a lot of companies want to get their developers out of the UI implementation business and put it in the hands of the domain experts -- UI designers.

Instead of having a developer translate screen shots from the designer into a Windows UI, wouldn't it be ideal if the designers themselves could create a UI that the developers could consume and code behind?

Why can't a designer just use Visual Studio and the Windows Forms designer?
Because the Windows Forms designer is code centric. Making changes using the Windows Forms designer means making changes to the code and the type of knowledge required to build up a UI in the Windows Forms designer requires the skill set of a developer, not a designer.

One of the reasons is that the code is readily accessible to anyone using the WinForms designer and in fact, the WinForms designer flows between the code and the design surface regularly. Even though the WinForms designer is graphical, it provides a representation of code and not a rich interactive design experience.

Another reason is that the paradigm for the WinForms designer is nothing like the kinds of tools that designers have developed their skills in. Different users require different tools.

What kinds of tools could a designer use to create a UI?
With Avalon and XAML, it becomes possible to develop a UI in applications other than Visual Studio and then consume it programmatically. The power of XAML is that tools can produce and consume it very easily.

One such tool is Sparkle or the Microsoft Expression "Sparkle Interactive Designer". This tool can be used to create a UI that includes animations, graphics, can define and control the layout and more.
"Now, designers can create the full application interface and hand it over to the developer to work with directly," said a Microsoft spokesman. "Previously, developers would receive a mock-up of the application and then work to try to recreate the designer's intent. Now, the designer becomes part of the development process directly.

Another quote, here, gives more insight:

This is a tool for UI / UX designers - it is specifically made for "us" - because as John and I say in the video: there was *no* tool to allow designers to make *real* UI and be a part of a client app team...Just like VS is a dashboard on top of Avalon, with tons of tools that are made for devs, Sparkle is a "steering wheel" - only with different set of tools... Devs *can* use it and will enjoy it HOWEVER many of the tools behave in ways designers expect - which can differ from what devs expect.VS will also have its own set of Avalon tools (including a design surface) sometime in the future... It was shown today and it is called Cider. This is where devs specifically will say "aaaahh myyy tool" See different users really mean different tools. But again, devs will have fun exploring the WPF/Avalon platform thru Sparkle as well.

A key point is that the equivalent Avalon tool to the WinForms designer is Cider -- a developer tool for Avalon. (just like the WinForms designer is not a tool for designers

Ultimately, there is going to be a full suite of tools out there that can export to XAML. Designers will be able to create UIs in whatever tools they feel comfortable. For example, check out ZAM3D, which is a tool that enables you to take 3D models and export them to XAML.

So how does it work?
Essentially, a designer develops a UI that consists mainly of XAML, although it is possible that it will have code as well. (tool generated code)

In the case of Sparkle, Sparkle will output both XAML and code and uses the same build environment (MSBUILD) as Visual Studio to allow seamless workflow integration between the designer and the developer.

There is a good video here showing Sparkle and the designer experience. The designer has a palette of controls and can build up a UI by putting those controls on a design surface. The designer then has the ability to override the look and feel completely, including changing how the control is rendered and adding animations for events.

For example: in the video a radio button control is modified to be a 3D widget that springs out at the user when it is the selected button. The new look and feel as well as the animated behavior is accomplished completely in XAML.

Will we really be able to move the UI implementation to a designer?
Having a UI designer act as an implementer is a departure from the current development model and there will need to be adjustments in the minds of the developers and in the skill sets of the designers.

Some people I've talked to question whether or not the generated XAML will be acceptable to use as is. Although I agree there will need to be tweaking and the integration to the code behind will require extending the generated XAML, I am going to put a stake in the ground and say that I believe that in the future, this new model will become a reality.

Windows Forms has shown that generated code is a reality. I'll admit in .Net 1.1 there were design time issues with controls disappearing or moving that were really frustrating -- but I managed to build a very large scale application where almost all of the UI was built in the Windows Forms designer. And that was .Net 1.1, .Net 2.0 has fixed those bugs and has also added new controls that create a professional UI with fewer lines of code.

Flash UIs has shown that designers can create a clickable, animated UI without needing developers.

When you couple those two data points with the well structured programming model in Avalon, its just a matter of time before the UI designer becomes a part of the development process.

As cool as all the DirectX, multimedia, 3D, and translucent features of Avalon are, in the business and productivity application space, one of the more compelling reasons to move to Avalon is for the change in the UI development model.

I'm particularly excited to see and use the next generation of UIs that will enable much richer and more usable experiences.

In closing, there is another channel9 video here showing off Avalon features.


Post a Comment

<< Home